浅谈WPF之各种Template

前几天写了一篇文章【浅谈WPF之控件模板和数据模板】，有粉丝反馈说这两种模板容易弄混，不知道什么时候该用控件模块，什么时候该用数据模板，以及template和itemtemplate之间的关系等，今天专门写一篇文章，简述WPF中各种模板及其相互关系。仅供学习分享使用，如有不足之处，还请指正。

概述

在WPF中，一共有三种模板，分别如下：

  • 控件模板ControlTemplate，用来指定控件的呈现样式。
  • 数据模板DataTemplate，用来指定子项数据的呈现样式。
  • 子控件模板ItemsPanelTemplate，用来指定子项控件的布局样式。

模板与控件之间的关系

关于各个模板与控件之间的关系，如下图所示：

通过上图可以看出：

  1. Control拥有Template属性，是ControlTemplate类型，所有Control派生的子控件，都具有Template属性，都可以通过控件模板设置控件的样式。
  2. ContentControl拥有ContentTemplate属性，是DataTemplate类型，所有ContentControl派生的控件，都具有ContentTemplate属性，如Button，ListBoxItem，DataGridCell等。
  3. ItemsControl拥有ItemsTemplate属性，是DataTemplate类型，所有ItemsControl派生的控件，都具有ItemsTemplate属性，如ListBox，ComboBox，DataGrid，ListView等。
  4. ItemsControl拥有ItemsPanel属性，是ItemsPanelTemplate类型，所有ItemsControl派生的控件，都具有ItemsPanel属性，如ListBox，ComboBox，DataGrid，ListView等。
  5. Template，ContentTemplate，ItemsTemplate，ItemsPanel只是属性名称，而DataTemlate，ControlTemplate，ItemsPanelTemplate才是模板类型。

ControlTemplate控件模板详解

利用ControlTemplate可以彻底的颠覆控件的默认外观。<ControlTemplate>里面的内容就是视觉树VisualTree。
两个重要属性：

a）ContentPresenter

重定义控件模板，默认模板将会被覆盖，此时需要利用ContentPresenter，把原有模板的属性原封不动的投放到自定义模板中。

b）Triggers

触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。

控件模板示例

<Window x:Class="WpfApplication1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib"Title="MainWindow" Height="350" Width="525"><Window.Resources><ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}"><ControlTemplate.Resources><SolidColorBrush x:Key="redBrush" Color="Red"/></ControlTemplate.Resources><StackPanel><Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20"><Rectangle.Fill><SolidColorBrush Color="White"/></Rectangle.Fill></Rectangle><ContentPresenter/></StackPanel><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ResourceKey=redBrush}"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Window.Resources><Canvas><CheckBox Template="{StaticResource ResourceKey=rect}"  Content="我是CheckBox"/></Canvas>
</Window>

 

注意：<ContentPresenter Margin="{TemplateBinding Padding}" /> 实现了将模板中的Margin绑定到原控件中的Padding上去。

将控件模板写到样式里面，如下所示：

<Style x:Key="cbx" TargetType="{x:Type CheckBox}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type CheckBox}"><ControlTemplate.Resources><SolidColorBrush x:Key="redBrush" Color="Red"/></ControlTemplate.Resources><StackPanel><Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20"><Rectangle.Fill><SolidColorBrush Color="White"/></Rectangle.Fill></Rectangle><ContentPresenter/></StackPanel><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ResourceKey=redBrush}"></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

 

通过绑定样式资源，如下所示：

<CheckBox Style="{StaticResource ResourceKey=cbx}" Content="我是CheckBox"/>

 

c）ItemsPresenter

继承自ItemsControl的控件，有一个ItemsPanel属性作为集合元素承载容器。子元素ItemsPresenter负责呈现控件的任务。

只要把ItemsPresenter放在内部模板中，那么ItemsPresenter则会去检测父元素是否为集合控件，然后将ItemsPanel添加到其内部视觉树当中。

