WPF 模板的详细使用教程

于 2024-09-02 22:46:26 发布
阅读量1.6k 收藏 14
点赞数 10
分类专栏： WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39604653/article/details/141832307
版权

WPF（Windows Presentation Foundation）中的模板是非常强大的工具，它允许开发人员自定义控件的外观和行为，而无需改变控件的功能。模板通常分为控件模板（ControlTemplate）和数据模板（DataTemplate）。下面是一个详细的使用教程。

1. 控件模板（ControlTemplate）

控件模板 用于定义控件的外观。通过控件模板，你可以完全重新定义控件的可视化结构，而不会改变其逻辑行为。

1.1 创建一个简单的控件模板

假设你有一个 Button 控件，你希望将它的外观更改为一个带有圆角和阴影效果的按钮。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <Window.Resources>
        <!-- 定义一个控件模板 -->
        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    CornerRadius="20" 
                    Padding="10"
                    Effect="DropShadowEffect">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Window.Resources>

    <Grid>
        <!-- 应用控件模板 -->
        <Button Template="{StaticResource RoundButtonTemplate}" 
                Background="LightBlue" 
                BorderBrush="Blue" 
                Content="Click Me!" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center"/>
    </Grid>
</Window>

在这个例子中：

  • ControlTemplate 定义了一个带有圆角和阴影效果的按钮外观。
  • TemplateBinding 用于绑定控件的现有属性（如 Background、BorderBrush）到模板中的相应元素。
  • ContentPresenter 是一个占位符，用于显示 Button 的 Content。
1.2 使用 Triggers 修改控件状态

你可以使用 Triggers 来响应控件的状态变化，如鼠标悬停、按下等。这里是如何使用 Triggers 修改按钮在不同状态下的外观。

<ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
    <Border x:Name="border" 
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            CornerRadius="20" 
            Padding="10">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="border" Property="Background" Value="LightGreen"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="border" Property="Background" Value="LightCoral"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

在这个例子中：

  • 当鼠标悬停在按钮上时，Background 会变为 LightGreen。
  • 当按钮被按下时，Background 会变为 LightCoral。
1.3 定义主题风格的控件模板

你可以定义应用程序范围内的主题风格，使得所有特定类型的控件都使用同一个模板。例如：

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}" 
                            CornerRadius="10" 
                            Padding="10">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
</Window.Resources>

这将应用到所有 Button 控件，使它们具有一致的样式。

2. 数据模板（DataTemplate）

数据模板 用于自定义数据绑定控件（如 ListBox、ListView、ComboBox 等）的显示格式。

2.1 基本数据模板

假设你有一个简单的 ListBox，其中绑定了一个 Person 对象列表，并且你希望每个 Person 的名字和年龄以自定义的方式显示。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

public MainWindow()
{
    InitializeComponent();

    List<Person> people = new List<Person>
    {
        new Person { Name = "John Doe", Age = 30 },
        new Person { Name = "Jane Smith", Age = 25 },
        new Person { Name = "Sam Brown", Age = 35 }
    };

    listBox.ItemsSource = people;
}

在 XAML 中定义数据模板：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <ListBox x:Name="listBox" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Age}" FontStyle="Italic"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

在这个例子中：

  • DataTemplate 定义了 ListBox 中每个 Person 项的外观。
  • TextBlock 绑定到 Name 和 Age 属性，并以不同的字体样式显示。
2.2 数据模板选择器（DataTemplateSelector）

有时你可能需要根据数据的不同类型或属性来选择不同的数据模板。为此，可以使用 DataTemplateSelector。

首先，定义数据模板选择器类：

public class AgeTemplateSelector : DataTemplateSelector
{
    public DataTemplate YoungTemplate { get; set; }
    public DataTemplate OldTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var person = item as Person;
        if (person != null)
        {
            return person.Age < 30 ? YoungTemplate : OldTemplate;
        }
        return base.SelectTemplate(item, container);
    }
}

