How to customize GridView scrollbar(horizontal as well as vertical) - Need slim, rounded, light grey style with transparency

[Anas]

I need to modify the default scrollbar appearance of the Telerik WPF GridView . Currently, the scrollbar is too wide/thick for my design requirements.

I'm using Telerik UI for WPF with XAML, and despite trying multiple approaches including:

• Modifying the ScrollViewer style
• Attempting to override the default template
• Trying various XAML styling techniques None of these attempts have successfully achieved the desired result.

Specific customization needs:

• Reduce the width of the scrollbar to make it slimmer
• Change the color to light grey
• Add rounded corners to the scrollbar thumb
• Make the scrollbar background transparent

I'm looking for guidance on how to achieve these styling requirements, either through built-in Telerik properties or custom XAML styling. Since I'm not using any Telerik themes, I need a solution that works with the default styling approach. If anyone has successfully customized the DataGrid scrollbar without themes, I would greatly appreciate a working example.

Current behavior is shown in the attached screenshot where you can see the default thick scrollbar. Any suggestions or solutions would be helpful.
Below is the XAML code that I have been working on

                <telerik:RadGridView 
AutoGenerateColumns="False"
ShowGroupPanel="False"
ItemsSource="{Binding LogEntries}"
RowIndicatorVisibility="Collapsed"
FrozenColumnsSplitterVisibility="Collapsed"
GridLinesVisibility="None"
IsReadOnly="True"
SelectionMode="Single"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
Margin="0,10,0,0"
MaxHeight="350"
Foreground="White"
EnableRowVirtualization="True"
EnableColumnVirtualization="True">

                <telerik:RadGridView.Resources>
                    <Style TargetType="telerik:GridViewCell">
                        <Setter Property="CurrentBorderBrush" Value="Transparent" />
                    </Style>
                    <Style TargetType="telerik:GridViewHeaderCell">
                        <Setter Property="Background" Value="#363736" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="telerik:GridViewHeaderCell">
                                    <Grid>
                                        <Border Background="{TemplateBinding Background}" BorderBrush="#4A4A4A" BorderThickness="0,0,1,1" />
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#363736" />
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                    <Style TargetType="telerik:GridViewDataColumn">
                        <Setter Property="Background" Value="#FF2C2C2C" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FF2C2C2C" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </telerik:RadGridView.Resources>
                <telerik:RadGridView.RowStyle>
                    <Style TargetType="telerik:GridViewRow">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="BorderBrush" Value="Transparent" />
                        <Setter Property="Background" Value="Transparent" />
                    </Style>
                </telerik:RadGridView.RowStyle>

                <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn Header="Source" 
                              DataMemberBinding="{Binding Source}"/>
                        <telerik:GridViewDataColumn Header="Timestamp" 
                              DataMemberBinding="{Binding Timestamp}"/>
                        <telerik:GridViewDataColumn Header="user_name" 
                              DataMemberBinding="{Binding user_name}"/>
                        <telerik:GridViewDataColumn Header="event_name" 
                              DataMemberBinding="{Binding event_name}"/>
                        <telerik:GridViewDataColumn Header="file_name" 
                              DataMemberBinding="{Binding file_name}"/>
                        <telerik:GridViewDataColumn Header="Desc" 
                              DataMemberBinding="{Binding Desc}"/>
                        <telerik:GridViewDataColumn Header="process_name" 
                              DataMemberBinding="{Binding process_name}"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>

[Martin Ivanov]

Hello Anas,

To achieve your requirement, you can extract the default ControlTemplate and associated styles of the WPF native ScrollViewer, ScrollBar and their buttons and thumbs, and then modify the templates in order to meet your design requirements. Then, you can use implicit styles (styles without x:Key setting) to apply the customized styles and template.

I've atached a sample project with the default styles/templates of the ScrollViewer extracted and unmodified. You can use it as a base to add your customizations.

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik