C# DataGrid扩展 - DataGrid不同模板切换

---

前言

之前遇到一个需要使用两个按钮控制同一个DataGrid输出不同内容并表头也不一样，那如何处理呢？这篇是记录这一问题的处理方法。

---

一、需求描述

需求：需在同一界面上实现两个按钮控制同一个DataGrid输出的表头和内容都不相同。
需求处理解析：
1、可将DataGrid的不同表头放入两个模块写成样式
2、两个按钮的事件分别控制两个模块（点击则切换并生成内容）
优化：按钮按下后可让该按钮无法点击，防止重复点击并直观看到是哪个模板

二、解决步骤

1.先将两个DataGrid设置成两个模板

使用DataTemplate 定义，代码如下（示例）：

<DataTemplate x:Key="DataGridTemplate"><DataGridd:ItemsSource="{d:SampleData ItemCount = 8}"RowHeaderWidth="60"AutoGenerateColumns="False"CanUserAddRows="False"HeadersVisibility="All"hc:DataGridAttach.CanUnselectAllWithBlankArea="True"hc:DataGridAttach.ShowRowNumber="True"VirtualizingStackPanel.IsVirtualizing="True"VirtualizingStackPanel.VirtualizationMode="Recycling"ItemsSource="{Binding ElementName=self, Path=DataContext.TestDataList}"><DataGrid.Columns><DataGridTextColumn Binding="{Binding TestName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="测试名称" /><DataGridTextColumn Binding="{Binding TestValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="测试数值" /><DataGridTextColumn Binding="{Binding SpecialValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="特殊数值" /></DataGrid.Columns></DataGrid>
</DataTemplate><DataTemplate x:Key="DataGrid1Template"><DataGridd:ItemsSource="{d:SampleData ItemCount = 8}"RowHeaderWidth="60"AutoGenerateColumns="False"CanUserAddRows="False"HeadersVisibility="All"hc:DataGridAttach.CanUnselectAllWithBlankArea="True"hc:DataGridAttach.ShowRowNumber="True"VirtualizingStackPanel.IsVirtualizing="True"VirtualizingStackPanel.VirtualizationMode="Recycling"ItemsSource="{Binding ElementName=self, Path=DataContext.Test1DataList}"><DataGrid.Columns><DataGridTextColumn Binding="{Binding TestName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="测试名称" /><DataGridTextColumn Binding="{Binding TestValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="测试数值" /><DataGridTextColumn Binding="{Binding SpecialValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="特殊数值" /><DataGridTextColumn Binding="{Binding SpecialValue1, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"ClipboardContentBinding="{x:Null}" Header="特殊数值1" /></DataGrid.Columns></DataGrid>
</DataTemplate>

2.将上述模板通过样式判断显示

可通过ContentControl控件，进行样式判断显示，代码如下（示例）：

<ContentControl Grid.Row="2" Content="{Binding ElementName=self, Path=DataContext.Context}"><ContentControl.Style><Style TargetType="ContentControl"><Style.Triggers><DataTrigger Binding="{Binding ElementName=self, Path=DataContext.Context}" Value="测试1"><Setter Property="ContentTemplate" Value="{StaticResource DataGridTemplate}" /></DataTrigger><DataTrigger Binding="{Binding ElementName=self, Path=DataContext.Context}" Value="测试2"><Setter Property="ContentTemplate" Value="{StaticResource DataGrid1Template}" /></DataTrigger></Style.Triggers></Style></ContentControl.Style>
</ContentControl>

具体说明：
1、使用Context标签值，进行DataGridTemplate模板切换。
2、可使用Button控件控制Context标签值的变化。

3.使用Button控件控制DataGrid模板切换

1、xaml界面方面，使用ToggleButton(切换两种状态)按钮控件创建，代码如下：

<ItemsControl VerticalAlignment="Center" ItemsSource="{Binding TestButtons}" Margin="5"><ItemsControl.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel Orientation="Horizontal" /> </ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><ToggleButton Width="100" Height="30"Command="{Binding ElementName=self, Path=DataContext.SelectedItem}"CommandParameter="{Binding Text}" Content="{Binding Context}" IsChecked="{Binding IsCheck}"Margin="0 0 10 0" Style="{DynamicResource ToggleButtonBaseStyle}" /></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>

这样写的目的：能动态加载多个ToggleButton，也可以将其换为其他。

2、viewmodel方面，先定义按钮集TestButtons、标识Context、选中事件SelectedItem，代码如下：

private string _context;
public string Context
{get { return _context; }set { SetProperty(ref _context, value); }
}private ObservableCollection<TestButton> _testButtons;
public ObservableCollection<TestButton> TestButtons
{get { return _testButtons; }set { SetProperty(ref _testButtons, value); }
}private ICommand selectedItem;
public ICommand SelectedItem
{get{return selectedItem?? (selectedItem = new RelayCommand<object>(obj =>SelectedStatus(obj as string)));}
}

在构造函数中，让TestButtons添加多个button，并选中第一个按钮，代码如下：

//构造函数
public MainViewModel()
{TestButtons = new ObservableCollection<TestButton>();TestButtons.Add(new TestButton{Context = "测试1",IsCheck = true,Text = "测试1",CommandParameter = "Test1Data"});TestButtons.Add(new TestButton{Context = "测试2",IsCheck = false,Text = "测试2",CommandParameter = "Test2Data"});SelectedStatus("测试1");
}

选中函数实现，代码如下：

public void SelectedStatus(string text)
{foreach (var item in TestButtons){item.IsCheck = false;}Context = text;//选中text相同的第一个按钮var selectedBtn = TestButtons.Where(x => x.Text == text).First();selectedBtn.IsCheck = true;switch (text){case "测试1"://CreateTestDataList()换为真实数据TestDataList = CreateTestDataList();break;case "测试2":Test1DataList = CreateTestDataList();break;}
}

---