<Style x:Key="{x:Type ItemsControl}" TargetType="{x:Type ItemsControl}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ItemsControl}"><Border Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Padding="{TemplateBinding Padding}"SnapsToDevicePixels="true"><ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></Border></ControlTemplate></Setter.Value></Setter>
</Style>

 

比较常见的继承自ItemsControl的控件，比如ComboBox，ContextMenu，ListBox，DataGrid，ListView等。

DataTemplate数据模板详解

数据模板定义了数据的显示方式，也就是数据对象的可视结构。主要是可以自定义控件的同时进行数据绑定。

<Window x:Class="WpfApplication1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib"xmlns:src="clr-namespace:WpfApplication1"Title="MainWindow" Height="350" Width="525"><Window.Resources><ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/><DataTemplate x:Key="rect"><Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5"><StackPanel><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" Margin="5,0,0,0"/><TextBlock Text="{Binding Age}" Margin="5,0,0,0"/></StackPanel><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Address}" Margin="5,0,0,0"/></StackPanel></StackPanel></Border></DataTemplate></Window.Resources><Grid><ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"ItemTemplate="{StaticResource ResourceKey=rect}"></ListBox></Grid>
</Window>

 

注意：这里在调用时应该绑定的是 ItemTemplate 属性。 

ItemsPanelTemplate详解

首先我们要知道常见的条目控件有：ListBox，Menu，StatusBar等。

比如拿ListBox来说，ItemBox的ItemPanel其实是一个VisualizingStackPanel，就是说ListBox的每一项的排列方式是遵循StackPanel的

原则，也就是从上到下的排列方式。如果要实现从左到右排列：

<Window x:Class="WpfApplication1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib"xmlns:src="clr-namespace:WpfApplication1"Title="MainWindow" Height="350" Width="525"><Window.Resources><ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/><DataTemplate x:Key="rect"><Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5"><StackPanel><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" Margin="5,0,0,0"/><TextBlock Text="{Binding Age}" Margin="5,0,0,0"/></StackPanel><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Address}" Margin="5,0,0,0"/></StackPanel></StackPanel></Border></DataTemplate><ItemsPanelTemplate x:Key="items"><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/></ItemsPanelTemplate></Window.Resources><Grid><ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"ItemTemplate="{StaticResource ResourceKey=rect}" ItemsPanel="{StaticResource ResourceKey=items}"></ListBox></Grid>
</Window>

也就是说，ItemsPanelTemplate可以用来定义集合控件的容器外观。

总结

1、Template


控件模板，是指整个控件的展示和布局。
如ComboBox，可分为文本区域，下拉按钮区域，Items的Popup区域。
Template就是管理这些位置的布局。

2、ItemsPresenter


可以简单理解为占位符，在样式中使用，标记着这个区域用来展示该控件的Items。
如：ComboBox的下拉列表的可选项。
但是，只负责显示，而不能管理如何显示，如果我们要内容横向排列，就要用到ItemsPanel。

3、ItemsPanel


管理Items的排列方式，如，ComboBox默认是竖直排列的，我们要横着排列，只需要定义ItemsPanel为WrapPanel，就可以了。
这时候Items的排列方式已经完成，如果还要让ComboBox的每个项都重写，比如，背景、图标等，就要用到ItemContainerStyle。

4、ItemContainerStyle


就是每个项的样式，自己重写，就可以定制出每个项的样式了。

以上就是浅谈WPF之各种模板的全部内容。

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

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

相关文章

全局定制序列化

全局定制序列化

作用:将返回实体类中的属性如果为null 变成"" package com.example.micrweb.config;import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.databind.JsonSerializer; import com.fasterxml.jackson.databind.ObjectMapper; import com.f…
阅读更多...
vscode自动添加函数注释头插件使用方法

vscode自动添加函数注释头插件使用方法