然后，在 XAML 中使用这个选择器：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <Window.Resources>
        <!-- 定义不同的DataTemplate -->
        <DataTemplate x:Key="YoungTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}" Foreground="Green" FontWeight="Bold"/>
                <TextBlock Text="{Binding Age}" FontStyle="Italic"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="OldTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}" Foreground="Red" FontWeight="Bold"/>
                <TextBlock Text="{Binding Age}" FontStyle="Italic"/>
            </StackPanel>
        </DataTemplate>

        <!-- 定义TemplateSelector -->
        <local:AgeTemplateSelector x:Key="AgeSelector"
                                   YoungTemplate="{StaticResource YoungTemplate}"
                                   OldTemplate="{StaticResource OldTemplate}"/>
    </Window.Resources>
    
    <Grid>
        <ListBox x:Name="listBox" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200"
                 ItemTemplateSelector="{StaticResource AgeSelector}"/>
    </Grid>
</Window>

在这个示例中：

  • AgeTemplateSelector 根据 Person 的年龄选择不同的数据模板。
  • 年轻的 Person 项会以绿色显示名字，而年长的则以红色显示。

3. 项目模板（ItemsPanelTemplate）

项目模板允许你自定义数据控件（如 ListBox、ListView 等）的项目布局方式。例如，你可以使用 ItemsPanelTemplate 将 ListBox 的默认垂直堆叠布局更改为水平排列。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <ListBox x:Name="listBox" HorizontalAlignment="Center" VerticalAlignment="Center" Width="350" Height="100">
           

 <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Gray" BorderThickness="1" Margin="5">
                        <TextBlock Text="{Binding Name}" Padding="10"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

在这个例子中，ItemsPanelTemplate 将 ListBox 项目排列成水平布局。

4. 模板绑定（TemplateBinding）与数据绑定

在模板中，你可以使用 TemplateBinding 绑定到控件的属性，也可以使用 Binding 绑定到数据上下文。

  • TemplateBinding：用于在模板中绑定控件本身的属性。
  • Binding：用于在模板中绑定数据上下文（如 DataTemplate 中的数据）。
<ControlTemplate TargetType="Button">
    <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
        <ContentPresenter Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
    </Border>
</ControlTemplate>

在这个例子中：

  • TemplateBinding Background 绑定到 Button 的 Background 属性。
  • Binding Content 绑定到控件的数据上下文，即 Button 的 Content 属性。

5. 自定义控件与模板

在创建自定义控件时，你可以定义默认的控件模板。以下是一个简单的自定义控件示例：

public class CustomButton : Button
{
    static CustomButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), new FrameworkPropertyMetadata(typeof(CustomButton)));
    }
}

在 XAML 中定义默认的控件模板：

<Style TargetType="{x:Type local:CustomButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomButton}">
                <Border Background="{TemplateBinding Background}" CornerRadius="10">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这将使你的自定义按钮控件在使用时自动应用此模板。

总结

WPF 中的模板是定义控件外观和行为的强大工具。通过 ControlTemplate，你可以完全自定义控件的外观，而 DataTemplate 允许你定义如何展示数据项。使用模板和绑定，结合 Triggers、ItemsPanelTemplate 等功能，你可以创建高度可定制和动态响应的用户界面。

生命不息-学无止境
关注
专栏目录
WPF模板
yonglixiangban的专栏
04-19 1421
模板允许定制一个元素的可视化树，而不影响他的功能。可视化树区别于逻辑树，逻辑树是控件元素之间的树状关系，而可视化树聚焦于一个元素的内部。模板的类型包括DataTemplate、ControlTemplate和ItemsPanelTemplate。 以ContentControl为例，它的ContentTemplate属性是DataTemplate类型，决定数据长成什么样子（数据显示结构）；它的Template属性是ControlTemplate类型，决定控件本身长成什么样子...
WPF 基础视频教程（共50集）-3.只使用代码创建WPF应用程序
02-12
本教程将专注于使用C#编程语言，仅通过代码来创建WPF应用程序。这种方式对开发者来说更加灵活，尤其在自动化或者动态构建UI时更为适用。 在WPF中，我们不使用XAML（Extensible Application Markup Language）文件，...
WPF教程（二） WPF vs WinForms
刺猬的优雅
09-21 8131
在前面的章节，我们讨论了WPF是什么，还涉及了一点点WinForms。在本章节，我将尝试比较两者，尽管它们服务的目的一样，却存在很多的区别。如果你以前从来没有接触过WinForms，或者WPF是你学习的第一种GUI框架，请跳过这一章节。但是如果你有兴趣的话，不妨尝试一读。 先说说两者最重要的区别。WinForms只是标准窗体控件顶部的一层（如文本框），而WPF从零开始，几乎在所有场景下都不依赖于
8天入门wpf—— 第四天 模板
weixin_34301307的博客
06-28 155
      今天说下wpf中的模板，前面一篇中我们讲到了style，但是style所能做的仅仅是在现有控件的基础上进行修修补补，但是如果我们想 彻底颠覆控件样式，那么我们就必须使用这一篇所说的模板。    老外写书都喜欢在篇头搞一个类图，方便我们宏观认识，这里我也上一个。 一：控件模板 1：ControlTemplate    我们知道wpf的控件都是继承自Control，在Cont...
