WPF之样式

WPF样式有三种定义方式:

样式应用的优先级为: 

标签内样式(最高) > Windows/UserControl/Page  >  Application.xaml(最低)

Application.xaml

 第一种在Application.xaml中书写,定义全局可用的样式,在Application中,使用<Application.xaml/>标记,来定义资源,在资源标记中使用<style/>来设置样式,需注意,使用<style/>时,要使用TargetType来指定该样式用于哪种控件,或者设置x:key(唯一的名字),否则会报错;

BaseOn适用于已经定义了某种控件的样式,该样式在某些情况下不适用又不想重新设计样式,可以使用baseon来继承之前的样式,改变某些样式属性,形成新的样式.

样式中使用<setter/>来设置样式用其中的Property属性来设置要设置样式的名称,value属性为该样式所设置的值.具体如下列代码所示

<Application.Resources>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="20"></Setter>
            <Setter Property="Foreground" Value="Black"></Setter>
            <Setter Property="FontFamily" Value="微软雅黑"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            
        </Style>
        
        <Style x:Key="LabelFont" TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
            <Setter Property="FontSize" Value="22"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        </Style>
        <Style  TargetType="Button">
            <Setter Property="FontSize" Value="22"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="Background" Value="black"></Setter>
            <Setter Property="Width" Value="120"></Setter>
            <Setter Property="Height" Value="40"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
        </Style>

        <Style x:Key="BottomBtn" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" >
            <Setter Property="Background" Value="#2f2f4f"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="60"></Setter> 
        </Style>

        <Style TargetType="WrapPanel">
            <Setter Property="Margin" Value="0,5"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            
        </Style>
    </Application.Resources>

Windows/UserControl/Page

在xaml页面中,设置资源,同样来使用style去设置样式,与上述样式相同,以Page为例:

 <Page.Resources>
        <Style x:Key="sLabel" TargetType="Label">
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="行书"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style>

        <Style x:Key="Out"  TargetType="Border">
            <Setter Property="Background" Value="Gray"/>
            <Setter Property="CornerRadius" Value="25"/>
            <Setter Property="Width" Value="40"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Margin" Value="0,15,0,0"/>
        </Style>
        <Style x:Key="changeColor" TargetType="Border" BasedOn="{StaticResource Out}">
            <Setter Property="Background" Value="Green"/>
        </Style>
        <Style TargetType="Button">
            <Setter Property="Height" Value="40"/>
            <Setter Property="Width" Value="100"/>
        </Style>

        <Style TargetType="StackPanel">
            <Setter Property="Margin" Value="20 0"/>
        </Style>
    </Page.Resources>

标签内样式

最简单的样式设置方法,就是在控件标签内直接样式名称直接赋值设置属性,该设置方法样式使用的优先级最高,但是由于样式的属性太多,都在标签内书写会造成代码冗长,影响阅读: 例:

<StackPanel Grid.RowSpan="6" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Label Content="设备操作模式" FontWeight="Bold" FontSize="30"/>
            <Button Content="手动" Background="GreenYellow" Foreground="Black" Width="80" Height="40"/>
</StackPanel>

控件模板

除此以外还有另一种设置样式的方法,其也在前两种资源内书写,就是定义好的控件的外观,只能让控件使用,减少了baseon的出现情况,或者定义特殊的控件样式.例子为圆角输入框:

 <ControlTemplate x:Key="FilletTextBox" TargetType="{x:Type TextBox}">
            <Border BorderBrush="White" BorderThickness="1" CornerRadius="10">
                <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center"/>
            </Border>
</ControlTemplate>