【WPF學習】第三十六章樣式基礎

阿新 • • 發佈：2020-02-10

　　前面三章介紹了WPF資源系統，使用資源可在一個地方定義物件而在整個標記中重用他們。儘管可使用資源儲存各種物件，但使用資源最常見的原因之一是通過他們的儲存樣式。

　　樣式是可應用於元素的屬性值集合。WPF樣式系統與HTML標記中的層疊樣式表（Cascading Style Sheet,CSS)標準擔當類似的角色。與CSS類似，通過WPF樣式可定義通用的格式化特性集合，並且為了保證一致性，在整個應用程式中應用他們。與CSS一樣，WPF樣式也能夠自動工作，指定具體的元素型別為目標，並通過元素樹層疊起來。然而，WPF樣式的功能更加強大，因為他們能夠設定任何依賴項屬性。這意味著可以使用它們標準化未格式化的特性，如控制元件的行為。WPF樣式也支援觸發器（trigger），當屬性發生變化時，可通過觸發器改變控制元件的樣式，並且可使用模板重新定義控制元件的內建外觀。一旦學習瞭如何使用樣式，就可以在所有WPF應用程式中使用他們。

　　為了理解適合使用樣式的場合，分析一下簡單的示例是有幫助的。設想需要標準化在視窗中使用的字型。最簡單的方法是設定包含視窗的字型屬性。這些屬性是在Control類中定義的，包括FontFamily、FontSize、FontWeight（用於粗體）、FontStyle（用於斜體）以及FontStretch（用於壓縮或擴充套件的變體）。得益於這些屬性值得繼承特性，當在視窗級別設定這些屬性時，視窗中的所有元素都會使用相同的屬性值，除非明確地覆蓋它們。

　　現在考慮一種不同情形，希望只為使用者介面中的一部分鎖定字型。如果能在特定的容器中隔離這些元素（例如，它們都處於Grid或StackPanel面板中），就可以使用本質上相同的方法，並設定容器的字型屬性。但問題未必總是這麼簡單。例如，可能希望使用所有按鈕具有一致的字型和文字尺寸，並使用和其他元素不同的字型設定。對於這種情況，就需要一種方法在某個地方定義這些細節，並在所有應用它們的地方重用這些細節。

　　資源提供了一個解決方案，但有些笨拙。因為WPF中沒有Font物件（只有與字型屬性相關的集合），所以需要定義幾個相關的資源，如下所示：

<Window.Resources>
        <FontFamily x:Key="ButtonFontFamily">Times New Roman</FontFamily>
        <s:Double x:Key="ButtonFontSize">18</s:Double>
        <FontWeight x:Key="ButtonFontWeight">Bold</FontWeight>
</Window.Resources>

　　上面的程式碼片段（標記）為視窗添加了三個資源：第一個資源是FontFamily物件，該物件包含希望使用的字型名稱；第二個資源是儲存數字18的double物件；第三個資源是列舉值FontWeight.Bold。假定已將.NET名稱空間System對映到XAML名稱空間字首s。如下所示：

<Window x:Class="Styles.ReuseFontWithResources"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        Title="ReuseFontWithResources" Height="300" Width="300">

　　一旦定義所需的資源，下一步就是在元素中實際使用這些資源。因為在應用程式的整個生命週期中，這些資源永遠不會發生變化，所以使用靜態資源是合理的，如下所示：

<Button Padding="5" Margin="5"
            FontFamily="{StaticResource ButtonFontFamily}"
            FontWeight="{StaticResource ButtonFontWeight}"
            FontSize="{StaticResource ButtonFontSize}" 
              >A Customized Button</Button>

　　這個示例可以工作，它將字型細節（所謂的magic number）移出了標記。但該例也存在兩個問題：

　　除了資源名稱相似外，沒有明確指明這三個資源是相關的。這使維護應用程式變得複雜。如果需要設定更多字型屬性，或決定為不同型別的元素維護不同的字型設定，這個問題尤為嚴重。

　　需要使用資源的標記非常繁瑣。實際上，還沒有原來不使用資源時簡明（直接在元素中定義字型屬性）。

　　可通過定義將所有字型細節捆綁在一起的自定義類（如FontSetting類）來改善第一個問題。然後可作為資源建立FontSetting物件，並在標記中使用它的各種屬性。然而，這種方法仍需使用繁瑣的標記——並且還需要做一些額外的工作。

