經過前面的學習，今天我做一個比較綜合的WPF程序示例，主要包括以下功能：
1) 查詢功能。從數據庫（本地數據庫(local)/Test中的S_City表中讀取城市信息數據，然后展示到WPF的Window上的一個ListView上。
2) 數據聯動功能。當鼠標左鍵選中ListView中的某一條記錄時，在ListView框下面文本框中顯示詳細信息。
3) 修改功能。修改TextBox中的內容后，點擊“更新”按鈕，把修改后的數據保存到數據庫中，同時與Listview聯動。
第一步、建立一個WPF項目
打開Visual Studio 2013,在菜單上點擊文件—>新建—>項目—>WPF應用程序。在彈出界面的“名稱”對應的文本框中輸入“WpfApp1”，然后點擊“確定”按鈕。如下圖。
第二步：安裝Entity Framework
1) 使用NuGet下載最新版的Entity Framework 6.1。在解決方案資源管理器中——>在項目WpfApp1上鼠標右鍵單擊——>彈出一個菜單，選中“管理解決方案的NuGet程序包”，打開NuGet程序包管理界面。如下圖。
2) 在NuGet程序包管理界面中搜索 Entity，找到最新版本Entity Framework,點擊安裝。如下圖。
3) 安裝完成之后，如下圖。
第三步、WPF界面布局
1) 在新建完WPF項目之后，WPF項目中有一個默認界面。如下圖。
2）將鼠標放在方框的邊緣點擊就會產生相應的分割線。如下圖。
3） 我們先將窗體隨意的分成三行，以后在XAML代碼中再進行具體的調整。在添加完分割線之后，看一下下方的XAML代碼區域，每個分割線都做為一行RowDefinition。如下圖。
4） 在XAML代碼編輯界面中將我們剛才定義的三行，修改其高度。代碼如下。
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22" />
| 行 |
說明 |
| 第0行 |
設為*用來放置ListView，這樣在程序的實際運行過程會盡可能的充滿整個區域 |
| 第1行 |
設為Auto盡量緊湊排列，減少空間的占用（如果這一行中沒有放任何控件的話，他會小到0,這樣在界面上就不會顯示。） |
| 第2行 |
設為22固定值，只是用來放置按鈕控件 |
說明：
如果是你經常做ASP.NET或是windows的開發，可能會形成一個習慣——直接從工具箱上把控件拖拽到需要的地方。 這樣直接拖放控件的方式，VS會自動生成一個固定的坐標，但是這種方式在WPF中不推薦使用，在WPF中推薦使用 Canvas、StackPanel、WrapPanel、DockPanel和Grid面板組合使用來組裝界面。
對於WPF的界面布局，有以下幾點建議：
第一、控件的布局應該有容器來決定，而不是通過控件的margin屬性來控制位置。
第二、控件應避免明確的定義具體的尺寸，因為顯示器分辨率及windows窗體的大小都有可能隨時改變，如果明確的定義尺寸。
當窗體變動后就會出現大面積的空白或是缺失。但為了控件功能及效果的展示，應該限定一個可接受的最大及最小尺寸。
通過MinWidth, MinHeight, MaxWidth, MaxHeight屬性可以實現這一點。
第三、由於現在顯示器分辨率非常多（1366×768、1600×900、、1980×1080等等），如果將界面元素位置設置成與屏幕坐標相關，這樣做的話是會有風險的。
第四、容器應將有效空間共享給其子控件，這也是為了不在窗體調整后，遺留出大塊的空余。
第五、容器嵌套使用，因為不同的容器，表現效果不同，必要時應結合使用。
5) 接下來在工具箱中雙擊ListView，一個小框會出現在界面上。
6) 接下來在工具箱中雙擊WrapPanel，又一個大框會出現在界面上。
7) 再增加一個Button按鈕。
8) 在拖放完了上面這些控件后，你會發覺當前界面有點亂了，這時剛才我們在頂層Grid上面的畫的分割線就要起到作用了，讓我們在XAML編輯窗口中對相應的XAML語句進行修改，最終結果如下：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<ListView Name="listView1" MinWidth="280" >
<ListView.View>
<GridView x:Name="gridView1">
<GridViewColumn Header="ContactID"></GridViewColumn>
<GridViewColumn Header="FirstName"></GridViewColumn>
<GridViewColumn Header="LastName"></GridViewColumn>
<GridViewColumn Header="EmailAddress"></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
<WrapPanel Grid.Row="1" Orientation="Horizontal"></WrapPanel>
<Button Grid.Row="2" HorizontalAlignment="Right" Click="button1_Click" Name="button1">Refresh</Button>
</Grid>
這里有幾點又需要進行說明：
(1)容器控件Panel，現在界面中有兩個容器型的控件一個是Grid，另一個是WrapPanel。它們都是容器型控件，不過表現上有所不同。
(2)大家應該注意到了在WrapPanel及Button上面的Grid.Row="n"，這個就是Attached Properties（附加屬性）。這個屬性的作用是用來設置WrapPanel及Button應該在父容器的什么位置。 Attached Properties的XAML用法就是在自己的屬性設置地方直接使用容器的類型名稱.容器屬性名稱（Grid.Row）設置對應的值。
(3)大家應該注意到類似與ListView.View及Grid.RowDefinitions用法，這個叫做Complex Properties（復雜屬性）。
(4) <GridView x:Name="gridView1">
如上面這段代碼中的x:Name=" gridCitys "這種用法，叫做Markup Extensions（標記擴展），以輕松實現XAML頁面屬性賦值，資源引用，類型轉換等操作。
例如我們這個示例中使用到的DataGrid對象，然而DataGrid對象又沒有Name屬性，於是有了Markup Extensions。這樣當我們想定位一個沒有名字屬性的控件，直接為擴展一個名稱出來，這個可太方便了。
9) 現在我們的示例中TextBlock和TextBox不是成對出現的，為了實現比較友好的界面一般需要成對出現，而且要在同一水平線上面，不能換行，在WPF中不能使用絕對定位，那應該怎么實現呢？很簡單，使用StackPanel面板。修改后的代碼如下：
<WrapPanel Grid.Row="1" Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Margin="5,2,5,2">
<TextBlock Name="textBlock_ContactID" Text="ContactID:" />
<TextBox Name="textBox_ContactID" MinWidth="100" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5,2,5,2">
<TextBlock Name="textBlock_FirstName" Text="FirstName:" />
<TextBox Name="textBox_FirstName" MinWidth="100" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5,2,5,2">
<TextBlock Name="textBlock_LastName" Text="LastName:" />
<TextBox Name="textBox_LastName" MinWidth="100" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5,2,5,2">
<TextBlock Name="textBlock_EmailAddress" Text="EmailAddress:" />
<TextBox Name="textBox_EmailAddress" MinWidth="100" />
</StackPanel>
</WrapPanel>
10) 在Visual Studio 2013中，按F5鍵，把我們的第一個WPF程序運行起來。然后，你在窗體的邊緣隨意的拉伸。如以下2圖所示，不論窗體如何拉伸或縮小，控件會不斷的改變位置——適應最小原則（如果想要讓他固定下來的話。那就需要將WrapPanel換成其他的Panel就可以了），但是TextBlock和TextBox總是成對的在同一水平線的位置上。如下圖1(縮小)、圖2（擴大）所示：
圖1
圖2