WPF入门-4.样式

发表于

WPF 入门（四）：样式（Style）

样式的应用

WPF 样式的主要应用方式有以下几种：

1. 基于类型的样式（Type-based Style）

只设置 TargetType，不设置 x:Key。自动应用于该类型的所有控件。 

1
2
3
4
5
6
<Window.Resources>
	<Style TargetType="Button">
		<Setter Property="Background" Value="Orange"/>
	</Style>
</Window.Resources>
<!-- 所有 Button 都会自动应用该样式 -->

2. 基于键的样式（Keyed Style）

设置了 x:Key，只有通过 Style="{StaticResource ...}" 显式引用才会生效。 

1
2
3
4
5
6
<Window.Resources>
	<Style x:Key="RedButtonStyle" TargetType="Button">
		<Setter Property="Background" Value="Red"/>
	</Style>
</Window.Resources>
<Button Content="按钮" Style="{StaticResource RedButtonStyle}" />

3. 基于数据的样式（Data Style）

通过 DataType 属性为特定数据类型自动应用样式，常用于 DataTemplate。 

1
2
3
4
5
6
7
8
9
<Window.Resources>
	<DataTemplate DataType="{x:Type local:Person}">
		<StackPanel>
			<TextBlock Text="{Binding Name}"/>
			<TextBlock Text="{Binding Age}"/>
		</StackPanel>
	</DataTemplate>
</Window.Resources>
<!-- 绑定 Person 类型数据时自动应用该模板 -->

4. 基于条件的样式（Style with Trigger）

通过 Trigger、DataTrigger、EventTrigger 等，根据控件状态或数据动态改变样式。 

1
2
3
4
5
6
7
8
9
10
11
<Window.Resources>
	<Style TargetType="Button">
		<Setter Property="Background" Value="Gray"/>
		<Style.Triggers>
			<Trigger Property="IsMouseOver" Value="True">
				<Setter Property="Background" Value="Green"/>
			</Trigger>
		</Style.Triggers>
	</Style>
</Window.Resources>
<!-- 鼠标悬停时按钮背景变为绿色 -->

样式的继承（BasedOn）

WPF 支持样式继承，可以让一个样式基于另一个样式扩展或修改属性，避免重复代码。实现方式是使用 BasedOn 属性。

作用： - 复用已有样式的全部设置，只需补充或覆盖差异部分。 - 便于统一维护和风格扩展。

1. 显式样式的继承（继承有 x:Key 的样式）

通过 BasedOn="{StaticResource 样式键名}" 继承已有的显式样式。 

1
2
3
4
5
6
7
8
9
10
<Window.Resources>
	<Style x:Key="BaseButtonStyle" TargetType="Button">
		<Setter Property="FontSize" Value="16"/>
		<Setter Property="Foreground" Value="Blue"/>
	</Style>
	<Style x:Key="RedButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
		<Setter Property="Background" Value="Red"/>
	</Style>
</Window.Resources>
<Button Content="按钮" Style="{StaticResource RedButtonStyle}" />

2. 隐式样式的继承（继承类型样式）

通过 BasedOn="{StaticResource {x:Type 控件类型}}" 继承类型的隐式样式。 

1
2
3
4
5
6
7
8
9
10
11
12
<Window.Resources>
	<!-- 隐式样式：所有 Button 默认应用 -->
	<Style TargetType="Button">
		<Setter Property="FontSize" Value="16"/>
		<Setter Property="Foreground" Value="Blue"/>
	</Style>
	<!-- 继承类型样式 -->
	<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
		<Setter Property="Background" Value="Red"/>
	</Style>
</Window.Resources>
<Button Content="按钮" Style="{StaticResource MyButtonStyle}" />

MyButtonStyle 会继承所有 Button 的隐式样式设置，并额外设置背景色为红色。