　　樣式為解決這個問題提供了非常好的解決方案。可定義獨立的用於封裝所有希望設定的屬性的樣式，如下所示：

<Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman"/>
            <Setter Property="Control.FontSize" Value="18"/>
            <Setter Property="Control.FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>

　　上面的標記建立了一個獨立資源：一個System.Windows.Style物件。這個樣式物件包含了一個設定器集合，該集合具有三個Setter物件，每個Setter物件用於一個希望設定的屬性。每個Setter物件由兩部分資訊組成：希望進行設定的屬性的名稱和希望為該屬性應用的值。與所有資源一樣，樣式物件都有一個鍵名，從而當需要時可以從集合中提取它。在該例中，鍵名是BigFontButtonStyle（根據約定，用於樣式的鍵名通常以Style結尾）。

　　每個WPF元素都可使用一個樣式（或者沒有樣式），樣式通過元素的Style屬性（該屬性是在FrameworkElement基類中定義的）插入到元素中。例如，要使用上面建立的樣式配置按鈕，需要讓按鈕指向樣式資源，如下所示：

<Button Margin="5" Padding="5" Style="{StaticResource BigFontButtonStyle}">A Customized Button</Button>

　　當然，也可通過程式碼設定樣式。需要做的全部工作就是使用大家熟悉的FindResource()方法，從最近的資源集合中提取樣式。下面的程式碼為名為cmd的Button物件設定樣式：

cmdButton.Style=(Style)cmd.FindResource("BigFontButtonStyle");

　　如下圖所示，視窗中的兩個按鈕使用了BigFontButtonStyle樣式：

　　樣式系統增加了許多優點。不僅可建立多組明顯相關的屬性設定，而且使得應用這些設定更加容易，從而精簡了標記。最讓人滿意的是，可應用樣式而不用關心設定了哪些屬性。在上一個示例中，字型設定被組織到名為BigFontButtonStyle的樣式中。如果以後決定大字型按鈕還需要更多的內邊距和外邊距空間，也可為Padding和Margin屬性新增設定器。所有使用樣式的按鈕會自動採用新的樣式設定。

　　Setters集合是Style類中最重要的屬性，但並非唯一屬性。Style類中共有5個重要屬性。下表列出了這些屬性。

表 Style類的屬性

一、建立樣式物件

　　在上一個示例中，樣式物件時在視窗級別定義的，之後再視窗的兩個按鈕中重用該樣式。儘管這是一種常見的設計方式，但並非是唯一的選擇。

　　如果希望建立目標更加精細的樣式，可使用容器的Resources集合定義樣式，如StackPanel面板或Grid面板。如果希望在應用程式中重用樣式，可使用應用程式的Resources集合定義樣式。這些也是常用的方法。

　　嚴格來將，不需要同事使用樣式和資源。例如，可通過直接填充特定按鈕的樣式集合來定義樣式，如下所示：

 <Button Margin="5" Padding="5">
            <Button.Style>
                <Style>
                    <Setter Property="Control.FontFamily" Value="Times New Roman"/>
                    <Setter Property="Control.FontSize" Value="20"/>
                    <Setter Property="Control.FontWeight" Value="Bold" />
                </Style>
            </Button.Style>
            <Button.Content>A Customized Button</Button.Content>
        </Button>

　　上面的程式碼雖然可湊效，但顯然不是很有用，因為現在無法與其他元素共享該樣式。

　　如果只使用樣式設定一些屬性，就不值得使用這種方法。因為直接設定屬性更加容易。然而，如果正在使用樣式的其他特性，並且只希望將它應用到單個元素。這一方法有時會有用。例如，可使用該方法為元素關聯觸發器，還可以通過該方法修改元素控制元件模板的一部分（對於這種情況，需要使用Setter.TargetName屬性，為元素內部的特定元件應用設定器，如列表框中的滾動條按鈕）。

二、設定屬性

　　正如已經看到的，每個Style物件都封住了一個Setter物件的集合。每個Setter物件設定元素的單個屬性。唯一的限制是設定器只能改變依賴項屬性——不能修改其他屬性。

　　在某些情況下，不能使用簡單的特新字串設定屬性值。例如，不能使用簡單字串建立ImageBrush物件。對於此類情況，可使用大家熟悉的XAML技巧，用巢狀的元素代替特性。下面是一個示例：

