WPF教程（八）样式入门一

样式是我认为WPF中一块极为重要的知识，也体现该种框架比较厉害之处：（1）UI设计与动画方面的炫丽；（2）XMAL代码的引入使得代码的编写能够前后端分离，这种都是传统界面框架都不能比拟的，比如Winform、C++的MFC。我认为这是微软向当前We前端开发模式的学习，WPF是过渡的框架。当然，这些都是题外话。

WPF的样式是非常强大的，除了与HTML标记中的CSS类似，它还能够支持触发器（Trigger），比如当元素属性发生变化时，可通过触发器改变控件样式，但本文中暂不涉及触发器（下一篇博客里写）。特基础的不讲了，先看下事件关联例子。

<Window x:Class="Style.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="textblockstyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5"/>
            <EventSetter Event="TextBlock.MouseEnter" Handler="element_mouseEnter"/>
            <EventSetter Event="TextBlock.MouseLeave" Handler="element_mouseLeave"/>
        </Style>
    </Window.Resources>
    <Grid>
        <WrapPanel>
            <TextBlock Style="{StaticResource textblockstyle}" Text="helloworld"/>
        </WrapPanel>
    </Grid>
</Window>

  public partial class MainWindow : Window
  {
      public MainWindow()
      {
          InitializeComponent();
      }
      private void element_mouseEnter(object sender, MouseEventArgs e)
      {
          ((TextBlock)sender).Background = new SolidColorBrush(Colors.Aqua);
      }
      private void element_mouseLeave(object sender, MouseEventArgs e)
      {
          ((TextBlock)sender).Background = null;
      }
   }

这种事件关联仍是没有实现软件的低耦合性，没发挥出WPF高端之处。当然，在后续触发器（Trigger）介绍，就可以打破这种尴尬的境况，下面介绍样式的多层继承。

<Window x:Class="Style.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="textblockstyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5"/>
            <EventSetter Event="TextBlock.MouseEnter" Handler="element_mouseEnter"/>
            <EventSetter Event="TextBlock.MouseLeave" Handler="element_mouseLeave"/>
        </Style>
        <Style x:Key="BaseOnStyle" 
        TargetType="TextBlock" 
        BasedOn="{StaticResource textblockstyle}">
            <Setter Property="Control.Foreground" Value="Red"/>
        </Style>
    </Window.Resources>
    <Grid>
        <WrapPanel>
            <TextBlock Style="{StaticResource textblockstyle}" Text="helloworld"/>
            <TextBlock Text="Inherited Style TextBlock" Style="{StaticResource BaseOnStyle}"/>
        </WrapPanel>
    </Grid>
</Window>
//注释：后台代码不变

这里提个小技巧，隐藏键值可以自动将样式用到元素树上所有该类控件上，注意下面程序如何隐藏键值，大有玄机，里面涉及到一些知识点。

<Window x:Class="Style.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="{x:Type TextBlock}">
        <!--隐式设置为 {x:Type TextBlock}-->
        <!--<Style TargetType="TextBlock">-->
            <Setter Property="Control.Foreground" Value="Pink"/>
            <Setter Property="TextBlock.FontSize" Value="18"/>
        </Style>
  </Window.Resources>
    <Grid>
        <WrapPanel>
            <TextBlock Text="hello"/>
            <TextBlock Text="hi"/>
            <TextBlock Style="{x:Null}" Text="good"/>
        </WrapPanel>
    </Grid>
</Window>

仔细分析，总结出5个知识点：

1. 显示设置隐藏键值，后面TargetType可以写，也可以不写。上段程序显然没写出来，这涉及到知识点3，先注意写法。

2. 隐式设置隐藏键值，请看注释掉的部分，TargetType必须写明，这样相当于隐藏了{x:Type TextBlock}，效果是跟第一点显示设置一样的，都可以用到元素树中此类控件，先注意写法，也涉及知识点3。

3. 如果是没有写出TargeType样式类型，必须用类名来限制Setter对象的Property属性值，否则报错。上面程序，显然加TextBlock和Control类名，如果指明了，可写可不写类名。

4. 如果某一此类控件不想用指定样式，可以将Style置Null重新写此属性或直接重新写此属性，都可覆盖原资源里的设置。

5. 同一范围不能重复定义相同key样式，包括相同（显式/隐式）隐藏键值。

如果希望在多个样式中（或在同一样式的多个设置器中）重用相同的属性值，可以将其定义为资源，然后再在样式中使用资源：

  <Window.Resources>
        <Brush x:Key="brush" >Black</Brush>
        <Style x:Key="{x:Type TextBlock}">
            <Setter Property="Control.Foreground" Value="{StaticResource brush}"/>
            <Setter Property="TextBlock.FontSize" Value="18"/>
        </Style>
  </Window.Resources>

在WPF中还存在这样一些情况，在元素框架层次中(不管是否有TargetType属性)的多个位置定义了同一个属性。例如，在Control类和TextBlock类，中都定义了全部的字体颜色属性。

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

不管是哪个控件，只要支持这个属性，都可以引用这个字色样式，那会使用哪个色体呢？尽管TextBlock.FontFamily属性和Button.FontFamily属性是在他们各自的基类中分别声明，但它们都引用同一个依赖项属性。所以，当使用这个样式时，WPF设置Foreground属性两次，最后应用的设置具有优先权。

总结

Style样式如果不加TargetType，其它控件都可以使用该样式。如果加了目标类型，其它控件引用直接回报错。如果显示设置隐藏键值，只是不会作用于其它控件，两者还是有区分的

样式的基本使用知识点大致就上面几点，深层去剖析，涉及到依赖属性这个难点，我也有详细介绍过这块知识，有兴趣的朋友可以去看看，下面介绍样式的第二个重点Trigger。

WPF教程（八）样式入门一

猜你喜欢