WPF4 数据模板

数据模板

数据模板常用在3种类型的控件, 下图形式:
在这里插入图片描述
1.Grid这种列表表格中修改Cell的数据格式, CellTemplate可以修改单元格的展示数据的方式。

2.针对列表类型的控件, 例如树形控件,下拉列表,列表控件, 可以修改其中的ItemTemplate。

3.修改ContentTemplate, 例UserControl控件的数据展现形式。

示例1:

定义一个ListBox

<Grid><ListBox x:Name="list"></ListBox>
</Grid>

点击查看代码,添加元素内容
在这里插入图片描述

namespace WpfApp1
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();for (int i = 0; i < 10; i++) {list.Items.Add(new ListBoxItem(){Content = new TextBlock(){Text = i.ToString()}});}}}
}

运行结果:
在这里插入图片描述
添加色块

    <Grid><ListBox x:Name="list"><ListBoxItem><StackPanel Orientation="Horizontal"><Border Width="20" Height="20" Background="Red"/><TextBlock Margin="10,0" Text="red"/></StackPanel></ListBoxItem><ListBoxItem><StackPanel Orientation="Horizontal"><Border Width="20" Height="20" Background="Red"/><TextBlock Margin="10,0" Text="red"/></StackPanel></ListBoxItem><ListBoxItem><StackPanel Orientation="Horizontal"><Border Width="20" Height="20" Background="Red"/><TextBlock Margin="10,0" Text="red"/></StackPanel></ListBoxItem></ListBox></Grid>
</Window>

在这里插入图片描述

数据模板

我们希望定义一个数据模板,实现统一控制

<Grid><ListBox x:Name="list"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Border Width="20" Height="20" Background="Red"/><TextBlock Margin="10,0" Text="red"/></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox>
</Grid>

后台代码

namespace WpfApp1
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();List<int> test = new List<int>();for (int i = 0; i < 10; i++){test.Add(i);}list.ItemsSource = test;   }}
}

运行结果
在这里插入图片描述
此时,所有生成的数据,都是使用的同一模板

绑定

<Grid><ListBox x:Name="list"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Border Width="20" Height="20" Background="{Binding Code}"/><TextBlock Margin="10,0" Text="{Binding Name}"/></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox>
</Grid>

后台代码

public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();List<color> test = new List<color>(); test.Add(new color() { Code = "#FFB6C1",Name = "浅粉红" }); test.Add(new color() { Code = "#FFCOCB",Name ="粉红"}); test.Add(new color() { Code = "#DC143C", Name = "深红(猩红)" }); test.Add(new color() { Code = "#FFF0F5", Name = "淡紫红" }); list.ItemsSource = test;}public class color {public string Code { get; set; }public string Name { get; set; }}
}

运行结果
在这里插入图片描述
数据来驱动UI显示

示例2

<Grid><!--AutoGenerateColumns自动生成改为FALSE 防止有多余的列--><DataGrid x:Name="grid" AutoGenerateColumns="False"><DataGrid.Columns><DataGridTextColumn Binding="{Binding Code}" Header="Code"/><DataGridTextColumn Binding="{Binding Name}" Header="Name"/><DataGridTextColumn  Header="操作"/></DataGrid.Columns></DataGrid>
</Grid>

后台代码

public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();List<color> test = new List<color>(); test.Add(new color() { Code = "#FFB6C1",Name = "浅粉红" }); test.Add(new color() { Code = "#FFCOCB",Name ="粉红"}); test.Add(new color() { Code = "#DC143C",Name = "深红(猩红)" }); test.Add(new color() { Code = "#FFF0F5",Name = "淡紫红" });grid.ItemsSource = test;}public class color {public string Code { get; set; }public string Name { get; set; }}
}

运行结果
在这里插入图片描述
在列中 放 按钮的情况

<Grid><!--AutoGenerateColumns自动生成改为FALSE 防止有多余的列--><DataGrid x:Name="grid" AutoGenerateColumns="False"><DataGrid.Columns><DataGridTextColumn Binding="{Binding Code}" Header="Code"/><DataGridTextColumn Binding="{Binding Name}" Header="Name"/><!--添加数据模板--><DataGridTemplateColumn Header="操作"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel><Border Width="10" Height="10" Background="{Binding Code}"/><TextBox Margin="10,0" Text="{Binding Name}"/></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid>
</Grid>

