WPF入門教程系列二十一——DataGrid示例(一)

      前面咱們學習了ListView控件的使用示例，今天咱們來學習DataGrid的有關知識。提到DataGrid 無論是Asp.Net中的網頁開發仍是WinForm應用程序開發都會頻繁使用。經過它咱們能夠靈活的在行與列間顯示各類數據。本篇將學習WPF中的DataGrid 相關功能。

      首先，先介紹一下DataGrid中有哪些列的類型。

DataGrid列的類型

   默認狀況下，當咱們爲DataGrid 控件設置ItemSource 屬性後，DataGrid 會根據數據類型自動生成相應的列，下表列出DataGrid 支持的四種列及其數據類型。

下表列出了 DataGrid 提供的四個列類型。

列類型	顯示數據	數據類型
DataGridHyperlinkColumn	使用顯示 URI 數據。	URI
DataGridComboBoxColumn	使用顯示枚舉數據與其餘須要下拉框選擇的數據。	Enum,String
DataGridTextColumn	使用顯示文本	String
DataGridCheckBoxColumn	使用顯示布爾數據	Bool

  在建立DataGrid 時能夠經過AutoGenerateColumns 屬性設置列是否自動生成，從而加入自定義列。若是DataGrid 中同時包含「自動生成列」與「用戶自定義列」，則首先建立「用戶自定義列」。以下圖。

 

其次：咱們來作一個示例，學習如何使用DataGrid。

製作DataGrid示例的界面

1）按照上一篇文章中所寫的步驟，使用Visual Studio 2013建立一個WindowGrid界面。以下圖。

 

2）在Visual studio 2013中的工具箱中，找到DataGrid控件，而後雙擊。把DataGrid控件添加窗體界面中。以下圖1，圖2。注意，圖2中的紅框所標示的那個小框，就是DataGrid控件，是否是與WindowForm中的DataGrid有很大的不一樣呀。

 

圖1

 

圖2

3）給DataGrid添加列。先鼠標左鍵選中，窗體界面中的小方塊，而後點擊Visual Studio 2013最右邊的「屬性」標籤，而後Visual Studio 2013會彈出「屬性」編輯窗口。以下圖。

 

4) 在上圖中使用鼠標左鍵點擊Columns那一行的按鈕。如上圖中的紅色框，而後會彈出一個對話框，以下圖。

 

4）在上圖中，選擇相應的列的類型，而後點擊「添加」按鈕，添加列。以下圖。

 

5) 根據我這個示例的實際狀況，我根據須要我添加了5列DataGridTextColumn,和一列DataGridComboBoxColumn。添加完成以後，以下圖。看起來與WindowForm中的DataGrid很像了吧。

 

6) 下面是所有完成以後的實際的XAML代碼。

 

<Window x:Class="WpfApp1.WindowGrid"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Grid示例" Height="400" Width="600">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="*"/>

            <RowDefinition Height="auto"/>

            <RowDefinition Height="22"/>

        </Grid.RowDefinitions>

        <DataGrid x:Name="gridCitys"  Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" AutoGenerateColumns="False">

            <DataGrid.Columns>

 

                <DataGridTextColumn Binding="{Binding CityID}" ClipboardContentBinding="{x:Null}" Header="CityID"/>

                <DataGridTextColumn Binding="{Binding CityName}" ClipboardContentBinding="{x:Null}" Header="CityName"/>

                <DataGridTextColumn Binding="{Binding ZipCode}" ClipboardContentBinding="{x:Null}" Header="ZipCode"/>

                <DataGridComboBoxColumn x:Name="cboProvince" ClipboardContentBinding="{x:Null}" Header="ProvinceID" SelectedValuePath="ProvinceID" SelectedValueBinding="{Binding Path=ProvinceID,UpdateSourceTrigger=PropertyChanged}"  DisplayMemberPath="ProvinceName" SelectedItemBinding="{x:Null}" >

 

                </DataGridComboBoxColumn>

                <DataGridTextColumn Binding="{Binding DateCreated}" ClipboardContentBinding="{x:Null}" Header="DateCreated"/>

                <DataGridTextColumn Binding="{Binding DateUpdated}" ClipboardContentBinding="{x:Null}" Header="DateUpdated"/>

 

            </DataGrid.Columns>

        </DataGrid>

        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right" >

            <TextBlock Text="顯示信息" TextAlignment="Center"  />

            <TextBox Name="txtMsg" IsReadOnly="True" Text="" Width="320" TextAlignment="Center" />           

           

        </StackPanel>

        <WrapPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">

            <Button  HorizontalAlignment="Right"  Name="btnRefresh" Height="22" VerticalAlignment="Top" Width="65" Click="btnRefresh_Click">刷新</Button>

            <Button  HorizontalAlignment="Right"  Name="btnUpdate" Height="22" VerticalAlignment="Top" Width="65" Click="btnUpdate_Click"  >更新</Button>

        </WrapPanel>

    </Grid>

</Window>