UWP入门（十二）--数据绑定用法

主要几个元素：

Template

DataTemplate

ItemSource

数据绑定是一个数据提取的方法，能使数据和UI上的控件紧密相连，下面的Demo是这样的：

有许多书的集合，书 类中有图片、标题、作者和ID，把它成现在GridView 控件上，每次点击GridView 的时候动态显示书本信息

github 代码

效果图：



原理图：

1. Template

为GridView 创建一个Template，决定每个独立的图书对象如何呈现在屏幕上

<GridView ItemsSource="{x:Bind Books}"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick"
ItemTemplate="{StaticResource BookDataTemplate}">
</GridView>

2. DataTemplate

在这里面我们可以实现 具体的如何将书呈现在屏幕上，Grid、StackPanel 等控件

<DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Image Width="150" Source="{x:Bind CoverImage}" />
<TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" />
<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>

3. ItemSource 告知绑定的是什么

//就是这句话
ItemsSource="{x:Bind Books}"

<GridView ItemsSource="{x:Bind Books}"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick"
ItemTemplate="{StaticResource BookDataTemplate}">
</GridView>

4. 告知 DataTemplate 它们使用的数据类型

//就是这一句话
x:DataType="data:Book"

为了让它生效，得在最上面加上命名空间

//Book类所在的地方
xmlns:data="using:xBindDataExample.Models"

完整的写法

 <DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Image Width="150" Source="{x:Bind CoverImage}" />
<TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" />
<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>

5. 代码

5.1 Book

public class Book
{
public int BookId { get; set; }
public string Title { get; set; }
public string Author { get; set; }
public string CoverImage { get; set; }
}

public class BookManager
{
public static List<Book> GetBooks()
{
var books = new List<Book>();

books.Add(new Book { BookId = 1, Title = "Vulpate", Author = "Futurum", CoverImage="Assets/1.png" });
books.Add(new Book { BookId = 2, Title = "Mazim", Author = "Sequiter Que", CoverImage = "Assets/2.png" });
books.Add(new Book { BookId = 3, Title = "Elit", Author = "Tempor", CoverImage = "Assets/3.png" });
books.Add(new Book { BookId = 4, Title = "Etiam", Author = "Option", CoverImage = "Assets/4.png" });
books.Add(new Book { BookId = 5, Title = "Feugait Eros Libex", Author = "Accumsan", CoverImage = "Assets/5.png" });
books.Add(new Book { BookId = 6, Title = "Nonummy Erat", Author = "Legunt Xaepius", CoverImage = "Assets/6.png" });
books.Add(new Book { BookId = 7, Title = "Nostrud", Author = "Eleifend", CoverImage = "Assets/7.png" });
books.Add(new Book { BookId = 8, Title = "Per Modo", Author = "Vero Tation", CoverImage = "Assets/8.png" });
books.Add(new Book { BookId = 9, Title = "Suscipit Ad", Author = "Jack Tibbles", CoverImage = "Assets/9.png" });
books.Add(new Book { BookId = 10, Title = "Decima", Author = "Tuffy Tibbles", CoverImage = "Assets/10.png" });
books.Add(new Book { BookId = 11, Title = "Erat", Author = "Volupat", CoverImage = "Assets/11.png" });
books.Add(new Book { BookId = 12, Title = "Consequat", Author = "Est Possim", CoverImage = "Assets/12.png" });
books.Add(new Book { BookId = 13, Title = "Aliquip", Author = "Magna", CoverImage = "Assets/13.png" });

return books;
}
}

5.2 MainPage.xaml.cs

public sealed partial class MainPage : Page
{
private List<Book> Books;

public MainPage()
{
this.InitializeComponent();
Books = BookManager.GetBooks();
}

private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
var book = (Book)e.ClickedItem;
ResultTextBlock.Text = "You selected " + book.Title;
}
}

5.3 MainPage.xaml

<Page
x:Class="ListViewExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListViewExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:ListViewExample.Model"
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:Key="BookListDataTemplate" x:DataType="data:Book">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
<StackPanel Margin="20,20,0,0">
<TextBlock Text="{x:Bind Title}" HorizontalAlignment="Left" FontSize="16" />
<TextBlock Text="{x:Bind Author}" HorizontalAlignment="Left" FontSize="10" />
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,20,20,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1"
Name="ResultTextBlock"
FontSize="24"
Foreground="Red"
FontWeight="Bold"
Margin="20,20,0,0" />
<ListView ItemsSource="{x:Bind Books}"
ItemClick="ListView_ItemClick"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource BookListDataTemplate}">
</ListView>
</Grid>
</Page>