通过Demo学WPF—数据绑定（二）-阿里云开发者社区

准备

今天学习的Demo是Data Binding中的Linq：

创建一个空白解决方案，然后添加现有项目，选择Linq，解决方案如下所示：

查看这个Demo的效果：

开始学习这个Demo

xaml部分

查看MainWindow.xaml：

<Window x:Class="Linq.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Linq"
        mc:Ignorable="d"
        Title="MainWindow" SizeToContent="WidthAndHeight" Height="600">
    <Window.Resources>
        <local:Tasks x:Key="MyTodoList"/>
        <DataTemplate x:Key="MyTaskTemplate">
            <Border Name="border" BorderBrush="Aqua" BorderThickness="1"
              Padding="5" Margin="5">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/>
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" />
                    <TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
                    <TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:"/>
                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
                </Grid>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <StackPanel>
        <TextBlock Margin="10,0,0,0">Choose a Priority:</TextBlock>
        <ListBox SelectionChanged="ListBox_SelectionChanged"
                 SelectedIndex="0" Margin="10,0,10,0" >
            <ListBoxItem>1</ListBoxItem>
            <ListBoxItem>2</ListBoxItem>
            <ListBoxItem>3</ListBoxItem>
        </ListBox>
        <ListBox Width="400" Margin="10" Name="myListBox"
                 HorizontalContentAlignment="Stretch"
                 ItemsSource="{Binding}"
                 ItemTemplate="{StaticResource MyTaskTemplate}"/>
    </StackPanel>
</Window>

先来看看资源包含什么内容（省略子项）：

<Window.Resources>
        <local:Tasks x:Key="MyTodoList"/>
        <DataTemplate x:Key="MyTaskTemplate">      
        </DataTemplate>
</Window.Resources>

是 XAML 中的一个元素，它定义了一个资源字典，你可以在其中声明和存储可在整个窗口中重用的资源。

我们发现包含两个资源：一个 Tasks 对象和一个 DataTemplate。

通过上一篇文章的学习，我们明白

<local:Tasks x:Key="MyTodoList"/>

的意思就是创建了一个 Tasks 对象，并给它分配了一个键（key）MyTodoList。这样你就可以在其他地方通过这个键引用这个 Tasks 对象了。

DataTemplate又是什么呢？

<DataTemplate x:Key="MyTaskTemplate">
            <Border Name="border" BorderBrush="Aqua" BorderThickness="1"
              Padding="5" Margin="5">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/>
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" />
                    <TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
                    <TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:"/>
                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
                </Grid>
            </Border>
        </DataTemplate>

其中是 XAML 中的一个元素，它定义了如何将数据对象呈现为 UI 元素。

在这个例子中，DataTemplate 定义了一个模板，该模板描述了如何将数据呈现在 UI 中。这个模板被赋予了一个键（key），即 MyTaskTemplate，这样你就可以在其他地方引用这个模板了。

<Grid>
    <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition/>
          <RowDefinition/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
      </Grid.ColumnDefinitions>
 <Grid>

定义了一个3行2列的Grid布局：

<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" />

Grid.Row="0"表示第1行，Grid.Column="1"表示第2列，Text="{Binding Path=TaskName}"表示Text属性的值为绑定源的TaskName属性的值。

<TextBlock Margin="10,0,0,0">Choose a Priority:</TextBlock>
    <ListBox SelectionChanged="ListBox_SelectionChanged"
             SelectedIndex="0" Margin="10,0,10,0" >
        <ListBoxItem>1</ListBoxItem>
        <ListBoxItem>2</ListBoxItem>
        <ListBoxItem>3</ListBoxItem>
    </ListBox>

表示以下这部分：

<ListBox Width="400" Margin="10" Name="myListBox"
         HorizontalContentAlignment="Stretch"
         ItemsSource="{Binding}"
         ItemTemplate="{StaticResource MyTaskTemplate}"/>

表示以下这部分：

我们会发现它没有显式的写，而且它的ListBoxItem数量不是固定的。

它使用了ItemsSource="{Binding}"，ItemsSource是 ListBox 的一个属性，它决定了 ListBox 中显示的项的数据源。

{Binding}是一个标记扩展，它创建一个数据绑定。在这个例子中，由于没有指定路径（Path），所以它会绑定到当前的数据上下文（DataContext）。数据上下文通常在父元素中设置，并且所有的子元素都可以访问。

ItemTemplate="{StaticResource MyTaskTemplate}"表示每个对象将按照这个模板进行显示。

cs部分

首先定义了TaskType枚举类型：

namespace Linq
{
    public enum TaskType
    {
        Home,
        Work
    }
}

定义了Task类：

