WPF控件-ItemsControl

介绍

ItemsControl是用于展示一组项的控件。我们常见的列表(ListBox)、数据表格(DataGrid)等都是继承自ItemsControl。可用于自定义样式展示各种批量的数据集合。

在这里插入图片描述

常见使用示例:

<ItemsControl ItemsSource="{Binding Items}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate DataType="{x:Type xxClass}"><TextBlock Width="268" Margin="8" Text="{Binding Name}"/></DataTemplate></ItemsControl.ItemTemplate></ItemsControl>

ItemsControl用法

设置布局控件

在ItemsControl.ItemsPanel中定义使用的布局控件,作为ItemsControl中的基础布局控件。

常用的布局控件:

  • StackPanel
  • WrapPanel
  • Canvas

示例:

使用Stackpanel作为布局容器,可以设置他排序的方向等等。

 <ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel Orientation="Horizontal" /></ItemsPanelTemplate></ItemsControl.ItemsPanel>

设置ItemTemplate项模版

获取或设置用来显示每个项的 DataTemplate。

ItemsControl.ItemTemplate中设置每一项的模版,项模版为DataTemplate数据对象模版类型,可以在<DataTemplate>下面设置自定义控件组合进行显示。

可以在DataTemplate中设置DataType属性为绑定的类型

示例:

<ItemsControl.ItemTemplate><DataTemplate DataType="{x:Type xxClass}"><TextBlock Width="268" Margin="8" Text="{Binding Name}"/></DataTemplate></ItemsControl.ItemTemplate>

设置ItemContainerStyle样式

设置应用于为每个项生成的容器元素的 Style。使用ItemContainerStyle设置样式,修改数据项的元素的外观。

用途和示例

用于自定义项样式的数据集合,比如横向、竖向平铺的列表,根据位置生成的布局图。

自定义样式的列表

设置ItemsPanel布局控件为StackPanel,如果需要横向布局,则设置StackPanelOrientation="Horizontal".设置ItemTemplate里面为自己想展示的内容样式,并绑定对应的数据。

代码示例:

Xaml:

  <ItemsControl ItemsSource="{Binding DataItems}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate DataType="{x:Type local:DataModel}"><Border BorderBrush="Blue" BorderThickness="1"><TextBlockWidth="268"Margin="8"Text="{Binding Name}" /></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl>

数据模型类DataModel:

定义一个模型类,用于数据绑定

 public class DataModel{public int Id { get; set; }public string Name { get; set; }public string Desc { get; set; }}

ViewModel:

在ViewModel中创建添加测试数据

public class MainWindowViewModel : ObservableObject
{public ObservableCollection<DataModel> DataItems { get; set; }public MainWindowViewModel(){DataItems = new ObservableCollection<DataModel>();DataItems.Add(new DataModel { Id = 1, Name = "张三",Desc="Id:1,Name:张三" });DataItems.Add(new DataModel { Id = 2, Name = "李四", Desc = "Id:2,Name:李四" });DataItems.Add(new DataModel { Id = 3, Name = "王五", Desc = "Id:3,Name:王五" });}
}

实现的效果:

纵向:

在这里插入图片描述

横向:

在这里插入图片描述

自定义布局图

通过绑定坐标来实现自定义控件按照一定的布局进行摆放,可以用于开发一些组态软件,设备布局图等。

代码示例:

在此以Canvas控件作为布局控件示例,使用ItemContainerStyleCanvas.LeftCanvas.Top两个属性进行绑定

   <ItemsControl ItemsSource="{Binding DataItems}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><Canvas /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemContainerStyle><Style><Setter Property="Canvas.Left" Value="{Binding X}" /><Setter Property="Canvas.Top" Value="{Binding Y}" /></Style></ItemsControl.ItemContainerStyle><ItemsControl.ItemTemplate><DataTemplate DataType="{x:Type local:DataModel}"><Border BorderBrush="Blue" BorderThickness="1"><TextBlockWidth="268"Margin="8"Text="{Binding Name}"ToolTip="{Binding Desc}" /></Border></DataTemplate></ItemsControl.ItemTemplate></ItemsControl>

在数据模型中,增加X和Y两个坐标属性,用于位置绑定

在WPF界面中,坐标都以左上角为原点,Y轴向下为正向+,X轴向右为正向+

 public class DataModel{public int Id { get; set; }public string Name { get; set; }public string Desc { get; set; }public int X { get; set; }public int Y { get; set; }}

