WPF界面布局與控件 課件

第02章

WPF界面布局與控件目錄2.WPF控件1.WPF界面布局3.調(diào)用自定義控件4.小結(jié)5.習(xí)題1.1.界面布局應(yīng)用程序界面中設(shè)計(jì)中，合理的元素布局至關(guān)重要，它可以方便用戶使用，并將信息清洗合理地展現(xiàn)給用戶。WPF提供了一套功能強(qiáng)大的工具——面板(Panel)，來(lái)控制用戶界面的布局。用于布局的面板主要有Canvas(畫(huà)布)、網(wǎng)格(Grid)、堆疊面板(StackPanel)、?？棵姘?DockPanel)、環(huán)繞面板(WrapPanel)等。1.2.Canvas(畫(huà)布)Canvas用于定義一個(gè)區(qū)域，稱為畫(huà)布，用于完全控制每個(gè)元素的精確位置。它是布局控件中最為簡(jiǎn)單的一種，直接將元素放在指定位置，使用Canvas時(shí)，必須指定一個(gè)子元素的位置（相對(duì)于Canvas），否則所有元素都將出現(xiàn)在Canvas的左上角。Canvas的左上角坐標(biāo)為（0,0），向右為x軸正方向，向下為y軸正方向。常用屬性如下：1.Left和Top屬性

指定子元素相對(duì)于Canvas容器左上角的位置，Left表示x坐標(biāo)，Top表示y坐標(biāo)。2.ZIndex屬性

該屬性也叫Z順序，即三維空間中沿Z軸排列的順序。利用該屬性可以設(shè)置Canvas內(nèi)子元素的疊加順序，默認(rèn)值為0。ZIndex值大的元素會(huì)覆蓋住ZIndex值小的元素。3.ClipToBounds屬性

當(dāng)繪制內(nèi)容超出Canvas界限時(shí)，設(shè)置為true表示超出的部分被自動(dòng)剪裁掉，false表示不剪裁?！纠?-1】新建一個(gè)“Csharp_2_Canvas”WPF應(yīng)用程序項(xiàng)目，在畫(huà)布上放置兩個(gè)文本框。其運(yùn)行結(jié)果如圖2-3所示。圖1

程序運(yùn)行結(jié)果操作步驟（1）新建一個(gè)“Csharp_2_Canvas”WPF應(yīng)用程序項(xiàng)目。（2）刪除原來(lái)窗體上的Grid，從工具箱中找到Cancas控件，拖入到窗體上，并設(shè)置背景顏色。（3）在畫(huà)布上拖入兩個(gè)TextBox控件。設(shè)計(jì)好的界面代碼如下：注意：雖然Canvas用起來(lái)相對(duì)容易直觀，但是缺點(diǎn)是無(wú)法自動(dòng)調(diào)整大小，因此在大小可變的窗口中，特別是瀏覽器窗口，用Canvas作為頂級(jí)布局容器通常不是明智的選擇。從使用的角度看，由于網(wǎng)格和堆疊面板支持內(nèi)容的重新排列，可以發(fā)揮最大的布局靈活性，因此在開(kāi)發(fā)時(shí)盡量選用這些動(dòng)態(tài)布局控件較好。但是如果控件位置和大小都是固定不變的，還是用Canvas布局最方便、直觀。1.3.Grid(網(wǎng)格)Grid是最常用的動(dòng)態(tài)布局控件，也是所有動(dòng)態(tài)布局控件中唯一可按比例動(dòng)態(tài)調(diào)整分配空間的控件。默認(rèn)情況下，在WPF設(shè)計(jì)器中打開(kāi)每個(gè)新window中都包含一個(gè)Grid控件。該控件很像網(wǎng)頁(yè)中的表格，需要定義行、列，劃分單元格坐標(biāo)從（0,0）開(kāi)始。常用屬性如下：1.Height屬性

指定Grid的高度，可以有兩種寫(xiě)法：（1）Height=”60”：不加星號(hào)表示固定的高度。（2）Height=”60*”：加星號(hào)表示加權(quán)高度，在調(diào)整窗體大小時(shí)，此高度會(huì)按窗體大小改變的比例進(jìn)行縮放。2.Width屬性

