WPF中的Style(風格,樣式)

作者: 周銀輝  來源: 博客園  發布時間: 2009-02-27 15:04  閱讀: 18040 次  推薦: 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>

 

0
2
 
標簽:WPF
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()