x：將ListView中的項綁定到ViewModel

Question

你知道當你盯着某個東西足夠長的時候它不再有意義了......我試圖將listview項的背景屬性綁定到它是否屬於視圖模型中的一個集合。以下是我的工作的簡化版本：

<Grid> 

    <ListView x:Name="AirportListView" 
       SelectionMode="None" 
       IsItemClickEnabled="True" 
       ItemClick="AirportListView_ItemClick"> 

     <ListView.ItemTemplate> 

      <DataTemplate x:DataType="x:String"> 

       <Grid Padding="16"> 

        <TextBlock Text="{x:Bind}" /> 

       </Grid> 

      </DataTemplate> 

     </ListView.ItemTemplate>    

    </ListView> 

</Grid> 

和：

public sealed partial class MainPage : Page 
{ 
    public ObservableCollection<string> MyAirports { get; set; } = new ObservableCollection<string>(); 

    public MainPage() 
    { 
     this.InitializeComponent(); 

     AirportListView.ItemsSource = new List<string>() 
     { 
      "EDDB", 
      "LGIR", 
      "EHAM", 
      "LFPO", 
      "EGKK" 
     }; 
    } 

    private void AirportListView_ItemClick(object sender, ItemClickEventArgs e) 
    { 
     if (e.ClickedItem is string clickedAirport) 
     { 
      if (MyAirports.Contains(clickedAirport)) 
       MyAirports.Remove(clickedAirport); 
      else 
       MyAirports.Add(clickedAirport); 
     } 
    } 
} 

理想我想實現什麼是網格的背景綁定在DataTemplate中，使其當一個項目是MyAirports的一部分時是不同的顏色。我只是無法弄清楚如何使用x：Bind或Binding來做到這一點。我可以想出更多的冗長的方法來實現同樣的目標，但是想知道是否有更好的數據綁定解決方案。

任何想法將不勝感激！

將

Answer 1

你需要做的是去的ItemsSource更豐富的類不只是一個字符串的集合。它應該包含屬性IsMyAirport，然後它可以綁定到每個ListViewItem以及更新其背景。

<Page ... 
    xmlns:local="using:UwpQuestions.Views" 
    xmlns:common="using:UwpQuestions.Common"> 
    <Page.Resources> 
     <common:MyBgConverter x:Key="myBgConverter"/> 
    </Page.Resources> 

<Grid> 
    <ListView x:Name="AirportList" 
      SelectionMode="None" 
      IsItemClickEnabled="True" 
      HorizontalContentAlignment="Stretch" 
      ItemsSource="{x:Bind Airports}" 
      ItemClick="AirportListView_ItemClick"> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="local:AirportItem"> 
       <Grid Padding="16" Width="150" Background="{x:Bind IsMyAirport, Mode=OneWay, Converter={StaticResource myBgConverter}}"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{x:Bind Name}" /> 
       </Grid> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</Grid> 
</Page> 

隨着後面以下代碼：

public sealed partial class AirportListView : Page 
{ 
    public ObservableCollection<string> MyAirports { get; set; } = new ObservableCollection<string>(); 
    public ObservableCollection<AirportItem> Airports { get; set; } 

    public AirportListView() 
    { 
     this.InitializeComponent(); 
     Airports = new ObservableCollection<AirportItem> 
     { 
      new AirportItem {Name = "EDDB"}, 
      new AirportItem {Name = "LGIR"}, 
      new AirportItem {Name = "LFPO"}, 
      new AirportItem {Name = "EGKK"} 
     }; 
    } 

    private void AirportListView_ItemClick(object sender, ItemClickEventArgs e) 
    { 
     if (e.ClickedItem is AirportItem clickedAirport) 
     { 
      if (MyAirports.Contains(clickedAirport.Name)) 
      { 
       MyAirports.Remove(clickedAirport.Name); 
       clickedAirport.IsMyAirport = false; 
      } 
      else 
      { 
       MyAirports.Add(clickedAirport.Name); 
       clickedAirport.IsMyAirport = true; 
      } 
     } 
    } 
} 

public class AirportItem : BindableBase 
{ 
    private string _name; 
    public string Name 
    { 
     get { return _name; } 
     set { SetProperty<string>(ref _name, value); } 
    } 

    private bool _isMyAirport = false; 
    public bool IsMyAirport 
    { 
     get { return _isMyAirport; } 
     set { SetProperty<bool>(ref _isMyAirport, value); } 
    } 
} 

AirportItem使用BindableBase通知時屬性的的ListView在類變化。它實現INotifyPropertyChanged。如果你不熟悉它，你應該閱讀XAML數據綁定。

而且，它還使用MyBgConverter（即Laith定義的）將bool值更改爲不同的背景色。

最後，通過類的IsMyAirport屬性，您可能不需要單獨的MyAirports字符串列表。我沒有刪除它，因爲我不確定你是否將它用於別的東西。但是您的AirportListView_ItemClick中的邏輯可以更改爲僅使用IsMyAirport布爾而不是MyAirports列表。

Answer 2

創建轉換bool到SolidColorBrush一個轉換器，並使用在具有約束力。

<ListView Background="{x:Bind IsPartOfMyAirports, Converter={StaticResource MyBgConverter}}"> 
... 
</ListView> 

您的視圖模型將負責通知IsPartOfMyAirports的更改。

你的轉換器可以是這個樣子：

public class MyBgConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     var b = (bool)value; 
     var color = b ? Colors.Yellow : Colors.Green; 

     return new SolidColorBrush(color); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
}