WPF中的Style(风格,样式)

作者: 周银辉  来源: 博客园  发布时间: 2009-02-27 15:04  阅读: 6698 次  推荐: 0   原文链接   [收藏]  

在WPF中我们可以使用Style来设置控件的某些属性值，并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件，比如说我们想将窗口中的所有按钮都保持某一种风格，那么我们可以设置一个Style，而不必分别设置每个按钮的风格。

Style是作为一种资源被保存下来的. 看下面的例子：

 <Window.Resources>   
    <Style TargetType="Button">
      <Setter Property="Foreground"  Value="Blue"/>
      <Setter Property="FontFamily " Value="CourierNew"/>
    Style>      
 Window.Resources>

我们声明了一个Style，它被声明在Window.Resources中说明它的有效范围是当前窗体，TargetType="Button" 指示该Style的作用对象是Button类的实例，也就是说在当前窗体中的所有Button实例都将受到该Style的影响（除非某Button有明确地指明它所使用的是另外的Style）。
<Setter Property="Foreground"  Value="Blue"/> 这里的Setter是一个设置器，用来设置该Style要对TargetType的那些属性或对象进行设置，我们这里设置的是Button的Foreground属性，将其值设置为Blue，同理，我们将Button的FontFamily属性设置为CourierNew

这样一来，在默认情况下，被加载到窗口中的所有Button对象都将受到这个Style的影响，从而文本变成统一的蓝色CourierNew字体。
你可以粘贴以下代码到XamlPad中查看效果:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="StyleDemo" Height="417" Width="579"
    >
  
  
  <Window.Resources>    
    <Style TargetType="Button">
      <Setter Property="Foreground"  Value="Blue"/>
      <Setter Property="FontFamily " Value="CourierNew"/>
    Style>       
  Window.Resources>
  
  
    <Grid ShowGridLines="True">
      
      <Grid.ColumnDefinitions>
        <ColumnDefinition  Width="50*"/>
        <ColumnDefinition Width="50*" />
      Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition  Height="25*"/>
        <RowDefinition  Height="25*"/>
        <RowDefinition  Height="25*"/>
      Grid.RowDefinitions>

      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">button1Button>
      <Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">button2Button>
     
    Grid>
  
Window>

接下来很容易想到的一个问题是，想上述代码的强制窗口的所有按钮都受声明的Style的影响是不是有点强奸民意，如果我只想我定义的Style影响指定的Button对象而不是所有的Button对象应该怎么办呢？
参考以下代码：我们为Style添加一个x:Key="ButtonStyle"

  <Window.Resources>
    
    <Style TargetType="Button" x:Key="ButtonStyle">
      <Setter Property="Foreground"  Value="Blue"/>
      <Setter Property="FontFamily " Value="CourierNew"/>
    Style>
        
  Window.Resources>

然后我们使用Button的Style属性来指定该Button所要使用的Style，而其他没有将我们声明的Style指定为其样式的按钮将不受到该Style的影响。

 

<Button>normal buttonButton>
<Button Style="{StaticResource ButtonStyle}">styled buttonButton>

这样就很好的解决了Style强制影响每个Button的问题，你可以粘贴以下代码到XamlPad中查看效果:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="StyleDemo" Height="417" Width="579"
    >
  
  
  <Window.Resources>   
    <Style TargetType="Button" x:Key="ButtonStyle">
      <Setter Property="Foreground"  Value="Blue"/>
      <Setter Property="FontFamily " Value="CourierNew"/>
    Style>    
  Window.Resources>
  
  
    <Grid ShowGridLines="True">
      
      <Grid.ColumnDefinitions>
        <ColumnDefinition  Width="50*"/>
        <ColumnDefinition Width="50*" />
      Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition  Height="25*"/>
        <RowDefinition  Height="25*"/>
        <RowDefinition  Height="25*"/>
      Grid.RowDefinitions>

      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">normal buttonButton>
      <Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button1Button>
      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button2Button>
    
    Grid>
  
Window>

为了让我们的Style对外界的交互做出外观上的相应，比如当鼠标按下时蓝色的文本变成红色，当鼠标松开时文本又恢复蓝色，我们可以在Style中添加Trigger（触发器），除此之外，与类的继承原理相类似，我们还可以使用BaseOn来使一个Style“继承”另一个Style。
参考以下代码：

 <Window.Resources>
    
    <Style TargetType="Button" x:Key="ButtonStyle">
      <Setter Property="Foreground"  Value="Blue"/>
      <Setter Property="FontFamily " Value="CourierNew"/>
    Style>
    
    <Style TargetType="Button" x:Key="TriggerButtonStyle" BasedOn="{StaticResource ButtonStyle}">
      <Style.Triggers>
        <Trigger  Property="IsPressed" Value="True">
          <Setter Property="Foreground" Value="Red"/>
        Trigger>
      Style.Triggers>
    Style>
    
  Window.Resources>

我们所声明的第二个Style，即TriggerButtonStyle，它“继承”于ButtonStyle，那么TriggerButtonStyle将会从ButtonStyle那里得到蓝色CourierNew文本的性质。然后我们使用了Trigger来响应鼠标按下，  <Trigger  Property="IsPressed" Value="True"> 表示当Button的IsPressed属性值变为True的时候，将做如下设置<Setter Property="Foreground" Value="Red"/>，即将Button的Foreground属性设置为Red。这里有一个隐含的意思是：当当Button的IsPressed属性值变为False的时候，Foreground属性将恢复原值。
你可以粘贴以下代码到XamlPad中查看效果:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="StyleDemo" Height="417" Width="579"
    >
  
  
  <Window.Resources>
    
    <Style TargetType="Button" x:Key="ButtonStyle">
      <Setter Property="Foreground"  Value="Blue"/>
      <Setter Property="FontFamily " Value="CourierNew"/>
    Style>
    
    <Style TargetType="Button" x:Key="TriggerButtonStyle" BasedOn="{StaticResource ButtonStyle}">
      <Style.Triggers>
        <Trigger  Property="IsPressed" Value="True">
          <Setter Property="Foreground" Value="Red"/>
        Trigger>
      Style.Triggers>
    Style>
    
  Window.Resources>
  
  
    <Grid ShowGridLines="True">
      
      <Grid.ColumnDefinitions>
        <ColumnDefinition  Width="50*"/>
        <ColumnDefinition Width="50*" />
      Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition  Height="25*"/>
        <RowDefinition  Height="25*"/>
        <RowDefinition  Height="25*"/>
      Grid.RowDefinitions>

      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1">normal buttonButton>
      <Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled buttonButton>
      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource TriggerButtonStyle}">trigger buttonButton>
    
    Grid>
  
Window>