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

05-11 09:39