How to customize the scroll bar style in UWP RichTextBox control?

3 mins read

You can customize the visual appearance of the scroll bar in the SfRichTextBoxAdv control by defining a custom style for the scroll bar based on your requirements.

The following code example demonstrates the custom style definition for the scroll bar.

<SolidColorBrush Color="Black" x:Key="ScrollBarBackgroundBrush"/>
<SolidColorBrush Color="Blue" x:Key="ScrollBarPanningBackgroundBrush"/>
<Style TargetType="ScrollBar">
    <Setter Property="MinWidth" Value="7"/>
    <Setter Property="MinHeight" Value="7"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollBar">
                <Grid x:Name="Root" Background="{StaticResource ScrollBarBackgroundBrush}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ScrollingIndicatorStates">
                            <VisualState x:Name="TouchIndicator">
                                <Storyboard>
                                    <FadeInThemeAnimation Storyboard.TargetName="HorizontalPanningRoot"/>
                                    <FadeInThemeAnimation Storyboard.TargetName="VerticalPanningRoot"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseIndicator"/>
                            <VisualState x:Name="NoIndicator">
                                <Storyboard>
                                    <FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="HorizontalPanningRoot"/>
                                    <FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="VerticalPanningRoot"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HorizontalPanningRoot" MinWidth="53">
                        <Rectangle x:Name="HorizontalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{StaticResource ScrollBarPanningBackgroundBrush}" HorizontalAlignment="Left" Height="2.4" MinWidth="7"/>
                    </Grid>
                    <Grid x:Name="VerticalPanningRoot" MinHeight="53">
                        <Rectangle x:Name="VerticalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{StaticResource ScrollBarPanningBackgroundBrush}" MinHeight="7" VerticalAlignment="Top" Width="2.4"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The following screenshot demonstrates the SfRichTextBoxAdv control with a customized scroll bar.