使用MVVM的UWP中的ObservableCollection与INotifyCollectionChanged

时间:2016-10-19 03:07:25

标签: c# mvvm uwp

所以我站在一个情况,我有一个带有数据的主XML文件。然后我将该数据文件转换为List,以便我可以访问程序中的数据。

所以现在我可以得到数据显示,但我不知道如何过滤它并显示过滤器版本。

所以我想说我有一份食谱清单。现在我想看看所有生菜配方。我该怎么做?

我知道我需要一个MVVM设置,我有它,但它是静态的,因为我现在只有一个列表在创建视图时创建。因此,如果我硬编码我只想看到生菜,我可以这样做,但我如何为此制作一个按钮?或者甚至更好的搜索框? 我试图查看ObservableCollections或INotifyCollectionChanged,但我不确定实际上会导致我需要什么。

最好的方法是什么?

提前谢谢。

2 个答案:

答案 0 :(得分:0)

您需要一个可观察的集合,因为您希望将视图的列表视图绑定到viewmodel中的集合。为了能够根据搜索过滤器更改视图,您可以从视图中的文本框传递searchString参数以查看模型。在传递的字符串过滤器属性中,也使用Linq或其他方法过滤集合。并且由于viewmodel中的此集合绑定到View的List,它将在更改集合时更新视图(即observablecollection的功能)。

答案 1 :(得分:0)

所以我找到了解决问题的方法。

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>

模型&gt; 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>