WPF之DataGrid用法(一)

 

2014-04-03 23:00:27 FoolRabbit 閱讀數 15580更多

分類專欄： WPF基本控件用法系列

 

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接： https://blog.csdn.net/lk13962517093/article/details/22896073

介紹數據表格DataGrid的基礎用法。

DataGrid可用AutoGenerateColumns屬性控制列的生成。Column包含DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn、DataGridHyperlinkColumn、DataGridTemplateColumn等5中格式。

 

1.DataGridTextColumn

DataGridTextColumn最常用，不再做介紹。

 

2.DataGridCheckBoxColumn

DataGridCheckBoxColumn是勾選框數據列。效果如下：

主要XAML代碼：

1.  
   <DataGridCheckBoxColumn Binding="{Binding Selected,NotifyOnSourceUpdated=True,UpdateSourceTrigger=PropertyChanged}"
2.  
   HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}">
3.  
   <DataGridCheckBoxColumn.Header>
4.  
   <CheckBox IsChecked="{Binding IsAllSelected,RelativeSource={RelativeSource AncestorType={x:Type local:DataGridCheckBoxColumn}}}"/>
5.  
   </DataGridCheckBoxColumn.Header>
6.  
   </DataGridCheckBoxColumn>

其中列頭選擇框居中需要修改HeaderStyle屬性，修改ContentPresenter的HorizontalAlignment="Center"即可。修改樣式通常使用Blend完成，這里就不在詳細介紹。

另外，通過設置NotifyOnSourceUpdated=True，當數據選擇框選擇更改時來觸發消息，而后用DataGrid的SourceUpdated事件來捕獲，在事件中處理列頭選擇框的狀態。

 

3.DataGridComboBoxColumn

若要填充下拉列表，請首先使用下列選項之一設置 ComboBox 的 ItemsSource 屬性。

• 靜態資源。 
• x:Static 代碼實體。
• ComboBoxItem 類型的內聯集合。

實現效果如下：

如需使用非靜態資源，則需要使用DataGridComboBoxColumn的EditingElementStyle樣式修改編輯樣式，通過ElementStyle修改正常顯示(非編輯狀態)樣式。

主要XAML代碼如下：

1.  
   <DataGrid x:Name="grd" ItemsSource="{Binding StuList3}" AutoGenerateColumns="False">
2.  
   <DataGrid.Columns>
3.  
   <DataGridTextColumn Binding="{Binding No}" Header="學號"/>
4.  
   <DataGridTextColumn Binding="{Binding Name}" Header="姓名"/>
5.  
   <!--使用普通List集合-->
6.  
   <DataGridComboBoxColumn x:Name="cmb" Header="性別">
7.  
   <DataGridComboBoxColumn.EditingElementStyle>
8.  
   <Style TargetType="ComboBox">
9.  
   <Setter Property="ItemsSource" Value="{Binding Path=DataContext.SexList,ElementName=grd}" />
10.  
    <Setter Property="DisplayMemberPath" Value="Name" />
11.  
    <Setter Property="SelectedValuePath" Value="Name" />
12.  
    <Setter Property="SelectedValue" Value="{Binding Sex,UpdateSourceTrigger=PropertyChanged}" />
13.  
    </Style>
14.  
    </DataGridComboBoxColumn.EditingElementStyle>
15.  
    <DataGridComboBoxColumn.ElementStyle>
16.  
    <Style TargetType="ComboBox">
17.  
    <Setter Property="ItemsSource" Value="{Binding Path=DataContext.SexList,ElementName=grd}" />
18.  
    <Setter Property="DisplayMemberPath" Value="Name" />
19.  
    <Setter Property="SelectedValuePath" Value="Name" />
20.  
    <Setter Property="SelectedValue" Value="{Binding Sex}" />
21.  
    </Style>
22.  
    </DataGridComboBoxColumn.ElementStyle>
23.  
    </DataGridComboBoxColumn>
24.  
    <!--使用靜態資源-->
25.  
    <DataGridComboBoxColumn Header="性別(靜態資源)" ItemsSource="{Binding Source={StaticResource myEnum}}"
26.  
    TextBinding="{Binding Sex}"
27.  
    SelectedItemBinding="{Binding Sex,UpdateSourceTrigger=PropertyChanged}">
28.  
    </DataGridComboBoxColumn>
29.  
    <!--使用x:Static擴展標記-->
30.  
    <DataGridComboBoxColumn Header="性別(x:Static)" ItemsSource="{x:Static local:ViewModel.SexList2}"
31.  
    TextBinding="{Binding Sex}"
32.  
    SelectedItemBinding="{Binding Sex,UpdateSourceTrigger=PropertyChanged}">
33.  
    </DataGridComboBoxColumn>
34.  
    <!--使用內聯集合-->
35.  
    <DataGridComboBoxColumn Header="性別(內聯集合)"
36.  
    TextBinding="{Binding Sex}"
37.  
    SelectedItemBinding="{Binding Sex,UpdateSourceTrigger=PropertyChanged}">
38.  
    <DataGridComboBoxColumn.ItemsSource>
39.  
    <col:ArrayList>
40.  
    <sys:String>男</sys:String>
41.  
    <sys:String>女</sys:String>
42.  
    </col:ArrayList>
43.  
    </DataGridComboBoxColumn.ItemsSource>
44.  
    </DataGridComboBoxColumn>
45.  
    </DataGrid.Columns>
46.  
    </DataGrid>

 

4.DataGridHyperlinkColumn

使用 DataGridHyperlinkColumn 來顯示包含 Uri 的數據，如 HTTP 地址或電子郵件地址。只有在 Hyperlink 的直接或間接父級是導航主機時，才會發生 Hyperlink 導航。 導航主機的例子包括 NavigationWindow、 Frame、或任何可以承載 XBAPs（如 Microsoft Internet Explorer 6 或更高版本以及 Firefox 2.0 或更高版本）的瀏覽器。

實現效果如下：

主要XAML代碼：

<DataGridHyperlinkColumn Binding="{Binding Http}" ContentBinding="{Binding Name}" Header="網址"/>

5.DataGridTemplateColumn

借助於 DataGridTemplateColumn 類型，可以通過指定用於顯示和編輯值的單元格模板來創建您自己的列類型。

DataGridTemplateColumn可實現以上任何功能，包括checkbox，combobox等。

現實現如下效果：

通過修改顯示模板和編輯模板來實現功能，主要XMAL代碼如下：

1.  
   <!--顯示模板-->
2.  
   <DataTemplate x:Key="DateTemplate" >
3.  
   <StackPanel Width="60" Height="30">
4.  
   <Border Background="LightBlue" BorderBrush="Black" BorderThickness="1,1,1,0">
5.  
   <TextBlock Text="{Binding Birth, StringFormat={}{0:MMM d}}" FontSize="10" HorizontalAlignment="Center" />
6.  
   </Border>
7.  
   <Border Background="White" BorderBrush="Black" BorderThickness="1">
8.  
   <TextBlock Text="{Binding Birth, StringFormat={}{0:yyyy}}" FontSize="10" FontWeight="Bold" HorizontalAlignment="Center" />
9.  
   </Border>
10.  
    </StackPanel>
11.  
    </DataTemplate>
12.  
    <!--編輯模板-->
13.  
    <DataTemplate x:Key="EditingDateTemplate">
14.  
    <DatePicker SelectedDate="{Binding Birth}" />
15.  
    </DataTemplate>

代碼

 

 

作者：FoolRabbit
出處：http://blog.csdn.net/rabbitsoft_1987
歡迎任何形式的轉載，未經作者同意，請保留此段聲明！