UWP - RichTextBox background/foreground color changing on hover/focus

Question

I have a RichTextBox on a Windows Universal app that I want to stay the same color at all times (during events not selected, on hover and selected). Currently, if I set the Background/Foreground color it sets them for when the control is not selected, but once it is hovered over or focused on the colors change back to default white background with black text.

<RichEditBox HorizontalAlignment="Stretch" Margin="0,0,0,30" VerticalAlignment="Stretch" 
     FontFamily="Courier New" FontSize="12" IsSpellCheckEnabled="False"
     Background="Black" Foreground="LightGray" IsReadOnly="True"/>

How can I make the "Background" and "Foreground" stay consistent through hover/selected events so it's always a Black background with a LightGray foreground?

Answer 1

You should clear PointerOver and Focused VisualState.

<Style TargetType="RichEditBox" x:Key="RichEditBoxStyle">
    <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
    <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
    <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="HeaderContentPresenter"
                                                                    Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                                Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                                Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                                Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                                Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                                                Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver"/>

                            <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}"
                        Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                        Grid.ColumnSpan="2"
                        Grid.RowSpan="1"/>
                    <Border x:Name="BorderElement"
                        Grid.Row="1"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Grid.ColumnSpan="2"
                        Grid.RowSpan="1"/>
                    <ContentPresenter x:Name="HeaderContentPresenter"
                                    x:DeferLoadStrategy="Lazy"
                                    Visibility="Collapsed"
                                    Grid.Row="0"
                                    Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                    Margin="0,0,0,8"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    FontWeight="Normal" />
                    <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 SystemControlPageTextBaseMediumBrush}"
                                Margin="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}"
                                IsTabStop="False"
                                Grid.ColumnSpan="2"
                                Content="{TemplateBinding PlaceholderText}"
                                IsHitTestVisible="False"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and use with your control:

<RichEditBox Style="{StaticResource RichEditBoxStyle}"
                Height="200"
                VerticalAlignment="Center"/>