指定Grid寬度，寫(xiě)法與Height屬性一致。3.Row和Column屬性

指定子元素所在的行和列。在C#代碼中，使用Grid.SetRow方法和Grid.SetCol方法指定子元素所在的行和列。4.RowSpan屬性

使子元素跨多行。例如Grid.RowSpan=“2”表示跨2行。5.ColumnSpan屬性

使子元素跨多列。例如Grid.ColumnRowSpan=“2”表示跨2列。1.4.StackPanel(堆疊面板)堆疊面板也叫棧面板，可以將元素排列成一行或者一列。沒(méi)有重疊的時(shí)候稱為排列，有重疊的時(shí)候稱為堆疊。常用屬性為Orientation屬性，表示排列或堆疊的方向，默認(rèn)為Vertical（縱向），如果希望橫向排列則需要設(shè)置為“Horizontal”即可。在實(shí)際應(yīng)用中，一般先用Grid將整個(gè)界面劃分為需要的行和列，然后將StackPanel放在某個(gè)單元格內(nèi)，再對(duì)StackPanel內(nèi)的多個(gè)子控件進(jìn)行排列或堆疊?！纠?-2】演示StackPanel的基本用法，其運(yùn)行結(jié)果如圖2所示。圖2

StackPanel運(yùn)行效果果操作步驟（1）新建一個(gè)“Csharp_2_StackPanel”WPF應(yīng)用程序項(xiàng)目。（2）把Grid分為2列，從工具箱中找到StackPanel控件，拖入到窗體上，并設(shè)置背景顏色，把第二個(gè)StackPanel控件的Orientation屬性設(shè)置為“Horizontal”。（3）在第一個(gè)StackPanel拖入三個(gè)Button控件，在第二個(gè)StackPanel拖入三個(gè)Label控件。設(shè)計(jì)好的界面代碼如下：1.5.DockPanel(?？棵姘?可以將面板的某一邊指定給每個(gè)元素，當(dāng)面板大小發(fā)生變化時(shí)，該面板內(nèi)的子元素將根據(jù)指定的邊進(jìn)行?？?。常用屬性如下：1.LastChildFill屬性

該屬性默認(rèn)為true，表示DockPanel的最后一個(gè)子元素始終填滿剩余的空間。如果DockPanel只有一個(gè)子元素，此時(shí)由于它同時(shí)也是最后一個(gè)元素，所以默認(rèn)會(huì)填DockPanel空間。如果將該屬性設(shè)置為false，還必須為最后一個(gè)子元素顯示指定?？糠较颉?.Dock屬性

當(dāng)DockPanel有多個(gè)子元素時(shí)，每個(gè)子元素都可以使用該屬性指定其在父元素中的?？糠绞?。1.6.WrapPanel(環(huán)繞面板)當(dāng)元素布局到達(dá)邊界時(shí)，可以自動(dòng)換行。用法與StackPanel一樣，這里就不詳細(xì)贅述了。目錄2.WPF控件1.WPF界面布局3.調(diào)用自定義控件4.小結(jié)5.習(xí)題2.1.TextBox(文本框)TextBox（文本框）控件用于顯示或編輯純文本字符。常用屬性如下：（1）Text：表示顯示的文本。（2）MaxLength：用于指示文本框中輸入的最大字符數(shù)。（3）TextWrapping：控制是否自動(dòng)轉(zhuǎn)到下一行。當(dāng)其值為“Wrap”時(shí)，該控件可以自動(dòng)擴(kuò)展以容納多行文本。（4）BorderBrush：設(shè)置邊框顏色。（5）BorderThickness：設(shè)置邊框?qū)挾?，如果不希望該控件顯示邊框，可以將其設(shè)置為0即可。TextBox控件的常用事件是TextChanged事件。2.2Label(標(biāo)簽)Label（標(biāo)簽）用來(lái)顯示文本內(nèi)容。可以為其它控件如文本框等添加一些描述性的信息。常用屬性Content，表示要顯示的文本。2.3Button(按鈕)Button（按鈕）是最基本的控件之一。允許用戶通過(guò)單擊來(lái)執(zhí)行操作。Button控件既可以顯示文本，又可以顯示圖像。當(dāng)該按鈕被單擊時(shí)，它看起來(lái)像是被按下，然后被釋放。每當(dāng)用戶單擊按鈕時(shí)，即調(diào)用Click事件處理程序。常用屬性如下：（1）Content：獲取或設(shè)置按鈕上的文本。（2）IsEnabled：指示控件是否可用，默認(rèn)值為T(mén)rue。如果為False，表示控件不可用，文本顯示灰色。在程序中使用時(shí)，如果滿足一定的條件，把該屬性設(shè)置為T(mén)rue，則控件又可以正常使用了，這樣可以控制用戶的使用權(quán)限和操作次序?！纠?-3】制作登錄界面，要求用戶輸入的用戶名和密碼的長(zhǎng)度不超過(guò)10個(gè)字符。如果輸入的用戶名長(zhǎng)度大于等于10，當(dāng)光標(biāo)從用戶名文本框移走時(shí)，就會(huì)提示用戶名輸入有誤；如果輸入的密碼大于等于10，當(dāng)光標(biāo)從密碼文本框移走時(shí)，就會(huì)提示密碼輸入有誤，運(yùn)行效果如圖3所示。圖3

