本章導(dǎo)讀：本章的主要內(nèi)容是利用資源、樣式和模板的相關(guān)知識，美化圖書管理系統(tǒng)。通過項目“系統(tǒng)中各控件美化”為導(dǎo)向，四個任務(wù)（美化TextBlock控件、美化TextBox控件、美化Button控件和自定義控件模板）為驅(qū)動，學(xué)習(xí)有關(guān)WPF資源、樣式和模板的知識，本項目著力使學(xué)習(xí)者對WPF的資源、樣式有一定認(rèn)識，初步掌握自定義控件模板的用法。項目六WPF資源、樣式和模板—項目美化

——任務(wù)三

美化Button控件觸發(fā)器（Trigger）是指某種條件發(fā)生變化時自動觸發(fā)某些動作。在<Style>和</Style>之間，可以利用樣式設(shè)置觸發(fā)器。讀者添加界面使用的Button是默認(rèn)WPF元素樣式，我們可以利用XAML代碼來實現(xiàn)對其的美化。即在XAML資源中用Style元素使用觸發(fā)器，并在控件中引用它。一、任務(wù)描述：二、知識準(zhǔn)備：1屬性觸發(fā)器2數(shù)據(jù)觸發(fā)器3事件觸發(fā)器觸發(fā)器，從某種意義上來說它也是一種Style，因為它包含有一個Setter集合，并根據(jù)一個或多個條件執(zhí)行Setter中的屬性改變。因為復(fù)用的緣故，Styles是放置觸發(fā)器的最好位置。但對于每個FrameworkElement來說都有Triggers集合，你也可以放在Triggers集合里。觸發(fā)器有三種類型：二、知識準(zhǔn)備：觸發(fā)器（1）屬性觸發(fā)器PropertyTrigger：當(dāng)DependencyProperty的值發(fā)生改變時觸發(fā)。

（2）數(shù)據(jù)觸發(fā)器DataTrigger：

當(dāng)普通.NET屬性的值發(fā)生改變時觸發(fā)。（3）事件觸發(fā)器EventTrigger：

當(dāng)路由事件被觸發(fā)時調(diào)用。二、知識準(zhǔn)備：觸發(fā)器屬性觸發(fā)器（PropertyTrigger），是WPF中最常用的觸發(fā)器類型。類似于Setter，Trigger也有Property和Value這兩個屬性，Property是Trigger關(guān)注的屬性名稱，Value是觸發(fā)條件。Triggers類還有一個Setters屬性，此屬性值是一組Setter，一旦觸發(fā)條件被滿足，這組Setter的“屬性-值”就會被應(yīng)用，觸發(fā)條件不再滿足后，各屬性值會被還原。二、知識準(zhǔn)備：1、屬性觸發(fā)器我們看一個簡單的例子，這個例子中包含一個針對TextBox的Style，當(dāng)TextBox的IsEnabled屬性為true的時候背景色和字體會改變。XAML代碼如下：二、知識準(zhǔn)備：1、屬性觸發(fā)器<Window.Resources><StyleTargetType="TextBox"><Style.Triggers><TriggerProperty="IsEnabled"Value="true"><Trigger.Setters><SetterProperty="Background"Value="Orange"/><SetterProperty="FontSize"Value="25"/><SetterProperty="Foreground"Value="Blue"/></Trigger.Setters></Trigger></Style.Triggers></Style></Window.Resources>二、知識準(zhǔn)備：簡單進行WPF布局，查看屬性觸發(fā)器的效果：<StackPanel><TextBlock

FontSize="20"Text="下面的文本框的IsEnabled為False"/><TextBoxMargin="3"Width="280"IsEnabled="False"/><TextBlock

FontSize="20"Text="下面的文本框的IsEnabled為true"/><TextBoxMargin="3"Width="280"IsEnabled="True"/></StackPanel>二、知識準(zhǔn)備：運行效果如下圖所示。二、知識準(zhǔn)備：在屬性觸發(fā)器中還有一種情形，叫MultiTrigger。MultiTrigger是個容易讓人誤解的名字，會讓人以為是多個Trigger集成在一起，實際上叫MultiConditionTrigger更合適。因為必須多個條件同時成立才會被觸發(fā)。MultiTrigger比Trigger多了一個Conditions屬性，需要同時成立的條件就存儲在這個集合中。二、知識準(zhǔn)備：我們通過下面這個例子來了解下MultiTrigger。

當(dāng)CheckBox的IsChecked屬性為true時，CheckBox的前景色和字體會發(fā)生改變，這種情形是基本的Trigger；當(dāng)CheckBox被選中且Content為“把酒問青天”時才會觸發(fā)其Style，這種就是MultiTrigger了。XAML代碼如下：二、知識準(zhǔn)備：<StyleTargetType="CheckBox"><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><ConditionProperty="IsChecked"Value="true"/><ConditionProperty="Content"Value="把酒問青天"/></MultiTrigger.Conditions><MultiTrigger.Setters><SetterProperty="FontSize"Value="20"/><SetterProperty="Foreground"Value="Blue"/></MultiTrigger.Setters></MultiTrigger></Style.Triggers></Style>二、知識準(zhǔn)備：簡單進行WPF布局，查看多條件屬性觸發(fā)器的運行效果：<StackPanel><CheckBoxContent="明月幾時有"Margin="5"/><CheckBoxContent="把酒問青天"Margin="5"/><CheckBoxContent="不知天上宮闕"Margin="5"/><CheckBoxContent="今夕是何年"Margin="5"/></StackPanel>二、知識準(zhǔn)備：單擊選中其他CheckBox時沒有觸發(fā)觸發(fā)器，單擊第2個CheckBox時才發(fā)生變化。運行效果如下圖所示。二、知識準(zhǔn)備：數(shù)據(jù)觸發(fā)器（Data

Trigger），和屬性觸發(fā)器除了面對的對象類型不一樣外，其他完全相同。數(shù)據(jù)觸發(fā)器是來檢測非依賴屬性---也就是用戶自定義的.NET屬性---的值發(fā)生變化時來觸發(fā)并調(diào)用符合條件的一系列Setter集合。二、知識準(zhǔn)備：2、數(shù)據(jù)觸發(fā)器在圖書管理系統(tǒng)中，用戶簡單分為2種：管理員(Admin)和讀者(Reader)。我們在查看所有用戶時，當(dāng)用戶是Admin時給予紅色突出顯示。下邊的示例演示了在綁定的ListBox里如果某個tb_users對象符合某種特點（Role=Admin），則以突出方式顯示這個對象。這里就用了DataTrigger，因為我們需要檢測的是tb_users對象的屬性Role，這個對象是自定義的非可視化對象并且其屬性為普通.NET屬性。二、知識準(zhǔn)備：（1）新建WPF項目，名稱為DataTriggerExam。首先添加一個自定義tb_users類，屬性為Role、Name和UserID。代碼如下：二、知識準(zhǔn)備：classtb_users{publicstringrole;publicstringRole{get{returnrole;}set{role=value;}}//還有Name屬性、UserID屬性二、知識準(zhǔn)備：publicstringname;publicstringName{get{returnname;}set{name=value;}}二、知識準(zhǔn)備：publicstringuserID;publicstringUserID{get{returnuserID;}set{userID=value;}}}（2）聲明一個列表類Userlist，用來保存多個tb_uers對象

classUserlist:ObservableCollection<tb_users>{publicUserlist(){}}二、知識準(zhǔn)備：（3）為了在前臺可以使用后臺創(chuàng)建的類，需要引入當(dāng)前項目所在的名稱空間。<Window……

xmlns:local="clr-namespace:DataTriggerExam"Title="圖書信息管理"Height="350"Width="525">二、知識準(zhǔn)備：（3）創(chuàng)建Userlist的實例，初始包含4條記錄。寫到Window的資源里。<Window.Resources><local:Userlistx:Key="myUsers"><local:tb_usersRole="Admin"Name="鄭佳"UserID="1"/><local:tb_usersRole="Reader"Name="朱婉玲"UserID="2"/><local:tb_usersRole="Reader"Name="柳澤敦"UserID="3"/><local:tb_usersRole="Admin"Name="劉小歌"UserID="4"/></local:Userlist></Window.Resources>二、知識準(zhǔn)備：（4）主要的部分定義在了Style中，其針對的是每個ListBox的項，當(dāng)其被綁定的數(shù)據(jù)的屬性Role為Admin時，突出顯示。ListBoxItem顯示數(shù)據(jù)時顯示tb_users的Name屬性，需要自定義DataTemplate模板。二、知識準(zhǔn)備：<DataTemplate

DataType="{x:Type

local:tb_users}"><TextBlockText="{BindingPath=Name}"/></DataTemplate><StyleTargetType="{x:Type

ListBoxItem}"><Style.Triggers><DataTriggerBinding="{BindingPath=Role}"Value="Admin"><SetterProperty="Foreground"Value="Red"/></DataTrigger></Style.Triggers></Style>（5）數(shù)據(jù)綁定到ListBox控件。代碼如下：<ListBoxWidth="200"

