走進WPF之樣式

WPF通過樣式，不僅可以方便的設置控件元素的展示方式，給用戶呈現多樣化的體驗，還簡化配置，避免重復設置元素的屬性，以達到節約成本，提高工作效率的目的。本文以一個簡單的小例子，簡述如果設置WPF的樣式，僅供學習分享使用，如有不足之處，還請指正。

什么是樣式？

樣式(Style)是組織和重用格式化選項的重要工具。不是使用重復的標記填充XAML,以便設置外邊距、內邊距、顏色以及字體等細節，而是創建一系列封裝所有這些細節的樣式，然后再需要之處通過屬性來應用樣式。

樣式是可應用於元素的屬性值集合。使用資源的最常見原因之一就是樣式。

基礎樣式

1. 通過TargetType設置樣式

通過控件類型，統一設置樣式【如：字體，大小，邊距等】，以便於形成統一的風格。如下所示：

示例源碼

通過設置樣式的TargetType="Button"，則可以使所有的按鈕應用同一個樣式，統一風格。如下所示：

<Window x:Class="WpfApp1.SevenWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="基礎樣式示例" Height="250" Width="400">
    <Window.Resources>
        <Style  TargetType="Button"  >
            <Setter Property="Button.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="18"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕"></Button>
        <Button x:Name="button2" Content="第二個按鈕" ></Button>
        <Button x:Name="button3" Content="第三個按鈕"></Button>
        <Button x:Name="button4" Content="第四個按鈕" ></Button>
    </StackPanel>
</Window>

2. 通過Key設置樣式

如果需要對每一個控件元素，都設置不同的樣式，則可以通過不同的Key加以區分，如下所示：

示例源碼

分別設置不同的樣式，每一個樣式都有一個唯一的Key，然后分別綁定到各個元素的Style屬性上，如下所示：

<Window x:Class="WpfApp1.SevenWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="基礎樣式示例" Height="250" Width="400">
    <Window.Resources>
        <Style TargetType="Button" >
            <Setter Property="Button.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="16"></Setter>
        </Style>
        <Style x:Key="first">
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.Background" Value="Gray"></Setter>
        </Style>
        <Style x:Key="second">
            <Setter Property="ItemsControl.Foreground" Value="Gold"></Setter>
            <Setter Property="ItemsControl.Background" Value="DarkCyan"></Setter>
        </Style>
        <Style x:Key="third">
            <Setter Property="ItemsControl.Foreground" Value="White"></Setter>
            <Setter Property="ItemsControl.Background" Value="DarkRed"></Setter>
        </Style>
        <Style x:Key="four">
            <Setter Property="ItemsControl.Foreground" Value="Blue"></Setter>
            <Setter Property="ItemsControl.Background" Value="LightCoral"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕" Style="{StaticResource first}"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Style="{StaticResource second}"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Style="{StaticResource third}"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Style="{StaticResource four}"></Button>
    </StackPanel>
</Window>

3. 樣式繼承

通過仔細觀察發現，在設置了單獨樣式以后，統一的樣式失去了作用，說明每一個元素控件，只能綁定一個樣式，那怎么辦才能讓統一樣式起作用呢？答案就是面向對象思想中的繼承。

在WPF中，通過設置BasedOn來繼承父樣式，如下所示：

 示例源碼

在每一個樣式通過BasedOn屬性繼承父樣式，如下所示：

<Window x:Class="WpfApp1.SevenWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="基礎樣式示例" Height="250" Width="400">
    <Window.Resources>
        <Style x:Key="base" >
            <Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="18"></Setter>
        </Style>
        <Style x:Key="first" BasedOn="{StaticResource base}">
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.Background" Value="Gray"></Setter>
        </Style>
        <Style x:Key="second" BasedOn="{StaticResource base}">
            <Setter Property="ItemsControl.Foreground" Value="Gold"></Setter>
            <Setter Property="ItemsControl.Background" Value="DarkCyan"></Setter>
        </Style>
        <Style x:Key="third" BasedOn="{StaticResource base}">
            <Setter Property="ItemsControl.Foreground" Value="White"></Setter>
            <Setter Property="ItemsControl.Background" Value="DarkRed"></Setter>
        </Style>
        <Style x:Key="four" BasedOn="{StaticResource base}">
            <Setter Property="ItemsControl.Foreground" Value="Blue"></Setter>
            <Setter Property="ItemsControl.Background" Value="LightCoral"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕" Style="{StaticResource first}"></Button>
        <Button x:Name="button2" Content="第二個按鈕" Style="{StaticResource second}"></Button>
        <Button x:Name="button3" Content="第三個按鈕" Style="{StaticResource third}"></Button>
        <Button x:Name="button4" Content="第四個按鈕" Style="{StaticResource four}"></Button>
    </StackPanel>
</Window>

 注意：如果樣式要被其他樣式繼承，則最好不要使用TargetType指定。一般情況下，可能為報錯【只能根據帶有基類型“IFrameworkInputElement”的目標類型的 Style。】

4. 樣式中綁定事件

在WPF中的樣式中，通過EventSetter進行事件綁定，如下所示：

示例源碼

在樣式中，通過EventSetter設置事件，如下所示：

<Window x:Class="WpfApp1.SevenWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="基礎樣式示例" Height="250" Width="400">
    <Window.Resources>
        <Style x:Key="base">
            <Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="18"></Setter>
        </Style>
        <Style x:Key="first" BasedOn="{StaticResource base}">
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.Background" Value="Gray"></Setter>
            <EventSetter Event="Button.MouseEnter" Handler="FirstButton_MouseEnter"></EventSetter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕" Style="{StaticResource first}"></Button>
    </StackPanel>
</Window>

其中FirstButton_MouseEnter，文后台定義的一個事件函數，如下所示：

 private void FirstButton_MouseEnter(object sender,MouseEventArgs e)
{
      Button btn = (Button)sender;
      MessageBox.Show("鼠標進入了 "+btn.Content.ToString()+" 呀！");
}

 觸發器

使用觸發器可自動完成簡單的樣式的改變，不需要使用代碼，也可以完成不少工作。觸發器通過Style.Trigger集合鏈接到樣式。每個樣式可以有任意多個觸發器。每個觸發器都是System.Windows.TriggerBase的實例。

TriggerBase的子類

 

 

1. 基礎觸發器

觸發器，是指當滿足一定條件，然后觸發相關的樣式設置，如下所示：

 示例源碼

示例中設置了兩個觸發器：1.Control.IsMouseOver鼠標覆蓋在按鈕上時，設置對應的樣式。2. Control.IsFocused，控件聚焦時，設置對應的樣式。如下所示：

<Window x:Class="WpfApp1.EightWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="EightWindow" Height="350" Width="400">
    <Window.Resources>
        <Style x:Key="first">
            <Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="18"></Setter>
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.Background" Value="LightBlue"></Setter>
            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="True">
                    <Setter Property="ItemsControl.Background" Value="AliceBlue"></Setter>
                    <Setter Property="Control.FontSize" Value="28"></Setter>
                </Trigger>
                <Trigger Property="Control.IsFocused" Value="True">
                    <Setter Property="ItemsControl.Background" Value="DarkGoldenrod"></Setter>
                    <Setter Property="Control.FontSize" Value="28"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕" Style="{StaticResource first}"></Button>
    </StackPanel>
</Window>

注意：如果樣式觸發器，設置了多個，且條件相互覆蓋時，以最后的設置為准。

2. 多條件觸發器

如果需要多個條件同時滿足，才能設置對應的樣式，則可以通過MultiTrigger來設置，如下所示：

<Window x:Class="WpfApp1.EightWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="EightWindow" Height="350" Width="400">
    <Window.Resources>
        <Style x:Key="first">
            <Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="18"></Setter>
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.Background" Value="LightBlue"></Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Control.IsMouseOver" Value="True"></Condition>
                        <Condition Property="Control.IsFocused" Value="True"></Condition>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="ItemsControl.Background" Value="Gainsboro"></Setter>
                        <Setter Property="Control.FontSize" Value="20"></Setter>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕" Style="{StaticResource first}"></Button>
        <Button x:Name="button2" Content="第二個按鈕" ></Button>
    </StackPanel>
</Window>

3. 事件觸發器

事件觸發器，是指某一個事件發生時，觸發的相關動作，主要用於動畫，如下所示：

示例源碼

當鼠標進入時，字體變大，當鼠標離開時，字體恢復，如下所示：

<Window x:Class="WpfApp1.EightWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="EightWindow" Height="350" Width="400">
    <Window.Resources>
        <Style x:Key="first">
            <Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
            <Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
            <Setter Property="Control.FontSize" Value="18"></Setter>
            <Setter Property="Control.Foreground" Value="Red"></Setter>
            <Setter Property="Control.Background" Value="LightBlue"></Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter" >
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="00:00:02" To="28" From="12" Storyboard.TargetProperty="FontSize"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="00:00:01" Storyboard.TargetProperty="FontSize" To="18"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button x:Name="button1" Content="第一個按鈕" Style="{StaticResource first}"></Button>
        <Button x:Name="button2" Content="第二個按鈕" ></Button>
    </StackPanel>
</Window>

備注

走進WPF，感受WPF之美，本文旨在拋磚引玉，共同學習，一起進步。