WPF 樣式和範本（一）Style 的使用

在 WPF 中，Style 的作用是透過屬性（Property）來自訂控制項的外觀。當然，Style 的功能並不是只有自訂控制項外觀那麼簡單，其最大的作用是可以統一 xaml 頁面上的控制項外觀，舉個簡單例子，如果有一個小計算機程式，其按鍵分為數字鍵和功能鍵，按照一般作法是建立 Button 物件後設定其外觀顏色、字型大小、間距等等屬性，但有了 Style 就可以統一這些按鍵的屬性（Property）。實作如下：

• xaml

<Window x:Class="SimpleDataBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="117" Width="133">
    <Window.Resources>
        <Style x:Key="myButton" TargetType="{x:Type Button}">
            <Setter Property="Width" Value="30"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Green"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <Button Style="{StaticResource myButton}" Content="1"/>
            <Button Style="{StaticResource myButton}" Content="2"/>
            <Button Style="{StaticResource myButton}" Content="3"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Button Style="{StaticResource myButton}" Content="4"/>
            <Button Style="{StaticResource myButton}" Content="5"/>
            <Button Style="{StaticResource myButton}" Content="6"/>            
        </StackPanel>
        <!--                 以下省略                            -->
    </StackPanel>
</Window>

　　一開始把 Style 程式區塊放在最上層 Window 中的 Resources 區塊中，在 Style 區塊中建立一個以供 Button 物件在套用時可識別的 x:Key，接下來再加入 Setter Property 屬性及 Value 值，必須注意的是，Property 的設定必須是物件的依存屬性（Denendency Property）。

　　接下來在第 2 層 StackPanel 中陸續加入 Button 物件，並將 Button 的屬性 Style 繫結到 Window.Resource 區塊中 key 為 myButoon 的 Style。

　　值得注意的事，在 Window.Resources 區塊中的 Style，如果不加 Key，那麼會是怎樣的結果，結果會是在此 xaml 頁面中的 Button 物件屬性將會統一（在未加入其它 Style 及未設定 Button 物件 Style 屬性前提下）。換個角度來看，如將 Style 加入在 StackPanel.Resources 區塊中，那麼結果將只會影響到 StackPanel 區塊中的 Button 物件，如下：

    <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Width" Value="30"/>
                <Setter Property="Height" Value="30"/>
                <Setter Property="Background" Value="White"/>
                <Setter Property="Foreground" Value="Green"/>
                <Setter Property="Margin" Value="2"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>
        </StackPanel.Resources>
        <Button  Content="1">
        </Button>
        <Button  Content="2"/>
        <Button  Content="3"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Button  Content="4"/>
        <Button  Content="5"/>
        <Button  Content="6"/>            
    </StackPanel>
    <!--                 以下省略                            -->
</StackPanel>

　　如果要把 Background 顏色從純色改為漸層，那就須將 Value 拿掉，加入 Setter.Value 區塊，並將漸層加入區塊中，其演示如下：

<Style TargetType="{x:Type Button}">
    <Setter Property="Width" Value="30"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="Pink" Offset="0"/>
                <GradientStop Color="White" Offset="0.5"/>
                <GradientStop Color="Pink" Offset="1"/>                                
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="Green"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontWeight" Value="Bold"/>                    
</Style>