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

時間 2020-02-11

標籤 WPF學習第三十六樣式基礎简体版

原文原文鏈接

　　前面三章介紹了WPF資源系統，使用資源可在一個地方定義對象而在整個標記中重用他們。儘管可以使用資源存儲各類對象，但使用資源最多見的緣由之一是經過他們的保存樣式。app

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

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

　　如今考慮一種不一樣情形，但願只爲用戶界面中的一部分鎖定字體。若是能在特定的容器中隔離這些元素（例如，它們都處於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）移出了標記。但該例也存在兩個問題：spa

　　除了資源名稱類似外，沒有明確指明這三個資源是相關的。這使維護應用程序變得複雜。若是須要設置更多字體屬性，或決定爲不一樣類型的元素維護不一樣的字體設置，這個問題尤其嚴重。設計

　　須要使用資源的標記很是繁瑣。實際上，尚未原來不使用資源時簡明（直接在元素中定義字體屬性）。3d

　　可經過定義將全部字體細節捆綁在一塊兒的自定義類（如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類的屬性

1、建立樣式對象

　　在上一個示例中，樣式對象時在窗口級別定義的，以後再窗口的兩個按鈕中重用該樣式。儘管這是一種常見的設計方式，但並不是是惟一的選擇。

　　若是但願建立目標更加精細的樣式，可以使用容器的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屬性，爲元素內部的特定組件應用設置器，如列表框中的滾動條按鈕）。

2、設置屬性

　　正如已經看到的，每一個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屬性還可做爲自動應用樣式的快捷方式。

3、關聯事件處理程序

　　屬性設置器是全部樣式中最多見的要素，但也能夠建立爲事件關聯特定事件處理程序的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元素關聯單個事件處理程序。對於這種狀況，不必使用事件設置器。

4、多層樣式

　　儘管可在許多不一樣層次定義任意數量的樣式，但每一個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

5、經過類型自動應用樣式

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

　　這一工做很是簡單。只須要設置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控件）

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