Change the background color of XAML Map pushpins using triggers

Question

I'm trying to change the background color of the XAML map pushpins using a DataTemplate trigger, but maybe there is something wrong in my code. The idea is that the ItemSource of the map is binded to an ObservableCollection of PushpinModel and when the value of the property IsOnline is true, then the pushpin should became green.

Here is my Geolocation.xaml:

<m:Map CredentialsProvider="XXX" Mode="Road">
    <m:MapItemsControl Name="Pushpins" ItemsSource="{Binding PushpinCollection}" >
        <m:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <m:Pushpin Location="{Binding Path=Location}" />
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=IsOnline}" Value="True">
                        <Setter Property="m:Pushpin.Background" Value="Green"></Setter>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </m:MapItemsControl.ItemTemplate>
    </m:MapItemsControl>
</m:Map>

and here is the View Model GeolocationViewModel.cs:

namespace MyNamespace
{
    internal class Pushpins : ObservableCollection<PushpinModel> { }

    internal class PushpinModel
    {
        public PushpinModel(double latitude, double longitude)
        {
            Location = new Location(latitude, longitude);
        }
        public Location Location { get; set; }
        public bool IsOnline { get; set; } = false;
    }

    internal class GeolocationViewModel : INotifyPropertyChanged
    {
        public GeolocationViewModel()
        {
            pushpinCollection = new Pushpins();
             CreatePushpins();
        }

        private Pushpins pushpinCollection;
        public Pushpins PushpinCollection
        {
            get { return pushpinCollection;  }
        }

        private void CreatePushpins()
        {
            Random rnd = new Random();

            for (int i = 1; i <= 100; i++)
            {
                PushpinModel pin = new PushpinModel(rnd.NextDouble() * 180 - 90, rnd.NextDouble() * 360 - 180);

                if (rnd.NextDouble() >= 0.5)
                    pin.IsOnline = true;

                pushpinCollection.Add(pin);
            }
            OnPropertyChanged("PushpinCollection");
        }

        #region IPropertyChange
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

I have some doubts about the Property of Setter, cause I think I'm not changing the right item.

Any suggestions? Thank you guys!

Haven't worked with bing-maps but have you tried setting the style of the pushpin itself rather than specifying datatemplate. Using style of the pushpin will give you more control over its features and enable to set your custom icons also for pushpin on specific conditions like your. — D_Learning

Denis Cappellin Denis Cappellin · Accepted Answer · 2017-08-01T07:14:47

At the end I found a way to change the color of pushpins using Style.Triggers. Here is the working Geolocation.xaml:

<m:Map CredentialsProvider="XXX" Mode="Road">
    <m:MapItemsControl Name="Pushpins" ItemsSource="{Binding PushpinCollection}" >
        <m:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <m:Pushpin Location="{Binding Path=Location}" />
                 <m:Pushpin.Style>
                    <Style TargetType="m:Pushpin">
                         <Setter Property="Background" Value="Red" />
                         <Style.Triggers>
                             <DataTrigger Binding="{Binding IsOnline}" Value="True">
                                 <Setter Property="Background" Value="Green" />
                             </DataTrigger>
                         </Style.Triggers>
                    </Style>
                <m:Pushpin.Style>
            </DataTemplate>
        </m:MapItemsControl.ItemTemplate>
    </m:MapItemsControl>
</m:Map>

and the working version of GeolocationViewModel.cs:

namespace MyNamespace
{
    internal class Pushpins : ObservableCollection<Pushpin> { }

    internal class Pushpin : INotifyPropertyChanged
    {
        public Pushpin(double latitude, double longitude)
        {
            Location = new Location(latitude, longitude);
            IsOnline = false;
        }
        public Location Location { get; set; }

        private bool isOnline;
        public bool IsOnline
        { 
            get { return isOnline; }
            set
            {
                isOnline = value;
                OnPropertyChanged("IsOnline");
            }
        }

        #region IPropertyChange
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

    internal class GeolocationViewModel : INotifyPropertyChanged
    {
        public GeolocationViewModel()
        {
            pushpinCollection = new Pushpins();
            CreateRandomPushpins();
        }

        private Pushpins pushpinCollection;
        public Pushpins PushpinCollection
        {
            get { return pushpinCollection;  }
        }

        private void CreateRandomPushpins()
        {
            Random rnd = new Random();

            for (int i = 1; i <= 100; i++)
            {
                PushpinModel pin = new PushpinModel(rnd.NextDouble() * 180 - 90, rnd.NextDouble() * 360 - 180);

                if (rnd.NextDouble() >= 0.5)
                    pin.IsOnline = true;

                pushpinCollection.Add(pin);
            }
            OnPropertyChanged("PushpinCollection");
        }

        #region IPropertyChange
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }
}

Change the background color of XAML Map pushpins using triggers

1 Answers