首页 学海无涯 WPF 【WPF基础系列】控件样式
【WPF基础系列】控件样式
摘要 WPF能够做出外观炫酷的桌面程序就离不开各种控件的样式定制,本文将介绍如何使用样式来定义控件的外观。

前言

本文是XAML基础系列第二篇,在此之前你可能需要大概了解:【WPF基础系列】XAML资源

正文

样式的简单使用

样式(Style)的用法类似于Web前端中的CSS,它设置一组属性值然后应用于元素上。任何派生自FrameworkElementFrameworkContentElement的元素都可以设置样式。

创建样式最常见的方法是写在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中定义了一个Stylex: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之所以能做出引人注目的外观,离不开样式的应用。

感谢阅读,敬请斧正。


版权声明:本文由不落阁原创出品,转载请注明出处!

本文链接:http://www.leo96.com/article/detail/52

来说两句吧

该文章已禁止评论

最新评论

暂无评论,大侠不妨来一发?