uwp,c#,listView与gridView列表控件进阶

listView与gridView使用类似，这里讲解gridView的一些数据绑定(x:Bind)基础知识。

顺便学习下如何使用属性通知。(后台中的数据变化会直接显示在UI上，实现动态变化，默认是没有属性通知的)

首先需要声明一个类，添加一些属性。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace XBind.Models
{
    public class Worker:INotifyPropertyChanged//继承属性通知接口
    {
        //Demo中，只实现Years的属性通知
        private string name;
        public string Name
        {
            get { return name; }
            set {
                name = value;
                NotifyPropertyChanged("Name");
            }

        }

        private string age;
        public string Age
        {
            get { return age; }
            set
            {
                age = value;
                NotifyPropertyChanged("Age");
            }
        }

        private string years;
        public string Work_Years
        {
            get => years;
            set
            {
                years = value;
                NotifyPropertyChanged("Work_Years");
            }
        }

        //实现属性通知
        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)

        {

            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        }
    }
}

Xaml代码

<Page
    x:Class="XBind.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XBind"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:XBind.Models"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="Add Worker" FontSize="30" FontWeight="Bold"/>
                <TextBox x:Name="name_textBox" PlaceholderText="Name"/>
                <TextBox x:Name="age_textBox" PlaceholderText="Age" Margin="0,5"/>
                <TextBox x:Name="years_textBox" PlaceholderText="Years"/>
                <Button x:Name="add_bt" Content="Add" Tapped="add_bt_Tapped" Margin="0,10,0,0"/>
            </StackPanel>
            <StackPanel Orientation="Vertical" Margin="0,20,0,0">
                <TextBlock Text="Search by name,and change working years" FontSize="30" FontWeight="Bold"/>
                <TextBox x:Name="search_textBox" PlaceholderText="Enter name" Margin="0,0,0,5"/>
                <TextBox x:Name="newYears_textBox" PlaceholderText="Enter new working years"/>
                <Button x:Name="change_bt" Content="OK" Tapped="change_bt_Tapped" Margin="0,10,0,0"/>
            </StackPanel>
        </StackPanel>
        <GridView x:Name="gird_view" Grid.Column="1" ItemsSource="{x:Bind workers}">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Margin" Value="10"/>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="models:Worker">
                    <StackPanel Orientation="Vertical" Width="100" BorderBrush="SkyBlue" BorderThickness="1">
                        <TextBlock Text="{x:Bind Name}"/>
                        <TextBlock Text="{x:Bind Age}"/>
                        <TextBlock Text="{x:Bind Work_Years,Mode=OneWay}"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

这里注意的是，因为只实现了Years的属性通知更改， Text="{x:Bind Years,Mode=OneWay}"，Mode默认或OneTime都不会更改。

后台代码

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using XBind.Models;

// https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x804 上介绍了“空白页”项模板

namespace XBind
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        private ObservableCollection<Worker> workers;//之所以使用ObservableCollection而不是List，因为前者支持UI动态变化
        public MainPage()
        {
            this.InitializeComponent();
            workers = new ObservableCollection<Worker>();
        }

        private void add_bt_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var work = new Worker
            {
                Name = name_textBox.Text,
                Age = age_textBox.Text,
                Work_Years = years_textBox.Text
            };
            workers.Add(work);
        }

        private async void change_bt_Tapped(object sender, TappedRoutedEventArgs e)
        {
            if (workers.Count > 0 )
            {
                foreach (var item in workers)
                {
                    if (item.Name.ToLower() == search_textBox.Text.ToLower())
                    {
                        item.Work_Years = newYears_textBox.Text;
                    }
                    else
                    {
                        var message = new MessageDialog("Check no such person!");
                        await message.ShowAsync();
                    }
                }
            }
        }
    }
}

Demo源码：https://github.com/singhwong/uwp-xBind-demo.git