ItemsSource="{BindingSource={StaticResource

myUsers}}"/>二、知識準(zhǔn)備：按<F5>運行程序，運行效果如下。二、知識準(zhǔn)備：有時我們會遇到要求多個數(shù)據(jù)條件同時滿足時才能觸發(fā)變化的需求，此時可以考慮使用MultiDataTrigger。比如在上面的例子中有這樣一個需求：用戶界面上使用ListBox顯示一列用戶數(shù)據(jù)，當(dāng)用戶對象同時滿足Role為Admin、UserID為1的時候，條目高亮顯示。

在上例中只需要重新設(shè)計MultiDataTrigger即可。二、知識準(zhǔn)備：<StyleTargetType="{x:Type

ListBoxItem}"><Style.Triggers><MultiDataTrigger><MultiDataTrigger.Conditions><ConditionBinding="{BindingPath=Role}"Value="Admin"/><ConditionBinding="{BindingPath=UserID}"Value="1"/></MultiDataTrigger.Conditions><MultiDataTrigger.Setters><SetterProperty="Background"Value="Orange"/></MultiDataTrigger.Setters></MultiDataTrigger></Style.Triggers></Style>二、知識準(zhǔn)備：運行效果如下圖。二、知識準(zhǔn)備：

事件觸發(fā)器（EventTrigger），顧名思義是在某個事件被觸發(fā)時來調(diào)用這個觸發(fā)器的相關(guān)操作。因為WPF提供了用XAML來標(biāo)記對象、事件等，所以其提供了一些在普通.NET開發(fā)中看似沒用的屬性例如IsMouseOver,IsPressed等，這是為了XAML來用的，使其可以很方便的通過某個屬性來判斷狀態(tài)，也方便了PropertyTrigger的應(yīng)用。而作為事件觸發(fā)器來說，它所做的事情和PropertyTrigger類似，不過是它的內(nèi)部不能是簡單的Setter集合，而必須是TriggerAction的實例。二、知識準(zhǔn)備：3、事件觸發(fā)器以下示例演示了如何應(yīng)用EventTrigger使得當(dāng)鼠標(biāo)點擊按鈕時，讓按鈕的陰影效果發(fā)生變化。二、知識準(zhǔn)備：<Stylex:Key="buttonStyle"TargetType="Button"><SetterProperty="Opacity"Value="0.3"/><SetterProperty="MaxHeight"Value="70"/><Style.Triggers><TriggerProperty="Focusable"Value="True"><Trigger.Setters><SetterProperty="Opacity"Value="1.0"/></Trigger.Setters></Trigger><EventTrigger

RoutedEvent="Mouse.MouseEnter"><EventTrigger.Actions><BeginStoryboard>二、知識準(zhǔn)備：<Storyboard><DoubleAnimationDuration="0:0:0.2"

Storyboard.TargetProperty="MaxHeight"To="100"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><EventTrigger

RoutedEvent="Mouse.MouseLeave"><EventTrigger.Actions>二、知識準(zhǔn)備：<Storyboard><DoubleAnimationDuration="0:0:1"

