WPF 樣式（定義樣式、引用樣式、樣式作用域、Trigger觸發器）

 

1、定義 資源字典

 

 

1.  
   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2.  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3.  
   <RadialGradientBrush x:Key="mybrush">
4.  
   <GradientStop Color="#FF0000" Offset="0"/>
5.  
   <GradientStop Color="#00ff00" Offset="1"/>
6.  
   <GradientStop Color="#0000ff" Offset="0.6669"/>
7.  
   </RadialGradientBrush>
8.  
   </ResourceDictionary>

 

2、引用 資源字典

 

1.  
   <!--定義應用程序對象-->
2.  
   <Application x:Class="WpfApplication1.App"
3.  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.  
   StartupUri="Window5.xaml" Exit="AppExit">
6.  
   <!--StartupUri 啟動時，顯示那個xaml-->
7.  
   <x:Code>
8.  
   <![CDATA[
9.  
   private void AppExit(object sender,ExitEventArgs e)
10.  
    {
11.  
    MessageBox.Show("App has Exit!");
12.  
    }
13.  
    ]]>
14.  
    </x:Code>
15.  
     
16.  
    <Application.Resources>
17.  
    <ResourceDictionary>
18.  
    <ResourceDictionary.MergedDictionaries>
19.  
    <!--外部庫名稱;Component/編譯的二進制資源名稱-->
20.  
    <ResourceDictionary Source="/MyBrushesLibrary;Component/MyBrushes.xaml"/>
21.  
    <ResourceDictionary Source="......"/>
22.  
    </ResourceDictionary.MergedDictionaries>
23.  
    </ResourceDictionary>
24.  
    </Application.Resources>
25.  
    </Application>

 

 

3、應用

 

 

1.  
   <Window x:Class="WpfApplication1.Window5"
2.  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.  
   Title="Window5" Height="300" Width="300">
5.  
   <StackPanel Orientation="Vertical">
6.  
   <Button Width="204" Height="73" Content="OK" x:Name="BtnOK" Background="{DynamicResource myBrush}" Click="BtnOK_Click"></Button>
7.  
   <Button Width="204" Height="73" Content="Cancel" x:Name="BtnName2" Background="{StaticResource myBrush}"/>
8.  
   </StackPanel>
9.  
   </Window>

 

 

推薦閱讀：http://blog.csdn.net/pan_junbiao/article/details/50987932

 

一、樣式

1、定義樣式

 

1.  
   <Window.Resources>
2.  
   <!--定義按鈕公共樣式-->
3.  
   <!--x:Key 引用這個樣式,TargetType作用目標類型-->
4.  
   <Style x:Key="gButton" TargetType="{x:Type Button}">
5.  
   <!--Setter設置目標屬性-->
6.  
   <Setter Property="Cursor" Value="Hand"/>
7.  
   <Setter Property="Width" Value="150"/>
8.  
   <Setter Property="Height" Value="80"/>
9.  
   </Style>
10.  
    </Window.Resources>

 

2、引用樣式

 

1.  
   <Grid>
2.  
   <Button Content="紅色">
3.  
   <Button.Style>
4.  
   <!--BasedOn屬性：通過設置BasedOn屬性，可以繼承某個樣式-->
5.  
   <Style TargetType="{x:Type Button}" BasedOn="{StaticResource gButton}">
6.  
   <Setter Property="Background" Value="Red"/>
7.  
   <Setter Property="FontSize" Value="24"/>
8.  
   <Setter Property="Foreground" Value="Red"/>
9.  
   <Setter Property="Margin" Value="20"/>
10.  
    </Style>
11.  
    </Button.Style>
12.  
    </Button>
13.  
    </Grid>

 

二、樣式作用域

1、全局樣式

把樣式寫在App.xaml中即可

 

 

1.  
   <Application x:Class="WpfApplication1.App"
2.  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.  
   StartupUri="MainWindow.xaml">
5.  
   <!--全局應用程序資源-->
6.  
   <Application.Resources>
7.  
   <!--定義全局樣式-->
8.  
    
9.  
   </Application.Resources>
