WPF入門教程系列十九——ListView示例(一)

     通過前面的學習，今天我作一個比較綜合的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的界面佈局，有如下幾點建議：

第1、控件的佈局應該有容器來決定，而不是經過控件的margin屬性來控制位置。 

第2、控件應避免明確的定義具體的尺寸，由於顯示器分辨率及windows窗體的大小都有可能隨時改變，若是明確的定義尺寸。 

當窗體變更後就會出現大面積的空白或是缺失。但爲了控件功能及效果的展現，應該限定一個可接受的最大及最小尺寸。 

經過MinWidth, MinHeight, MaxWidth, MaxHeight屬性能夠實現這一點。

第3、因爲如今顯示器分辨率很是多（1366×76八、1600×900、、1980×1080等等），若是將界面元素位置設置成與屏幕座標相關，這樣作的話是會有風險的。 

第4、容器應將有效空間共享給其子控件，這也是爲了避免在窗體調整後，遺留出大塊的空餘。 

第5、容器嵌套使用，由於不一樣的容器，表現效果不一樣，必要時應結合使用。

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