RichEditBox styles and templates
This topic describes the styles and templates for the RichEditBox control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.
Visual states
These are the VisualState values defined in the control's default style.
| VisualState name | VisualStateGroup name | Description |
|---|---|---|
Normal | CommonStates | The default state. |
Disabled | CommonStates | The control is disabled. |
Focused | CommonStates | The control has focus. |
PointerOver | CommonStates | The pointer is positioned over the control. |
Theme resources
These resources are used in the control's default style.
Dark theme brushes
To change the colors of the control in the dark theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="TextBoxBackgroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="Transparent" /> <SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#66FFFFFF" /> <SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" /> <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" /> <SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="#FF4617B4"/>
Light theme brushes
To change the colors of the control in the light theme, override these brushes in App.xaml.
<SolidColorBrush x:Key="TextBoxBackgroundThemeBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#A3000000" /> <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="#66CACACA" /> <SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#26000000" /> <SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" /> <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FF000000" /> <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" /> <SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="#FF4617B4"/>
Other resources
<x:Double x:Key="TextControlBackgroundThemeOpacity">0.8</x:Double> <x:Double x:Key="TextControlBorderThemeOpacity">0.8</x:Double> <x:Double x:Key="TextControlPointerOverBackgroundThemeOpacity">0.87</x:Double> <x:Double x:Key="TextControlPointerOverBorderThemeOpacity">0.87</x:Double> <x:Double x:Key="TextControlThemeMinHeight">32</x:Double> <x:Double x:Key="TextControlThemeMinWidth">64</x:Double> <Thickness x:Key="TextControlBorderThemeThickness">2</Thickness> <Thickness x:Key="TextControlThemePadding">10,3,10,5</Thickness>
Shared resources
The control template uses these resources that are shared with other control templates. Changing these values will affect other controls that use these resources.
<FontFamily x:Key="SymbolThemeFontFamily">Segoe UI Symbol</FontFamily> <FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily> <x:Double x:Key="ControlContentThemeFontSize">14.667</x:Double>
For more info on theme resources, including the values that are used for the HighContrast theme, see XAML theme resources reference.
Default style
<!-- Default style for System.Windows.Controls.RichEditBox --> <Style TargetType="RichEditBox"> <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" /> <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" /> <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" /> <Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}" /> <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" /> <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" /> <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" /> <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RichEditBox"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Normal"> <Storyboard> <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlBackgroundThemeOpacity}" /> <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlBorderThemeOpacity}" /> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlPointerOverBackgroundThemeOpacity}" /> <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0" To="{ThemeResource TextControlPointerOverBorderThemeOpacity}" /> </Storyboard> </VisualState> <VisualState x:Name="Focused" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border x:Name="BackgroundElement" Grid.Row="1" Background="{TemplateBinding Background}" Margin="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.RowSpan="2"/> <Border x:Name="BorderElement" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.RowSpan="1"/> <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Foreground="{ThemeResource TextBoxForegroundHeaderThemeBrush}" Margin="0,4,0,4" Grid.ColumnSpan="2" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="Semilight" /> <ScrollViewer x:Name="ContentElement" Grid.Row="1" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" IsTabStop="False" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw"/> <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.Row="1" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" IsTabStop="False" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" IsHitTestVisible="False"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>