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>