WPF DataGrid 合并单元格
在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了。其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Header也放一个DataGrid,但是合并的这一个连续列中只支持一列的拖动,效果如下,上图
代码如下
首先定义两个模板,一个用于合并的Header显示
<DataTemplate x:Key="MergeHeader"> <DataGrid HorizontalAlignment="Stretch" HorizontalGridLinesBrush="Transparent" BorderThickness="0" Margin="0" CanUserReorderColumns="False" CanUserSortColumns="False" CanUserResizeColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="产品批号" Width="*" IsReadOnly="True" /> <DataGridTextColumn Header="生产日期" IsReadOnly="True" Width="100" /> <DataGridTextColumn Header="有效期至" IsReadOnly="True" Width="102" /> <DataGridTextColumn Header="tedsd" Width="126" IsReadOnly="True" /> <DataGridTextColumn Header="tesddff" Width="125" IsReadOnly="True"/> </DataGrid.Columns> <DataGrid.Resources> <Style TargetType="DataGridColumnHeader"> <Setter Property="Template" Value="{StaticResource styleMergeHeader}"/> </Style> </DataGrid.Resources> </DataGrid> </DataTemplate>
另外一个模板用于显示合并明细信息,ItemsSource要绑定到你数据源的一个List属性,意思就是你把合并的明细信息放入到主DataGrid数据源的子List属性中,因为明细中不要显示Header所以把Header隐藏
<DataTemplate x:Key="MergeColumn"> <DataGrid Name="dgMergeGrid" ItemsSource="{Binding MerageData}" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Loaded="dgMergeGrid_Loaded" BorderThickness="0,0,0,0" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" HeadersVisibility="None" AutoGenerateColumns="False" IsReadOnly="True"> <DataGrid.Columns> <DataGridTextColumn Header="产品批号" Width="*" IsReadOnly="True" Binding="{Binding produceBatchNo}"> </DataGridTextColumn> <DataGridTextColumn Header="生产日期" IsReadOnly="True" Width="100" Binding="{Binding produceDate}" /> <DataGridTextColumn Header="有效期至" IsReadOnly="True" Width="102" Binding="{Binding exprieDate}" /> <DataGridTextColumn Header="dfafa" Width="126" IsReadOnly="True" Binding="{Binding smallNum}" /> <DataGridTextColumn Header="fafsfdfd" Width="125" IsReadOnly="True" Binding="{Binding packUnit}" /> </DataGrid.Columns> <DataGrid.Resources> <Style TargetType="DataGrid"> <!--网格线颜色--> <Setter Property="HorizontalGridLinesBrush"> <Setter.Value> <SolidColorBrush Color="Transparent"/> </Setter.Value> </Setter> <Setter Property="VerticalGridLinesBrush"> <Setter.Value> <SolidColorBrush Color="LightBlue"/> </Setter.Value> </Setter> </Style> </DataGrid.Resources> </DataGrid> </DataTemplate>
然后在你的主DataGrid中的显示明细信息的列设置模板就可以了
<DataGridTemplateColumn Header="批次信息" Width="580" HeaderTemplate="{StaticResource MergeHeader}" CellTemplate="{StaticResource MergeColumn}">
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="LightBlue"></Setter>
</Style>
</DataGridTemplateColumn.HeaderStyle>
</DataGridTemplateColumn>