一、 前言

公司項(xiàng)目基于WPF開(kāi)發(fā)，最近項(xiàng)目上線有點(diǎn)空閑時(shí)間寫(xiě)一篇基于wpf的基礎(chǔ)教材，WPF也是近期才接觸，學(xué)習(xí)WPF也是在網(wǎng)上查資料與微軟的MSDN進(jìn)行學(xué)習(xí)，寫(xiě)本博客的目為了溫故而知新把學(xué)習(xí)過(guò)程記錄下來(lái)，以備后查。

學(xué)習(xí)WPF的基礎(chǔ)知識(shí)： ( 推薦學(xué)習(xí)：web前端視頻教程）

1) WPF是微軟提供的一種用來(lái)開(kāi)發(fā)“桌面應(yīng)用”的技術(shù)（框架），這項(xiàng)技術(shù)本身和C#沒(méi)有關(guān)系，必須會(huì)的是xaml語(yǔ)法。

2) 對(duì)XML、HTML、XHTML、ASP.NET之類的“標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言”，對(duì)于學(xué)習(xí)是有所幫助的。

3) 有WinForm或ASP.NET經(jīng)驗(yàn)，主要是對(duì)控件事件的處理要有所了解。

4) 具備面向?qū)ο蟮乃枷耄涸赪PF中，經(jīng)常要靈活運(yùn)用各種繼承關(guān)系、多態(tài)、重載等。

5) DataBinding要有所了解：Binding是WPF的一大亮點(diǎn)。

二、 本系列使用到的工具：

1） 開(kāi)發(fā)環(huán)境：Windows 7

2） 開(kāi)發(fā)工具：Visual Studio 2017

3） 數(shù)據(jù)庫(kù)：Access數(shù)據(jù)庫(kù),SQLite

三、 WPF開(kāi)發(fā)基礎(chǔ)

1.打開(kāi)Visual Studio 2017 ,選擇“菜單—》文件—》新建—》項(xiàng)目”。如下圖。

2.在“新建項(xiàng)目”對(duì)話框中選擇“WPF應(yīng)用程序”,修改名稱為自己項(xiàng)目的名稱，然后點(diǎn)擊“確定”按鈕,便成功創(chuàng)建了一個(gè)“WPF應(yīng)用程序”。新創(chuàng)建的項(xiàng)目所引用的公共類庫(kù)如下。如下圖。（“WPF應(yīng)用程序”會(huì)在“引用”里面自動(dòng)添加下圖中所示的 PresentationCore、PresentationFramework、WindowsBase三大核心程序集）。

3. 項(xiàng)目的生成的文件結(jié)構(gòu)。如下圖。

4.在App.xaml中的“StartupUri”屬性可以指定項(xiàng)目運(yùn)行時(shí)的啟動(dòng)窗體。如下圖中“StartupUri=”MainWindow.xaml”,還可以定義我們需要的系統(tǒng)資源以及引入程序集等。如下圖。

5. MainWindow.xaml的設(shè)計(jì)窗體中我們可以修改Title。還可以設(shè)置MainWindow的屬性和添加事件。完成了這些設(shè)置以后，我們就可以對(duì)窗體添加內(nèi)容了，如下圖。

6. 我在這個(gè)窗體中添加了一個(gè) Viewbox, ViewBox組件的作用是拉伸或延展位于其中的組件，使之有更好的布局及視覺(jué)效果。

7.介紹下wpf最常用的幾種布局方式

1）StackPanel：堆棧面板，通過(guò)Orientation屬性設(shè)置子元素的布局排列方向?yàn)椤癡ertical”（垂直）和“Horizontal”（水平），不寫(xiě)其默認(rèn)值為“Vertical”，當(dāng)設(shè)置為“Vertical”時(shí)子元素會(huì)沿水平方向拉伸，反之設(shè)置為“Horizontal”時(shí)子元素會(huì)沿垂直方向拉伸。

2）DockPanel：支持子元素?？吭诿姘宓娜我庖粭l邊上，通過(guò)附加屬性Dock控制他們的?？课恢茫↙eft、Top、Right、Bottom），填充空間按照“先到先得”的原則，最后一個(gè)加入面板的子元素將填滿剩下的空間，如不想將最后加入面板的元素填滿剩下的空間將屬性LastChildFill值設(shè)為“False”，默認(rèn)為“True”。

3）WrapPanel：可換行面板與StackPanel相似，通過(guò)Orientation屬性設(shè)置子元素的排列順序，從左至右按順序位置定位子元素，當(dāng)前行無(wú)法放下元素時(shí)斷開(kāi)至下一行，或者排序按照從上至下或從右至左的順序進(jìn)行，通過(guò)ItemHeight可以設(shè)置當(dāng)前面板中所有子元素的高度，當(dāng)然也有ItemWidth設(shè)置所有子元素的寬度。

4）Canvas：面板是最輕量級(jí)的布局容器，它不會(huì)自動(dòng)調(diào)整內(nèi)部元素的排列和大小，不指定元素位置，元素將默認(rèn)顯示在畫(huà)布的左上方。Canvas主要用來(lái)畫(huà)圖。Canvas默認(rèn)不會(huì)自動(dòng)裁剪超過(guò)自身范圍的內(nèi)容，即溢出的內(nèi)容會(huì)顯示在Canvas外面，這是因?yàn)镃anvas的ClipToBounds屬性默認(rèn)值是“False”，我們可以顯式地設(shè)置為“True”來(lái)裁剪多出的內(nèi)容。下面XAML代碼簡(jiǎn)單演示了Canvas面板的使用。

6) Grid：比起其他Panel，功能是最多最為復(fù)雜的布局控件。它由<Grid.ColumnDefinitions>列元素集合和<Grid.RowDefinitions>行元素集合兩種元素組成。而放在Grid面板中的元素必須顯式采用附加屬性定義其所在行和列，否則元素均默認(rèn)放置在第0行第0列。