WPF應(yīng)用開發(fā)項(xiàng)目教程課件6.3 WPF資源、樣式和模板

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

——任務(wù)三

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

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

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

當(dāng)路由事件被觸發(fā)時(shí)調(diào)用。二、知識(shí)準(zhǔn)備：觸發(fā)器屬性觸發(fā)器（PropertyTrigger），是WPF中最常用的觸發(fā)器類型。類似于Setter，Trigger也有Property和Value這兩個(gè)屬性，Property是Trigger關(guān)注的屬性名稱，Value是觸發(fā)條件。Triggers類還有一個(gè)Setters屬性，此屬性值是一組Setter，一旦觸發(fā)條件被滿足，這組Setter的“屬性-值”就會(huì)被應(yīng)用，觸發(fā)條件不再滿足后，各屬性值會(huì)被還原。二、知識(shí)準(zhǔn)備：1、屬性觸發(fā)器我們看一個(gè)簡(jiǎn)單的例子，這個(gè)例子中包含一個(gè)針對(duì)TextBox的Style，當(dāng)TextBox的IsEnabled屬性為true的時(shí)候背景色和字體會(huì)改變。XAML代碼如下：二、知識(shí)準(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>二、知識(shí)準(zhǔn)備：簡(jiǎn)單進(jì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>二、知識(shí)準(zhǔn)備：運(yùn)行效果如下圖所示。二、知識(shí)準(zhǔn)備：在屬性觸發(fā)器中還有一種情形，叫MultiTrigger。MultiTrigger是個(gè)容易讓人誤解的名字，會(huì)讓人以為是多個(gè)Trigger集成在一起，實(shí)際上叫MultiConditionTrigger更合適。因?yàn)楸仨毝鄠€(gè)條件同時(shí)成立才會(huì)被觸發(fā)。MultiTrigger比Trigger多了一個(gè)Conditions屬性，需要同時(shí)成立的條件就存儲(chǔ)在這個(gè)集合中。二、知識(shí)準(zhǔn)備：我們通過下面這個(gè)例子來了解下MultiTrigger。

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

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

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

xmlns:local="clr-namespace:DataTriggerExam"Title="圖書信息管理"Height="350"Width="525">二、知識(shí)準(zhǔn)備：（3）創(chuàng)建Userlist的實(shí)例，初始包含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>二、知識(shí)準(zhǔn)備：（4）主要的部分定義在了Style中，其針對(duì)的是每個(gè)ListBox的項(xiàng)，當(dāng)其被綁定的數(shù)據(jù)的屬性Role為Admin時(shí)，突出顯示。ListBoxItem顯示數(shù)據(jù)時(shí)顯示tb_users的Name屬性，需要自定義DataTemplate模板。二、知識(shí)準(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}}"/>二、知識(shí)準(zhǔn)備：按<F5>運(yùn)行程序，運(yùn)行效果如下。二、知識(shí)準(zhǔn)備：有時(shí)我們會(huì)遇到要求多個(gè)數(shù)據(jù)條件同時(shí)滿足時(shí)才能觸發(fā)變化的需求，此時(shí)可以考慮使用MultiDataTrigger。比如在上面的例子中有這樣一個(gè)需求：用戶界面上使用ListBox顯示一列用戶數(shù)據(jù)，當(dāng)用戶對(duì)象同時(shí)滿足Role為Admin、UserID為1的時(shí)候，條目高亮顯示。