驗(yàn)證文本框輸入的長(zhǎng)度操作步驟（1）新建一個(gè)“Csharp_2_例2.3”WPF應(yīng)用程序項(xiàng)目。（2）設(shè)置窗體的Title屬性為“用戶登錄”，把Grid分為3行3列，從工具箱中找到Label控件，拖入到窗體上，并設(shè)置Content屬性值分別為“用戶名：”和“密碼：”。（3）向窗體中添加一個(gè)TextBox控件和一個(gè)PasswordChar控件，分別命名為“txtName”和“txtPass”。（4）向窗體中添加兩個(gè)Label控件，命名為“LabUser”、“LabPass”，（5）向窗體中添加兩個(gè)按鈕，命名為“btnLogin”、“btnCancel”，并設(shè)置content屬性分別為“登錄”、“取消”。（6）選中用戶名文本框，在“屬性”窗口中選中TextChanged事件，雙擊進(jìn)入事件處理程序中，添加如下代碼。（7）選中密碼文本框，在“屬性”窗口中選中PasswordChanged事件，雙擊進(jìn)入事件處理程序中，編寫(xiě)代碼如下：（8）調(diào)試運(yùn)行。

以上例子中涉及到了PasswordChar控件，用來(lái)顯示密碼，其用法與TextBox控件相似，不同的是顯示密碼用的是Password屬性，相應(yīng)的改變密碼觸發(fā)的事件變成了PasswordChanged。2.4RadioButton(單選框)RadioButton（單選框）一般用于從多個(gè)選項(xiàng)中選擇一項(xiàng)。當(dāng)用戶選擇單選按鈕時(shí)，同一組的其他按鈕不能同時(shí)選定，即僅可以選擇其中的一項(xiàng)。常用屬性如下：（1）IsChecked：表示單選按鈕是否被選中。默認(rèn)為False，單選按鈕上沒(méi)有“(”表示沒(méi)有被選中。此屬性在代碼編寫(xiě)過(guò)程中經(jīng)常用作判斷。該屬性值更改時(shí)，將引發(fā)Checked事件。例如：（2）GroupName：設(shè)置同組單選按鈕的名字。如果一個(gè)窗體中有多組單選按鈕，則同組的按鈕設(shè)置相同的名字。RadioButton控件的常用事件為Checked事件，當(dāng)IsChecked屬性值更改時(shí)發(fā)生。2.5CheckBox(多選框)CheckBox（復(fù)選框）控件與RadioButton控件相似，不同的是CheckBox控件不會(huì)互相排斥，用戶可以在窗體上選擇一個(gè)或幾個(gè)復(fù)選框。復(fù)選框的常用事件如下：（1）Click：?jiǎn)螕艨丶r(shí)發(fā)生。（2）Checked：當(dāng)IsChecked屬性值更改時(shí)發(fā)生。用戶雙擊復(fù)選框，此事件為默認(rèn)事件?！纠?-4】制作自動(dòng)測(cè)試小程序，以單項(xiàng)選擇題為例，要求用戶提交答案后，立刻知道自己所得分?jǐn)?shù)。界面如圖4所示。圖4自動(dòng)測(cè)試小程序操作步驟（1）新建一個(gè)“Csharp_2_例2.4”WPF應(yīng)用程序項(xiàng)目。（2）界面設(shè)計(jì)，設(shè)置窗體的Title為“測(cè)試”，界面參考圖2-4設(shè)計(jì)程序界面，控件的各屬性設(shè)置見(jiàn)表2-1所示，每一組選項(xiàng)都放在一個(gè)StackPanel面板中表2-1控件詳細(xì)設(shè)置（3）編寫(xiě)程序代碼。在按鈕控件【btnSubmit】上雙擊，進(jìn)入單擊事件代碼窗口，輸入如下代碼。（4）運(yùn)行效果如圖5所示圖5運(yùn)行效果 以上例子中，還使用了我們沒(méi)有講過(guò)的控件GroupBox，此控件用來(lái)把一些控件作為一個(gè)特定區(qū)域顯示，并且可以設(shè)置標(biāo)題。2.6DatePickerDatePicker控件允許用戶通過(guò)在文本字段中鍵入日期或使用下拉日歷控件來(lái)選擇日期。常用屬性如下：（1）Text：獲取用戶在文本字段中輸入的日期（2）SelectedDate：獲取或設(shè)置當(dāng)前用戶選定的日期。（3）SelectedDateFormat：表示顯示日期的格式。默認(rèn)為“short”，表示日期短格式顯示；如果設(shè)置為“l(fā)ong”，表示日期的完整格式顯示。（4）IsTodayHighlighted：表示下拉日歷控件中當(dāng)前的日期是否高亮顯示?！纠?-5】制作顯示日期程序，要求用戶在DatePicker上選擇日期或輸入日期后，點(diǎn)擊【顯示】按鈕，在標(biāo)簽上顯示對(duì)應(yīng)的日期。如圖6所示。圖6顯示日期操作步驟（1）新建一個(gè)“Csharp_2_例2.5”WPF應(yīng)用程序項(xiàng)目。（2）界面設(shè)計(jì)，設(shè)置窗體的Title為“顯示日期”，界面設(shè)計(jì)參考圖2-6。（3）向窗體中添加一個(gè)DatePicker控件，命名為“dp”，設(shè)置SelectedDateFormat屬性值為“l(fā)ong”。（4）向窗體中添加一個(gè)Label標(biāo)簽，命名為“l(fā)abShow”，設(shè)置Text屬性為“”。（5）向窗體中添加一個(gè)Button按鈕，設(shè)置Content屬性為“顯示”。（6）編寫(xiě)程序代碼。雙擊【顯示】按鈕，進(jìn)入事件處理程序中，輸入如下代碼。（7）運(yùn)行結(jié)果如圖6所示。2.7Image（圖像）Image用于顯示位圖、GIF、JPEG、圖元文件或圖標(biāo)格式的圖形。所顯示的圖片由Image屬性確定，該屬性可在運(yùn)行時(shí)或設(shè)計(jì)時(shí)設(shè)置。常用屬性如下：（1）Source：獲取或設(shè)置Image顯示的圖像，可以在設(shè)計(jì)時(shí)或運(yùn)行時(shí)編程。設(shè)計(jì)時(shí)顯示圖片

