65.9K
CodeProject is changing. Read more.
Home

DataGrid Visual Column Separator

starIconstarIconstarIconstarIconstarIcon

5.00/5 (1 vote)

Jul 31, 2013

CPOL
viewsIcon

21816

DataGrid column separator

Introduction

I had to visually separate my DataGrid in two different parts. I used XAML to do so and added a small unused column. I searched for a solution but I didn't find anything that would solve my problem.

Using the Code

It is very simple, all in XAML. You just need to add a column and change the Header and Cell style.

<DataGridTemplateColumn MinWidth="4" MaxWidth="4" 
IsReadOnly="True" CanUserResize="False">
    <DataGridTemplateColumn.HeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Margin" Value="-1" />
            <Setter Property="Background" Value="Black" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="2" />
        </Style>
    </DataGridTemplateColumn.HeaderStyle>
    <DataGridTemplateColumn.CellStyle>
        <Style TargetType="{x:Type DataGridCell}">                       
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="2" />                          
            <Setter Property="Focusable" Value="False" />
        </Style>
    </DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn> 

With this separator, you can't use arrow to go between the two parts of the DataGrid but with Tab it is alright.