使用触发器更改 XAML 个地图图钉的背景颜色

Question

我正在尝试使用 DataTemplate 触发器更改 XAML 地图图钉的背景颜色，但我的代码可能有问题。这个想法是地图的 ItemSource 绑定到 PushpinModel 的 ObservableCollection，当属性 IsOnline 的值为 true 时，图钉应该变成绿色。

这是我的 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>

这是视图模型 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
    }
}

我对 Setter 的 Property 有一些疑问，因为我认为我没有更改正确的项目。

有什么建议吗？谢谢大家！

Answer 1

最后我找到了一种使用 Style.Triggers 更改图钉颜色的方法。这是工作 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>

和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
    }
}

使用触发器更改 XAML 个地图图钉的背景颜色

Change the background color of XAML Map pushpins using triggers

wpf

xaml

mvvm

wpf-controls

bing-maps