← 返回所有博客文章

C1DataGrid的条件化数据模板

C1DataGrid for WPF控件提供了很多不同的列类型。但是如何在同一列里添加不同的类型。

我们可以通过DataTriggers和DataGridTemplateColumn来完成功能。单元格的数据依靠绑定的数据,我们需要给数据或是类型添加一个DataTemplate数据模板。

本文,我们就创建一个工程来使用C1DataGrid。

下面就是具体的步骤:

步骤一:创建绑定的ViewModel

首先,我们需要创建列上每个单元格的绑定的ViewModel,代码参考如下:

 

public class ViewModel
{
public ObservableCollection<string> ControlTypes
{
get;
set;
}
public ViewModel()
{
ControlTypes = new ObservableCollection<string>();
ControlTypes.Add("Name");
ControlTypes.Add("Designation");
ControlTypes.Add("Company");
ControlTypes.Add("Gender");
ControlTypes.Add("Age");
ControlTypes.Add("IsActive");
ControlTypes.Add("Address");
ControlTypes.Add("");
}
}

 

步骤二:创建DataGridtemplateColumn

 现在,我们需要将C1DataGrid添加到设计器然后添加DtaGridTemplateColumn。这样,我们就可以依据数据设计不同的单元格类型。

在DataGridTemplateColumn,我们定义CellTemplate来自定义ContentControl的样式,这需要DataTriggers的帮助。我们使用DataTrigger因为我们基于数据添加不同的控件。

代码参考:

<c1:C1DataGrid Name="c1DataGrid" ItemsSource="{Binding ControlTypes}" AutoGenerateColumns="False" HeadersVisibility="None" Grid.Row="1"
RowHeight="Auto">
<c1:C1DataGrid.Columns>
<c1:DataGridTextColumn Header="Control Type" Binding="{Binding}"/>
<c1:DataGridTemplateColumn Header="Actual Control">
<c1:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="Name">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="Name"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Designation">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="Designation"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Company">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="Company"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Gender">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ComboBox>
<ComboBox.Items>
<ComboBoxItem Content="Male"/>
<ComboBoxItem Content="Female"/>
</ComboBox.Items>
</ComboBox>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="IsActive">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Content="IsActive?"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Address">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<c1:C1RichTextBox TextWrapping="Wrap" Width="300" Height="50" VerticalScrollBarVisibility="Auto"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Button Content="Button"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</c1:DataGridTemplateColumn.CellTemplate>
</c1:DataGridTemplateColumn>
</c1:C1DataGrid.Columns>
</c1:C1DataGrid>

 

步骤三:设置DataContext

我们已经创建了单元格。现在最后一步就是设置DataBindings的DataContext,我们有很多选项给当前页设置DataContext。但是我们建议在构造器里设置,写在初始化代码之后。因为XAML的绑定运行在初始化之后。

代码参考:

public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}

 

结论:

我们可以给一个单一列添加不同类型的单元格通过DataGridTemplateColumn的DataTriggers。

如图所示:

 

本文的示例请下载

 Wpf_C1DataGrid1.zip (43.94 kb)

 

 

C1DataGrid的在线英文产品文档地址:

http://helpcentral.componentone.com/nethelp/C1datagridWPF/

如果你对C1DataGrid感兴趣,请到我们的官网下载最新版本:/download/?pid=6

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-138.html

 

C1DataGrid for WPF使用技巧》系列文章

(一)在表头展示合计信息

(二)简单数据绑定

(三)C1DataGrid的条件话数据模板