前言 在我们使用vscode编写程序时&#xff0c;经常需要为新增的函数编写注释&#xff0c;这样一来就会耗费不少时间在函数注释头格式操作上。本文介绍使用vscode的函数注释头自动添加插件的使用方法&#xff0c;提高工作效率。 1 安装Doxygen Documentation Generator插件 1…
阅读更多...
代码规范之-理解ESLint、Prettier、EditorConfig

代码规范之-理解ESLint、Prettier、EditorConfig

前言 团队多人协同开发项目&#xff0c;困扰团队管理的一个很大的问题就是&#xff1a;无可避免地会出现每个开发者编码习惯不同、代码风格迥异&#xff0c;为了代码高可用、可维护性&#xff0c;需要从项目管理上尽量统一和规范代码。理想的方式需要在项目工程化方面&#xff…
阅读更多...
前端实现表格生成序号001、002、003自增

前端实现表格生成序号001、002、003自增

我们最终想要实现的效果如图&#xff0c;从后端获取数据之后&#xff0c;不使用data中的id&#xff0c;而是使用自己生成的按照顺序自增的序号id。 script <template><el-table :data"sticker" border style"width: 100%" id"stickerList&q…
阅读更多...
本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

按照固有思维方式&#xff0c;深度学习的训练环节应该在云端&#xff0c;毕竟本地硬件条件有限。但事实上&#xff0c;在语音识别和自然语言处理层面&#xff0c;即使相对较少的数据量也可以训练出高性能的模型&#xff0c;对于预算有限的同学们来说&#xff0c;也没必要花冤枉…
阅读更多...
网络渗透测试（wireshark 抓取QQ图片）

网络渗透测试（wireshark 抓取QQ图片）

1.打开wireshark 这里我用的wifi连接 所以点开wifi就好 打开wifi之后就开始在本机上进行抓包了 我们先给我们的QQ发送一张图片&#xff0c;用自己的手机发送给电脑 然后点击左上角的正方形&#xff0c;停止捕获抓包 QQ的关键词是oicq&#xff0c;所以我们直接找 打开oicq …
阅读更多...
逸学java【初级菜鸟篇】9.3 Stream流

逸学java【初级菜鸟篇】9.3 Stream流

hi&#xff0c;我是逸尘&#xff0c;一起学java吧 得益于Lambda所带来的函数式编程&#xff0c;引入了一个全新的Stream流概念&#xff08;就是都基本使用lambda的形式&#xff09;。 流处理 我们首先理解什么是流处理&#xff0c;它类似于sql语句&#xff0c;可以执行非常复…
阅读更多...
【每日OJ —— 622. 设计循环队列】

【每日OJ —— 622. 设计循环队列】

每日OJ —— 622. 设计循环队列 1.题目&#xff1a;622. 设计循环队列2.解法2.1.解法讲解2.1.1.算法讲解2.1.2.代码实现2.1.3.提交通过展示 1.题目&#xff1a;622. 设计循环队列 2.解法 1.本题有很多解法&#xff1a;可以使用数组&#xff0c;单链表&#xff0c;双链表&#x…
阅读更多...
短期风速预测|LSTM|ELM|批处理（matlab代码）

短期风速预测|LSTM|ELM|批处理（matlab代码）

1主要内容 该程序是预测类的基础性代码&#xff0c;程序对河北某地区的气象数据进行详细统计&#xff0c;程序最终得到pm2.5的预测结果&#xff0c;通过更改数据很容易得到风速预测结果。程序主要分为三部分&#xff0c;分别是基于LSTM算法、基于ELM算法和基于LSTM和批处理组合…
阅读更多...
从零开始：Rust环境搭建指南

从零开始：Rust环境搭建指南

大家好&#xff01;我是lincyang。 今天&#xff0c;我们将一起探讨如何从零开始搭建Rust开发环境。 Rust环境搭建概览 Rust是一种系统编程语言&#xff0c;以其安全性、并发性和性能闻名。搭建Rust环境是学习和使用这一语言的第一步。 第一步&#xff1a;安装Rust Rust的…
阅读更多...
CSS画一条线

