avatar

目錄
WPF学习笔记(二)资源与触发器

WPF学习笔记(二)资源与触发器

一、WPF资源

WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用。而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一样,尽管我们可以在每个控件中定义格式,但是如果多个控件都应用了多个格式的时候,我们就可以把这些格式封装成格式,然后在资源中定义这个格式,之前如果用到这个格式就可以直接使用这个样式,从而达到重用格式的手段。从中可以发现,WPF资源和WPF样式是相关的,我们经常把样式定义在资源中。

1.1 资源基础介绍

我们可以在代码中创建和操作资源,但通常都是以XAML标签的形式定义资源的。

具体的XAML代码如下所示:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Window x:Class="WpfApp1.Execise"
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:WpfApp1"
mc:Ignorable="d"
Title="Execise" Height="450" Width="800">
<!--定义资源-->
<Window.Resources>
<SolidColorBrush x:Key="Button1" Color="Red" />
</Window.Resources>

<Grid>
<!--通过资源key来对资源进行使用-->
<Button Foreground="{StaticResource Button1}" Width="100" Height="100" Content="Hello"/>
</Grid>
</Window>

效果图如下:

1.2 静态资源和动态资源的区别

为了使用XAML标记中的资源,需要一种引用资源的方法,可以通过两个标记来进行引用资源:一个用于静态资源,另一个用于动态资源。在上面的XAML中,我们引用的方式就是静态资源的引用方式,因为我们指定了StaticResource。

对于静态资源在第一次创建窗口时,一次性地设置完毕;而对于动态资源,如果发生了改变,则会重新应用资源。

例子:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Window.Resources>
<SolidColorBrush x:Key="RedBrush" Color="Red"></SolidColorBrush>
</Window.Resources>

<StackPanel Margin="5">
<Button Background="{StaticResource RedBrush}" Margin="5" FontSize="14" Content="Use a Static Resource"/>
<Button Background="{DynamicResource RedBrush}" Margin="5" FontSize="14" Content="Use a Dynamic Resource"/>
<Button Margin="5" FontSize="14" Content="Change the RedBrush to Yellow" Click="ChangeBrushToYellow_Click"/>
</StackPanel>

<!--后台代码-->
private void ChangeBrushToYellow_Click(object sender, RoutedEventArgs e)
{
// 改变资源
this.Resources["RedBrush"] = new SolidColorBrush(Colors.Yellow);
}

点击按钮,只会改变动态引用资源的背景色,静态资源并没有改变。效果图如下:

1.3 资源字典

每个Resources属性存储着一个资源字典集合。如果希望在多个项目之间共享资源的话,就可以创建一个资源字典。

资源字段是一个简单的XAML文档,该文档就是用于存储资源的,可以通过右键项目->添加资源字典的方式来添加一个资源字典文件:

Code
1
2
3
4
5
6
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1">
<SolidColorBrush x:Key="blueBrush" Color="Blue"/>
<FontWeight x:Key="fontWeight">Bold</FontWeight>
</ResourceDictionary>

为了使用资源字典,需要将其合并到应用程序中资源集合位置,当然你也可以合并到窗口资源集合中,但是通常是合并到应用程序资源集合中,因为资源字典的目的就是在于多个窗体中共享,具体的XAML代码如下所示:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="Execise.xaml">
<Application.Resources>
<!--合并资源字典到Application.Resources中-->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

使用方式与引用资源的方式是一样的:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Window x:Class="WpfApp1.Execise"
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:WpfApp1"
mc:Ignorable="d"
Title="Execise" Height="450" Width="800">

<Window.Resources>
<SolidColorBrush x:Key="RedBrush" Color="Red"></SolidColorBrush>
</Window.Resources>

<StackPanel Margin="5">
<!--使用资源字典中定义的资源-->
<Button Margin="10" Background="{StaticResource blueBrush}" Content="Blue Button" FontWeight="{StaticResource fontWeight}"/>
</StackPanel>
</Window>

最终运行效果如下:

二、触发器Trigger

触发器,应用属性值或有条件地执行操作;
1)触发源:控件;
2)触发条件:某属性为某个值,或执行某个事件时;
3)执行操作:更改某个属性值或执行某个事件;

触发器是通过Style.Triggers集合链接到样式。每个样式都可以有任意多个触发器,而且每个触发器都是System.Windows.TriggerBase的派生类的集合。

三、触发器的分类

1)根据触发器的触发条件,在 WPF 中,触发器的形态可以是:Trigger、DataTrigger、EventTrigger;

2)以及由 Trigger 延伸的 MultiTrigger 和由 DataTrigger 延伸的 MultiDataTrigger;

3.1 Trigger

Trigger 是最简单的触发器,主要用于监测依赖项属性的变化,然后使用设置器改变样式

实例:当鼠标移动到按钮时,按钮内容变为红色

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Window.Resources>
<Style x:Key="Buttonstyle" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="FontSize" Value="30" />
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>

<StackPanel Margin="5">

<Button Width="200" Height="100" Margin="10" Content="Hello WPF" Style="{StaticResource Buttonstyle}"/>

</StackPanel>

效果如下:

3.2 DataTrigger

该触发器使用数据绑定。与Trigger类似,只不过监视的是任意绑定数据的变化

3.3 EventTrigger

这是最复杂的触发器,当事件发生时,这种触发器应用动画

示例:触发一个动画事件,当鼠标移入的时候,字体变大

Code
1
2
3
4
5
6
7
8
9
10
<Style.Triggers>    
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<!--异步的动画-->
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" From="10" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>

效果如下:

3.4 MultiTrigger

与Trigger类似,但这种触发器联合了多个条件。只有满足了所有这些条件,才会启动触发器

示例代码:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Window.Resources>
<Style x:Key="Buttonstyle" TargetType="Button">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsFocused" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Red" />
<Setter Property="FontSize" Value="30"/>
</MultiTrigger.Setters>
</MultiTrigger>
<!--<Trigger Property="IsMouseOver" Value="True">
<Setter Property="FontSize" Value="30" />
<Setter Property="Foreground" Value="Red"/>
</Trigger>-->
</Style.Triggers>
</Style>
</Window.Resources>

当鼠标移入按钮,并获取焦点时,文字才会变红;效果如下:

3.5 MultiDataTrigger

联合多个数据触发器

链接…

B站视频:https://www.bilibili.com/video/av70392459?p=4

文章作者: Dylan
文章鏈接: https://www.faithlch.com/WPF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E4%BA%8C-%E8%B5%84%E6%BA%90%E4%B8%8E%E8%A7%A6%E5%8F%91%E5%99%A8.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論