Storyboard.TargetProperty="MaxHeight"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger></Style.Triggers></Style>二、知識準(zhǔn)備：聲明一個Button控件，觸發(fā)這個事件觸發(fā)器。

<ButtonMargin="30"Content="EventTrigger示例"Style="{BindingSource={StaticResource

buttonStyle}}"/>二、知識準(zhǔn)備：運行效果如下圖所示。當(dāng)鼠標(biāo)進入到按鈕上方時，按鈕變大。二、知識準(zhǔn)備：通過樣式模板化美化讀者借書窗體界面的Button控件。三、任務(wù)分析：1.打開之前創(chuàng)建的讀者借書應(yīng)用程序，初始Button控件顯示W(wǎng)PF默認(rèn)樣式。四、任務(wù)實施：2.在<Window.Resources>內(nèi)編寫B(tài)utton的觸發(fā)器代碼。主要代碼如下：<Stylex:Key="buttonMouseOver"TargetType="{x:TypeButton}"><Style.Triggers><TriggerProperty="IsMouseOver"Value="True"><SetterProperty="RenderTransform"><Setter.Value><RotateTransformAngle="10"></RotateTransform></Setter.Value></Setter><SetterProperty="RenderTransformOrigin"Value="0.5,0.5“/><SetterProperty="Background"Value="#FF0CC030"/></Trigger></Style.Triggers></Style>四、任務(wù)實施：3.修改窗體的XAML代碼，設(shè)置Button外觀樣式。主要代碼如下：<ButtonContent="借出當(dāng)前圖書"Style="{DynamicResource

ResourceKey=buttonMouseOver}"/>四、任務(wù)實施：按<F5>鍵運行程序，將鼠標(biāo)移動到按鈕上面，查看其運行效果。當(dāng)鼠標(biāo)移到“借出當(dāng)前圖書”按鈕時，按鈕有明顯綠色出現(xiàn)并且轉(zhuǎn)動了角度，移開鼠標(biāo)則恢復(fù)原狀。當(dāng)移到“清除所有記錄”按鈕時，按鈕有明顯下移運動，移開鼠標(biāo)則恢復(fù)原狀。如圖所示。四、任務(wù)實施：項目六WPF資源、樣式和模板—項目美化

——任務(wù)四

美化DataGrid控件自定義控件的外觀，還可以采用數(shù)據(jù)模板化方式。數(shù)據(jù)模板化用到了數(shù)據(jù)綁定的相關(guān)知識。讀者管理界面使用的DataGrid是默認(rèn)WPF元素樣式，我們可以利用DataTemplate來實現(xiàn)對其美化。讀者管理界面出現(xiàn)是變旋轉(zhuǎn)邊放大，有動態(tài)特效。一、任務(wù)描述：二、知識準(zhǔn)備：1自定義DataGrid外觀

DataGrid控件是一個功能非常多的控件，除了可以利用該控件顯示、編輯數(shù)據(jù)之外，還可以利用它進行靈活的樣式控制。

默認(rèn)情況下，當(dāng)我們?yōu)镈ataGrid

控件設(shè)置ItemSource

屬性后，DataGrid

會根據(jù)數(shù)據(jù)類型自動生成相應(yīng)的列，下表列出DataGrid

支持的四種列及其數(shù)據(jù)類型。二、知識準(zhǔn)備：1、自定義DataGrid外觀1、自定義DataGrid外觀二、知識準(zhǔn)備：

除此之外，我們可以用DataGridTemplateColumn自定義其他數(shù)據(jù)類型。自定義類型時，一般在資源字典中定義模板，在App.xaml中合并資源字典。下面的代碼演示了如何分別定義顯示模板和編輯模板。1、自定義DataGrid外觀二、知識準(zhǔn)備：<DataTemplatex:Key="myTemplate"><ImageHeight="40"Source="{BindingmyPhoto}"/></DataTemplate><DataTemplatex:Key="EditMyTemplate">……</DataTemplate>1、自定義DataGrid外觀二、知識準(zhǔn)備：下面的代碼演示了如何在DataGrid中引用定義的模板。<DataGridx:Name="dataGrid1"ItemsSource="Binding"AutoGenerateColumns="False"><DataGrid.Columns><DataGridTemplateColumnHeader="照片"CellTemplate="{StaticResource

