WPF應(yīng)用開(kāi)發(fā)項(xiàng)目教程課件2.3 WPF UI制作

本章導(dǎo)讀：本章的主要內(nèi)容是學(xué)習(xí)WPF的項(xiàng)目啟動(dòng)、窗體、布局控件和常規(guī)功能控件。然后通過(guò)項(xiàng)目“設(shè)計(jì)制作圖書(shū)借閱系統(tǒng)UI”為導(dǎo)向，三個(gè)任務(wù)（登錄窗體UI、注冊(cè)窗體UI、主窗體的制作）為驅(qū)動(dòng)，學(xué)習(xí)有關(guān)WPF的布局控件、功能控件和不規(guī)則窗體知識(shí)基礎(chǔ)，本項(xiàng)目著力使學(xué)習(xí)者對(duì)WPFUI設(shè)計(jì)有個(gè)清晰的認(rèn)識(shí)。項(xiàng)目二WPF布局設(shè)計(jì)—制作圖書(shū)借閱系統(tǒng)UI

——任務(wù)三設(shè)計(jì)圖書(shū)借閱系統(tǒng)主窗口一、任務(wù)描述：應(yīng)用WPF控件完成圖書(shū)借閱系統(tǒng)主窗口的設(shè)計(jì)。二、知識(shí)準(zhǔn)備：1什么是控件2控件的類(lèi)型3較為復(fù)雜的控件二、知識(shí)準(zhǔn)備：1、什么是控件？WPF在組件化的基礎(chǔ)上，使用專(zhuān)門(mén)的UI設(shè)計(jì)語(yǔ)言（XAML）并引入了數(shù)據(jù)驅(qū)動(dòng)UI的理念。所以WPF控件稱(chēng)得上是新一代控件。在WPF中控件是數(shù)據(jù)和行為的載體，在WPF中的控件只關(guān)注其功能的實(shí)現(xiàn)，其外在UI可能和傳統(tǒng)控件差異很大。以按鈕為例，其作用就是響應(yīng)用戶(hù)的單擊行為，而它的外觀(guān)則可以完全不是過(guò)去的方正類(lèi)型，可以是文字，圖片，甚至是動(dòng)畫(huà)等。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型WPF擁有數(shù)量眾多的控件，每個(gè)控件都有自己特色的功能和UI。根據(jù)控件是否可以裝載內(nèi)容、能夠裝載什么內(nèi)容，我們可以將WPF的控件劃分為八大類(lèi)。1.ContentControl類(lèi)2.HeaderedContentControl類(lèi)型3.ItemsControl類(lèi)型4.HeaderedItemsControl類(lèi)型5.Decorator類(lèi)型6.TextBlock和TextBox7.Shape類(lèi)8.Panel類(lèi)二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（1）ContentControl類(lèi)型此類(lèi)的控件均派生自ContentControl類(lèi)，它們的內(nèi)容屬性的名稱(chēng)為Content，只能由單一的元素（一個(gè)普通內(nèi)容或一個(gè)控件子節(jié)）充當(dāng)其內(nèi)容。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（1）ContentControl類(lèi)型如果我們希望按鈕的內(nèi)容既包含文本又包含圖形則是不行的，這樣Button就擁有兩個(gè)子節(jié)了，會(huì)導(dǎo)致編譯器報(bào)錯(cuò)：對(duì)象“Button”已經(jīng)具有子級(jí)且無(wú)法添加“Image”?！癇utton”只能接受一個(gè)子級(jí)。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（1）ContentControl類(lèi)型如果真需要既有文本又有圖形，甚至更為復(fù)雜的效果，其實(shí)解決方法也很簡(jiǎn)單，我們將幾個(gè)子內(nèi)容都整合到一個(gè)布局控件中，讓布局控件稱(chēng)為按鈕的唯一子節(jié)，這樣就符合要求了。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（2）HeaderedContentControl類(lèi)型此類(lèi)控件都派生自HeaderedContentControl，而HeaderedContentControl是ContentControl類(lèi)的派生類(lèi)。它們主要用于顯示帶標(biāo)題的數(shù)據(jù)，其內(nèi)容屬性為Content和Header。無(wú)論是Content還是Header都只能容納一個(gè)元素（一普通內(nèi)容或一個(gè)控件子節(jié)）作為其內(nèi)容。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（2）HeaderedContentControl類(lèi)型二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（3）ItemsControl類(lèi)型此類(lèi)型的控件均派生自ItemsControl類(lèi)，它們主要用于顯示列表化的數(shù)據(jù)，其內(nèi)容屬性為Items或ItemsSource。每種ItemsControl類(lèi)型控件均有自己的條目容器（ItemsContainer）,條目容器會(huì)自動(dòng)對(duì)提交給它的內(nèi)容進(jìn)行包裝。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（3）ItemsControl類(lèi)型二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（3）ItemsControl類(lèi)型對(duì)于這類(lèi)集合類(lèi)型的控件更常見(jiàn)的是用后臺(tái)程序直接進(jìn)行集合賦值，或者綁定。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（4）HeaderedItemsControl類(lèi)型此類(lèi)型的所有控件均派生自HeaderedItemsControl類(lèi)，主要用于顯示列表化的數(shù)據(jù)，同時(shí)還可以顯示一個(gè)標(biāo)題。其內(nèi)容屬性為Items、ItemsSource和Header。這類(lèi)控件的應(yīng)用類(lèi)似于ItemsControl二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（5）Decorator類(lèi)型此類(lèi)型所有的控件均派生自Decorator類(lèi)，主要用于在UI設(shè)計(jì)中起裝飾效果—比如加邊框等。其內(nèi)容屬性為Child，只能由單一元素充當(dāng)內(nèi)容。此類(lèi)型控件較少被用到，其代表有Border、ViewBox等。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（6）TextBlock和TextBox類(lèi)型這兩個(gè)控件最主要的功能都是顯示文本。TextBlock只能顯示文本，不能編輯，所以又稱(chēng)為靜態(tài)文本。TextBlock的內(nèi)容屬性是Inlines來(lái)控制多行文本，同時(shí)它也具有Text屬性，當(dāng)簡(jiǎn)單的單行文本時(shí)就采用這個(gè)屬性。TextBox既能顯示文本又能編輯文本，其內(nèi)容屬性為T(mén)ext。在WPF下TextBox可以單行也可以多行，但不能在像C#一樣設(shè)置為密碼框了，現(xiàn)在有專(zhuān)門(mén)的密碼框控件PasswordBox，它獲取密碼的屬性也不再是Text，而是Password。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（6）TextBlock和TextBox類(lèi)型Label和TextBlock都是用于顯示靜態(tài)文本，但是TextBlock直接繼承于FrameworkElement,而Label繼承于ContentControl。這樣Label就是個(gè)性化了的TextBlock有更多的功能和更復(fù)雜（禁用、熱鍵等），效率沒(méi)有TextBlock高。因此作為子級(jí)內(nèi)容顯示時(shí)優(yōu)選TextBlock。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（7）Shape類(lèi)這個(gè)類(lèi)型的成員均派生于Shape類(lèi)，嚴(yán)格意義上并不是控件，它們只是簡(jiǎn)單的視覺(jué)元素，用來(lái)在UI上繪制一些2D圖形，它們沒(méi)有自己的內(nèi)容，但是可以使用Fill屬性為它們攝制填充效果，還可以使用Stroke屬性為它們?cè)O(shè)置邊線(xiàn)的效果。二、知識(shí)準(zhǔn)備：2、控件的類(lèi)型（8）Panel類(lèi)型此類(lèi)型所有控件均派生自Panel抽象類(lèi)，主要功能是用于UI布局，其內(nèi)容屬性為Children。內(nèi)容可以是多個(gè)元素，Panel元素將控制它們的布局。雖然Panel類(lèi)和ItemsControl類(lèi)的控件的內(nèi)容都可以是多個(gè)元素，但是兩者區(qū)別很大。ItemsControl強(qiáng)調(diào)以列表的形式展現(xiàn)數(shù)據(jù)，而Panel則強(qiáng)調(diào)對(duì)包含的元素進(jìn)行布局。二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（1）Menu控件的重要屬性和行為（1）Menu標(biāo)簽作為菜單最外層標(biāo)簽，其主要功能是對(duì)菜單進(jìn)行整體約定，常用屬性包括菜單的對(duì)其屬性（如VerticalAlignment，可以設(shè)置菜單在窗體上的出現(xiàn)位置）、高度屬性（Height）。二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（1）Menu控件的重要屬性和行為（2）MenuItem標(biāo)簽MenuItem是一個(gè)HeaderedItemsControl，這意味著其標(biāo)頭和對(duì)象的集合可以是任何類(lèi)型（如字符串、圖像或面板）。MenuItem可包含子菜單。MenuItem的子菜單由MenuItem的ItemCollection中的對(duì)象組成。通常，MenuItem會(huì)包含其他MenuItem對(duì)象以創(chuàng)建嵌套子菜單。二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（2）Menu菜單項(xiàng)圖標(biāo)二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（2）Menu菜單項(xiàng)熱鍵二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（2）Menu控件的重要屬性和行為（2）MenuItem標(biāo)簽Command屬性是用系統(tǒng)內(nèi)置功能實(shí)現(xiàn)菜單操作響應(yīng)，不用編寫(xiě)任何后臺(tái)代碼，比如選中內(nèi)容的復(fù)制、剪切、粘貼和刪除。二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（2）Menu控件的重要屬性和行為（2）MenuItem標(biāo)簽IsCheckable屬性是用于對(duì)一些系統(tǒng)菜單進(jìn)行選擇標(biāo)記，類(lèi)似復(fù)選框效果，可以選中，也可以去掉選中效果。每次狀態(tài)變化會(huì)自動(dòng)觸發(fā)選中事件“Checked”和沒(méi)有選中事件“Unchecked”。二、知識(shí)準(zhǔn)備：3、常見(jiàn)控件—Menu（2）Menu控件的重要屬性和行為（2）MenuItem標(biāo)簽Click事件處理是菜單響應(yīng)用戶(hù)選擇事件的主要方式，多數(shù)情況下菜單項(xiàng)的單擊事件我們都要通過(guò)后臺(tái)編寫(xiě)代碼來(lái)進(jìn)行響應(yīng)和處理，靈活性最好。菜單項(xiàng)單擊事件的處理方法名稱(chēng)可以使用系統(tǒng)自動(dòng)生成，也可以用戶(hù)手動(dòng)命名。為了程序更好的可讀性和可維護(hù)性，建議為每個(gè)單擊事件處理方法手動(dòng)命名。二、知識(shí)準(zhǔn)備：4、常見(jiàn)控件—WPF工具欄和狀態(tài)欄控件（1）工具欄控件ToolBar控件是一組通常在功能上相關(guān)的命令或控件的容器。ToolBar控件因其按鈕或其他控件像條形欄一樣排列成一行或一列而得名。ToolBar簡(jiǎn)單的說(shuō)就是一個(gè)容器，直接在其內(nèi)部可以放入各種控件和分隔欄，然后就會(huì)整體呈現(xiàn)出來(lái)。二、知識(shí)準(zhǔn)備：4、常見(jiàn)控件—WPF工具欄和狀態(tài)欄控件（2）工具欄托盤(pán)WPFToolBar控件通常還與相關(guān)的ToolBarTray控件一起使用，后者提供特殊的布局行為，并支持用戶(hù)啟動(dòng)的工具欄大小調(diào)整和排列。ToolbarTray控件就是ToolBar控件的容器。在ToolBarTray中指定工具欄的位置，使用Band和BandIndex屬性可以在ToolBarTray中定位ToolBar。Band指示ToolBar在其父ToolBarTray中的位置。BandIndex指示ToolBar放入其Band中的順序。二、知識(shí)準(zhǔn)備：4、常見(jiàn)控件—WPF工具欄和狀態(tài)欄控件（3）狀態(tài)欄狀態(tài)欄控件通常置于窗體底部，用于顯示一些狀態(tài)文本信息。在WPF中，StatusBar控件也是一個(gè)容器控件，將要顯示的信息都作為其下級(jí)元素。<StatusBar><TextBlockText="狀態(tài)欄文本信息"Margin="0,0,12,0"/></StatusBar>為了狀態(tài)欄信息能根據(jù)需要不斷變化，其內(nèi)部元素一般都要命名，以便于后臺(tái)代碼訪(fǎng)問(wèn)控制。同時(shí)如果需要狀態(tài)欄右下角呈現(xiàn)調(diào)整區(qū)域，可以配置窗體的屬性：ResizeMode="CanResizeWithGrip"即可。二、知識(shí)準(zhǔn)備：5、常見(jiàn)控件—滾動(dòng)條、進(jìn)展條、滑動(dòng)條（1）滾動(dòng)條、進(jìn)展條、滑動(dòng)條介紹WPF提供了三個(gè)使用范圍概念的控件（ScrollBar控件、ProgressBar控件及Slider控件），這些控件使用一個(gè)在特定最小值和最大值之間的數(shù)值。這些控件都繼承自RangeBase類(lèi)（該類(lèi)又繼承自Control類(lèi)），不過(guò)盡管他們使用相同的抽象概念（范圍），它們的外觀(guān)和工作方式卻有很大的區(qū)別。二、知識(shí)準(zhǔn)備：5、常見(jiàn)控件—滾動(dòng)條、進(jìn)展條、滑動(dòng)條（2）滾動(dòng)條、進(jìn)展條、滑動(dòng)條外觀(guān)三、任務(wù)分析：主窗體由菜單、工具欄、背景和狀態(tài)欄四個(gè)部分組成，本身窗體的用戶(hù)區(qū)域并不設(shè)計(jì)具體功能，而是實(shí)現(xiàn)各個(gè)其他窗體的調(diào)度功能。主窗體是整個(gè)圖書(shū)管理系統(tǒng)的核心部分，它根據(jù)當(dāng)前登錄用戶(hù)權(quán)限靈活控制相關(guān)菜單項(xiàng)有效性，使得用戶(hù)只能使用自己權(quán)限內(nèi)的功能。同時(shí)也為用戶(hù)提供了系統(tǒng)整體功能的方便接口。創(chuàng)建窗體編寫(xiě)標(biāo)簽XAML修改標(biāo)簽屬性四、任務(wù)實(shí)施：1.直接對(duì)項(xiàng)目中默認(rèn)創(chuàng)建的MainWindow窗體進(jìn)行完善，修改其圖標(biāo)、邊框調(diào)整模式、啟動(dòng)位置。2.對(duì)主窗體的Grid進(jìn)行劃分，將其分為4行，第一行顯示主菜單，第二行顯示工具欄，最后一行顯示狀態(tài)欄，余下的顯示背景圖片。因?yàn)橹鞑藛?、工具欄和狀態(tài)欄高度都不變，所以只有第三行設(shè)置為動(dòng)態(tài)的寬度。四、任務(wù)實(shí)施：3.主窗體主要XAML（1）窗體部分<Windowx:Class="BookMis.MainWindow"xmlns="/winfx/2006/xaml/presentation"xmlns:x="/winfx/2006/xaml"Title="歡迎使用圖書(shū)管理系統(tǒng)"Height="350"Width="525"Loaded="Window_Loaded"Icon="Images/Software.ico"ResizeMode="CanResizeWithGrip">四、任務(wù)實(shí)施：3.主窗體主要XAML（2）Grid布局部分<Gridx:Name="myGrid"><Grid.RowDefinitions><RowDefinitionHeight="25"/><RowDefinitionHeight="55"/><RowDefinitionHeight="192*"/><RowDefinitionHeight="25"/></Grid.RowDefinitions>四、任務(wù)實(shí)施：3.主窗體主要XAML（3）主菜單部分<MenuHeight="25"VerticalAlignment="Top"HorizontalAlignment="Stretch"Grid.Row="0"><MenuItemHeader="用戶(hù)管理(_U)"><MenuItemHeader="注銷(xiāo)"Click="cancelMenu_Click"/><MenuItemHeader="退出"Click="quitMenu_Click"/><Separator/><MenuItemHeader="用戶(hù)管理"Click="UseradminMenu_Click"x:Name="menuUser"><MenuItem.Icon><ImageSource="Images/key.ico"/></MenuItem.Icon></MenuItem>…四、任務(wù)實(shí)施：3.主窗體主要XAML（4）工具欄部分<WrapPanelGrid.Row="1"><ToolBarTrayDockPanel.Dock="Top"Orientation="Horizontal"><ToolBarBand="0"BandIndex="1"Margin="2"><ButtonToolTip="增加圖書(shū)"><ImageSource="Images/addBook.jpg"Width="40"Height="40"/></Button><Separator/>…</ToolBar><ToolBarBand=“0"BandIndex="2"Margin="2">四、任務(wù)實(shí)施：3.主窗體主要XAML（5