10.  
    </Application>

 

2、局部樣式

 

1.  
   <!--窗口資源-->
2.  
   <Window.Resources>
3.  
   <!--定義局部樣式-->
4.  
    
5.  
   </Window.Resources>

 

 

3、內部樣式

 

1.  
   <Button Content="紅色" Width="150" Height="80">
2.  
   <Button.Style>
3.  
   <!--定義內部-->
4.  
   <Style TargetType="{x:Type Button}" BasedOn="{StaticResource gBut}">
5.  
   <!--背景色-->
6.  
   <Setter Property="Background" Value="Red"/>
7.  
   <!--字號-->
8.  
   <Setter Property="FontSize" Value="24"/>
9.  
   </Style>
10.  
    </Button.Style>
11.  
    </Button>

以上的樣式引用時的方法是一樣的，都是使用Resources，內部樣式的使用僅限於改控件本身，因為它沒有被放到資源字典之中，xxx.Resources是支持向下繼承的，並可以應用它在資源中的定義樣式，例如：

 

 

1.  
   <Grid>
2.  
   <!--定義Grid控件的資源-->
3.  
   <Grid.Resources>
4.  
   <!--定義按鈕樣式1-->
5.  
   <Style x:Key="grid_button" TargetType="{x:Type Button}">
6.  
   <Setter Property="Width" Value="260"/>
7.  
   <Setter Property="Height" Value="160"/>
8.  
   <Setter Property="FontSize" Value="26"/>
9.  
   <Setter Property="Content" Value="應用父級樣式"/>
10.  
    </Style>
11.  
    </Grid.Resources>
12.  
    <!--應用父級樣式的按鈕-->
13.  
    <Button Style="{StaticResource grid_button}"></Button>
14.  
    </Grid>

運行結果所示，XAML代碼中的按鈕除了Style="{StaticResource grid_button}"之外並沒有聲明任何屬性，按鈕的尺寸和內容都是通過應用父級Grid資源樣式來呈現的，所以只要父級的對象定義了資源，父級以下的元素均可以訪問它的資源字典。

 

三、Style中的Trigger

         Trigger，觸發器，即當某些條件滿足時會觸發一個行為（比如某些值的變化或動畫的發生等）。觸發器比較像事件。事件一般是由用戶操作觸發的，而觸發器除了有事件觸發型的EventTrigger外還有數據變化觸發型的Trigger/DataTrigger及多條件觸發型MultiTrigger/MultiDataTrigger等。

 

1、基礎Trigger

     Trigger類是最基本的觸發器。類似於Setter，Trigger也有Property和Value這兩個屬性，Property是Trigger關注的屬性名稱，Value是觸發條件。Trigger類還有一個Setters屬性，此屬性值是一組Setter，一旦觸發條件被滿足，這組Setter的“屬性—值”就會被應用，觸發條件不再滿足后，各屬性值會被還原。

 

下面這個例子中包含一個針對CheckBox的Style，當CheckBox的IsChecked屬性為true的時候前景色和字體會改變。XAML代碼如下：

 

1.  
   <Window.Resources>
2.  
   <Style TargetType="CheckBox">
3.  
   <Style.Triggers>
4.  
   <Trigger Property="IsChecked" Value="True">
5.  
   <Setter Property="FontSize" Value="20"/>
6.  
   <Setter Property="Foreground" Value="Orange"/>
7.  
   </Trigger>
8.  
   </Style.Triggers>
9.  
   </Style>
10.  
    </Window.Resources>
11.  
     
12.  
    <StackPanel>
13.  
    <CheckBox Content="111" Margin="5"/>
14.  
    <CheckBox Content="222" Margin="5"/>
15.  
    <CheckBox Content="333" Margin="5"/>
16.  
    </StackPanel>

 

2、MultiTrigger

 

MultiTrigger比Trigger多了一個Conditions屬性，需要同時成立的條件就儲存在這個集合中。

讓我們稍微改動一下上面的例子，要求同時滿足CheckBox被選中且Content為“333”時才會被觸發。

XAML代碼如下：

 

1.  
   <Window.Resources>
