浅谈WPF之各种Template

news2024/10/3 10:35:14

前几天写了一篇文章【浅谈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.coloradmin.cn/o/1240963.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【如何学习Python自动化测试】—— 多层窗口定位

【如何学习Python自动化测试】—— 多层窗口定位

6 、 多层窗口定位 多层窗口指的是在操作系统图形界面中&#xff0c;一个窗口被另一个窗口覆盖的情况。在多层窗口中&#xff0c;如何定位需要操作的窗口&#xff1f; 一种常见的方法是使用操作系统提供的AltTab快捷键&#xff0c;可以在打开的所有窗口中快速切换焦点。如果需要…
阅读更多...
JVM垃圾回收相关算法

JVM垃圾回收相关算法

目录 一、前言 二、标记阶段&#xff1a;引用计数算法 三、标记阶段&#xff1a;可达性分析算法 &#xff08;一&#xff09;基本思路 &#xff08;二&#xff09;GC Roots对象 四、对象的finalization机制 五、MAT与JProfiler的GC Roots溯源 六、清除阶段&#xff1a;…
阅读更多...
查看当前laravel版本三种方法（笔记二）

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

1、在终端中使用 Artisan 命令&#xff1a;在 Laravel 项目的根目录下&#xff0c;打开终端&#xff08;命令行界面&#xff09;&#xff0c;然后运行以下命令&#xff1a; php artisan --version 2、控制器中打印版本 var_dump(app()->version()); 3、在 Laravel 项目的根目…
阅读更多...
IDEA中 java: 警告: 源发行版 11 需要目标发行版 11 如何解决

IDEA中 java: 警告: 源发行版 11 需要目标发行版 11 如何解决

步骤1找到项目结构&#xff0c;下面有两种方式 步骤2找到 模块中对应的项目&#xff0c;修改对应的源的语言级别和依赖的模块SDK(M) 步骤3&#xff0c;启动一下&#xff0c;看有无问题&#xff0c; 步骤4&#xff0c;去文件-->设置-->构建、执行、部署-->编译器-->…
阅读更多...
品牌发力 · 韧性增长 | 数说故事亮相第30届中国国际广告节

品牌发力 · 韧性增长 | 数说故事亮相第30届中国国际广告节

11月16日-19日&#xff0c;由中国广告协会主办、厦门市政府支持的第30届中国国际广告节在厦门盛大举行。近千家参展企业和全国广告人、传媒人、品牌人相聚鹭岛&#xff0c;共同见证中国广告业的“高光时刻”。连续4天&#xff0c;20余场主题论坛分享会、12场大型活动、9项专业展…
阅读更多...
【每日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…
阅读更多...
SAP_ABAP_面试篇_关于Function Module函数的三种处理类型

SAP_ABAP_面试篇_关于Function Module函数的三种处理类型

关于 Function Module 这个技术点&#xff0c;在面试过程中一般会考察以下几个问题&#xff1a; 1 函数处理类型的更新模式 一般会问到异步和事务&#xff08;逻辑单元 LUW&#xff09;&#xff0c;异步函数的调试方式、SM13监控更新函数的执行过程&#xff08;V1 与 V2 模式…
阅读更多...
基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码

基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码

基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蛇优化优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络…
阅读更多...
mysql中数据是如何被用B+树查询到的

mysql中数据是如何被用B+树查询到的

innoDB是按照页为单位读写的 那页中有很多行数据&#xff0c;是怎么执行查询的呢&#xff0c;首先我们肯定&#xff0c;是以单向列表形式存储的&#xff0c;提高了增删的效率&#xff0c;但是查询效率低。所以实际上对页中的行数据进行了优化&#xff0c;能以二分的方式进行查…
阅读更多...
振南技术干货集：制冷设备大型IoT监测项目研发纪实（1）

振南技术干货集：制冷设备大型IoT监测项目研发纪实（1）

注解目录 1.制冷设备的监测迫在眉睫 1.1 冷食的利润贡献 1.2 冷设监测系统的困难 &#xff08;制冷设备对于便利店为何如何重要&#xff1f;了解一下你所不知道的便利店和新零售行业。关于电力线载波通信的论战。&#xff09; 2、电路设计 2.1 防护电路 2.1.1 强电防护 …
阅读更多...
一套开源、强大且美观的WPF UI控件库 - HandyControl

一套开源、强大且美观的WPF UI控件库 - HandyControl

前言 今天给大家推荐一套开源、强大且美观的WPF UI控件库&#xff1a;HandyControl。 WPF介绍 WPF 是一个强大的桌面应用程序框架&#xff0c;用于构建具有丰富用户界面的 Windows 应用。它提供了灵活的布局、数据绑定、样式和模板、动画效果等功能&#xff0c;让开发者可以创…
阅读更多...
外网IP和内网ip的区别

外网IP和内网ip的区别

首先得先知道什么是ip地址&#xff0c;它就是唯一标识连接网络的设备的&#xff0c;即IP地址充当了设备在网络中的“住址”&#xff0c;使得设备能够相互通信和交换数据。 我们常听开发人员说外网内网&#xff0c;那么它们有什么区别呢&#xff1f; 外网可以理解为互联网&…
阅读更多...
如何在Ubuntu的Linux系统中安装MySQL5.7数据库

如何在Ubuntu的Linux系统中安装MySQL5.7数据库

前往MySQL数据库官网链接地址下载5.7数据库。 MySQL :: Download MySQL Community Server (Archived Versions)使用ssh的可视化工具将下载的mysql-5.7.40-linux-glibc2.12-x86_64.tar.gz文件上传到Linux服务器&#xff0c;并解压文件 tar -zxvf mysql-5.7.40-linux-glibc2.12-x…
阅读更多...
c++学习之哈希

c++学习之哈希

目录 1.关于unordered系列关联式容器 2.关于unordered_map 3.哈希&#xff08;散列&#xff09;表的实现 一&#xff0c;直接定址法 二&#xff0c;除留余数法 方法一&#xff1a;闭散列&#xff1a;开放定址法 方法二&#xff1a;闭散列&#xff1a;哈希桶/拉链法 4.哈希…
阅读更多...
【python】python旅游网数据抓取分析(源码+论文)【独一无二】

【python】python旅游网数据抓取分析(源码+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
智能小车速通版——手把手教程

智能小车速通版——手把手教程

考虑到大部分学校&#xff0c;会发放简易小车来作为智能车初期培训和筛选的工具&#xff0c; 于是&#xff0c;我写一个简单的教程&#xff0c;能够实现简单小车的电磁循迹。 通过这个教程&#xff0c;能够通过简化的步骤搭建寻迹小车&#xff0c;进而了解整个智能车是如何实…
阅读更多...
【C++】：STL中的string类的增删查改的底层模拟实现

【C++】：STL中的string类的增删查改的底层模拟实现

本篇博客仅仅实现存储字符(串)的string 同时由于Cstring库设计的不合理&#xff0c;我仅实现一些最常见的增删查改接口 接下来给出的接口都是基于以下框架&#xff1a; private:char* _str;//思考如何不用constsize_t _size;size_t _capacity;//这样写可以const static size_t…
阅读更多...
redis性能管理

redis性能管理

redis的数据库是存放在内存当中&#xff0c;所以对内存的监控至关重要 redis内存监控和解析 1.如何查看redis内存使用情况 [rootlocalhost utils]# redis-cli -h 20.0.0.170 -p 6379 20.0.0.170:6379> info memory used_memory:853336 //redis中数据占用的内存 use…
阅读更多...
Can‘t open the append-only file: Permission denied

Can‘t open the append-only file: Permission denied

redis rdb aof-CSDN博客 Cant open the append-only file: Permission denied E:\Document_Redis_Windows\redis-2.4.5-win32-win64\64bit E:\Document_Redis_Windows\redis-2.4.5-win32-win64\64bit\redis.conf 还是不行&#xff0c;就要修改权限了&#xff0c;windows【完全控…
阅读更多...
Apache访问控制

Apache访问控制

服务器相关的访问控制 Options指令 Options指令是Apache服务器配置文件中的一个重要指令，它可以用于控制特定目录启用哪些服务器特性。Options指令可以在Apache服务器的核心配置、虚拟主机配置、特定目录配置以及.htaccess文件中使用。 以下是一些常用的服务器特性选项： N…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023