ControlTemplate for DataGrid ScrollBar

Question

I am looking for an 'easy' way to do a control template for a DataGrid ScrollBar. The only part of my datagrid that needs a control template is the horizontal scrollbar, ie. PART_HorizontalScrollBar. Is there something like this that I could add to my style resources maybe?

<Setter Property="Template">
<Setter.Value >
 <ControlTemplate x:Name= "PART_HorizontalScrollBar" >
 <DockPanel> etc... ...

The problem is that when I add that controltemplate, the column headers disappear. If I remove the controltemplate, the column headers reappear, but not the horizontal scrollbar. Thank you for the suggestions.

Answer 1

Override the entire template for the DataGrid and set the Template property of the PART_HorizontalScrollBar to your custom template:

<DataGrid ...>
    <DataGrid.Resources>
        <ControlTemplate x:Key="yourCustomTemplate" />
    </DataGrid.Resources>
    <DataGrid.Template>
        <ControlTemplate TargetType="{x:Type DataGrid}">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                <ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
                    <ScrollViewer.Template>
                        <ControlTemplate TargetType="{x:Type ScrollViewer}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Button Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.Row="1"/>
                                <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                <Grid Grid.Column="1" Grid.Row="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ScrollBar x:Name="PART_HorizontalScrollBar" 
                                                       Grid.Column="1" 
                                                       Maximum="{TemplateBinding ScrollableWidth}" 
                                                       Orientation="Horizontal" 
                                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
                                                       Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                                       ViewportSize="{TemplateBinding ViewportWidth}"
                                                       Template="{StaticResource yourCustomTemplate}"/>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </ScrollViewer.Template>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </DataGrid.Template>
</DataGrid>

Unfortunately you cannot override only a part of a ControlTemplate:

WPF: Is there a way to override part of a ControlTemplate without redefining the whole style?