WPF入门 基础样式

1.属性是什么

WPF的属性类似于WinFrom控件的属性，可以用来操作控件显示的外观、显示字符等。

为什么需要样式Style

我们先创建3个按钮布局在界面上并且我按顺序为每个属性都增加了注释：

<!--前景色及文字颜色-->
<!--按钮文字大小-->
<!--按钮要显示的文字-->
<!--按钮宽度-->
<!--按钮高度-->
<Button Foreground="Red" FontSize="30" Content="按钮1" Width="100" Height="50"/>
<Button Foreground="Red" FontSize="30" Content="按钮1" Width="100" Height="50"/>
<Button Foreground="Red" FontSize="30" Content="按钮1" Width="100" Height="50"/>

现在只有3个按钮创建后手动修改不算繁琐，但我们有多个按钮且需要每个按钮的样式统一呢？如果每个都手动更改属性的话，会大大增加无异议的工作时间。

而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML,通过Styles创建一系列封装所有这些细节的样式,然后通过Style属性应用封装好的样式。这点类似于它ss样式。而WPF样式的功能更加强大,如控件的模板、触发器等等，

并且Style也能够继承这个后面再讲，可以简单演示下。

样式的申明

<Window.Resources>
    <Style x:Key="mStyle" TargetType="Button">
        <Setter Property="FontSize" Value="20"/>
    </Style>
</Window.Resources>

声明一个键 通过这个键（key）找到这个样式 ；TargetType则是标记这个样式是对应控件类型的（渲染哪个控件）。

样式属性的设置

Setter 则是为属性赋值，下面我们为style在增加下字体颜色的属性设置。

现在我们的代码就变成了这样：

<Window.Resources>
    <Style x:Key="mStyle" TargetType="Button">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Yellow"/>
    </Style>
</Window.Resources>

样式的使用

<Button Style="{StaticResource mBtnStyle}" />

我们使用样式时需要注意这和CSS类似，需要遵守就近原则，样式中有的属性我们再次手动更改属性的话，会覆盖掉style中相同的属性；默认没有依靠Style,有则根据设置的属性渲染。

样式的继承

<Window.Resources>
    <Style x:Key="baseStyle" TargetType="Button">
        <Setter Property="Foreground" Value="Yellow" />
    </Style>

    <Style x:Key="mBtnStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
        <Setter Property="FontSize" Value="20" />
    </Style>
</Window.Resources>

可以看到mBtnStyle继承了基类baseStyle的样式。

也可以先继承再进行重写，同样都是面向对象的特点。

<Window.Resources>
    <Style x:Key="baseStyle" TargetType="Button">
        <Setter Property="Foreground" Value="Yellow" />
    </Style>

    <Style x:Key="mBtnStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
        <Setter Property="FontSize" Value="20" />
    </Style>
    <Style x:Key="mBtnStyle1" TargetType="Button" BasedOn="{StaticResource baseStyle}">
        <Setter Property="Width" Value="20" />
        <Setter Property="Height" Value="50" />
    </Style>
</Window.Resources>