<Style x:Key="HappyTiledElementStyle">
            <Setter Property="Control.Background">
                <Setter.Value>
                    <ImageBrush TileMode="Tile" ViewportUnits="Absolute"
                                ImageSource="happyface.jpg" Viewport="0 0 32 32" Opacity="0.3"/>
                </Setter.Value>
            </Setter>
        </Style>

　　為了標識希望設定的屬性，需要提供類和屬性的名稱。然而，使用類名未必是定義屬性的類名，也可以是繼承了屬性的派生類。例如，考慮如下版本的BigFontButtonStyle樣式，該樣式用Button類的引用替代Control類的引用：

<Style x:Key="BigFontButtonStyle">
            <Setter Property="Button.FontFamily" Value="Times New Roman"/>
            <Setter Property="Button.FontSize" Value="18"/>
            <Setter Property="Button.FontWeight" Value="Bold" />
        </Style>

　　如果將上面的樣式進行替換後，將得到相同的結果。那麼兩者之間到底有什麼區別呢？對於這種情況，區別在於WPF對可能包含相同的FontFamily、FontSize以及FontWeight屬性，但又不是繼承自Button的其他類的處理方式。例如，如果為Label控制元件使用該版本的BigFontButtonStyle樣式，就沒有效果。WPF簡單地忽略這三個屬性，因為不會應用他們。但如果使用原樣式，字型屬性就會影響就會影響Label控制元件，因為Label類繼承自Control類。

　　在WPF中還存在這樣一些情況，在元素框架層次中的多個位置定義了同一個屬性。例如，在Control和TextBlock類中都定義了全部的字型屬性（如FontFamily）。如果正在建立應用到TextBlock物件以及繼承自Control類的元素的樣式，可按如下方式建立標記：

 <Style x:Key="BigFontButtonStyle">
            <Setter Property="Button.FontFamily" Value="Times New Roman"/>
            <Setter Property="Button.FontSize" Value="18"/>
            <Setter Property="Button.FontWeight" Value="Bold" />

            <Setter Property="TextBlock.FontFamily" Value="Times New Roman"/>
            <Setter Property="TextBlock.FontSize" Value="18"/>
        </Style>

　　然而，這樣不會得到期望的結果。問題在於，儘管Button.FontFamily和TextBlock.FontFamily屬性是在各自的基類中分別宣告，但它們都引用同一個依賴性屬性（換句話說，TextBlock.FontSizeProperty和Control.FontSizeProperty引用都指向同一個DependencyProperty物件。）。所以，當使用這個樣式時，WPF設定FontFamily和FontSize屬性兩次。最後應用的設定具有優先權，並同時應用到Button和TextBlock物件。儘管這個問題非常特別，許多屬性並不存在該問題，但如果經常建立為不同的元素型別應用不同格式的樣式，分析是否存在這一問題就顯得很重要了。

　　還可使用另一種技巧簡化樣式宣告。如果所有屬性都準備用於相同的元素型別，就設定Style物件的TargetType屬性來指定準備應用屬性的類。例如，如果建立只應用於按鈕的樣式，可按如下方式建立樣式：

<Style x:Key="BigFontButtonStyle" TargetType="Button">
      <Setter Property="FontFamily" Value="Times New Roman"/>
      <Setter Property="FontSize" Value="18"/>
      <Setter Property="FontWeight" Value="Bold" />
</Style>

　　這樣方法比較方便。正如將在後面分析的，如果不使用樣式鍵名，TargetType屬性還可作為自動應用樣式的快捷方式。

三、關聯事件處理程式

　　屬性設定器是所有樣式中最常見的要素，但也可以建立為事件關聯特定事件處理程式的EventSetter物件的集合。下面列舉的示例為MouseEnter和MouseLeave事件關聯事件處理程式：

 <Style x:Key="MouseOverHighlightStyle">
            <Setter Property="TextBlock.Padding" Value="5"/>
            <EventSetter Event="FrameworkElement.MouseEnter" Handler="element_MouseEnter" />
            <EventSetter Event="FrameworkElement.MouseLeave" Handler="element_MouseLeave" />
 </Style>

　　下面的事件處理程式碼：

private void element_MouseEnter(object sender, MouseEventArgs e)
        {
            ((TextBlock)sender).Background = new SolidColorBrush(Colors.LightGoldenrodYellow);
        }
        private void element_MouseLeave(object sender, MouseEventArgs e)
        {
            ((TextBlock)sender).Background = null;
        }

