WPF中的Style(風格,樣式)

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

在WPF中咱們可使用Style來設置控件的某些屬性值,並使該設置影響到指定範圍內的全部該類控件或影響指定的某一控件,好比說咱們想將窗口中的全部按鈕都保持某一種風格,那麼咱們能夠設置一個Style,而沒必要分別設置每一個按鈕的風格。

Style是做爲一種資源被保存下來的. 看下面的例子:html

 <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" ui

  <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的影響。spa

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

這樣就很好的解決了Style強制影響每一個Button的問題,你能夠粘貼如下代碼到XamlPad中查看效果:orm

<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。
參考如下代碼:xml

 <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中查看效果:
htm

<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>
相關文章
相關標籤/搜索