在ViewModel中增加x、y的测试数据

 public class MainWindowViewModel : ObservableObject{public ObservableCollection<DataModel> DataItems { get; set; }public MainWindowViewModel(){DataItems = new ObservableCollection<DataModel>();DataItems.Add(new DataModel{Id = 1,Name = "张三",Desc = "Id:1,Name:张三",X = 100,Y = 100,});DataItems.Add(new DataModel{Id = 2,Name = "李四",Desc = "Id:2,Name:李四",X = 200,Y = 200,});DataItems.Add(new DataModel{Id = 3,Name = "王五",Desc = "Id:3,Name:王五",X = 300,Y = 300,});}}

实现的效果:

在这里插入图片描述

只需要改变x,y的值,布局就可以改变

在这里插入图片描述

在这里插入图片描述

扩展

ListBoxListViewDataGrid作为ItemsControl的子类,ItemsControl的用法,完全适用于他们,并且还有他们自带的属性

ListBox

ListBoxListView他们继承于Selector,可以实现ItemsControl的功能之外,还自带了选择器功能的属性。

如下示例

        <ListBox ItemsSource="{Binding DataItems}"><ListBox.ItemsPanel><ItemsPanelTemplate><Canvas /></ItemsPanelTemplate></ListBox.ItemsPanel><ListBox.ItemContainerStyle><Style><Setter Property="Canvas.Left" Value="{Binding X}" /><Setter Property="Canvas.Top" Value="{Binding Y}" /></Style></ListBox.ItemContainerStyle><ListBox.ItemTemplate><DataTemplate DataType="{x:Type local:DataModel}"><Border BorderBrush="Blue" BorderThickness="1"><TextBlockWidth="268"Margin="8"Text="{Binding Name}"ToolTip="{Binding Desc}" /></Border></DataTemplate></ListBox.ItemTemplate></ListBox>

布局效果于ItemsControl一致,还可以对里面的项进行选择

在这里插入图片描述

其他

其他如ListView和DataGrid都自带其他属性,会显示一些其他东西如表头什么的,如果要使用,还需要更进一步设置样式。

ListView:

在这里插入图片描述

DataGrid:

还有多选选择器功能
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker进阶篇-Docker网络

