WPF DataGrid 之数据绑定

时间:2020-12-14 10:17:19

1. Auto generation of columns

最简单的方法莫过于让DataGrid根据数据源中的字段自动生成列了:

根据实体类的公共属性, 能够自动生成四种类型的数据列,对应关系如下:

TextBox columns for string values;

CheckBox columns for boolean values;

ComboBox columns for enumerable values;

Hyperlink columns for Uri values;

拖个DataGrid放在Window中, 把他的ItemsSource绑定到数据源上

如:ItemsSource="{Binding Customers}"

注意:一定要把AutoGenerateColumns的值改为True, 默认拖上去时此属性的值为True.

2. Manually define columns

设置AutoGenerateColumns为False, 那么一切就要靠自己了!

此时需要在xaml文件中编辑DataGrid.Columns。

同样我们可以这样对应数据类型:

DataGridCheckBoxColumn for boolean values;

DataGridComboBoxColumn for enumerable values;

DataGridHyperlinkColumn for Uri values;

DataGridTextColumn to show text values;

DataGridTemplateColumn to show any types of data by defining your own cell template.(Import for customer defined columns)

比如要定义一个显示图片的列:

<DataGrid.Columns>
<DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Height="80" Source="{Binding Image}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>

3. Selection

通过设置DataGrid的SelectionMode,SelectionUnit属性,可以控制运行时我们能过选中的Cell or Row 的模式。
SelectionMode.Single 每次只能选中单行;
SelectionMode.Extended 可以选中多行;
SelectionUnit.Cell 每次只能选中cell;
SelectionUnit.FullRow 每次只能选中row;
SelectionUnit.CellorRowHeader 可选中cell,也可通过RowHeader选中row.
4. Column sorting, reordering and resizing
我们可以通过几个简单的属性实现很酷的功能:
CanUserReorderColumns enables or disables column re-ordering
CanUserResizeColumns enables or disables column resizing
CanUserResizeRows enables or disables row resizing
CanUserSortColumns enables or disables column sorting
CanUserAddRows boolean ---是否允许最后一行有增加项
(These properties’ default values are “True”), like:
<DataGrid ItemsSource="{Binding Customers}"
CanUserReorderColumns="True"
CanUserResizeColumns="True"
CanUserResizeRows="True”
CanUserSortColumns="True"/>
5. Grouping
首先要使用能够分组的数据源,见demo.
Like this:
GroupedCustomers = new ListCollectionView(Customers);
GroupedCustomers.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));
 
重要的是你还要在xaml文件中定义模板来显示分组, It should be like this:
<DataGrid AutoGenerateColumns="True"                   ItemsSource="{Binding GroupedCustomers}">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Padding="3"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander>
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
<TextBlock Text="Items"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
</DataGrid>

6. Row Details

这个比较好搞,只要设置 RowDetailsTemplate就可以了!

It is like this:

<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Image Height="100" Source="{Binding Image}" />
</DataTemplate>
</DataGrid.RowDetailsTemplate>

通过实现RowDetailsTemplateSelector,还可以根据条件生成不同的Details(Row Details depending on the type of data).

代码有点多,like bellow:

public class GenderTemplateSelector : DataTemplateSelector
{
public DataTemplate MaleTemplate { get; set; }
public DataTemplate FemaleTemplate { get; set; }
public override DataTemplate SelectTemplate(object item,
DependencyObject container)
{
var customer = item as Customer;
if (customer == null)
return base.SelectTemplate(item, container);
if( customer.Gender == Gender.Male)
{
return MaleTemplate;
}
return FemaleTemplate;
}
}
<l:GenderTemplateSelector x:Key="genderTemplateSelector">
<l:GenderTemplateSelector.MaleTemplate>
<DataTemplate>
<Grid Background="LightBlue">
<Image Source="{Binding Image}" Width="50" />
</Grid>
</DataTemplate>
</l:GenderTemplateSelector.MaleTemplate>
<l:GenderTemplateSelector.FemaleTemplate>
<DataTemplate>
<Grid Background="Salmon">
<Image Source="{Binding Image}" Width="50" />
</Grid>
</DataTemplate>
</l:GenderTemplateSelector.FemaleTemplate>
</l:GenderTemplateSelector> <DataGrid ItemsSource="{Binding Customers}"
RowDetailsTemplateSelector="{StaticResource genderTemplateSelector}" />

7. Alternating BackgroundBrush

可以通过AlternatingRowBackground and AlternationCount 两个属性轻松实现隔行背景色。

8. Frozen Columns

通过设置FrozenColumnCount 属性,可以控制Frozen Columns.

数字 1 对应第一列,2 对应第二列,以此类推

9. Headers visbility

使用HeadersVisibility控制是否显示列头。