ControlTemplate、Trigger与Storyboard

ControlTemplate通常用在Style中，Trigger通常作为ControlTemplate的一部分，StoryBoard表示动画效果，下面将通过对Button按钮设置这几项来简单说明这几项的用法。
在MainWindow中添加一个Button按钮；在Window段添加resource段，并在其中添加一个Style：

<Window x:Class="WpfControlTemplateTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfControlTemplateTest"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><ResourceDictionary><Style TargetType="Button"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter><Setter Property="Background" Value="LightGreen"></Setter><Setter Property="BorderThickness" Value="0"></Setter><Setter Property="Foreground" Value="White"></Setter></Style></ResourceDictionary></Window.Resources><Grid><Button Name="btn1" Content="btn1"></Button></Grid>
</Window>

此时的显示效果是这样的：

按钮样式改变了很多，但是很多时候我们都需要圆角按钮，为了让按钮变成圆角，我们需要设置按钮的Template属性。将下面的setter添加到我们的style中即可。

<Window x:Class="WpfControlTemplateTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfControlTemplateTest"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><ResourceDictionary><Style TargetType="Button"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter><Setter Property="Background" Value="LightGreen"></Setter><Setter Property="BorderThickness" Value="0"></Setter><Setter Property="Foreground" Value="White"></Setter><!--添加的代码--><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Border CornerRadius="10" Background="LightGreen"></Border><!--注意这里--><ContentPresenterContent="{TemplateBinding Content}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid></ControlTemplate></Setter.Value></Setter><!--到此为止--></Style></ResourceDictionary></Window.Resources><Grid><Button Name="btn1" Content="btn1"></Button></Grid>
</Window>

现在的显示效果：

通过使用ControlTemplate，可以定制化控件的模板样式。

WPF给我们提供了一个ContentPresenter，它的作用就是把原有模板的属性原封不动的投放到自定义模板中。

Trigger通常在ControlTemplate中定义，用来实现Hover、Press等效果。
比如，我们希望btn1在hover时，width变为200,（翻译成人话：鼠标悬停在按钮上的时候，按钮长度变为200）则可以在ControlTemplate段中添加下面代码：

<Window x:Class="WpfControlTemplateTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfControlTemplateTest"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><ResourceDictionary><Style TargetType="Button"><Setter Property="Width" Value="100"></Setter><Setter Property="Height" Value="40"></Setter><Setter Property="Background" Value="LightGreen"></Setter><Setter Property="BorderThickness" Value="0"></Setter><Setter Property="Foreground" Value="White"></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Border CornerRadius="10" Background="LightGreen"></Border><ContentPresenterContent="{TemplateBinding Content}"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid>//添加的代码<ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Width" Value="200"></Setter></Trigger></ControlTemplate.Triggers>//到此为止</ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary></Window.Resources><Grid><Button Name="btn1" Content="btn1"></Button></Grid>
</Window>

运行后的悬停前、悬停后效果对比：

此时，如果想为按钮的变化添加动画效果，就需要设置Storyboard。我们需要将ControlTemplate.Triggers段替换为如下代码：

<ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.15"></DoubleAnimation></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.1"></DoubleAnimation></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger>
</ControlTemplate.Triggers>

这里的DoubleAnimation指的是数字变化的动画，若需要颜色变化，则需要ColorAnimation。DoubleAnimation的Duration属性是一个时间，分别被设置了0.15秒和0.1秒。
运行效果：

此时，如果想为按钮的变化添加动画效果，就需要设置Storyboard。我们需要将ControlTemplate.Triggers段替换为如下代码：

<ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.15"></DoubleAnimation></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.1"></DoubleAnimation></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger>
</ControlTemplate.Triggers>

WPF入门第三篇 ControlTemplate、Trigger与Storyboard相关推荐

wpf入门第七篇使用Squirrel自动更新应用
前言本文是wpf入门系列第7篇,面向有winform或者web前端基础的.并且也有C#基础的同学. 本文简单的介绍了如何使用 Squirrel 来为 WPF 客户端进行自动检查更新. Squirr ...
WPF入门第四篇 WPF模板
WPF模板 1.ControlTemplate 上一篇已经试用过控件模板,我们知道WPF的控件都是继承自Control,在Control类中有一个Template属性,类型就是ControlTempl ...
Avalonia跨平台入门第三篇之Popup
前面已经分享了二篇关于Avalonia入门的文章,今天接着去摸索关于Popup的知识点;你还别说一上来就遇到坑了(后台定义的Popup直接黑框): 然而在WPF中没有出现这个Bug: 最后只能默默的再 ...
WPF入门第六篇 WPF的Binding
WPF的Binding 在传统的Windows软件中,大部分都是UI驱动程序的模式,也可以说事件驱动程序.WPF作为Winform的升级,它把UI驱动程序彻底改变了,核心回到了数据驱动程序的模式上面, ...
Java线程入门第三篇
Java内存模型(jmm) Why:保证多线程正确协同工作看图说明: 文字解释:线程a和线程b通信过程,首先线程a把本地内存的共享变量更新到主内存中,然后线程b去读取主内存的共享变量,最后更新到自己 ...
sql基于聚合结果集取最大值_SQL超入门第三篇：写给产品、运营、分析师的SQL教程...
序前两节我们给大家讲解了如何查询数据及过滤查询.但在平时工作中,大家不止需要对数据进行检索,更需要的应该是对数据进行汇总计算,比如计算销售额,订单量,用户数,客单价,求首单时间等.本节我们就给大家讲 ...
入门第三篇——坚持60秒
题目描述:菜狗发现最近菜猫不爱理他,反而迷上了菜鸡题目给的附件是一个jar包,如下图,运行后发现是一个游戏,题目的意思估计是让你玩这个有游戏,坚持60秒就能拿到flag. 游戏黑洞,坚持不了5秒就完 ...
java邮件接收代码,JavaMail入门第四篇接收邮件(示例代码)
上一篇JavaMail入门第三篇发送邮件中,我们学会了如何用JavaMail API提供的Transport类发送邮件,同样,JavaMail API中也提供了一些专门的类来对邮件的接收进行相关的操 ...
JavaMail入门第四篇接收邮件
上一篇JavaMail入门第三篇发送邮件中,我们学会了如何用JavaMail API提供的Transport类发送邮件,同样,JavaMail API中也提供了一些专门的类来对邮件的接收进行相关的操 ...

WPF入门第三篇 ControlTemplate、Trigger与Storyboard

ControlTemplate、Trigger与Storyboard

WPF入门第三篇 ControlTemplate、Trigger与Storyboard相关推荐

最新文章

热门文章