具體操作是：先把顯示的圖片復(fù)制到項(xiàng)目所在文件夾Properties子文件夾下，然后點(diǎn)擊該屬性的右側(cè)按鈕，彈出要選擇的圖片即可。編程時(shí)顯示圖片

下面示例中圖片放置在項(xiàng)目所在文件夾Properties子文件夾下。（2）Stretch：獲取或設(shè)置圖像的拉伸方式。屬性默認(rèn)為Uniform，這代表圖片會(huì)均勻的變大和縮小，保證了圖片的比例不失調(diào)，而往往我們?cè)O(shè)置的寬和高并不符合圖片的比例，因此顯示效果就不是我們預(yù)期所想。Image的Stretch屬性還可以設(shè)置為以下值： None：圖片會(huì)按原始大小顯示。 Fill：圖片會(huì)按照設(shè)置的Width和Height顯示，比例會(huì)失調(diào)。 UniformToFill：圖片會(huì)按照設(shè)置的Width和Height顯示，但圖片是均勻變大和縮小的，比例不失調(diào)，超出顯示范圍的圖像會(huì)被截掉。目錄2.WPF控件1.WPF界面布局3.調(diào)用自定義控件4.小結(jié)5.習(xí)題3.1.調(diào)用自定義控件在實(shí)際工作中，WPF提供的控件并不能完全滿足不同的設(shè)計(jì)需求。這時(shí)，需要我們?cè)O(shè)計(jì)自定義控件【例2-6】創(chuàng)建一個(gè)自定義控件。具體要求如下，顯示一個(gè)風(fēng)扇的圖片；點(diǎn)擊圖片，風(fēng)扇轉(zhuǎn)動(dòng)；再次點(diǎn)擊，風(fēng)扇停止轉(zhuǎn)動(dòng)。操作步驟（1）新建一個(gè)“Csharp_2_例2-6”WPF用戶控件庫(kù)，如圖7所示。圖7新建WPF用戶控件庫(kù)（2）單擊右側(cè)項(xiàng)目名稱右鍵，選擇“添加”→“用戶控件”，命名為“Fan.xaml”，把原來(lái)的“UserControl1.xaml”刪除。（3）單擊右側(cè)項(xiàng)目名稱右鍵，選擇“添加”→“新建文件夾”，命名為“images”，把需要的圖片拷貝到文件夾中。（4）向用戶控件界面中添加Image控件，并設(shè)置Source屬性為“images/1.png”。（5）編寫(xiě)控制風(fēng)扇旋轉(zhuǎn)的方法，代碼如下：（6）編寫(xiě)中止線程的方法，代碼如下：（7）選中控件窗體，在屬性窗口中選中“Loaded”事件，雙擊進(jìn)入事件處理程序中，編寫(xiě)如下代碼：（8）選中控件窗體，在屬性窗口中選中“Unloaded”事件，雙擊進(jìn)入事件處理程序中，編寫(xiě)如下代碼：（9）生成dll文件。具體位置：bin\debug\WinFormControl.dll。（10）應(yīng)用自定義控件。新建一個(gè)WPF應(yīng)用程序，把WinFormControl.dll直接復(fù)制到左側(cè)工具箱中。如圖8所示。圖8復(fù)制自定義控件（11）從工具箱中把Fan控件拖入窗體中，命名為“fan1”。（12）選中窗體，在屬性窗口中選擇“Closing”事件，雙擊進(jìn)入事件處理程序，編寫(xiě)如下代碼：（13）選中Fan控件，在屬性窗口中選擇“PreviewMouseLeftButtonDown”事件，雙擊進(jìn)入事件處理程序，編寫(xiě)如下代碼：（14）調(diào)試運(yùn)行?！纠?-7】使用WPF開(kāi)發(fā)小區(qū)物業(yè)監(jiān)控系統(tǒng)界面設(shè)計(jì)。開(kāi)發(fā)用戶登錄，用戶注冊(cè)界面。運(yùn)行結(jié)果如圖9、圖10所示。圖9用戶登錄界面圖10用戶注冊(cè)界面操作步驟（1）新建一個(gè)“Dome_2”WPF應(yīng)用程序項(xiàng)目。（2）在“MainWindow.xaml”中添加如下代碼。（3）MainWindow.xaml.cs中代碼實(shí)現(xiàn)在這個(gè)綜合案例中，涉及到三個(gè)界面，分別是登錄界面、注冊(cè)界面和歡迎界面，這三個(gè)界面都在同一個(gè)窗體中