編程專題講座開(kāi)發(fā)技術(shù)第27章wpf框架

27WPFWPFWindowsPresentationFoundation的縮寫，它是微軟公司發(fā)布的下一代顯示系統(tǒng)框架，通過(guò)其強(qiáng)大的展現(xiàn)功能，使得用戶體驗(yàn)更加豐富。基于WPF框架，開(kāi)發(fā)人員可WPF引擎。由于該框架內(nèi)置了很多功能強(qiáng)大的應(yīng)用程序開(kāi)發(fā)組件，使WPF在利用現(xiàn)代圖形硬高效的硬件和軟件呈現(xiàn)。WPF的基礎(chǔ)架構(gòu)如圖27.1Milcore屬于非托管組件，之所DirectX的緊的，可實(shí)現(xiàn)高效的硬件和軟件呈現(xiàn)。WPF還要求對(duì)內(nèi)存和執(zhí)行進(jìn)行精確控制，Milcore中的組合引擎受

27.1WPF創(chuàng)建一個(gè)顯示內(nèi)容，然后綁定到某些數(shù)據(jù)。在WPF中，關(guān)于控件的所有內(nèi)容、顯示內(nèi)容2727章WPFXAML語(yǔ)言：XAML語(yǔ)言是一種基于XML的標(biāo)記語(yǔ)言，用于以的方式實(shí)現(xiàn)控件：WPFWPF類。WPF布局：WPF窗口程序或者網(wǎng)頁(yè)程序通過(guò)控件組成之后，需要通過(guò)一定的排列方式來(lái)顯示出頁(yè)面的層次或者區(qū)域特性，這個(gè)特性需要布局的功能來(lái)實(shí)現(xiàn)。實(shí)際上，數(shù)據(jù)綁定完成了窗口控件與數(shù)據(jù)源之間的數(shù)據(jù)交互的過(guò)程。WPF可以通過(guò)ADO.NET等相關(guān)技術(shù)，實(shí)現(xiàn)對(duì)數(shù)據(jù)的，將獲取的數(shù)據(jù)綁定到對(duì)應(yīng)的數(shù)據(jù)控件輸入：由用戶完成的輸入，然后通過(guò)控件檢測(cè)之后發(fā)出響應(yīng)。WPF輸入系統(tǒng)命令：應(yīng)用程序通常具有復(fù)雜的輸入要求。WPF提供了一個(gè)命令系統(tǒng)，它將用戶圖形：WPF在處理圖形功能上，可謂是其強(qiáng)項(xiàng)所在，它引進(jìn)了一組廣泛的、靈活動(dòng)畫：WPF動(dòng)畫支持可以使控件變大、旋轉(zhuǎn)、調(diào)節(jié)和淡化，以產(chǎn)生有趣的頁(yè)面過(guò)渡和效果?？梢詫?duì)大多數(shù)WPF類或者是自定義類進(jìn)行動(dòng)畫處理。：的應(yīng)用包括圖像、和音頻。WPF對(duì)于這些的應(yīng)用提供了特殊文檔。WPF還提供了用于創(chuàng)建、查看、管理、批注、打包和打印文檔的服務(wù)。自定義應(yīng)用程序：WPF提供了強(qiáng)大的自定義功能，通過(guò)該功能，開(kāi)發(fā)人員可以創(chuàng)內(nèi)容模型、控件模板、數(shù)據(jù)模板、樣式、資源、和資源、自定義控件等。WPFVisualStudio2008WPF應(yīng)用程序的相關(guān)編程WPFVisualStudio2008中的項(xiàng)目創(chuàng)建來(lái)實(shí)現(xiàn)，VisualStudio20084WPF類型的項(xiàng)目，分別是：WPF應(yīng)用程序、WPF瀏覽器應(yīng)用程序、WPF用戶控件庫(kù)和WPF自定義控件庫(kù)。WPFWPFVisualStudio2008中WPF的開(kāi)發(fā)界面組成。 27.2VisualStudio2008單擊菜單欄中的“文件”|“新建”|“項(xiàng)目”菜單，彈出“新建項(xiàng)目”的框，如27.3所示。圖27.3VisualStudio2008新建項(xiàng)目在“新建項(xiàng)目”框中，左側(cè)的“項(xiàng)目類型”區(qū)域列出了VisualStudio2008可以創(chuàng)WPFWindows，右側(cè)“模板”區(qū)域選擇“WPF說(shuō)明：若要?jiǎng)?chuàng)建WPF瀏覽器應(yīng)用程序，需要在“模板”區(qū)域選擇“WPF瀏覽器應(yīng)用VisualStudio2008中，通過(guò)“解決方案資源管理器”查看該項(xiàng)目的文件結(jié)構(gòu)，如圖27.4所示。27.4VisualStudio200827.4Window1.xaml27.5“設(shè)計(jì)”視圖和“XAML“設(shè)計(jì)”視圖，用于可視化的界面設(shè)計(jì)，開(kāi)發(fā)人員可以直接通過(guò)拖曳“工具箱”中的控件到“設(shè)計(jì)”視圖中，完成控件的添加。“XAML”視圖用來(lái)顯示對(duì)應(yīng)設(shè)計(jì)視圖界面的XAMLXAML視圖中將自動(dòng)添加該控件對(duì)應(yīng)的XAML代碼。圖27.6所示。單擊圖27.4中的Window1.xaml.cs文件節(jié)點(diǎn)，彈出Window1對(duì)應(yīng)的代碼編寫窗口，如圖27.7所示。技巧：cs文件打開(kāi)代碼編輯窗口之外，27.6XAML27.7WPFWindows應(yīng)用程序，其是用于構(gòu)件客戶端/服務(wù)器應(yīng)用VisualStudio2008WPF應(yīng)WPF27.2.1節(jié)中的步驟（1），WPF應(yīng)用程序，將“名稱”設(shè)置為oWorldWindowsApp，如圖27.8所示。27.8WPF添加控件。在“解決方案資源管理器”窗口中，雙擊Window1.xaml<WindowoWorldWindowsApp.Window1"<!--定義Window ""單擊，名稱為button_Click。添加處理代碼。雙擊Window1.xaml.cs文件，打開(kāi)該文件的代碼編輯窗口。在Windows1類中添加如下代碼。publicpartialclassWindow1:{public{}privatevoidbutton_Click(objectsender,RoutedEventArgs{ oWorld}}方法button_Click為 oWorld！”文本。運(yùn)行該項(xiàng)目。單擊菜單欄“調(diào)試”|“啟動(dòng)調(diào)試”菜單，VisualStudio2008開(kāi)始編譯該項(xiàng)目，同時(shí)彈出運(yùn)行結(jié)果。單擊【點(diǎn)擊】按鈕之后，運(yùn)行結(jié)果如圖27.9所示。27.9WPFVisualStudio2008創(chuàng)建完整的WPF瀏覽器應(yīng)用程序。創(chuàng)建WPF瀏覽器應(yīng)用程序項(xiàng)目。參照27.2.1節(jié)中的步驟（1），創(chuàng)建WPF瀏覽 oWorldPagesApp，如圖27.10所示。27.10WPF<Page xmlns命名空間-->WPF在處理基本應(yīng)用程序和瀏覽器應(yīng)在Page1類中添加如下代碼。publicpartialclassPage1:{public{}privatevoidbutton_Click(objectsender,RoutedEventArgs{ oWorld}}button_Click為響應(yīng)代碼，表示該按鈕被單擊之后的代碼處理邏輯，方法內(nèi)部代碼表示單擊該按鈕之后，彈出一個(gè)消息框，顯示“oWorldWPF瀏覽器應(yīng)用程序的實(shí)現(xiàn)類繼承于Page類。運(yùn)行該項(xiàng)目。單擊菜單欄“調(diào)試”|“啟動(dòng)調(diào)試”菜單，VisualStudio2008開(kāi)始編譯該項(xiàng)目，同時(shí)彈出運(yùn)行結(jié)果。單擊“點(diǎn)擊”按鈕之后，運(yùn)行結(jié)果如圖27.11所示。27.11WPFWPF是實(shí)現(xiàn)系統(tǒng)頁(yè)面展現(xiàn)的框架，所以WPF的展現(xiàn)系統(tǒng)中，控件起著重要的作用，可以說(shuō)眾多絢麗的WPF頁(yè)面效果都是由基本的WPF控件結(jié)合其他技術(shù)實(shí)現(xiàn)的。面的紹ListBox選擇控件，以及簡(jiǎn)單介紹實(shí)現(xiàn)控件的XAML語(yǔ)言。xmlns命名空間-->Title="ListBox測(cè)試Height="286Width="294"><!--定義窗體的標(biāo)題,WindowWPF應(yīng)用程序的窗口定義文件，X:Class屬性表示該XAML文件對(duì)應(yīng)的類的名稱，此實(shí)例的代碼文件名空間為L(zhǎng)istBoxSample，類名稱為Window1。Xmlns屬性表示該XMAL文件定義名空間，默認(rèn)都是標(biāo)準(zhǔn)的/winfx/2006/xaml/presentation，Title屬性表示該窗口的名稱，Height和Width屬性分別表示該窗口的高度和寬度。XMALCanvas布局控件，布局控<SetterProperty="SelectionMode"<Setter<SetterProperty="Background"<Stylex:Key="SimpleListBoxItem"TargetType="{x:Type<SetterProperty="FontSize"<SetterProperty="Background"<SetterProperty="Foreground" <TriggerProperty="ListBoxItem.IsMouseOver"Value=<SetterProperty="Foreground"<SetterProperty="Background"CanvasCanvas.Resources，然后通過(guò)樣式Style節(jié)點(diǎn)進(jìn)行描述。3個(gè)樣式對(duì)應(yīng)的鍵值名稱分別為Simple，SimpleList-BoxItemTriggers3TargetType卻不一樣，Simple對(duì)應(yīng)ListBoxSimpleListBoxItemTriggersListBoxItem的樣式，關(guān)鍵字x:Type表示針對(duì)的對(duì)象類型，x則表示前面已經(jīng)定義過(guò)的xmlns:x="/winfx/2006/xaml命名空間。在Style中定義該指定控靜態(tài)屬性之外，還可以定義樣式的觸發(fā)器屬性，如Triggers屬性的<Style.Triggers>節(jié)點(diǎn)，激活，激活的效果是前景色為Red，背景色為L(zhǎng)ightBlue。<GridName="grid"ShowGridLines="false"Background="White"<DockPanelMargin="10,10,3,3"Grid.Column="0"<ListBoxStyle="{StaticResourceSimple}"Width="100"Height="55"><DockPanelMargin="10,10,3,3"Grid.Column="0"選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)選項(xiàng)<DockPanelMargin="10,10,3,3"Grid.Column="0"<ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)<ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)<ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)<ListBoxItemStyle="{StaticResourceTriggers}"><ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)<ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)<ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)<ListBoxItemStyle="{StaticResourceTriggers}">選項(xiàng)Grid51DockPanelGrid控件中已經(jīng)劃分好后通過(guò)Style="{StaticResource**}"語(yǔ)法，對(duì)各個(gè)控件的樣式進(jìn)行指定。27.12ListBox使用Hyperlink<StackPanel<TextBlockHorizontalAlignment="Left" <HyperlinkNavigateUri="Page2.xaml">下一頁(yè)在頁(yè)面中添加了一個(gè)Hyperlink控件，該控件的NavigateUri屬性設(shè)置為 PagePage2.xamlXAML視圖編輯中添加如下<StackPanel<StackPanel<TextBlockDockPanel.Dock="Top"<TextBlockHorizontalAlignment="Left" <HyperlinkNavigateUri="Page1.xaml">跳轉(zhuǎn)到起始頁(yè)該頁(yè)面中也同樣設(shè)置了一個(gè)Hyperlink控件，該控件的 目標(biāo)頁(yè)面為Page1.xaml， 圖27.13Hyperlink控件的首 圖27.14Hyperlink控件的頁(yè)面切使用DockPanel與說(shuō)明如表27.1所示。27.1 DockPanel控件用于沿布局容器的邊緣定位子內(nèi)容。開(kāi)發(fā)用戶界面時(shí)，如果想將某個(gè)控件DockPanel容器<DockPanel<TextBlockBackground="LightBlue"<TextBlockDockPanel.Dock="Bottom"<TextBlockDockPanel.Dock="Left"<DockPanel<StackPanel 從以上代碼可以看出，DockPanel將該頁(yè)面分為4個(gè)部分，分別是DockPanel.Dock="Top"的標(biāo)題欄、DockPanel.Dock="Left"的菜單欄、子區(qū)域的內(nèi)容欄和DockPanel.Dock="Bottom"的狀態(tài)欄。4部分分別用不同顏色加以區(qū)別，27.15DockPanel使用StackPanelStackPanel控件是另外一種常用的布局控件。StackPane要么垂直疊放包含的控件，要么將包含的控件排列在水平行中，具體情況取決于Orientation屬性的值。如果將比StackPanelStackPanel中，這些控件將被截掉且<BorderBackground="SkyBlue"BorderBrush="Black"<BorderWidth="400"Background="CadetBlue"BorderBrush="Black"<BorderBackground="#ffff99"BorderBrush="Black"<BorderWidth="200"Background="PaleGreen"BorderBrush="Black"<BorderBackground="White"BorderBrush="Black"27.16StackPanelXML數(shù)據(jù)等。本節(jié)通過(guò)一個(gè)實(shí)例介<WindowBackground="Cornsilk"<!--Window窗體的背景色xmlns命名空間-->><c:Source1<Source2 <TextBlockText="{BindingPath=Name}" te<TextBlockText="{BindingXPath=@Name}" 代碼中定義了兩個(gè)數(shù)據(jù)源，它們的鍵值分別為Source1Data和Source2Data，其中Source1Data數(shù)據(jù)源為對(duì)象數(shù)據(jù)源，它對(duì)應(yīng)了代碼中的Source1類實(shí)例。Source2Data添加數(shù)據(jù)模板定義。接下來(lái)通過(guò)DataTemte定義了綁定數(shù)據(jù)控件的數(shù)據(jù)模板，<!--添加TextBlock控件,字大小為18,字重量為Bold,邊距10,居中對(duì)齊,內(nèi)部文本為多數(shù)<TextBlockFontSize="18FontWeight="BoldMargin="10"<ListBoxName="myListBox"Height="300"Width="200"<!--publicclass{privatestring_name;publicpublicclass{privatestring_name;publicstring{ {return}{_name=}}publicSource1Item(string{Name=}}publicclassSource1:{public{}}于前臺(tái)進(jìn)行數(shù)據(jù)源綁定的對(duì)象說(shuō)明類。Source1類繼承了ObservableCollection類。ObservableCollection類表示一個(gè)動(dòng)態(tài)數(shù)據(jù)集合，在添加項(xiàng)、移除項(xiàng)或刷新整個(gè)列表時(shí)，此集合將提供通知。Add方法表示向該Source1集合中添加數(shù)據(jù)對(duì)象。27.17 義xmlns命名空間--> "Height="300"Width="383"><!--定義窗體的標(biāo)題,高度和<DockPanelBackground="Cornsilk"HorizontalAlignment="Left"Width="350"Height="150" te <CanvasWidth="300"<!--添加TextBlock控件,指定字體大小10,前景 lue,寬度180,畫布<TextBlockFontSize="10"Foreground="Blue"Width="180"Canvas.Left="0"Text="{BindingPath=StockItemName}"/><TextBlockFontSize="10"Foreground="Green"Text="$"<TextBlockFontSize="10"Foreground="Green"Width="80"Canvas.Left="190"Text="{BindingPath=StockItemPrice}"/> 靠位置為上部--><TextBlockFontSize="18"Margin="5"FontWeight="Bold" <ListBoxName="MyListBox"DockPanel.Dock="Top"Width="315"Height="80"Background="HoneyDew"ItemsSource="{BindingSource={StaticResource publicclassStockpublicclassStock:{privatestring_stockitemname=privatedecimal_stockitemprice=publicStock(stringnewStockItemName,decimal{_stockitemname=_stockitemprice=}publicstring{{return}{if(_stockitemname.Equals(value)=={_stockitemname=}}}publicdecimal{{return}{if(_stockitemprice.Equals(value)=={{_stockitemprice=}}} publiceventPropertyChangedEventHandlerprivatevoidOnPropertyChanged(string{if(PropertyChanged!={}}}publicclassStockCollection:{privateStockitem1=newStock("科技",(decimal)24.95);privateStockitem2=newStock("鋼鐵",(decimal)16.05);privateStockitem3=newStock("銀行",(decimal)100.0);privatevoidTimer1_Elapsed(objectsender,System.Timers.ElapsedEventArgse){//分別設(shè)定子項(xiàng)的StockItemPrice屬性item1.StockItemPrice+=(decimal)1.25;item2.StockItemPrice+=(decimal)2.45;item3.StockItemPricedecimal)10.55;}privatevoid{System.Timers.TimerTimer1=newTimer1.Enabledtrue;Timer1.Interval=Timer1.Elapsed+=newSystem.Timers.ElapsedEventHandler}publicpublic:{}}在上面代碼中，首先定義了用于顯示的數(shù)據(jù)項(xiàng)類Stock，其實(shí)現(xiàn)了InotifyProperty-完成向客戶端發(fā)出某一屬性值已更改。為了實(shí)現(xiàn)接口，代碼中定義了委托對(duì)象PropertyChangedStockItemNameStockItemPrice屬性發(fā)生更新的時(shí)候，調(diào)用OnPropertyChanged方法來(lái)實(shí)現(xiàn)PropertyChanged委托的調(diào)用。27.18使用BrushWPF圖形處理中，需要使用畫筆將顏色或者圖形、風(fēng)格添加到頁(yè)面中，這就需要Brush對(duì)象來(lái)實(shí)現(xiàn)。本節(jié)實(shí)例中將涉及到3種Brush對(duì)象，分別是SolidColorBrush、LinearGradientBrush和RadialGradientBrush。SolidColorBrush使用純色繪制區(qū)域；rushadialadientBush焦點(diǎn)定義漸變的開(kāi)始，而圓定義漸變的終點(diǎn)。3種繪制方式各有不同，下面通過(guò)實(shí)例來(lái)分<StyleTargetType="{x:Type<SetterProperty="Stroke"<SetterProperty="Margin"<StyleTargetType="{x:Type<SetterProperty="Stroke"<SetterProperty="Margin"<GridMargin="10"<RowDefinitionHeight="40"<RowDefinitionHeight="10"<RowDefinitionHeight="10"SolidColorBrush<TextBlockGrid.Row="2"Grid.Column="0"<GridGrid.Row="3"Grid.Column="0"<RectangleFill="Red"Width="150"Height="150"Grid.Row="0"Grid.Column="0"Grid.RowSpan="3"/><RectangleFill="MediumBlue"Width="50"Height="50"Grid.Row="0"Grid.Column="1"/><RectangleFill="Purple"Width="50"Height="50"Grid.Row="1"Grid.Column="1"/><RectangleFill="Gold"Width="50"Height="50"Grid.Row="2"Grid.Column="1"/>色，同時(shí)指定了每個(gè)Rectangle圖形的寬度、高度以及在網(wǎng)格中的位置等屬性。LinearGradientBrushLinearGradientBrush的繪制代碼<TextBlockGrid.Row="2"<GridGrid.Row="3"Grid.Column="2"<GradientStopColor="Yellow"Offset="0.0"<GradientStopColor="Orange"Offset="0.5"<GradientStopColor="Red"Offset="1.0"<GradientStopColor="Blue"Offset="0.0"<GradientStopColor="Purple"Offset="1.0"<GradientStopColor="Purple"Offset="0.0"<GradientStopColor="White"Offset="1.0"<GradientStopColor="Gold"Offset="0.0"<GradientStopColor="Red"Offset="0.5"<GradientStopColor="Orange"Offset="1.0"</GridGrid控件結(jié)束添加RadialGradientBrush繪圖控件。下面添加RadialGradientBrush的繪制代碼<TextBlockGrid.Row="2"<GridGrid.Row="3"<GradientStopColor="Yellow"Offset="0.0"<GradientStopColor="Orange"Offset="0.5"<GradientStopColor="Red"Offset="1.0"<EllipseWidth="50"Height="50"Grid.Row="0"<GradientStopColor="White"Offset="0.0"<GradientStopColor="Black"Offset="1.0"<EllipseWidth="50"Height="50"Grid.Row="1"<GradientStopColor="Purple"Offset="0.5"<EllipseWidth="50"Height="50"Grid.Row="2"<GradientStopColor="Yellow"Offset="0.0"<GradientStopColor="Orange"Offset="0.5"<GradientStopColor="Red"Offset="1.0"</GridGrid控件結(jié)束上面代碼繪制了4個(gè)Ellipse圖形，同樣使用Fill屬性填充顏色，但由于使用的是RadialGradientBrushFillRadialGradientBrush的集合，同時(shí)指定了每個(gè)Ellipse圖形的GradientStops屬性來(lái)設(shè)置顏色的漸變。27.19Brush使用Storyboard和效果。WPF允許對(duì)大多數(shù)屬性進(jìn)行動(dòng)畫處理。WPFStoryboard實(shí)現(xiàn)控制圖形尺寸，形成動(dòng)<RectangleWidth="200"Height="200"<LinearGradientBrushStartPoint="0,0"SpreadMethod="Pad"EndPoint="0,1"Map <GradientStopOffset="0"Color="red"<GradientStopOffset="0.5"Color="green" <GradientStop "Color="blue"XAMLRectangleLinearGradientBrush對(duì)其進(jìn)<Storyboard的起止范圍,重復(fù)時(shí)間屬性,開(kāi)始時(shí)間屬性--><DoubleAnimationStoryboard.TargetName="myRectangle"From="0"To="100"RepeatBehavior="0:0:50"BeginTime="0:0:0.5"/>時(shí)間--><DoubleAnimationStoryboard.TargetName="myRectangle"Storyboard.TargetProperty="(Rectangle.Height)"From="0"To="100"AutoReverse="true"RepeatBehavior="0:0:50"BeginTime="0:0:0.5"Duration="0:0:2"/>中定義了