WPF 数据模板
weixin_30678821的博客
09-27 284
数据模板实质上也是以内容模板为基础，在数据模板中，是对内容模板重复的显示，以达到迭代显示数据的作用，所以在数据模板中，可以添加呈现数据的任意元素。能够添加数据模板的元素，主要是继承自ItemsControl类的控件，通过控件的ItemTemplate属性来支持，比如我们常用的ListBox和ComboBox控件。案例如下： 创建一个学生类： public class Student ...
WPF 模板(Template)
lvxingzhe3的博客
04-04 3992
WPF 模板(Template)
wpf教程
weixin_38660590的博客
07-17 887
https://blog.csdn.net/fwj380891124/article/details/8194190 http://www.bamn.cn/course/lesson/133# https://blog.csdn.net/qq_22441525/article/details/52710621?locationNum=2
WPF.rar_ListView_WPF_wpf 教程_wpf教程_wpf教程pdf
09-19
ListView是WPF中一个非常重要的控件，它允许你展示多列数据，并且可以自定义视图模式，如列表视图、详细信息视图、图标视图等。ListView的强大之处在于其灵活性，可以通过模板和样式来定制显示效果。 **ListView的...
WPF.rar_WPF_wpf 教程_wpf入门教程_wpf开发入门_wpf教程
09-20
压缩包中的"WPF.pdf"文档详细介绍了这些知识点，为初学者提供了一个全面的指南。通过学习这个教程，开发者将能够掌握WPF的基本概念和技术，从而开始创建功能丰富的Windows桌面应用程序。无论是个人项目还是企业级...
wpf经典入门教程.pdf
12-22
WPF使用XAML（Extensible Application Markup Language）来定义用户界面，这是一种XML标记语言，允许开发者以声明式的方式描述UI元素和它们的行为。如果你已经有C#编程基础，学习WPF将为你打开一扇通向现代桌面应用...
WPF 超炫界面模板
03-19
ModernUI.1.0.4.win8极简化界面设计.用户可以基于ModernUI来构造一个非常通用的、插件化的WPF开发框架，有兴趣的朋友可以下载使用！
漂亮的WPFUI模板
11-29
一款漂亮好用的WPFUI模板，可以换肤，使用简单。效果图详见：http://blog.csdn.net/ljf5566/article/details/41598269
WPF开发教程
11-07
WPF新手入门必备，提供 Windows Presentation Foundation (WPF) 类层次结构的指导教程，涵盖了 WPF 的大部分主要子系统，并描述它们是如何交互的。
WPF入门指南教程.pdf
04-17
WPF入门教程，也是从别的地方花钱下下来的，放在CSDN为所需要的朋友提供帮助。
WPF全套基础视屏教程
04-01
### WPF全套基础视频教程知识点概述 #### 一、WPF简介与安装配置 - **WPF（Windows Presentation Foundation）**：是微软提供的一套用于创建Windows客户端应用程序的框架，它利用了DirectX硬件加速技术，能够实现...
WPF 基础入门 （模板）
最新发布
^@^lemon tea^@^
01-08 787
WPF 基础入门 （模板）
WPF入门教程
liuzhe147的博客
07-05 317
https://www.cnblogs.com/chillsrc/p/4464023.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生命不息-学无止境

你的每一份支持都是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值