ObservableCollectionとMVVMを使用したUWPのINotifyCollectionChanged

Question

私はデータのあるメインXMLファイルを持っているので、そのデータファイルはリストに変換され、プログラムのデータにアクセスすることができます。

今のところ私はそのデータを表示することができますが、それをフィルタリングし、そのfilteretバージョンを表示する方法はわかりません。

私はレシピのリストを持っているとしましょう。今はレタスですべてのレシピを見たいのですが、どうすればいいのですか？

私はMVVMセットアップが必要であることを理解していますが、ビューが作成されたときに作成されたリストが1つしかないので、静的です。だから私はハードコード私はレタスを見たいと思う、私はそれを行うことができますが、私はどのようにボタンを作ることに行くのですか？それとも検索ボックスの方がいいですか？ Iv'eはObservableCollectionsまたはINotifyCollectionChangedを調べようとしましたが、実際に何が必要なのかは分かりません。

最高のアプローチは何ですか？

ありがとうございます。

Answer 1

私は私の問題の解決策を見つけました。

XML：

<?xml version="1.0" encoding="UTF-8"?> 
<List> 
    <Person> 
     <Number>1</Number> 
     <FirstName>Frank</FirstName> 
     <LastName>Heist</LastName> 
    </Person> 
    <Person> 
     <Number>1</Number> 
     <FirstName>James</FirstName> 
     <LastName>Calder</LastName> 
    </Person> 
    <Person> 
     <Number>1</Number> 
     <FirstName>Jane</FirstName> 
     <LastName>Calder</LastName> 
    </Person> 

</List> 

のモデル> Data.cs

public class dataRaw 
    { 
     public string data { get; set; } 
     public string firstName { get; set; } 
     public string lastName { get; set; } 
    } 

    public class collectionGenerator 
    { 
     public static List<dataRaw> getList() 
     { 
      var doc = XDocument.Load("Data.xml"); 
      var dataList = doc.Root 
       .Descendants("Person") 
       .Select(node => new dataRaw 
       { 
        data = node.Element("Number").Value, 
        firstName = node.Element("FirstName").Value, 
        lastName = node.Element("LastName").Value, 
       }) 
      .ToList(); 
      return dataList; 
     } 
    } 

xaml.cs

public sealed partial class MainPage : Page 
    { 
     public List<dataRaw> t1; 
     public List<dataRaw> t3; 
     public ObservableCollection<dataRaw> t2; 
     public MainPage() 
     { 
      this.InitializeComponent(); 

      t1 = collectionGenerator.getList(); 
      t2 = new ObservableCollection<dataRaw>(t1); 
     } 

     private void Filter_Click(object sender, RoutedEventArgs e) 
     { 
      t1 = collectionGenerator.getList(); 
      t2.Clear(); 
      string data = TB1.Text; 

      if(data != "") 
      { 
      var Vtest = from VT in t1 
         where VT.firstName == data || VT.lastName == data 
         select VT; 
       foreach (var VT in Vtest) 
       { 
        t2.Add(new dataRaw { data = "1", firstName = VT.firstName, lastName = VT.lastName }); 

       } 
      } 
      else 
      { 
       var Vtest = from VT in t1 
          where VT.data == "1" 
          select VT; 
       foreach (var VT in Vtest) 
       { 
        t2.Add(new dataRaw { data = "1", firstName = VT.firstName, lastName = VT.lastName }); 

       } 
      } 
      } 
     } 

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="200" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <GridView ItemsSource="{x:Bind t2}" Grid.Row="1"> 
      <GridView.ItemTemplate> 
       <DataTemplate x:DataType="data:dataRaw"> 
        <StackPanel> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 

         <TextBlock Width="200" FontSize="48" Text="{x:Bind firstName}" Margin="0,0,20,0" Grid.Row="0"/> 
         <TextBlock Width="200" FontSize="48" Text="{x:Bind lastName}" Margin="0,0,20,0" Grid.Row="1"/> 

        </Grid> 
        </StackPanel> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 

     <Button Content="Filter" Name="Filter" FontSize="36" Click="Filter_Click" Width="200" Height="100" Grid.Row="2" /> 
     <TextBox Name="TB1" Height="100" Width="400" Grid.Row="2" /> 

    </Grid> 

Answer 2

ビューのリストビューをviewmodelのコレクションなどにバインドする場合は、ここにオブザーバブルコレクションが必要です。検索フィルタに応じてビューを変更できるようにするには、表示中のテキストボックスからsearchStringパラメータを渡してモデルを表示することができます。渡された文字列フィルタのプロパティで、Linqなどの手段を使用してコレクションをフィルタリングします。また、ビューモデルのこのコレクションはViewのリストにバインドされているので、コレクションが変更されたとき（つまりobservablecollectionの機能性）にビューを更新します。