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

问题描述：

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

这里是我的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有些疑惑，因为我觉得我没有改变正确的项目。

有什么建议吗？感谢你们！

未与丙图的工作，但你有没有尝试设置图钉本身的风格，而不是指定的DataTemplate 。使用图钉风格可以让您更好地控制其功能，并可以设置您的自定义图标也适用于特定条件（如您的图钉）。 –

答

最后我找到了一种方法来改变使用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地图图钉的背景颜色

相关推荐