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>