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