C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用 ...

C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用

欢迎来到C# WPF入门学习系列的第二十二篇。本篇文章将详细介绍WPF中的样式（Styles）的定义和应用。样式在WPF中起到重要作用，通过样式可以轻松地定义和复用控件的外观和行为，从而提高开辟效率和代码的可维护性。
什么是样式？

样式（Style）是用于定义控件外观和行为的集合。样式通常定义在XAML文件中，可以在多个控件中共享使用。样式可以包括各种属性的设置，如颜色、字体、边距等，以及触发器（Trigger），用于响应特定的事件或状态。
样式的定义

在WPF中，样式通常定义在XAML文件的资源字典中。以下是一个简单的样式定义示例：

1. <Window x:Class="WpfApp.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="Styles Demo" Height="300" Width="400">
5.     <Window.Resources>
6.         <!-- 定义一个按钮的样式 -->
7.         <Style x:Key="PrimaryButtonStyle" TargetType="Button">
8.             <Setter Property="Background" Value="Blue"/>
9.             <Setter Property="Foreground" Value="White"/>
10.             <Setter Property="Padding" Value="10"/>
11.             <Setter Property="FontSize" Value="16"/>
12.         </Style>
13.     </Window.Resources>
14.     <Grid>
15.         <Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
16.     </Grid>
17. </Window>

复制代码

在上面的代码中，我们在 Window.Resources 中定义了一个名为 PrimaryButtonStyle 的样式，并应用于一个按钮控件。
Setter的使用

Setter 用于设置控件的属性。每个 Setter 包含两个属性：

• Property：要设置的属性。
  
• Value：属性的值。
  

应用样式

要应用样式，可以使用 StaticResource 标志扩展引用样式：

1. <Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

复制代码

默认样式

如果盼望将样式应用于同一类型的全部控件，可以省略 x:Key，使样式成为默认样式：

1. <Window x:Class="WpfApp.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="Styles Demo" Height="300" Width="400">
5.     <Window.Resources>
6.         <!-- 定义一个按钮的默认样式 -->
7.         <Style TargetType="Button">
8.             <Setter Property="Background" Value="Blue"/>
9.             <Setter Property="Foreground" Value="White"/>
10.             <Setter Property="Padding" Value="10"/>
11.             <Setter Property="FontSize" Value="16"/>
12.         </Style>
13.     </Window.Resources>
14.     <Grid>
15.         <Button Content="Default Style Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
16.     </Grid>
17. </Window>

复制代码

在这个示例中，全部按钮控件将自动应用此样式。
基于现有样式创建新样式

WPF允许通过 BasedOn 属性基于现有样式创建新样式，从而实现样式的继承和扩展。比方：

1. <Window x:Class="WpfApp.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="Styles Demo" Height="300" Width="400">
5.     <Window.Resources>
6.         <!-- 定义基础按钮样式 -->
7.         <Style x:Key="BaseButtonStyle" TargetType="Button">
8.             <Setter Property="FontSize" Value="16"/>
9.             <Setter Property="Padding" Value="10"/>
10.         </Style>
12.         <!-- 定义继承基础样式的主按钮样式 -->
13.         <Style x:Key="PrimaryButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
14.             <Setter Property="Background" Value="Blue"/>
15.             <Setter Property="Foreground" Value="White"/>
16.         </Style>
18.         <!-- 定义继承基础样式的次按钮样式 -->
19.         <Style x:Key="SecondaryButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
20.             <Setter Property="Background" Value="Gray"/>
21.             <Setter Property="Foreground" Value="Black"/>
22.         </Style>
23.     </Window.Resources>
24.     <Grid>
25.         <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="10">
26.             <Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}"/>
27.             <Button Content="Secondary Button" Style="{StaticResource SecondaryButtonStyle}"/>
28.         </StackPanel>
29.     </Grid>
30. </Window>

复制代码

在这个例子中，我们定义了一个基础按钮样式 BaseButtonStyle，并基于它创建了两个新样式 PrimaryButtonStyle 和 SecondaryButtonStyle，实现了样式的继承和扩展。
使用触发器（Triggers）

触发器（Trigger）是样式的重要构成部分，用于响应控件状态的变革。常见的触发器有 PropertyTrigger 和 EventTrigger。
属性触发器（PropertyTrigger）

属性触发器用于在控件属性值发生变革时，执行某些操作。以下是一个简单的属性触发器示例：

