Question

I have a custom data style grid that I have defined in a seperate resource file. In this style I override the ControlTemplate to change it’s appearance.

Then I have my own CustomDataGrid control that is derived from UserControl and uses the style in the resource file.

I need to be able to have the vertical scroll bars have a user defined width. I know how to change the scroll bar width by hard coding a value. What I cannot do is make is so that in my custom control I can set the scroll bar width.

Here is what my Template style looks like in the resource file, where I need the scroll bar width I have a series of question marks.

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGrid}">
                <Border x:Name="border" SnapsToDevicePixels="True" BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Background="{TemplateBinding RowBackground}">
                    <ScrollViewer x:Name="DG_ScrollViewer" Focusable="false" Background="Black">
                        <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 Focusable="false" Command="{x:Static DataGrid.SelectAllCommand}"
                                        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" Height="32"
                                        Visibility="{Binding HeadersVisibility, 
                                        ConverterParameter={x:Static DataGridHeadersVisibility.Column}, 
                                        Converter={x:Static DataGrid.HeadersVisibilityConverter}, 
                                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.ColumnSpan="2"
                                        Grid.Row="1" CanContentScroll="{TemplateBinding CanContentScroll}" />
                                    <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"
                                        Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}"
                                        Maximum="{TemplateBinding ScrollableHeight}"
                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                        Width="{????????????????????????}"       
                                        Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                                    <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" Orientation="Horizontal"
                                            ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}"
                                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                            Value="{Binding HorizontalOffset, Mode=OneWay, 
                                            RelativeSource={RelativeSource TemplatedParent}}"/>
                                        </Grid>
                                    </Grid>
                            </ControlTemplate>
                        </ScrollViewer.Template>
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

Can anyone please help me?

Answer 1

Create a dependency property named (eg) ScrollBarWidth, then write Width={TemplateBinding ScrollBarWidth} in the template.