2.  
   <Style TargetType="CheckBox">
3.  
   <Style.Triggers>
4.  
   <MultiTrigger>
5.  
   <MultiTrigger.Conditions>
6.  
   <Condition Property="IsChecked" Value="true"/>
7.  
   <Condition Property="Content" Value="333"/>
8.  
   </MultiTrigger.Conditions>
9.  
   <MultiTrigger.Setters>
10.  
    <Setter Property="FontSize" Value="20"/>
11.  
    <Setter Property="Foreground" Value="Orange"/>
12.  
    </MultiTrigger.Setters>
13.  
    </MultiTrigger>
14.  
    </Style.Triggers>
15.  
    </Style>
16.  
    </Window.Resources>
17.  
     
18.  
    <StackPanel>
19.  
    <CheckBox Content="111" Margin="5"/>
20.  
    <CheckBox Content="222" Margin="5"/>
21.  
    <CheckBox Content="333" Margin="5"/>
22.  
    </StackPanel>

 

3、數據觸發的DataTrigger

 

 程序中經常會遇到基於數據執行某些判斷情況，遇到這種情況時我們可以考慮使用DataTrigger。

DataTrigger對象的Binding屬性會把數據源不斷送過來，一旦送了的值與Value屬性一致，DataTrigger即被觸發。


下面例子中，當TextBox的Text長度小於7個字符時其Border會保持紅色。

XAML代碼如下：

 

1.  
   <Window x:Class="WpfApplication2.MainWindow"
2.  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.  
   xmlns:local="clr-namespace:WpfApplication2"
5.  
   Title="MainWindow" Height="350" Width="525">
6.  
   <Window.Resources>
7.  
   <local:L2BConverter x:Key="cvtr"/>
8.  
   <Style TargetType="TextBox">
9.  
   <Style.Triggers>
10.  
    <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},
11.  
    Path=Text.Length,
12.  
    Converter={StaticResource cvtr}}" Value="false">
13.  
    <Setter Property="BorderBrush" Value="Red"/>
14.  
    <Setter Property="BorderThickness" Value="1"/>
15.  
    </DataTrigger>
16.  
    </Style.Triggers>
17.  
    </Style>
18.  
    </Window.Resources>
19.  
     
20.  
    <StackPanel>
21.  
    <TextBox Margin="5"/>
22.  
    <TextBox Margin="5,0"/>
23.  
    <TextBox Margin="5"/>
24.  
    </StackPanel>
25.  
    </Window>

1.  
   public class L2BConverter:IValueConverter
2.  
   {
3.  
   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
4.  
   {
5.  
   int textLength = (int)value;
6.  
   return textLength > 6 ? true : false;
7.  
   }
8.  
    
9.  
   public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
10.  
    {
11.  
    throw new NotImplementedException();
12.  
    }
13.  
    }

 

4、多條件觸發的MultiDataTrigger

 

     有時候我們會遇到要求多個數據條件同時滿足時才能觸發變化的需求，此時可以考慮使用MultiDataTrigger。

比如有這樣一個需求：用戶界面使用ListBox顯示了一列Student數據，當Student對象同時滿足ID為2、Name為Tom的時候，條目就高亮顯示，

XAML代碼如下：

 

 

1.  
   using System;
2.  
   using System.Collections.Generic;
3.  
   using System.Linq;
4.  
   using System.Text;
5.  
   using System.Windows;
6.  
   using System.Windows.Controls;
7.  
   using System.Windows.Data;
8.  
   using System.Windows.Documents;
9.  
   using System.Windows.Input;
10.  
    using System.Windows.Media;
11.  
    using System.Windows.Media.Imaging;
12.  
    using System.Windows.Navigation;
13.  
    using System.Windows.Shapes;
14.  
     
15.  
    namespace WpfApplication2
