[WPF基础]WPF Style初步理解

最新推荐文章于 2024-08-13 10:08:45 发布

lemonay

最新推荐文章于 2024-08-13 10:08:45 发布

阅读量1.3k

点赞数

分类专栏： WPF

本文链接：https://blog.csdn.net/lemonay/article/details/8734577

版权

WPF 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

WPF程序具有华丽的外观展示，Style样式在其中起到的作用功不可没，个人觉得WPF中的样式功能也是微软对于B/S程序中的样式文件CSS的一种学习和拓展，微软将控件的外观样式以配置文件的形式进行设定，取代了winform时期较为麻烦的皮肤开发，取而代之的是更加灵活方便的设定方式。以及更加完善的样式功能。本文就对于WPF样式的一些初步认识与大家进行分享，文中纰漏在所难免，还请不吝指正。

下文将以简单的例子为引导，一步步的带领大家了解和回顾有关Style功能从简单到高级的一些应用方法：

1.资源属性的重复利用。其实Style在帮助我们进行界面的美化设定的同时，最大的优势就是将所有的样式的设定可以公开化，并且以可以相同于类的方式进行继承和调用。

<Window.Resources>    
    <FontFamily x:Key="ButtonFontFamily">Times New Roman</FontFamily>
    <s:Double x:Key="ButtonFontSize">18</s:Double>
    <FontWeight x:Key="ButtonFontWeight">Bold</FontWeight>    
  </Window.Resources>
  <StackPanel Margin="5">
    <Button Padding="5" Margin="5"
            FontFamily="{StaticResource ButtonFontFamily}"
            FontWeight="{StaticResource ButtonFontWeight}"
            FontSize="{StaticResource ButtonFontSize}" 
              >A Customized Button</Button>
    <TextBlock Margin="5">Normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            >A Normal Button</Button>
    <TextBlock Margin="5">More normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            FontFamily="{StaticResource ButtonFontFamily}"
            FontWeight="{StaticResource ButtonFontWeight}"
            FontSize="{StaticResource ButtonFontSize}" 
              >Another Customized Button</Button>
  </StackPanel>

在以上的代码中，只是将所有控件的单独属性进行资源的封装，但是也已经起到了资源的统一管理和调用的功能，虽然不是最优的解决方案，但是较之于不采用Style而直接进行属性赋值的方式已经有了质的提升。

2.资源Style中属性集的重复利用。

<Window.Resources>
    <Style x:Key="BigFontButtonStyle">
      <Setter Property="Control.FontFamily" Value="Times New Roman" />
      <Setter Property="Control.FontSize" Value="18" />
      <Setter Property="Control.FontWeight" Value="Bold" />
    </Style>    
  </Window.Resources>
  
  <StackPanel Margin="5">
    <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButtonStyle}" 
              >A Customized Button</Button>
    <TextBlock Margin="5" >Normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            >A Normal Button</Button>
    <TextBlock Margin="5">More normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButtonStyle}" 
              >Another Customized Button</Button>
  </StackPanel>

在这一步的示例代码中我们可以看到，其实属性也是可以封装进Style之中的，而属性封装Style之中的书写格式就是Setter，每一个Style包含多个Setter以承载每一个属性的值，此方式就赋予了Style可以进行任意属性集的组合，可以搭配出尽量多的属性集合的Style出来。

3.EventSetter属性的使用。EventSetter表示样式的一个事件 setter。事件 setter 调用指定的事件处理程序以响应事件。

<Window.Resources>
    <Style x:Key="MouseOverHighlightStyle">
      <Setter Property="TextBlock.Padding" Value="5"/>
      <EventSetter Event="FrameworkElement.MouseEnter" Handler="element_MouseEnter" />
      <EventSetter Event="FrameworkElement.MouseLeave" Handler="element_MouseLeave" />
    </Style>
  </Window.Resources>
  
  <StackPanel>
    <TextBlock Style="{StaticResource MouseOverHighlightStyle}">Hover over me.</TextBlock>
    <TextBlock Padding="5">Don't bother with me.</TextBlock>
    <TextBlock Style="{StaticResource MouseOverHighlightStyle}">Hover over me.</TextBlock>
  </StackPanel>

private void element_MouseEnter(object sender, MouseEventArgs e)
{
      ((TextBlock)sender).Background = new SolidColorBrush(Colors.LightGoldenrodYellow);
}
 private void element_MouseLeave(object sender, MouseEventArgs e)
{
     ((TextBlock)sender).Background = null;
}

此段示例中的Event属于系统框架自带的标准事件，分别是鼠标进入和鼠标的离开事件，Handler指向自定义的事件。这个事件的类型必须是类型为MouseButtonEventHandler的事件。由此可以看到，在WPF中的样式文件已经可以完成后台的交互和事件的调用，从这个拓展来看，比css的样式文件已经有了较大的功能性的改善。

