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

最新推荐文章于 2024-07-24 06:58:51 发布
最新推荐文章于 2024-07-24 06:58:51 发布
阅读量2.2k 收藏 20
点赞数 16
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingupup/article/details/136079240
版权

准备

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

image-20240131155033495

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

image-20240131155225236

查看这个Demo的效果：

这个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>

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

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

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

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

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

DataTemplate又是什么呢？

image-20240131161807052

<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>

其中<DataTemplate x:Key="MyTaskTemplate"> 是 XAML 中的一个元素，它定义了如何将数据对象呈现为 UI 元素。
在这个例子中，DataTemplate 定义了一个模板，该模板描述了如何将数据呈现在 UI 中。这个模板被赋予了一个键（key），即 MyTaskTemplate，这样你就可以在其他地方引用这个模板了。

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

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

image-20240131162453337

 <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>

表示以下这部分：

image-20240131163013465

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

表示以下这部分：

image-20240131163113558

image-20240131163134246

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

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

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

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

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<Task>类。

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

image-20240131164317743

再看下这个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获取或设置元素参与数据绑定时的数据上下文。

image-20240131165019921

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

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

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

效果是一样的。

过程

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

image-20240131165631201

包含这些Task类。

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

image-20240131165511996

打个断点：

image-20240131165821240

DataContext的结果如下：

image-20240131165934477

<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选项改变事件处理函数。

效果如下所示：

效果2

总结

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