运行结果
在这里插入图片描述
添加按钮

<Grid><!--AutoGenerateColumns自动生成改为FALSE 防止有多余的列--><DataGrid x:Name="grid" AutoGenerateColumns="False"><DataGrid.Columns><DataGridTextColumn Binding="{Binding Code}" Header="Code"/><DataGridTextColumn Binding="{Binding Name}" Header="Name"/><!--添加数据模板--><DataGridTemplateColumn Header="操作"><DataGridTemplateColumn.CellTemplate><DataTemplate><!--只允许有一个容器,所以需要一个容器包装多个按钮--><StackPanel Orientation="Horizontal"><Button Content="删除"/><Button Content="复制"/><Button Content="保存"/></StackPanel><!--<StackPanel><Border Width="10" Height="10" Background="{Binding Code}"/><TextBox Margin="10,0" Text="{Binding Name}"/></StackPanel>--></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid>
</Grid>

运行结果
在这里插入图片描述

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

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

相关文章

Python读取influxDB数据库(二)(influxDB2.X版本)

1. influxDB连接 首先在浏览器中输入influxDB的IP和端口&#xff0c;然后输入账号密码进入到influxDB数据库来进行数据的相关操作&#xff1a; 里面的bucket相当于sql中的数据库&#xff0c;_measurement相当于sql中的表 2. 获取influxDB数据库的token方法 3. 写查询语句来查询…

【C++学习】STL之空间配置器之一级空间配置器

文章目录 &#x1f4ca;什么是空间配置器✈STL 提供六大组件的了解&#x1f440;为什么需要空间配置器&#x1f44d;SGI-STL空间配置器实现原理&#x1f302;一级空间配置器的实现 &#x1f4ca;什么是空间配置器 空间配置器&#xff0c;顾名思义就是为各个容器高效的管理空间…

关于Developers网站的一些使用分享

Android Developers 官网使用分享 语音切换android studio 版本下载最新版本下载位置历史版本下载位置 android studio 版本和 AGP 对应关系API 和 android studio 版本和 AGP 对应关系android studio 版本android 版本API levelandroid.hardware.camera2 语音切换 Developers…

MySQL数据库-备份

数据的备份还原 导出&#xff1a;先对数据库进行备份&#xff0c;然后提取备份文件中的sql语句 导入&#xff1a; 方法一&#xff1a;创建和原始数据库同名的数据库&#xff0c;然后从备份文件中导出sql语句&#xff08;此方法不需要修改导出的sql语句&#xff09;&#xff…

C++名词解释

文章目录 1.实参与形参2.参数列表、初始化列表3.实例、方法、属性、构造器、访问器、设置器4.重写、重载、隐藏5.继承与多态原理6.三种初始化方法 1.实参与形参 实参与形参&#xff1a;调用函数时传递的是实际参数&#xff0c;被调函数里接收的是形式参数。 2.参数列表、初始化…

B. Getting Zero

这题可以使用bfs的做法&#xff0c;特记录在此。 x点到mod的操作数可以视为其最短路。于是可用宽搜从1到mod建图。 有边权为(x1)%mod 和&#xff08;2*x)%mod 两种边权。 所以每次求数x到mod的最下操作数变为到mod这个顶点的最小边数。 #include "bits/stdc.h" u…

Vue3引入高德地图js API 2.0

文章目录 前言一、地图加载1.本文准备环境2.引入库3.加载地图4.加载地图控件 二、POI搜索1.什么是poi搜索2.如何使用 三、绘制点标记与信息窗体1.场景描述2.案例3.信息窗体-链接路由跳转4.进阶-通过Marker自动触发标记点&#xff08;非鼠标手动点击&#xff09; 四、jsApi地图事…

ES6判断:当前数组对象里的所有的值是否都存在于另外一个数组里

介绍 判断当前数组里的值是否都存在于另一个数组里&#xff0c;这里需要用到ES6的 every()方法&#xff0c;及 includes()方法; every(): 用于判断数组中的每一项是否均符合条件&#xff0c;并返回一个布尔值&#xff0c;都符合返回 true&#xff0c;有一个不符合就返回 fals…

