WPF中的Style(風格,樣式)

WPF中的Style(風格,樣式)
                                                                                                            周銀輝

在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">button1</Button>
      <Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">button2</Button>
     
    </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 button</Button>
<Button Style="{StaticResource ButtonStyle}">styled button</Button>

這樣就很好的解決了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 button</Button>
      <Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button1</Button>
      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button2</Button>
    
    </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 button</Button>
      <Button Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Style="{StaticResource ButtonStyle}">styled button</Button>
      <Button Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" Style="{StaticResource TriggerButtonStyle}">trigger button</Button>
    
    </Grid>
  
</Window>

 

 原文地址：http://www.cnblogs.com/zhouyinhui/archive/2007/03/27/690431.html