x：ListViewのアイテムをViewModelにバインドする

Question

あなたは何か長いことを見つめて、実際にはそれ以上意味をなさないときは知っています...リストビューアイテムのバックグラウンドプロパティをバインドしようとしていますビューモデル内のコレクション

<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

。 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を使用します。 INotifyPropertyChangedを実装しています。使い慣れていない場合は、XAMLデータバインディングを参照する必要があります。

また、ブール値を別の背景色に変更するためにMyBgConverter（Laithが定義したもの）を使用します。

最後に、クラスのIsMyAirportプロパティを使用すると、別のMyAirports文字列リストが必要ない場合があります。私はあなたが何か他のもののためにそれを使用していたかどうか分からなかったので、私はそれを削除しなかった。しかし、AirportListView_ItemClickのロジックを変更して、MyAirportsリストではなくIsMyAirport boolを使用することができます。

Answer 2

SolidColorBrushにboolを変換し、結合してそれを使用コンバータを作成します。

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

ビューモデルは、IsPartOfMyAirportsの変更を通知する責任があります。

あなたのコンバータは、このようになります：あなたは単なる文字列より豊かなクラスをのItemsSourceに行くのコレクションを作成する必要があり

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(); 
    } 
}