SQL-DML数据操纵语言(Oracle)

文章目录 DML数据操纵语言常见的字段属性字符型字段属性char(n)varchar2(n)/varchar(n) 数值型字段属性number([p],[s]int 日期型字段属性DATEtimestamp 如何查看字段属性增加数据INSERT快捷插入 删除数据DELETE修改数据UPDATE DML数据操纵语言 定义 是针对数据做处理&#xf…

vue-json-editor

版本&#xff1a;"vue-json-editor": "^1.4.3" &#xff08;1&#xff09;下载依赖&#xff0c;npm install vue-json-editor 或 yarn add vue-json-editor &#xff08;2&#xff09;使用 <div class"code-json-editor"><vue-json…

面试 Python 基础八股文十问十答第五期

面试 Python 基础八股文十问十答第五期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;怎样将字符串转换为小…

vscode 解决无法创建临时文件。

报错&#xff1a; Fatal error: cant create C:\Users???y\AppData\Local\Temp\ccqkCS9j.o: No such file or directory 右击此 电脑 -> 属性 打开 系统信息 -> 高级系统设置 系统属性 -> 高级 -> 环境变量 将temp 和 tmp 改为其它英文路径 只更改用户变量…

docker-MySQL 8 主从搭建

一.目录结构&#xff1a; 我是在/home目录下&#xff0c;建立个sql文件夹&#xff1a; 二、配置文件 1.mysql配置 mysql-master下.conf文件配置 ###### [mysqld] server-id1 # 启用二进制日志 log-binmaster-bin # 指定需要复制的数据库 binlog-do-dbtest_db # 指定二进制日…

【编译程序介绍】

文章目录 一、编译程序入门1. 什么是编译程序&#xff1f;2. 编译程序的作用3. 为什么需要编译程序&#xff1f;4. 编译过程概览 二、编译器与解释器的区别1. 编译器的工作原理2. 解释器的工作原理3. 主要区别4. 混合模式 三、编译过程详解1. 预处理&#xff08;Preprocessing&…

【STM32+HAL+Proteus】系列学习教程---RS485总线(收发仿真实现)

实现目标 1、掌握UART/USART/RS485等几个常见概念的区别 2、掌握RS485的逻辑电平、硬件接线等基础知识 3、具体实现目标&#xff1a;1、利用两个单片机组成RS485通信网络&#xff1b;2、两个单片机之间能实现正常收发数据。 一、串口、RS485等之间的关系 串口&#xff1a;是…

Redis入门到通关之数据结构解析-ZipList

文章目录 ☃️概述☃️ZipListEntry☃️Encoding编码☃️ZipList的连锁更新问题☃️总结 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与…

Leetcode 118 杨辉三角

目录 一、问题描述二、示例及约束三、代码方法一&#xff1a;数学 四、总结 一、问题描述 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。   在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 二、示例及约束 示例 1&#xff1a…

python中开发页面的两种方法:Qt Designer(PyQt图形化界面拖拽开发App界面)以及Django(开发Web应用框架)

一、开发独立的窗口&#xff0c;App的那种&#xff0c;可使用tkinter或者PyQt 使用PyQt时&#xff0c;里面有个工具Qt Designer&#xff0c;是一个可视化的界面设计工具&#xff0c;可以通过拖拽等方式来设计界面。下面就是Qt Designer的操作界面&#xff1a; 参考链接如下&am…

跨境电商测评攻略:如何安全有效地提升业绩?

跨境电商做久了&#xff0c;卖家都会陷入一个困境&#xff0c;到底是该坚持慢慢做好&#xff0c;还是要测评? 有卖家表示&#xff0c;美客多基本的操作如果熟练了之后&#xff0c;就不用在运营上费太多功夫 这时候要好好规划一下测评的事情&#xff0c;做美客多到最后你会发…

nohup的作用

在Linux系统中&#xff0c;nohup 是一个命令行工具&#xff0c;其全称是 “no hang up”&#xff08;不挂断&#xff09;。其主要作用是允许用户在一个终端会话中启动一个命令或程序&#xff0c;使得该命令或程序能够忽略挂断&#xff08;SIGHUP&#xff09;信号&#xff0c;并…