4.样式Style的继承，在Style的定义中，也可以直接进行原有样式的继承，可以在继承原有样式的基础上进行新的属性的添加或者原有属性的值的覆盖，以此来减少多个样式中重复属性值的设定重复劳动问题。

<Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman" />
            <Setter Property="Control.FontSize" Value="18" />
            <Setter Property="Control.FontWeight" Value="Bold" />
        </Style>

        <Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
            <Setter Property="Control.Foreground" Value="Red" />
            <Setter Property="Control.Background" Value="DarkBlue" />
        </Style>
    </Window.Resources>

    <StackPanel Margin="5">
        <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButtonStyle}" 
              >Uses BigFontButtonStyle</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <Button Padding="5" Margin="5"
            >A Normal Button</Button>
        <TextBlock Margin="5">More normal Content.</TextBlock>
        <Button Padding="5" Margin="5"
            Style="{StaticResource EmphasizedBigFontButtonStyle}" 
              >Uses EmphasizedBigFontButtonStyle</Button>
    </StackPanel>

5.自动样式，词用法一般出现于针对明确的控件类型的样式的定义当中，此定义方式中控件不再需要使用Style="{}"这种动态或者静态应用方式来将样式的设定传递给控件，而将以控件类型作为区分，自动绑定这些样式至控件上，这个方法多用于多套皮肤的切换功能等的应用，也适用于样式的继承功能。

  <Window.Resources>
    <Style TargetType="Button">
      <Setter Property="FontFamily" Value="Times New Roman" />
      <Setter Property="FontSize" Value="18" />
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
  </Window.Resources>

  <StackPanel Margin="5">
    <Button Padding="5" Margin="5">Customized Button</Button>
    <TextBlock Margin="5">Normal Content.</TextBlock>
    <Button Padding="5" Margin="5" Style="{x:Null}"
            >A Normal Button</Button>
    <TextBlock Margin="5">More normal Content.</TextBlock>
    <Button Padding="5" Margin="5">Another Customized Button</Button>
  </StackPanel>

6.样式中的触发器 Trigger，表示应用属性值或有条件地执行操作的触发器。

<Window.Resources>
    <Style x:Key="BigFontButton">
      <Style.Setters>
        <Setter Property="Control.FontFamily" Value="Times New Roman" />
        <Setter Property="Control.FontSize" Value="18" />
        
      </Style.Setters>
      <Style.Triggers>
        <Trigger Property="Control.IsFocused" Value="True">  触发器监听的事件，以及事件所需要满足的条件
          <Setter Property="Control.Foreground" Value="DarkRed" />  触发器出发时，所需要修改的Style中的属性集的值。
        </Trigger>
        <Trigger Property="Control.IsMouseOver" Value="True">
          <Setter Property="Control.Foreground" Value="LightYellow" />
          <Setter Property="Control.FontWeight" Value="Bold" />
        </Trigger>        
        <Trigger Property="Button.IsPressed" Value="True">
          <Setter Property="Control.Foreground" Value="Red" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>

  <StackPanel Margin="5">
    <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButton}" 
              >A Customized Button</Button>
    <TextBlock Margin="5">Normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            >A Normal Button</Button>
    <TextBlock Margin="5">More normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButton}" 
              >Another Customized Button</Button>
  </StackPanel>

7.EventTrigger 事件触发器的使用。触发器，该触发器应用一组操作（动画演示图板）作为对某个事件的响应。

<Window.Resources>
    <Style x:Key="BigFontButton">
      <Style.Setters>
        <Setter Property="Control.FontFamily" Value="Times New Roman" />
        <Setter Property="Control.FontSize" Value="18" />
        <Setter Property="Control.FontWeight" Value="Bold" />
      </Style.Setters>
      
      <Style.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">  触发器出发事件
          <EventTrigger.Actions>			触发器事件出发后索要执行的动作脚本
            <BeginStoryboard>				动画设定
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="FontSize"
                  To="22"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:1"
                  Storyboard.TargetProperty="FontSize"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

      </Style.Triggers>
    </Style>
    
  </Window.Resources>

  <StackPanel Margin="5">
    <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButton}" 
              >A Customized Button</Button>
    <TextBlock Margin="5">Normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            >A Normal Button</Button>
    <TextBlock Margin="5">More normal Content.</TextBlock>
    <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButton}" 
              >Another Customized Button</Button>
  </StackPanel>

由以上的介绍及实例可以看出，整个WPF中Style的使用方法及细化的功能主要如下：
1.Setter，控件属性或者属性集的重复利用功能。
2.EventSetter，由控件中包含的标准事件，调用自定义事件的功能。
3.Style是可以进行继承的，可以最大化的减少代码的工作量。
4.Style是可以依照控件类型进行自动绑定的。
5.Trigger 由控件的标准事件出发，并对于Setter中的属性进行修改的功能。
6.EventTrigger 由RoutedEvent类型的事件触发，能够利用自身的EventTrigger.Actions属性进行动画脚本的调用。

以上为近期对于WPF中Style功能的了解，不尽完善之处还请见谅。