Resize gripper for row header width in WPF DataGrid

Question

I have a WPF DataGrid (System.Windows.Controls).

It is possible to resize columns headers, and rows height, but i can't seem to find a way to let the user resize the row headers width. I want the DataGrid to open with a fixed row header width size and let the user resize the width of the row header if he wants, but there is no resize gripper for this.

Any idea?

Thanks!

Answer 1

I had the same problem. Here is my solution:

Copy the RowHeaderStyle and extend it:

<UserControl.Resources>
    <Style x:Key="RowHeaderStyle">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                    <Grid>
                        <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" IsSelected="{TemplateBinding IsRowSelected}" Orientation="Horizontal" Padding="{TemplateBinding Padding}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
                            <StackPanel Orientation="Horizontal">
                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                                <Control SnapsToDevicePixels="False" Template="{Binding ValidationErrorTemplate, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type DataGridRow}}}">
                                    <Control.Visibility>
                                        <Binding Path="(Validation.HasError)" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type DataGridRow}}">
                                            <Binding.Converter>
                                                <BooleanToVisibilityConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </Control.Visibility>
                                </Control>
                            </StackPanel>
                        </Themes:DataGridHeaderBorder>
                        <Thumb x:Name="PART_TopHeaderGripper" VerticalAlignment="Top">
                            <Thumb.Style>
                                <Style TargetType="{x:Type Thumb}">
                                    <Setter Property="Height" Value="8"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Cursor" Value="SizeNS"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type Thumb}">
                                                <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Thumb.Style>
                        </Thumb>
                        <Thumb x:Name="PART_BottomHeaderGripper" VerticalAlignment="Bottom">
                            <Thumb.Style>
                                <Style TargetType="{x:Type Thumb}">
                                    <Setter Property="Height" Value="8"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Cursor" Value="SizeNS"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type Thumb}">
                                                <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Thumb.Style>
                        </Thumb>
                        <!-- This is the part for changing the width -->
                        <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" DragDelta="PART_RightHeaderGripper_DragDelta" Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}">

                            <Thumb.Style>
                                <Style TargetType="{x:Type Thumb}">
                                    <Setter Property="Width" Value="8"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Cursor" Value="SizeWE"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type Thumb}">
                                                <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Thumb.Style>
                        </Thumb>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!-- If you want to wrap the RowHeaderText, use this block -->
        <Setter Property="DataGridRowHeader.ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock TextWrapping="Wrap" Text="{Binding}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

Use the new Style in the DataGrid:

<Grid>
    <DataGrid x:Name="dgTest">
        <DataGrid.RowHeaderStyle>
            <Style BasedOn="{StaticResource RowHeaderStyle}"/>
        </DataGrid.RowHeaderStyle>
    </DataGrid>
</Grid>

Code behind:

private void PART_RightHeaderGripper_DragDelta(object sender, Primitives.DragDeltaEventArgs e)
{
    DataGrid dg = (sender as Thumb).Tag as DataGrid;
    dg.RowHeaderWidth = dg.RowHeaderActualWidth + e.HorizontalChange;
}

Hope, I could help.

Answer 2

After a quick search online, I found two ways to achieve the first part of your requirement. You can open your DataGrid with a fixed RowHeader Width like this:

<DataGrid ItemsSource="{Binding YourItems}" RowHeaderWidth="100">

Or like this:

<DataGrid ItemsSource="{Binding YourItems}">
    <DataGrid.RowHeaderStyle>
        <Style TargetType="{x:Type DataGridRowHeader}">
            <Setter Property="Width" Value="100" />
        </Style>
    </DataGrid.RowHeaderStyle>
</DataGrid>

The RowHeaderStyle obviously let's us set more properties on the DataGridRowHeader, but unfortunately, I couldn't find any way to let the users resize it themselves.