Articles in this section
Category / Section

How to customize the scroll bar style in RichTextBox control?

1 min read

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

The following code example demonstrates the custom style definition for 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 SfRichTextBoxAdv control with customized scroll bar.

Figure 1: SfRichTextBoxAdv control in Desktop App.

Figure 2: SfRichTextBoxAdv control in Windows Phone App.

 

The following sample demonstrates to customize the scroll bar style in SfRichTextBoxAdv control.

WinRT (Windows 8 and 8.1): Sample_WinRT

Universal (Windows 8.1): Sample_Universal

Universal Windows (Windows 10): Sample_UinversalWindows

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied