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

准备

今天学习的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的使用，希望对你有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/379688.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

新型Black Matter勒索病毒，勒索300万美金

新型Black Matter勒索病毒，勒索300万美金

前言 BlackMatter勒索病毒是一款基于RAAS模式的新型勒索病毒&#xff0c;该勒索病毒组织成立于2021年7月&#xff0c;该勒索病毒黑客组织对外宣称&#xff0c;已经整合了DarkSide、REvil和LockBit等勒索病毒的最佳功能特点。 勒索病毒黑客组织曾表示不会对医疗保健、关键基础设…
阅读更多...
【记录】记一次关于前端单元测试的全英文问卷调查（ Survey: Automatically Generated Test Suites for JavaScript）

【记录】记一次关于前端单元测试的全英文问卷调查（ Survey: Automatically Generated Test Suites for JavaScript）

文章目录 OPENING STATEMENTBackgroundTask background: Fix the failing test casesBefore the task: Task: Fix the failing test casesTask: Executable DocumentationBefore the task: Bonus Opportunity: One more taskTask: Test Cases ClusteringRewardThank You! 原地址…
阅读更多...
使用深度学习对视频进行分类

使用深度学习对视频进行分类

目录 加载预训练卷积网络 加载数据 将帧转换为特征向量 准备训练数据 创建 LSTM 网络 指定训练选项 训练 LSTM 网络 组合视频分类网络 使用新数据进行分类 辅助函数 此示例说明如何通过将预训练图像分类模型和 LSTM 网络相结合来创建视频分类网络。 要为视频…
阅读更多...
TS学习与实践

TS学习与实践

文章目录 学习资料TypeScript 介绍TypeScript 是什么&#xff1f;TypeScript 增加了什么&#xff1f;TypeScript 开发环境搭建 基本类型编译选项类声明属性属性修饰符getter 与 setter方法static 静态方法实例方法 构造函数继承 与 super抽象类接口interface 定义接口implement…
阅读更多...
[office] 教你如何用Excel制作施工管理日记 #其他#媒体

[office] 教你如何用Excel制作施工管理日记 #其他#媒体

教你如何用Excel制作施工管理日记 对于在工地实习或者其他施工人员来说&#xff0c;常常会需要记录施工管理日记&#xff0c;其他软件的用法可以过于复杂&#xff0c;下面小编就来教你如何用Excel制作施工管理日记 对于在工地实习或者其他施工人员来说&#xff0c;常常会需要记…
阅读更多...
软件文档测试

软件文档测试

1 文档测试的范围 软件产品由可运行的程序、数据和文档组成。文档是软件的一个重要组成部分。 在软件的整人生命周期中&#xff0c;会用到许多文档&#xff0c;在各个阶段中以文档作为前阶段工作成果的体现和后阶段工作的依据。 软件文档的分类结构图如下图所示&#xff1a; …
阅读更多...
【并发编程】享元模式

【并发编程】享元模式

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳重求进&#xff0c;晒太阳 享元模式 简介 定义 英文名称&#xff1a;Flyweight pattern. 当需要重用数量有限的同一类对象时 享元模式是一种结构型的设计模式。它的主要目…
阅读更多...
吉他学习：右手拨弦方法，右手拨弦训练 左手按弦方法

吉他学习：右手拨弦方法，右手拨弦训练 左手按弦方法

第六课 右手拨弦方法https://m.lizhiweike.com/lecture2/29362775 第七课 右手拨弦训练https://m.lizhiweike.com/lecture2/29362708
阅读更多...
【Redis】深入理解 Redis 常用数据类型源码及底层实现(3.详解String数据结构)

【Redis】深入理解 Redis 常用数据类型源码及底层实现(3.详解String数据结构)

【Redis】深入理解 Redis 常用数据类型源码及底层实现&#xff08;1.结构与源码概述&#xff09;-CSDN博客 【Redis】深入理解 Redis 常用数据类型源码及底层实现(2.版本区别dictEntry & redisObject详解)-CSDN博客 紧接着前两篇的总体介绍&#xff0c;从这篇开始&#x…
阅读更多...
Android 环境搭建

Android 环境搭建

1、桥接工具安装 网站地址&#xff1a;AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 使用安装包&#xff1a; adb 查看当前链接成功的设备&#xff1a;adb devices 使用adb shell指令来进入到手机的后台&#xff1a;
阅读更多...
dddddddddddddddddddd

