AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-08-06 33
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通过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的使用，希望对你有所帮助。

文章标签：
C#
.NET
开发框架
存储
关键词：
wpf数据绑定
demo wpf
mingupup
目录
相关文章
mingupup
|
1月前
|
C#
通过Demo学WPF—数据绑定（一）
通过Demo学WPF—数据绑定（一）
mingupup
28 1
广州爱奇迪-伍华聪
|
1月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
65 15
土木林森
|
16天前
|
安全 C# 数据安全/隐私保护
WPF安全加固全攻略：从数据绑定到网络通信，多维度防范让你的应用固若金汤，抵御各类攻击
【8月更文挑战第31天】安全性是WPF应用程序开发中不可或缺的一部分。本文从技术角度探讨了WPF应用面临的多种安全威胁及防护措施。通过严格验证绑定数据、限制资源加载来源、实施基于角色的权限管理和使用加密技术保障网络通信安全，可有效提升应用安全性，增强用户信任。例如，使用HTML编码防止XSS攻击、检查资源签名确保其可信度、定义安全策略限制文件访问权限，以及采用HTTPS和加密算法保护数据传输。这些措施有助于全面保障WPF应用的安全性。
土木林森
25 0
土木林森
|
16天前
|
数据处理 开发者 C#
WPF数据绑定实战：从零开始，带你玩转数据与界面同步，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，数据绑定是核心技能之一，它能实现界面元素与数据源的同步更新。本文详细介绍了WPF数据绑定的概念与实现方法，包括属性绑定、元素绑定及路径绑定等技术，并通过示例代码展示了如何创建数据绑定。通过数据绑定，开发者不仅能简化代码、提高可维护性，还能提升用户体验。无论初学者还是有经验的开发者，都能从中受益，更好地掌握WPF数据绑定技巧。
土木林森
22 0
mingupup
|
1月前
|
C#
WPF/C#：数据绑定到方法
WPF/C#：数据绑定到方法
mingupup
29 0
杰克.陈
|
C#
WPF QuickStart系列之数据绑定(Data Binding)
原文:WPF QuickStart系列之数据绑定(Data Binding) 这篇博客将展示WPF DataBinding的内容。 首先看一下WPF Data Binding的概览， Binding Source可以是任意的CLR对象，或者XML文件等，Binding Target需要有依赖属性。
杰克.陈
1221 0
杰克.陈
|
C# 存储
WPF 实现跑马灯效果的Label控件，数据绑定方式实现
原文:WPF 实现跑马灯效果的Label控件，数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label，故重构了Label控件；具体代码如下 using System; using System.
杰克.陈
2367 0
杰克.陈
|
C#
WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果
原文:WPF Label控件在数据绑定Content属性变化触发TargetUpdated事件简单实现类似TextChanged 事件效果   本以为Label也有TextChanged 事件，但在使用的时候却没找到，网友说Label的Content属性改变肯定是使用赋值操作，赋值的时候就可以对其进行相应的操作所以不需TextChanged 事件。
杰克.陈
2016 0
杰克.陈
|
C# 存储
【值转换器】 WPF中Image数据绑定Icon对象
原文:【值转换器】 WPF中Image数据绑定Icon对象        这是原来的代码：                这里的MenuIcon是string类型,MenuIcon = "/Image/Tux.ico"。
杰克.陈
896 0
杰克.陈
|
C# 容器
WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历)
原文:WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历) 问题：        有一些CheckBox需要作为选项添加到页面上，但是数目不定。
杰克.陈
2464 0