在上例中只需要重新設(shè)計(jì)MultiDataTrigger即可。二、知識(shí)準(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>二、知識(shí)準(zhǔn)備：運(yùn)行效果如下圖。二、知識(shí)準(zhǔn)備：

事件觸發(fā)器（EventTrigger），顧名思義是在某個(gè)事件被觸發(fā)時(shí)來調(diào)用這個(gè)觸發(fā)器的相關(guān)操作。因?yàn)閃PF提供了用XAML來標(biāo)記對(duì)象、事件等，所以其提供了一些在普通.NET開發(fā)中看似沒用的屬性例如IsMouseOver,IsPressed等，這是為了XAML來用的，使其可以很方便的通過某個(gè)屬性來判斷狀態(tài)，也方便了PropertyTrigger的應(yīng)用。而作為事件觸發(fā)器來說，它所做的事情和PropertyTrigger類似，不過是它的內(nèi)部不能是簡(jiǎn)單的Setter集合，而必須是TriggerAction的實(shí)例。二、知識(shí)準(zhǔn)備：3、事件觸發(fā)器以下示例演示了如何應(yīng)用EventTrigger使得當(dāng)鼠標(biāo)點(diǎn)擊按鈕時(shí)，讓按鈕的陰影效果發(fā)生變化。二、知識(shí)準(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>二、知識(shí)準(zhǔn)備：<Storyboard><DoubleAnimationDuration="0:0:0.2"

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

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

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

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

buttonStyle}}"/>二、知識(shí)準(zhǔn)備：運(yùn)行效果如下圖所示。當(dāng)鼠標(biāo)進(jìn)入到按鈕上方時(shí)，按鈕變大。二、知識(shí)準(zhǔn)備：通過樣式模板化美化讀者借書窗體界面的Button控件。三、任務(wù)分析：1.打開之前創(chuàng)建的讀者借書應(yīng)用程序，初始Button控件顯示W(wǎng)PF默認(rèn)樣式。四、任務(wù)實(shí)施：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ù)實(shí)施：3.修改窗體的XAML代碼，設(shè)置Button外觀樣式。主要代碼如下：<ButtonContent="借出當(dāng)前圖書"Style="{DynamicResource

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

——任務(wù)四

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

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

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

控件設(shè)置ItemSource

屬性后，DataGrid

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

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

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

myTemplate}"

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

DataGrid的AutoGenerateColumns屬性控制是否自動(dòng)生成列，該屬性默認(rèn)的值為True。用XAML描述綁定的列時(shí)，需要將該屬性設(shè)置為False。1、自定義DataGrid外觀二、知識(shí)準(zhǔn)備：用XAML實(shí)現(xiàn)數(shù)據(jù)綁定以及顯示和編輯各種類型數(shù)據(jù)的基本方法。三、任務(wù)分析：1.打開之前創(chuàng)建的讀者管理項(xiàng)目，運(yùn)行此應(yīng)用程序，點(diǎn)擊“顯示全部”顯示所有讀者信息。此時(shí)DataGrid顯示默認(rèn)WPF外觀。2.在項(xiàng)目下添加一個(gè)Dictionarys文件夾，然后在該文件夾下添加一個(gè)文件名為Dictionary1.xaml的資源文件，代碼如下：四、任務(wù)實(shí)施：<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ù)實(shí)施：<SetterProperty="Control.RenderTransform"><Setter.Value><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform/><TranslateTransform/></TransformGroup></Setter.Value></Setter>四、任務(wù)實(shí)施：<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ù)實(shí)施：<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ù)實(shí)施：在這個(gè)資源字典中，創(chuàng)建了一個(gè)x:Key=”Animate1”的動(dòng)畫，其效果是邊放大邊旋轉(zhuǎn)。3.修改App.xaml，添加下面的代碼，以便在整個(gè)應(yīng)用程序都可以引用資源字典中定義的動(dòng)畫。四、任務(wù)實(shí)施：<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionarySource="/Dictionarys/Dictionary1.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>四、任務(wù)實(shí)施：

在應(yīng)用程序中，凡是用Style=”{StaticResourceAnimate1}”音樂該動(dòng)畫的控件，都會(huì)在初次加載時(shí)自動(dòng)邊旋轉(zhuǎn)邊放大，直到放大到該控件的大小為止。4.添加一個(gè)名為myResource的文件夾，然后在該文件夾下添加一個(gè)名為MyDataGridTemplate.xaml的資源字典，將代碼改為下面的內(nèi)容。四、任務(wù)實(shí)施：<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ù)實(shí)施：<DataTemplatex:Key="EditingDateTemplate"><DatePicker

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