myTemplate}"

CellEditingTemplate="EditMyTemplate"/></DataGrid.Columns></DataGrid>1、自定義DataGrid外觀二、知識準(zhǔn)備：

DataGrid的AutoGenerateColumns屬性控制是否自動生成列，該屬性默認(rèn)的值為True。用XAML描述綁定的列時，需要將該屬性設(shè)置為False。1、自定義DataGrid外觀二、知識準(zhǔn)備：用XAML實現(xiàn)數(shù)據(jù)綁定以及顯示和編輯各種類型數(shù)據(jù)的基本方法。三、任務(wù)分析：1.打開之前創(chuàng)建的讀者管理項目，運行此應(yīng)用程序，點擊“顯示全部”顯示所有讀者信息。此時DataGrid顯示默認(rèn)WPF外觀。2.在項目下添加一個Dictionarys文件夾，然后在該文件夾下添加一個文件名為Dictionary1.xaml的資源文件，代碼如下：四、任務(wù)實施：<ResourceDictionary……><Stylex:Key="Animate1"><SetterProperty="Control.Margin"Value="20"/><SetterProperty="Control.RenderTransformOrigin"Value="0.5,0.5"/><SetterProperty="Control.Background"><Setter.Value><SolidColorBrushx:Name="backColor"Color="FloralWhite"/></Setter.Value></Setter>四、任務(wù)實施：<SetterProperty="Control.RenderTransform"><Setter.Value><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform/><TranslateTransform/></TransformGroup></Setter.Value></Setter>四、任務(wù)實施：<Style.Triggers><EventTrigger

RoutedEvent="FrameworkElement.Loaded"><BeginStoryboard><Storyboard><DoubleAnimationUsingKeyFrames

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"><EasingDoubleKeyFrame

KeyTime="0"Value="0.1"/><EasingDoubleKeyFrame

KeyTime="0:0:1"Value="1"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

四、任務(wù)實施：<EasingDoubleKeyFrame

KeyTime="0"Value="0.1"/><EasingDoubleKeyFrame

KeyTime="0:0:1"Value="1"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"><EasingDoubleKeyFrame

KeyTime="0"Value="-720"/><EasingDoubleKeyFrame

KeyTime="0:0:1"Value="0"/></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers></Style></ResourceDictionary>四、任務(wù)實施：在這個資源字典中，創(chuàng)建了一個x:Key=”Animate1”的動畫，其效果是邊放大邊旋轉(zhuǎn)。3.修改App.xaml，添加下面的代碼，以便在整個應(yīng)用程序都可以引用資源字典中定義的動畫。四、任務(wù)實施：<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionarySource="/Dictionarys/Dictionary1.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>四、任務(wù)實施：

在應(yīng)用程序中，凡是用Style=”{StaticResourceAnimate1}”音樂該動畫的控件，都會在初次加載時自動邊旋轉(zhuǎn)邊放大，直到放大到該控件的大小為止。4.添加一個名為myResource的文件夾，然后在該文件夾下添加一個名為MyDataGridTemplate.xaml的資源字典，將代碼改為下面的內(nèi)容。四、任務(wù)實施：<DataTemplatex:Key="DateTemplate"><StackPanelWidth="40"Height="30"><BorderBackground="Orange"BorderBrush="Black"><TextBlockText="{Bindingbztime,StringFormat={}{0:MM-dd}}"

FontSize="10"HorizontalAlignment="Center"/></Border><BorderBackground="Green"BorderBrush="Black“><TextBlockText="{Bindingbztime,StringFormat={}{0:yyyy}}"

FontSize="10"HorizontalAlignment="Center"/></Border></StackPanel></DataTemplate>四、任務(wù)實施：<DataTemplatex:Key="EditingDateTemplate"><DatePicker

SelectedDate="{Bindingbztime,Mode=TwoWay,NotifyOnValidationError=False,ValidatesOnExceptions=True}"/></DataTemplate