dddddddddddddddddddd

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 磁盘满的本质分析 专栏&#xff1a;《Linux从小白到大神》 | 系统学习Linux开发、VIM/GCC/GDB/Make工具…
阅读更多...
什么是路由器公网IP？

什么是路由器公网IP？

路由器公网IP是指路由器在互联网上的唯一标识&#xff0c;用于区分不同的网络设备。在互联网连接中&#xff0c;每个设备都需要一个公网IP地址才能与外部网络进行通信。路由器公网IP的获取和使用对于网络连接和数据传输非常重要。 路由器公网IP的获取方式 通常&#xff0c;路由…
阅读更多...
Spring第三天

Spring第三天

一、AOP 1 AOP简介 问题导入 问题1&#xff1a;AOP的作用是什么&#xff1f; 问题2&#xff1a;连接点和切入点有什么区别&#xff0c;二者谁的范围大&#xff1f; 问题3&#xff1a;请描述什么是切面&#xff1f; 1.1 AOP简介和作用【理解】 AOP(Aspect Oriented Progra…
阅读更多...
Qt网络编程-写一个简单的网络调试助手

Qt网络编程-写一个简单的网络调试助手

环境 Windows&#xff1a;Qt5.15.2&#xff08;VS2022&#xff09; Linux&#xff1a;Qt5.12.12&#xff08;gcc) 源代码 TCP服务器 头文件&#xff1a; #ifndef TCPSERVERWIDGET_H #define TCPSERVERWIDGET_H #include <QWidget> namespace Ui { class TCPServerW…
阅读更多...
单片机的省电模式及策略

单片机的省电模式及策略

目录 一、单片机省电的核心策略 二、单片机IO口的几种模式 三、单片机的掉电运行模式 &#xff08;1&#xff09; 浅谈cpu运行为什么会需要时钟&#xff1f; &#xff08;2&#xff09;STC15系列单片机内部可以配置时钟 &#xff08;3&#xff09;分频策略&#xff0c;降低…
阅读更多...
ubuntu22.04 安装部署05：禁用默认显卡驱动

ubuntu22.04 安装部署05：禁用默认显卡驱动

一、相关文章 ubuntu22.04安装部署03&#xff1a; 设置root密码-CSDN博客 《ubuntu22.04装部署01&#xff1a;禁用内核更新》 《ubuntu22.04装部署02&#xff1a;禁用显卡更新》 二、场景说明 Ubuntu22.04 默认显卡驱动&#xff0c;如果安装cuda&#xff0c;需要单独安装显…
阅读更多...
什么是向量数据库？为什么向量数据库对LLM很重要？

什么是向量数据库？为什么向量数据库对LLM很重要？

由于我们目前生活在人工智能革命之中&#xff0c;重要的是要了解许多新应用程序都依赖于向量嵌入&#xff08;vector embedding&#xff09;。因此&#xff0c;有必要了解向量数据库以及它们对 LLM 的重要性。 我们首先定义向量嵌入。向量嵌入是一种携带语义信息的数据表示形式…
阅读更多...
了解海外云手机的多种功能

了解海外云手机的多种功能

随着社会的高度发展&#xff0c;海外云手机成为商家不可或缺的工具&#xff0c;为企业出海提供了便利的解决方案。然而&#xff0c;谈及海外云手机&#xff0c;很多人仍不了解其强大功能。究竟海外云手机有哪些功能&#xff0c;可以为我们做些什么呢&#xff1f; 由于国内电商竞…
阅读更多...
树与二叉树---数据结构

树与二叉树---数据结构

树作为一种逻辑结构&#xff0c;同时也是一种分层结构&#xff0c;具有以下两个特点&#xff1a; 1&#xff09;树的根结点没有前驱&#xff0c;除根结点外的所有结点有 且只有一个前驱。 2&#xff09;树中所有结点可以有零个或多个后继。 树结点数据结构 满二叉树和完全二…
阅读更多...
Vue3编写简单的App组件(二)

Vue3编写简单的App组件(二)

一、Vue3页面渲染基本流程 1、入口文件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><link rel"icon" href"/favicon.ico"><meta name"viewport" content"widthde…
阅读更多...
最新文章

Copyright @ 2022~2023