CSS画一条线

<p style"border: 1px solid rgba(0, 0, 0, 0.1);"></p> 效果&#xff1a;
阅读更多...
路由的控制与转发原理

路由的控制与转发原理

场景1&#xff1a;路由器收到数据包后&#xff0c;会根据数据包的目标IP地址&#xff0c;计算出目标网段&#xff0c;再确定终端设备的具体位置。这个过程中&#xff0c;还需要计算出接口&#xff0c;或数据包下一跳的地址。最终会生成一条路由&#xff0c;即路径&#xff0c;存…
阅读更多...
python实现鼠标实时坐标监测

python实现鼠标实时坐标监测

python实现鼠标实时坐标监测 一、说明 使用了以下技术和库&#xff1a; tkinter&#xff1a;用于创建GUI界面。pyperclip&#xff1a;用于复制文本到剪贴板。pynput.mouse&#xff1a;用于监听鼠标事件&#xff0c;包括移动和点击。threading&#xff1a;用于创建多线程&…
阅读更多...
PDF转Word，1行Python代码就够了，免费用

PDF转Word，1行Python代码就够了，免费用

大家好&#xff0c;这里是程序员晚枫。 今年十一假期没出去旅游&#xff0c;在家里更新一套原创课程&#xff0c;&#x1f449;给小白的《50讲Python自动化办公》。 所有功能&#xff0c;都只需要1行代码&#xff0c;非常适合非程序员入门Python使用。 目前全网播放量直逼100…
阅读更多...
二分查找——34. 在排序数组中查找元素的第一个和最后一个位置

二分查找——34. 在排序数组中查找元素的第一个和最后一个位置

文章目录 1. 题目2. 算法原理2.1 暴力解法2.2 二分查找左端点查找右端点查找 3. 代码实现4. 二分模板 1. 题目 题目链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣&#xff08;LeetCode&#xff09; 给你一个按照非递减顺序排列的整数数组 nums&#…
阅读更多...
2023年亚太杯数学建模思路 - 案例：粒子群算法

2023年亚太杯数学建模思路 - 案例：粒子群算法

文章目录 1 什么是粒子群算法&#xff1f;2 举个例子3 还是一个例子算法流程算法实现建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是粒子群算法&#xff1f; 粒子群算法&#xff08;Pa…
阅读更多...
查看当前laravel版本三种方法（笔记二）

查看当前laravel版本三种方法（笔记二）

1、在终端中使用 Artisan 命令&#xff1a;在 Laravel 项目的根目录下&#xff0c;打开终端&#xff08;命令行界面&#xff09;&#xff0c;然后运行以下命令&#xff1a; php artisan --version 2、控制器中打印版本 var_dump(app()->version()); 3、在 Laravel 项目的根目…
阅读更多...
帝国cms开发一个泛知识类的小程序的历程记录

帝国cms开发一个泛知识类的小程序的历程记录

#帝国cms小程序# 要开发一个泛知识类的小程序&#xff0c;要解决以下几个问题。 1。知识内容的分类。 2。知识内容的内容展示。 3。知识内容的价格设置。 4。用户体系&#xff0c;为简化用户的操作&#xff0c;在用户进行下载的时候&#xff0c;请用户输入手机号&#xff…
阅读更多...
④【Set】Redis常用数据类型： Set [使用手册]

④【Set】Redis常用数据类型： Set [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis Set ④Redis Set 操作命令汇总1. sadd …
阅读更多...
【Python】数据类型和切片的零碎知识点

【Python】数据类型和切片的零碎知识点

1. 数据类型 pow(a, b, c) # a^b % c print("happy {}".format(name))数字类型包括整数&#xff0c;浮点数&#xff0c;复数 0x9a表示十六进制数&#xff08;0x&#xff0c;0X开头表示十六进制&#xff09; 0b1010&#xff0c;-0B101表示二进制数&#xff08;0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发