　　MouseEnter和MouseLeave事件使用直接事件路由，這意味著他們不再元素樹中冒泡和隧道移動。如果希望為大量元素應用滑鼠懸停其上的效果（例如，當滑鼠移動到元素上時，希望改變元素的背景色），需要為每個元素新增MouseEnter和MouseLeave事件處理程式。基於樣式的事件處理程式簡化了這項任務。現在只需要應用單個樣式，該樣式包含了屬性設定器和事件設定器：

<TextBlock Style="{StaticResource MouseOverHighlightStyle}">Hover over me.</TextBlock>

　　下圖顯示了該技術的一個簡單演示程式，該程式中有三個元素，其中兩個元素使用了MouseOverHighlightStyle樣式。

　　該示例完整xaml檔案：

<Window x:Class="Styles.EventSetter"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="EventSetter" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="MouseOverHighlightStyle">
            <Setter Property="TextBlock.Padding" Value="5"/>
            <EventSetter Event="FrameworkElement.MouseEnter" Handler="element_MouseEnter" />
            <EventSetter Event="FrameworkElement.MouseLeave" Handler="element_MouseLeave" />
        </Style>
    </Window.Resources>

    <StackPanel>
        <TextBlock Style="{StaticResource MouseOverHighlightStyle}">Hover over me.</TextBlock>
        <TextBlock Padding="5">Don't bother with me.</TextBlock>
        <TextBlock Style="{StaticResource MouseOverHighlightStyle}">Hover over me.</TextBlock>
    </StackPanel>
</Window>

EventSetter

　　WPF極少使用事件設定器這種技術。如果需要使用此處演示的功能，可能更喜歡使用事件觸發器，它以宣告方式定義了所希望的的行為。事件觸發器是專為實現動畫而設計的，當建立滑鼠懸停效果時它們更有用。

　　當處理使用冒泡路由策略的事件時，事件設定器並非好的選擇。對於這種情況，在高層次的元素上處理希望處理的事件通常更容易。例如，如果希望將工具欄上的所有按鈕連線到同一個Click事件處理程式，最好為包含所有按鈕的Toolbar元素關聯單個事件處理程式。對於這種情況，沒必要使用事件設定器。

四、多層樣式

　　儘管可在許多不同層次定義任意數量的樣式，但每個WPF元素一次只能使用一個樣式物件。乍一看，這像是一種限制，但由於屬性值繼承和樣式繼承特性，這種限制實際上並不存在。

　　例如，假設希望為一組控制元件使用相同的字型，又不想為每個控制元件應用相同的樣式，對於這種情況，可將它們放置到面板（或其他型別的容器）中，並設定容器的樣式。只要設定的屬性具有屬性值繼承特性，這些值就會被傳遞到子元素。使用這種模型的屬性包括IsEnabled、IsVisible、Foreground以及所有字型屬性。

　　對於另外一些情況，可能希望在另一個樣式的基礎上建立樣式。可通過為樣式設定BasedOn特性來使用此類樣式繼承。例如，分析下面的兩個樣式：

<Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman" />
            <Setter Property="Control.FontSize" Value="18" />
            <Setter Property="Control.FontWeight" Value="Bold" />
        </Style>

        <Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="Control.Background" Value="DarkBlue" />
        </Style>
    </Window.Resources>

　　第一個樣式(BigFontButtonStyle)定義了三個字型屬性。第二個樣式（EmphasizedBigFontButtonStyle)從BigFontButtonStyle樣式獲取這些屬性設定，然後通過另外兩個改變前景色和背景色的畫刷屬性對它們進行了增加。通過使用這種分成兩部分的設計方式，可只應用字型設定，也可以應用字型設定和顏色設定的組合。通過這種設計還可建立包含已經定義的字型或顏色細節的更多樣式。

　　下圖顯示了樣式繼承在一個簡單視窗中的工作情況，該視窗使用了這兩個樣式：

　　該示例完整XAML如下：