// // Copyright (c) Microsoft. All rights reserved.
// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
using System.ComponentModel;
namespace Linq
{
    public class Task : INotifyPropertyChanged
    {
        private string _description;
        private string _name;
        private int _priority;
        private TaskType _type;
        public Task()
        {
        }
        public Task(string name, string description, int priority, TaskType type)
        {
            _name = name;
            _description = description;
            _priority = priority;
            _type = type;
        }
        public string TaskName
        {
            get { return _name; }
            set
            {
                _name = value;
                OnPropertyChanged("TaskName");
            }
        }
        public string Description
        {
            get { return _description; }
            set
            {
                _description = value;
                OnPropertyChanged("Description");
            }
        }
        public int Priority
        {
            get { return _priority; }
            set
            {
                _priority = value;
                OnPropertyChanged("Priority");
            }
        }
        public TaskType TaskType
        {
            get { return _type; }
            set
            {
                _type = value;
                OnPropertyChanged("TaskType");
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        public override string ToString() => _name;
        protected void OnPropertyChanged(string info)
        {
            var handler = PropertyChanged;
            handler?.Invoke(this, new PropertyChangedEventArgs(info));
        }
    }
}

实现了INotifyPropertyChanged接口。

实现INotifyPropertyChanged接口的主要目的是为了提供一个通知机制，当对象的一个属性更改时，可以通知到所有绑定到该属性的元素。

INotifyPropertyChanged接口只有一个事件PropertyChanged。当你的类实现了这个接口，你需要在每个属性的 setter 中触发这个事件。这样，当属性的值更改时，所有绑定到这个属性的 UI 元素都会收到通知，并自动更新其显示的值。

再查看Tasks类：

// // Copyright (c) Microsoft. All rights reserved.
// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
using System.Collections.ObjectModel;
namespace Linq
{
    public class Tasks : ObservableCollection<Task>
    {
        public Tasks()
        {
            Add(new Task("Groceries", "Pick up Groceries and Detergent", 2, TaskType.Home));
            Add(new Task("Laundry", "Do my Laundry", 2, TaskType.Home));
            Add(new Task("Email", "Email clients", 1, TaskType.Work));
            Add(new Task("Clean", "Clean my office", 3, TaskType.Work));
            Add(new Task("Dinner", "Get ready for family reunion", 1, TaskType.Home));
            Add(new Task("Proposals", "Review new budget proposals", 2, TaskType.Work));
        }
    }
}

继承自ObservableCollection类。

ObservableCollection是 .NET 框架中的一个类，它表示一个动态数据集合，当添加、删除项或者整个列表刷新时，它会提供通知。这对于绑定到 UI 元素（例如 WPF 或 UWP 应用程序中的数据绑定）非常有用，因为当集合更改时，UI 元素可以自动更新。

再看下这个Demo中最为重要的部分：

// // Copyright (c) Microsoft. All rights reserved.
// // Licensed under the MIT license. See LICENSE file in the project root for full license information.
using System.Linq;
using System.Windows;
using System.Windows.Controls;
namespace Linq
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private readonly Tasks tasks = new Tasks();
        public MainWindow()
        {
            InitializeComponent();
        }
        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var pri = int.Parse(((sender as ListBox).SelectedItem as ListBoxItem).Content.ToString());
            DataContext = from task in tasks
                where task.Priority == pri
                select task;     
        }
    }
}

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var pri = int.Parse(((sender as ListBox).SelectedItem as ListBoxItem).Content.ToString());
            DataContext = from task in tasks
                where task.Priority == pri
                select task;     
        }

表示ListBox选项改变事件处理函数。

var pri = int.Parse(((sender as ListBox).SelectedItem as ListBoxItem).Content.ToString());

获取选中项的值。

DataContext = from task in tasks
                where task.Priority == pri
                select task;

中的DataContext获取或设置元素参与数据绑定时的数据上下文。

from task in tasks
where task.Priority == pri
select task;

使用C#中的Linq获得tasks中Priority属性等于pri的所有task对象，也可以这样写：

DataContext = tasks.Where(x => x.Priority == pri);

效果是一样的。

过程

首先实例化了一个Tasks类如下：

包含这些Task类。

以选择“2”为例，进行说明：

打个断点：

DataContext的结果如下：

<ListBox Width="400" Margin="10" Name="myListBox"
         HorizontalContentAlignment="Stretch"
         ItemsSource="{Binding}"
         ItemTemplate="{StaticResource MyTaskTemplate}"/>

中的ItemsSource="{Binding}"表示ListBox的数据源就是DataContext，也就是有3个Task对象，也就是有3个ListItem，每个ListItem都按照{StaticResource MyTaskTemplate}这个模板进行显示。

结果就如上图所示。

测试

最后为了测试自己是否真的理解，可以按照自己的意图进行更改，比如我想根据工作类型进行数据的显示。

<TextBlock Grid.Row="2" Grid.Column="0" Text="TaskType:"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=TaskType}"/>

修改数据模板。

<ListBox SelectionChanged="ListBox_SelectionChanged"
         SelectedIndex="0" Margin="10,0,10,0" >
    <ListBoxItem>Home</ListBoxItem>
    <ListBoxItem>Work</ListBoxItem>
</ListBox>

修改第一个ListBox。

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var pri = ((sender as ListBox).SelectedItem as ListBoxItem).Content.ToString();
    TaskType type = new TaskType();
    switch (pri)
    {
        case "Home":
            type = TaskType.Home;
            break;
        case "Work":
            type = TaskType.Work;
            break;
        default:
            break;
    }
    
    DataContext = tasks.Where(x => x.TaskType == type);
}

修改ListBox选项改变事件处理函数。

效果如下所示：

总结

本文主要介绍了数据绑定配合Linq的使用，希望对你有所帮助。

通过Demo学WPF—数据绑定（二）

准备

开始学习这个Demo

xaml部分

cs部分

过程

测试

总结

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

通过Demo学WPF—数据绑定（二）

准备

开始学习这个Demo

xaml部分

cs部分

过程

测试

总结

热门文章

最新文章

相关电子书

相关实验场景