ToB企服应用市场:ToB评测及商务社交产业平台

标题: C# WPF入门学习主线篇（二十二）—— 样式（Styles）的定义和应用 [打印本页]
作者: 用户国营    时间: 2024-8-25 16:19
标题: 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 包含两个属性：

应用样式

要应用样式，可以使用 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4