<Window x:Class="Styles.StyleInheritance"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleInheritance" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="BigFontButtonStyle">
            <Setter Property="Control.FontFamily" Value="Times New Roman" />
            <Setter Property="Control.FontSize" Value="18" />
            <Setter Property="Control.FontWeight" Value="Bold" />
        </Style>

        <Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="Control.Background" Value="DarkBlue" />
        </Style>
    </Window.Resources>

    <StackPanel Margin="5">
        <Button Padding="5" Margin="5"
            Style="{StaticResource BigFontButtonStyle}" 
              >Uses BigFontButtonStyle</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <Button Padding="5" Margin="5"
            >A Normal Button</Button>
        <TextBlock Margin="5">More normal Content.</TextBlock>
        <Button Padding="5" Margin="5"
            Style="{StaticResource EmphasizedBigFontButtonStyle}" 
              >Uses EmphasizedBigFontButtonStyle</Button>
    </StackPanel>
</Window>

StyleInheritance

五、通過型別自動應用樣式

　　到目前位置，已討論瞭如何建立具有名稱的樣式以及如何在標記中引用它們。但還有一種方法，可以為特定型別的元素自動應用樣式。

　　這一工作非常簡單。只需要設定TargetType屬性以指定合適的型別（如前所述），並完全忽略鍵名。這樣做時，WPF實際上是使用型別標記擴充套件來隱式地設定鍵名，如下所示：

x:Key="{x:Type Button}"

　現在，樣式已自動應用於整個元素樹中的所有按鈕上。例如，如果在視窗中採用這種方式定義了一個樣式，它會被應用到視窗中的每個按鈕上（除非有一個更特殊的樣式替換了該樣式）。

　　下面列舉一個示例，該例中的視窗自動設定按鈕樣式。

<Window x:Class="Styles.AutomaticStyles"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="AutomaticStyles" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="Times New Roman" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>

    <StackPanel Margin="5">
        <Button Padding="5" Margin="5">Customized Button</Button>
        <TextBlock Margin="5">Normal Content.</TextBlock>
        <Button Padding="5" Margin="5" Style="{x:Null}"
            >A Normal Button</Button>
        <TextBlock Margin="5">More normal Content.</TextBlock>
        <Button Padding="5" Margin="5">Another Customized Button</Button>
    </StackPanel>
</Window>

　　在該例中，中間的按鈕顯示替換了樣式。但該按鈕並沒有為自己提供一個新樣式，而將Style屬性設定為null值，這樣就有效地刪除了樣式。

　　儘管自動樣式非常方便，但它們會讓設計變得複雜。下面列出幾條原因：

　　在具有許多樣式和多層樣式的複雜視窗中，很難跟蹤是否通過屬性值繼承或通過樣式設定了某個特定屬性（如果是通過樣式設定的，那麼是通過哪個樣式設定的呢？）。因此，如果希望改變某個簡單細節，就需要檢視整個視窗的全部標記
　　視窗中的格式化操作在開始時通常更一般，但會逐漸變得越來越詳細。如果剛開始為視窗應用了自動樣式，在許多地方可能需要使用顯示的樣式覆蓋自動樣式。這會使整個設計變得複雜。為每個希望設定的格式化特徵的組合建立名得樣式，並根據名稱應用他們會更加直觀。
　　在比如，如果為TextBlock元素建立自動樣式，那麼會同時修改使用TextBlock的其他控制元件（如模板驅動的ListBox控制元件）

　　為避免出現這些問題，最好果斷地使用自動樣式。如果決定使用自動樣式為整個使用者介面提供單一、一致的外觀，可嘗試為特例使用明確的樣

【WPF學習】第三十六章樣式基礎

【WPF學習】第三十六章樣式基礎

【WPF學習】第三十四章資源基礎

【WPF學習】第三十一章 WPF命令模型

【WPF學習】第三十二章執行命令

【WPF學習】第三十五章資源字典

【WPF學習】第三十八章行為

【WPF學習】第三十九章理解形狀

【WPF學習】第四十六章效果

【WPF學習】第五十六章基於幀的動畫

【WPF學習】第三十章元素繫結——繫結到非元素物件

【WPF學習】第四十一章變換

【WPF學習】第四十四章圖畫

【WPF學習】第四十五章視覺化物件

【WPF學習】第四十七章 WriteableBitmap類

【WPF學習】第四十九章基本動畫

【WPF學習】第五十一章動畫緩動

【WPF學習】第五十四章關鍵幀動畫

【WPF學習】第五十八章理解邏輯樹和視覺化樹

【WPF學習】第五十九章理解控制元件模板

【WPF學習】第三十三章高階命令

【WPF學習】第三十六章 樣式基礎

相關推薦

【WPF學習】第三十六章樣式基礎