使用触发器更改 XAML 映射图钉的背景颜色答案

【问题标题】：Change the background color of XAML Map pushpins using triggers使用触发器更改 XAML 映射图钉的背景颜色
【发布时间】：2018-01-01 21:19:28
【问题描述】：

我正在尝试使用 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
    }
}

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

有什么建议吗？谢谢各位！

【问题讨论】：

尚未使用 bing-maps，但您是否尝试过设置图钉本身的样式而不是指定数据模板。使用图钉的样式将使您能够更好地控制其功能，并能够在特定条件下为图钉设置自定义图标，例如您的。

标签： wpf xaml mvvm wpf-controls bing-maps

【解决方案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
    }
}

【讨论】：