一、描述 1、docker不启动&#xff0c;默认网络情况 查看网卡情况使用&#xff0c;ifconfig或者ip addr ens33&#xff1a;本机网卡 lo&#xff1a;本机回环网络网卡 virbr0:在CentoS 7的安装过程中如果有选择相关虚拟化的的服务安装系统后&#xff0c;启动网卡时会发现 …

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之QRCode组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、QRCode组件 用于显示单个二维码的组件。 子组件 无。 接口 QRCode(value: st…

C#中dll引用常见错误

当你在使用C#开发程序时&#xff0c;经常会遇到需要引用外部的dll文件来扩展程序的功能或者使用一些第三方库。然而&#xff0c;在引用这些dll文件的过程中&#xff0c;有时候会遇到一些问题&#xff0c;比如上面提到的错误信息&#xff1a;“未能加载文件或程序集“System.Run…

从零开始 TensorRT(4)命令行工具篇:trtexec 基本功能

前言 学习资料&#xff1a; TensorRT 源码示例 B站视频&#xff1a;TensorRT 教程 | 基于 8.6.1 版本 视频配套代码 cookbook 参考源码&#xff1a;cookbook → 07-Tool → trtexec 官方文档&#xff1a;trtexec 在 TensorRT 的安装目录 xxx/TensorRT-8.6.1.6/bin 下有命令行…

基于微信小程序的校园水电费管理小程序的研究与实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

SpringBoot项目打包成jar包供第三方使用实践

文章目录 1.使用者手动配置 basePackages1.1 第三方jar项目1.2 使用者项目1.2.1 使用者配置1.2.2 项目测试 2.使用者通过注解的方式引入2.1 第三方jar项目2.2 使用者项目2.2.1 使用者配置2.2.2 项目测试 3.SpringBoot Starter 方式3.1 第三方jar项目3.2 使用者项目3.2.1 使用者…

linux、windows 安装 vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统&#xff0c;提供&#xff1a; 通过 vue/cli 实现的交互式的项目脚手架。 通过 vue/cli vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (vue/cli-service) 可升级&#xff1b; 基于 webpack 构建&#…

【Linux操作系统】:Linux开发工具编辑器vim

目录 Linux 软件包管理器 yum 什么是软件包 注意事项 查看软件包 如何安装软件 如何卸载软件 Linux 开发工具 Linux编辑器-vim使用 vim的基本概念 vim的基本操作 vim正常模式命令集 插入模式 插入模式切换为命令模式 移动光标 删除文字 复制 替换 撤销 跳至指…

【Redis】字符串原理--简单动态字符串SDS

一.SDS定义 free 属性值为0&#xff0c;标识SDS没有分配任何未使用空间。len 属性值为5&#xff0c;标识SDS保存了一个5字节长度的字符串。buf 属性是一个char类型数组&#xff0c;数组的前5个字节保存了&#xff0c;R e d i s 五个字符&#xff0c;最后一个保存空字符串 \0…

Cassandra 命令大全

文章目录 1. 连接与基本操作2. 数据库管理3. 表&#xff08;Column Family&#xff09;操作4. 集群管理5. 权限管理6. 其他高级功能7. 条件查询与聚合操作8. 索引管理9. 用户权限和角色管理10. 安全性相关设置11. 一致性级别控制12. 用户定义类型 (UDTs)13. 用户定义函数 (UDFs…

【C生万物】C语言数据类型、变量和运算符

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

亚信安慧AntDB推动技术创新与满足用户需求

随着互联网技术的迅猛发展&#xff0c;大数据时代的到来&#xff0c;数据库的需求不断增长。在这样的背景下&#xff0c;国产分布式数据库正逐渐崭露头角&#xff0c;AntDB作为其中的重要代表&#xff0c;也积极参与到了这场竞争中。作为国内的技术创新者&#xff0c;AntDB不仅…

Solidworks 与 MATLAB 联合仿真

本文主要讲解了“MATLAB与SolidWorks的联合仿真怎么实现”&#xff0c;文中的讲解内容简单清晰&#xff0c;易于学习与理解&#xff0c;下面请大家跟着小编的思路慢慢深入&#xff0c;一起来研究和学习“MATLAB与SolidWorks的联合仿真怎么实现”吧&#xff01; 下载插件。 1、…

SpringBoot 登录检验JWT令牌 生成与校验

JWT官网 https://jwt.io/ 引入依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency>设置过期时间 LocalDateTime localDateTime LocalDateTime.now().…

Python flask 模板详解

文章目录 1 概述1.1 模板简介1.2 templates 文件1.3 简单应用 2 模板语法2.1 for 循环2.2 if 判断 3 模板的继承3.1 格式要求3.2 实现示例3.3 复用父模板的内容&#xff1a;super 1 概述 1.1 模板简介 定义&#xff1a;定义好的 html 文件&#xff0c;用于快速开发 web 页面J…

计算机毕业设计 | SSM 校园线上订餐系统(附源码)

1&#xff0c; 概述 1.1 项目背景 传统的外卖方式就是打电话预定&#xff0c;然而&#xff0c;在这种方式中&#xff0c;顾客往往通过餐厅散发的传单来获取餐厅的相关信息&#xff0c;通过电话来传达自己的订单信息&#xff0c;餐厅方面通过电话接受订单后&#xff0c;一般通…

Vue 上门取件时间组件

本文使用vue2.0elementui 制作一个上门取件时间组件&#xff0c;类似顺丰&#xff0c;样式如下&#xff1a; 大概功能&#xff1a;点击期望上门时间&#xff0c;下面出现一个弹框可以选择时间&#xff1a; 首先我们定义一些需要的数据&#xff1a; data() {return {isDropdown…

算法学习——LeetCode力扣链表篇1

算法学习——LeetCode力扣链表篇1 203. 移除链表元素 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 示例 …

计组学习笔记2024/2/4

1.计算机的发展历程 2.计算机硬件的基本组成 存储器 -> 就是内存. 3.各个硬件的部件 寄存器 -> 用来存放二进制数据. 各个硬件的工作原理视频留白,听完后边课程之后再来理解理解. 冯诺依曼计算机的特点: 1.计算机由五大部件组成 2.指令和数据以同等地位存于存储器,…

进程和线程的区别详解

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 进程 进程在系统中是如何管理的 进一步认识PCB 线程 能否一直增加线程数目来提高效率 进程和线程…