UWP入门--数据绑定用法

Posted 2020-10-07

原文: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>