WPF入門教程系列十九——ListView樣本(一)

標籤：idc   ddr   email   cli   log   def   最新版   nta   方式   

  經過前面的學習，今天我做一個比較綜合的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

WPF入門教程系列十九——ListView樣本(一)