mingupup
关注
  • 16
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF学习笔记之-WPF数据绑定
yh_belief
02-25 2524
WPF数据绑定一、数据绑定基本概念 既然是绑定，那么肯定就有”源对象“和”目标对象“两种状态实体，从图的角度上来说存在三种状态： 确实在wpf中存在这三种模式的对应方式， 1：OneWay Source影响着Target，但是Target却影响不到Source。 2：OneWayToSource Target影响Source，而Sou
WPF简单数据绑定demo
06-10
在Windows Presentation Foundation（WPF）中，数据绑定是一种强大的机制，它允许UI元素与应用程序的数据模型...通过这个“WPF简单数据绑定demo”，新手可以逐步学习并实践这些概念，为后续的WPF开发打下坚实的基础。
C# WPF入门学习主线篇（二十九）—— 绑定到对象和集合
weixin_56595425的博客
06-13 1062
在本篇文章中，我们详细介绍了如何在WPF中将控件绑定到对象和集合。通过定义和初始化数据对象和集合，使用数据绑定将数据源与UI控件连接起来，并实现动态更新，我们可以轻松地创建一个响应式的用户界面。
通过Demo学WPF—数据绑定（一）✨
mingupup的博客
01-29 1169
通过这个小Demo，我们明白了WPF中的数据绑定的三要素，绑定对象、绑定、绑定源。在这个demo中，我们学会了如何在xaml中声明绑定，知道了Binding的三个属性`Source`、`Path`与`UpdateSourceTrigger`的含义，明白了数据源为什么要实现`INotifyPropertyChanged`接口，学会了WPF中数据绑定的基本用法，希望对你有所帮助。
C# WPF入门学习主线篇（二十四）—— 数据绑定基础
weixin_56595425的博客
06-13 1148
在本篇博客中，我们详细介绍了WPF中的数据绑定基础知识。通过具体的代码示例，展示了单向绑定和双向绑定的使用方法，以及如何使用绑定路径和数据上下文来实现更灵活的绑定。希望通过这篇博客，读者能够深入理解和掌握WPF数据绑定的基本概念和应用技巧。
WPF数据绑定
代码改变世界
07-10 511
大致讲一下WPF数据绑定 后续会出详细版本
C# WPF入门学习主线篇（二十五）—— 单向绑定、双向绑定
weixin_56595425的博客
06-13 1321
单向绑定和双向绑定是WPF中强大的数据绑定机制，简化了数据与UI控件之间的同步。单向绑定适用于只读数据，而双向绑定则适用于可编辑的数据。通过理解和应用这些绑定模式，可以有效地提升WPF应用程序的开发效率和用户体验。
wpf数据绑定之元素、资源、后台绑定
u014194297的博客
01-03 3029
wpf前端的数据绑定主要分为元素、资源以及后台数据三种，元素可以简单的理解为前端的空间数据绑定，资源是在resource里找数据，而后台就是跟cs文件之间的数据互相传递。
WPF学习之数据绑定
覃宇琨的专栏
08-30 337
WPF中的数据绑定提供了很强大的功能。与普通的WinForm程序相比，其绑定功能为我们提供了很多便利，例如Binding对象的自动通知/刷新，Converter，Validation Rules，Two Way Binding等功能，省去了很多维护的繁琐工作。另外对于WPF中提供的数据模板功能，让我们可以轻松定制可以被复用的控制呈现的模块—但这是以数据绑定为前提来做到轻松易用的效果的。数据提供
WPF的数据绑定详细介绍
10-27
数据绑定是Windows Presentation Foundation（WPF）框架中的核心特性，它允许UI元素与应用程序的业务逻辑之间实现数据的自动同步。这种同步是双向的，即数据模型的变化会反映到UI，反之亦然，大大简化了开发过程并...
WPF单向绑定demo
06-10
本教程通过“WPF单向绑定demo”将深入讲解这个概念，帮助新手快速掌握单向数据绑定的基本原理和用法。 首先，我们要理解什么是单向绑定。单向绑定意味着数据只能从数据源流向目标控件，即控件的值不会反向影响数据...
在WPF中绑定数据时使用路径参数
04-02
压缩包中的文件名可能包含两个示例：一个可能是关于WPF参数绑定的演示项目（wpf_params_binding_demo.zip），另一个可能是源代码文件（wpf_params_binding_src.zip）。通过查看这些示例，你可以深入理解如何在实际...
带有组合框的分步WPF数据绑定
04-11
通过这个分步教程，开发者不仅可以理解如何在WPF中使用数据绑定和ComboBox，还可以学习如何将这些技术应用于实际项目，提升UI的交互性和数据管理的效率。无论是初学者还是有经验的开发者，都能从这个实践中受益匪浅...
WPF的前世今生
最新发布
zls365365的博客
07-24 222
WPF发展现状简述WPF，作为微软推出的用于构建Windows客户端应用程序的UI框架，自2006年推出以来，已经成为开发者构建富交互式用户界面的首选技术之一。随着技术的不断迭代，WPF以其强大的数据绑定、样式和模板功能，以及对图形硬件的优化，赢得了广泛的应用和认可。尽管移动应用的兴起带来了新的挑战，WPF依然在桌面应用领域保持着其不可替代的地位。国内外WPF发展现状在国内，WPF技术的应用已经深...
WPF项目实战视频《二》（主要为prism框架）
xy_77777的博客
07-22 1037
WPF视频学习笔记《二》 prism框架
一个注解解决重复提交问题
fhey的博客
07-22 1120
首先我们先定义一个注解，注解包含以下几个参数 ：waitTime： 等待时间，默认0秒expireTime： 锁过期时间，默认10秒： 执行完成后是否释放锁，默认是timeUnit： 超时时间单位，默认毫秒errorMsg： 报错信息，默认 "点击太快了，请慢一点！/***/@Component/*** 等待时间，默认0秒*//*** 锁过期时间，默认10秒*//*** 执行完成后是否释放锁，默认是*//*** 超时时间单位，默认毫秒*/
.NET下支持多框架的托盘功能NotifyIconEx（WPF / WinForms / Avalonia / WinUI / MAUI / Wice）
mccoy39082的博客
07-22 359
支持 WPF / WinForms / Avalonia / WinUI / MAUI / Wice 应用。可用于 .NET 5.0 以及 .NET Framework 4.6.2。
WPF 解决: DataGrid 已定义列，但是还是会显示模型的所有属性的问题
一个编程的同学
07-22 338
如果你将设置为false，则需要手动定义 DataGrid 的列。这样可以提供更多的控制权和自定义选项，例如设置列的标题、格式、宽度等。
wpf扫码枪无焦点自动获取数据demo
07-22
通过以上简单的步骤，我们就可以实现WPF扫码枪无焦点自动获取数据的Demo。当然，具体的实现方式可能因为扫码枪的型号和驱动等因素而有所差异，需要根据实际情况进行调整。 ### 回答2： WPF扫码枪无焦点自动获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值