16.  
    {
17.  
    /// <summary>
18.  
    /// MainWindow.xaml 的交互邏輯
19.  
    /// </summary>
20.  
    public partial class MainWindow : Window
21.  
    {
22.  
    public MainWindow()
23.  
    {
24.  
    InitializeComponent();
25.  
    List<Student> stuList = new List<Student>(){
26.  
    new Student(){ID="1",Name="Peter",Age=25},
27.  
    new Student(){ID="2",Name="Tom",Age=27},
28.  
    new Student(){ID="3",Name="Ben",Age=20}
29.  
    };
30.  
     
31.  
    this.listBoxStudent.ItemsSource = stuList;
32.  
    }
33.  
    }
34.  
     
35.  
    /// <summary>
36.  
    /// 學生類
37.  
    /// </summary>
38.  
    public class Student
39.  
    {
40.  
    public string ID { get; set; }
41.  
    public string Name { get; set; }
42.  
    public int Age { get; set; }
43.  
    }
44.  
    }

 

 

 

1.  
   <Window x:Class="WpfApplication2.MainWindow"
2.  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.  
   Title="MainWindow" Height="350" Width="525">
5.  
   <Window.Resources>
6.  
   <Style TargetType="ListBoxItem">
7.  
   <!--使用Style設置DataTemplate-->
8.  
   <Setter Property="ContentTemplate">
9.  
   <Setter.Value>
10.  
    <DataTemplate>
11.  
    <StackPanel Orientation="Horizontal">
12.  
    <TextBlock Text="{Binding ID}" Width="60"/>
13.  
    <TextBlock Text="{Binding Name}" Width="120"/>
14.  
    <TextBlock Text="{Binding Age}" Width="60"/>
15.  
    </StackPanel>
16.  
    </DataTemplate>
17.  
    </Setter.Value>
18.  
    </Setter>
19.  
    <!--MultiDataTrigger-->
20.  
    <Style.Triggers>
21.  
    <MultiDataTrigger>
22.  
    <MultiDataTrigger.Conditions>
23.  
    <Condition Binding="{Binding Path=ID}" Value="2"/>
24.  
    <Condition Binding="{Binding Path=Name}" Value="Tom"/>
25.  
    </MultiDataTrigger.Conditions>
26.  
    <MultiDataTrigger.Setters>
27.  
    <Setter Property="Background" Value="Orange"/>
28.  
    </MultiDataTrigger.Setters>
29.  
    </MultiDataTrigger>
30.  
    </Style.Triggers>
31.  
    </Style>
32.  
    </Window.Resources>
33.  
     
34.  
    <StackPanel>
35.  
    <ListBox x:Name="listBoxStudent" Margin="5"/>
36.  
    </StackPanel>
37.  
    </Window>

效果：

 

 

5、由事件觸發的EventTrigger

      EventTrigger是觸發器中最特殊的一個。首先，它不是由屬性值或數據的變化來觸發而是由事件來觸發；其次，被觸發后它並非應用一組Setter，而是執行一段動畫。

因此，UI層的動畫效果往往與EventTrigger相關聯。

       在下面這個例子中創建了一個針對Button的Style，這個Style包含兩個EventTrigger，一個由MouseEnter事件觸發，另一個由MouseLeave事件觸發。
      鼠標進入按鈕時變大，離開時恢復原樣。

XAML代碼如下：

 

1.  
   <Window.Resources>
2.  
   <Style TargetType="Button">
3.  
   <Style.Triggers>
4.  
   <!--鼠標進入-->
5.  
   <EventTrigger RoutedEvent="MouseEnter">
6.  
   <BeginStoryboard>
7.  
   <Storyboard>
8.  
   <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
9.  
   <DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
10.  
    </Storyboard>
11.  
    </BeginStoryboard>
12.  
    </EventTrigger>
13.  
    <!--鼠標離開-->
14.  
    <EventTrigger RoutedEvent="MouseLeave">
15.  
    <BeginStoryboard>
16.  
    <Storyboard>
17.  
    <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"/>
18.  
    <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
19.  
    </Storyboard>
20.  
    </BeginStoryboard>
21.  
    </EventTrigger>
22.  
    </Style.Triggers>
23.  
    </Style>
24.  
    </Window.Resources>
25.  
     
26.  
    <Canvas>
27.  
    <Button Width="40" Height="40" Content="OK"/>
28.  
    </Canvas>