1. <Window x:Class="WpfApp.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="Styles Demo" Height="300" Width="400">
5.     <Window.Resources>
6.         <!-- 定义带触发器的按钮样式 -->
7.         <Style x:Key="HoverButtonStyle" TargetType="Button">
8.             <Setter Property="Template">
9.                 <Setter.Value>
10.                     <ControlTemplate TargetType="Button">
11.                         <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="5">
12.                             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
13.                         </Border>
14.                         <ControlTemplate.Triggers>
15.                             <Trigger Property="IsMouseOver" Value="True">
16.                                 <Setter Property="Background" Value="Red"/>
17.                             </Trigger>
18.                         </ControlTemplate.Triggers>
19.                     </ControlTemplate>
20.                 </Setter.Value>
21.             </Setter>
22.             <Setter Property="Background" Value="Blue"/>
23.             <Setter Property="Foreground" Value="White"/>
24.             <Setter Property="Padding" Value="10"/>
25.             <Setter Property="FontSize" Value="16"/>
26.         </Style>
27.     </Window.Resources>
28.     <Grid>
29.         <Button Content="Hover Me" Style="{StaticResource HoverButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
30.     </Grid>
31. </Window>

复制代码

在这个例子中，当按钮被鼠标悬停时，触发器会改变按钮的配景颜色。
事件触发器（EventTrigger）

事件触发器用于响应控件的事件。以下是一个简单的事件触发器示例：

1. <Window x:Class="WpfApp.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="Styles Demo" Height="300" Width="400">
5.     <Window.Resources>
6.         <!-- 定义带事件触发器的按钮样式 -->
7.         <Style x:Key="ClickButtonStyle" TargetType="Button">
8.             <Setter Property="Background" Value="Blue"/>
9.             <Setter Property="Foreground" Value="White"/>
10.             <Setter Property="Padding" Value="10"/>
11.             <Setter Property="FontSize" Value="16"/>
12.             <Style.Triggers>
13.                 <EventTrigger RoutedEvent="Button.Click">
14.                     <BeginStoryboard>
15.                         <Storyboard>
16.                             <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
17.                                             To="Green" Duration="0:0:0.5" />
18.                         </Storyboard>
19.                     </BeginStoryboard>
20.                 </EventTrigger>
21.             </Style.Triggers>
22.         </Style>
23.     </Window.Resources>
24.     <Grid>
25.         <Button Content="Click Me" Style="{StaticResource ClickButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
26.     </Grid>
27. </Window>

复制代码

在这个示例中，当按钮被点击时，事件触发器会启动一个 Storyboard，通过 ColorAnimation 将按钮的配景颜色在0.5秒内渐变为绿色。
多个触发器

WPF样式还支持多个触发器的组合使用。以下是一个同时使用属性触发器和事件触发器的示例：

1. <Window x:Class="WpfApp.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="Styles Demo" Height="300" Width="400">
5.     <Window.Resources>
6.         <!-- 定义带多个触发器的按钮样式 -->
7.         <Style x:Key="AdvancedButtonStyle" TargetType="Button">
8.             <Setter Property="Background" Value="Blue"/>
9.             <Setter Property="Foreground" Value="White"/>
10.             <Setter Property="Padding" Value="10"/>
11.             <Setter Property="FontSize" Value="16"/>
12.             <Style.Triggers>
13.                 <!-- 属性触发器：鼠标悬停时改变背景颜色 -->
14.                 <Trigger Property="IsMouseOver" Value="True">
15.                     <Setter Property="Background" Value="Red"/>
16.                 </Trigger>
17.                 <!-- 事件触发器：点击时启动颜色动画 -->
18.                 <EventTrigger RoutedEvent="Button.Click">
19.                     <BeginStoryboard>
20.                         <Storyboard>
21.                             <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
22.                                             To="Green" Duration="0:0:0.5" />
23.                         </Storyboard>
24.                     </BeginStoryboard>
25.                 </EventTrigger>
26.             </Style.Triggers>
27.         </Style>
28.     </Window.Resources>
29.     <Grid>
30.         <Button Content="Advanced Button" Style="{StaticResource AdvancedButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
31.     </Grid>
32. </Window>

复制代码

在这个例子中，当按钮被鼠标悬停时，配景颜色会变成赤色；当按钮被点击时，配景颜色会在0.5秒内渐变为绿色。
总结

通过本文的学习，我们详细介绍了WPF中的样式（Styles）的定义和应用，包括静态样式、基于现有样式创建新样式、属性触发器和事件触发器的使用。样式是WPF中一个强大而机动的特性，可以帮助我们高效地管理和复用控件的外观和行为，提高开辟效率和代码的可维护性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。