# WPF快速入門系列(6)——WPF資源和樣式 ## 一、引言 WPF資源系統可以用來保存一些公有對象和樣式，從而實現重用這些對象和樣式的作用。而WPF樣式是重用元素的格式的重要手段，可以理解樣式就如CSS一樣，盡管我們可以在每個控件中定義格式，但是如果多個控件都應用了多個格式的時候，我們就可以把這些格式封裝成格式，然后在資源中定義這個格式，之前如果用到這個格式就可以直接使用這個樣式，從而達到重用格式的手段。從中可以發現，WPF資源和WPF樣式是相關的，我們經常把樣式定義在資源中。 ## 二、WPF資源詳解 ## 2.1 資源基礎介紹 盡管可以在代碼中創建和操作資源，但是通常都是以XAML標簽的形式定義資源的。下面具體看看如何去定義一個資源，具體的XAML代碼如下所示： ``` <Window x:Class="ResourceDemo.ResourceUse" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="REsource" Height="100" Width="350" xmlns:sys="clr-namespace:System;assembly=mscorlib"> ** <Window.Resources> <!--定義一個字符串資源--> <sys:String x:Key="nameStr"> LearningHard博客：http://www.cnblogs.com/zhili/ </sys:String> </Window.Resources>** <StackPanel> <!--通過資源key來對資源進行使用--> <TextBlock Text="{StaticResource nameStr}" Margin="10"/> </StackPanel> </Window> ``` 每一個元素都有一個Resources屬性，該屬性存儲了一個資源字典集合。關于資源字典將會在下面部分介紹。盡管每個元素都提供了Resources屬性，但通常在窗口級別上定義資源，就如上面XAML代碼所示的那樣。因為每個元素都可以訪問它自己的資源集合中的資源，也可以訪問所有父元素的資源集合中的資源。 ## 2.2 靜態資源和動態資源區別 為了使用XAML標記中的資源，需要一種引用資源的方法，可以通過兩個標記來進行引用資源：一個用于靜態資源，另一個用于動態資源。在上面的XAML中，我們引用的方式就是靜態資源的引用方式，因為我們指定了**StaticResource。**那靜態資源和動態資源有什么區別呢？ 對于靜態資源在第一次創建窗口時，一次性地設置完畢；而對于動態資源，如果發生了改變，則會重新應用資源。下面通過一個示例來演示下他們之間的區別。具體的XAML代碼如下所示： ``` <Window x:Class="ResourceDemo.DynamicResource" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DynamicResource" Height="300" Width="300"> <Window.Resources> <SolidColorBrush x:Key="RedBrush" Color="Red"></SolidColorBrush> </Window.Resources> <StackPanel Margin="5"> <Button Background="{StaticResource RedBrush}" Margin="5" FontSize="14" Content="Use a Static Resource"/> <Button Background="{DynamicResource RedBrush}" Margin="5" FontSize="14" Content="Use a Dynamic Resource"/> <Button Margin="5" FontSize="14" Content="Change the RedBrush to Yellow" Click="ChangeBrushToYellow_Click"/> </StackPanel> </Window> ``` 對應改變資源按鈕的后臺代碼如下所示： 運行上面程序，你將發現，當點擊Change按鈕之后，只改變了動態引用資源按鈕的背景色，而靜態引用按鈕的背景卻沒有發生改變，具體效果圖如下所示：  ## 2.3 資源字典 在前面中講到，每個[Resources](http://msdn.microsoft.com/zh-cn/library/system.windows.frameworkelement.resources(v=vs.100).aspx)屬性存儲著一個資源字典集合。如果希望在多個項目之間共享資源的話，就可以創建一個資源字典。資源字段是一個簡單的XAML文檔，該文檔就是用于存儲資源的，可以通過右鍵項目-&gt;添加資源字典的方式來添加一個資源字典文件。下面具體看下如何去創建一個資源字典。具體的XAML代碼如下： 為了使用資源字典，需要將其合并到應用程序中資源集合位置，當然你也可以合并到窗口資源集合中，但是通常是合并到應用程序資源集合中，因為資源字典的目的就是在于多個窗體中共享，具體的XAML代碼如下所示： ``` <Application x:Class="ResourceDemo.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="DynamicResource.xaml"> <Application.Resources> <!--合并資源字典到Application.Resources中--> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Generic.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> ``` 那怎樣使用資源字典中定義的資源呢？其使用方式和引用資源的方式是一樣的，一樣是通過資源的Key屬性來進行引用的，具體使用代碼如下所示： ``` <Window x:Class="ResourceDemo.ResourceUse" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="REsource" Height="100" Width="350" xmlns:sys="clr-namespace:System;assembly=mscorlib"> <Window.Resources> <!--定義一個字符串資源--> <sys:String x:Key="nameStr"> LearningHard博客：http://www.cnblogs.com/zhili/ </sys:String> </Window.Resources> <StackPanel> ** <!--使用資源字典中定義的資源--> <Button Margin="10" Background="{StaticResource blueBrush}" Content="Blue Button" FontWeight="{StaticResource fontWeight}"/>** <!--通過資源key來對資源進行使用--> <TextBlock Text="{StaticResource nameStr}" Margin="10"/> </StackPanel> </Window> ``` 此時的運行效果如下圖所示：  前面只是介紹在當前應用程序下共享資源可以把資源字典合并到應用程序資源集合中，如果想在多個應用程序共享資源怎么辦呢？最簡單的方法就是在每個應用程序中拷貝一份資源字典的XAML文件，但是這樣不能對版本進行控制，顯然這不是一個好的辦法。更好的辦法是將資源字典編譯到一個單獨的類庫程序集中，應用程序可以通過引用程序集的方式來共享資源。這樣就達到了在多個應用程序中共享資源的目的。 使用這種方式面臨著另一個問題，即如何獲得所需要的資源并在應用程序中使用資源。對此，可以采用兩種方法。第一種辦法是通過代碼創建一個ResourceDictionary對象，再通過指定其Source屬性來定位程序中資源字典文件，一旦創建了ResourceDictionary對象，就可以通過key來檢索對應的資源，具體的實現代碼如下： 這種方式不需要手動指定資源，當加載一個新的資源字典時，窗口中所有的DynamicResource引用都會自動引用新的資源，這樣的方式可以用來構建動態的皮膚功能。 另外一種辦法可以使用[ComponentResourceKey](http://msdn.microsoft.com/zh-cn/library/ms753186(v=vs.110).aspx)標記，使用ComponentResourceKey為資源創建鍵名。具體使用例子請參看博文：[Defining and Using Shared Resources in a Custom Control Library](http://blogs.msdn.com/b/wpfsdk/archive/2007/06/08/defining-and-using-shared-resources-in-a-custom-control-library.aspx)。 ## 三、WPF樣式詳解 在前面介紹了WPF資源，使用資源可以在一個地方定義對象而在整個應用程序中重用它們，除了在資源中可以定義各種對象外，還可以定義樣式，從而達到樣式的重用。 樣式可以理解為元素的屬性集合。與Web中的CSS類似。WPF可以指定具體的元素類型為目標，并且WPF樣式還支持觸發器，即當一個屬性發生變化的時，觸發器中的樣式才會被應用。 ## 3.1 WPF樣式使用 之前WPF資源其實完全可以完成WPF樣式的功能，只是WPF樣式對資源中定義的對象進行了封裝，使其存在于樣式中，利于管理和應用，我們可以把一些公共的屬性定義放在樣式中進行定義，然后需要引用這些屬性的控件只需要引用具體的樣式即可，而不需要對這多個屬性進行分別設置。下面XAML代碼就是一個樣式的使用示例： ``` <Window x:Class="StyleDemo.StyleDefineAndUse" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="400"> <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"> <!--由于前面定義的樣式沒有定義key標記,如果沒有顯示指定Style為null，這按鈕將指定引用事先定義的樣式--> <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> </StackPanel> </Window> ``` 具體的運行效果如下圖所示：  當樣式中沒有定義key標記時，則對應的樣式會指定應用到目標對象上，上面XAML代碼就是這種情況，如果顯式為樣式定義了key標記的話，則必須顯式指定樣式Key的方式，對應的樣式才會被應用到目標對象上，下面具體看看這種情況。此時XAML代碼如下所示： ``` <Window x:Class="StyleDemo.ReuseFontWithStyles" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ReuseFontWithStyles" Height="300" Width="300"> <Window.Resources> <!--帶有key標簽的樣式--> <Style TargetType="Button" x:Key="BigButtonStyle"> <Setter Property="FontFamily" Value="Times New Roman" /> <Setter Property="FontSize" Value="18" /> <Setter Property="FontWeight" Value="Bold" /> </Style> </Window.Resources> <StackPanel Margin="5"> <!--如果不顯式指定樣式key將不會應用樣式--> <Button Padding="5" Margin="5">Normal Button</Button> <Button Padding="5" Margin="5" Style="{StaticResource BigButtonStyle}">Big Button</Button> <TextBlock Margin="5">Normal Content.</TextBlock> <!--使其不引用事先定義的樣式--> <Button Padding="5" Margin="5" Style="{x:Null}">A Normal Button</Button> </StackPanel> </Window> ``` 此時運行效果如下圖所示：  ## 3.2 樣式觸發器 WPF樣式還支持觸發器，在樣式中定義的觸發器，只有在該屬性或事件發生時才會被觸發，下面具體看看簡單的樣式觸發器是如何定義和使用的，具體的XAML代碼如下所示： ``` <Window x:Class="StyleDemo.SimpleTriggers" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="SimpleTriggers" Height="300" Width="300"> <Window.Resources> <Style x:Key="BigFontButton"> <Style.Setters> <Setter Property="Control.FontFamily" Value="Times New Roman" /> <Setter Property="Control.FontSize" Value="18" /> </Style.Setters> <!--樣式觸發器--> <Style.Triggers> <!--獲得焦點時觸發--> <Trigger Property="Control.IsFocused" Value="True"> <Setter Property="Control.Foreground" Value="Red" /> </Trigger> <!--鼠標移過時觸發--> <Trigger Property="Control.IsMouseOver" Value="True"> <Setter Property="Control.Foreground" Value="Yellow" /> <Setter Property="Control.FontWeight" Value="Bold" /> </Trigger> <!--按鈕按下時觸發--> <Trigger Property="Button.IsPressed" Value="True"> <Setter Property="Control.Foreground" Value="Blue" /> </Trigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel Margin="5"> <Button Padding="5" Margin="5" Style="{StaticResource BigFontButton}" >A Big Button</Button> <TextBlock Margin="5">Normal Content.</TextBlock> <Button Padding="5" Margin="5" >A Normal Button</Button> </StackPanel> </Window> ``` 此時的運行效果如下圖所示：  上面定義的觸發器都是在某個屬性發生變化時觸發的，也可以定義當某個事件激活時的觸發器，我們也把這樣的觸發器稱為事件觸發器，下面示例定義的事件觸發器是等待[MouseEnter](http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.mouseenter(v=vs.110).aspx)事件，一旦觸發MouseEnter事件，則動態改變按鈕的FontSize屬性來形成動畫效果，具體的XAML代碼如下所示： ``` <Window x:Class="StyleDemo.EventTrigger" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="EventTrigger" Height="300" Width="300"> <Window.Resources> <Style x:Key="BigFontButton"> <Style.Setters> <Setter Property="Control.FontFamily" Value="Times New Roman" /> <Setter Property="Control.FontSize" Value="18" /> <Setter Property="Control.FontWeight" Value="Bold" /> </Style.Setters> <Style.Triggers> <!--定義事件觸發器--> <EventTrigger RoutedEvent="Mouse.MouseEnter"> <!--事件觸發時只需的操作--> <EventTrigger.Actions> <!--把動畫放在動畫面板中--> <BeginStoryboard> <!--在0.2秒的時間內將字體放大到22單位--> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="FontSize" To="22" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <!--鼠標移開觸發的事件--> <EventTrigger RoutedEvent="Mouse.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <!--在1秒的時間內將字體尺寸縮小到原來的大小--> <!--如果目標字體尺寸沒有明確指定，則WPF將默認使用第一次動畫之前按鈕的字體尺寸--> <Storyboard> <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="FontSize" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Style.Triggers> </Style> </Window.Resources> <StackPanel Margin="5"> <Button Padding="5" Margin="5" Style="{StaticResource BigFontButton}" >A Big Button</Button> <TextBlock Margin="5">Normal Content.</TextBlock> <Button Padding="5" Margin="5" >A Normal Button</Button> </StackPanel> </Window> ``` 此時的運行效果如下圖所示：  ## 四、小結 到這里，WPF資源和樣式的內容就介紹結束。總結為，WPF樣式類似CSS，可以將多個屬性定義在一個樣式中，而樣式又存放在資源中，資源成了樣式和對象的容器。另外WPF樣式還支持觸發器功能，本文中演示了屬性觸發器和事件觸發器的使用。在接下來一篇博文中將介紹WPF模板。 本文所有源碼：[ResourceAndStyle.zip](http://files.cnblogs.com/zhili/ResourceAndStyle.zip)