![[good]](https://www.leo96.com/lib/layui/images/face/54.gif)
前言
本文是XAML基础系列第二篇,在此之前你可能需要大概了解:【WPF基础系列】XAML资源
正文
样式的简单使用
样式(Style)的用法类似于Web前端中的CSS,它设置一组属性值然后应用于元素上。任何派生自FrameworkElement或FrameworkContentElement的元素都可以设置样式。
创建样式最常见的方法是写在XAML资源中,因为样式也是一种资源。
下面是样式的创建与使用:
<Window.Resources>
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="50" />
<!--内边距-->
<Setter Property="Padding" Value="10" />
<!--背景色-->
<Setter Property="Background" Value="DeepSkyBlue" />
<!--前景色-->
<Setter Property="Foreground" Value="White" />
<!--边框粗细-->
<Setter Property="BorderThickness" Value="0" />
</Style>
</Window.Resources>
<StackPanel>
<Button Content="通过样式设置了外观" Style="{StaticResource myButtonStyle}"/>
</StackPanel>
创建:在Window的Resources中定义了一个Style,x:Key指定了该样式的唯一键,TargetType指定该样式是应用到哪种类型的元素。
使用:Button元素通过设置Style属性来应用指定的样式。上述示例通过StaticResource标记扩展来使用键为myButtonStyle的样式。
效果图:
样式的使用方式
1.隐式应用
隐式应用类似于CSS的标签选择器,声明样式时使用TaegetType指定要应用的元素类型,就可以将该样式应用到对应类型的元素上,如:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="10,5"/>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="按钮1"/>
<Button Content="按钮2"/>
</StackPanel>
将Style的TargetType设置为Button并省略x:Key属性,然后该样式会作用于范围内的所有Button类型元素。
效果图:
2.显式应用
显式应用类似于CSS的类选择器,声明样式时添加x:key属性,这时候样式不再隐式应用于TargetType指定的类型的元素,只有明确指定该样式的元素才会有效果。如:
<Window.Resources>
<Style x:Key="redButton" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="10,5"/>
</Style>
</Window.Resources>
<StackPanel Height="85">
<Button Content="应用了样式" Style="{StaticResource redButton}"/>
<Button Content="没应用样式"/>
</StackPanel>
要显示指定样式,需要使用{StaticResource}标记扩展把元素的Style属性设置为x:Key的值。
效果图:
3.通过代码方式
还有一种不太常用的方式,通过C#代码的方式应用,如:
XAML代码:
<Window.Resources>
<Style x:Key="redButton" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="10,5"/>
</Style>
</Window.Resources>
<StackPanel Height="85">
<Button x:Name="btn1" Content="应用了样式"/>
<Button Content="没应用样式"/>
</StackPanel>
C#代码:
btn1.Style = (Style)Resources["redButton"];
通过在C#代码中,设置元素的Style属性。Resources是ResourceDictionary类型,ResourceDictionary的值是object类型,因此需要转换为Style类型才能赋值。
效果图:
对样式进行扩展
样式也可以像类一样继承。定义一个样式的时候可以基于另一个样式,并且可以重写所继承样式的属性。如:
<Window.Resources>
<Style x:Key="myButton" TargetType="Button">
<Setter Property="Margin" Value="10"/>
<Setter Property="Padding" Value="10,5"/>
<Setter Property="Background" Value="Yellow"/>
</Style>
<Style x:Key="myRedButton" TargetType="Button" BasedOn="{StaticResource myButton}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="White"/>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="基础样式" Style="{StaticResource myButton}"/>
<Button Content="扩展样式" Style="{StaticResource myRedButton}"/>
</StackPanel>
设置Style的BasedOn属性,可以达到继承的效果。
注意:被继承的样式必须写在前面,否则会找不到要继承的Style,此外声明在后面Setter会比前面的Setter优先级更高,所以看起来像是重写继承的样式,如上述代码中Background属性。
效果图:
结语
样式是WPF的必修课,WPF之所以能做出引人注目的外观,离不开样式的应用。
感谢阅读,敬请斧正。
版权声明:本文由不落阁原创出品,转载请注明出处!
广告位
跟不落阁,学DOTNET!
广告位
2020-01-28 19:55回复