How can I change the background of a Rich Edit Box using code while focused?

Question

I'm trying to make my edit box have a black background, so my constructor looks like this:

GUI = new RichEditBox()
        {
            Margin = new Thickness(0, 510, 0, 0),
            Width = 550,
            Height = 250,
            Background = new SolidColorBrush(Colors.White),
            IsSpellCheckEnabled = false,
            IsColorFontEnabled = true,
            IsEnabled = false,
            IsTextScaleFactorEnabled = false,
            Opacity = 0,
            SelectionFlyout = null,
            FontFamily = new FontFamily("Consolas"),
            FocusVisualPrimaryBrush = new SolidColorBrush(Colors.Black),
            FocusVisualSecondaryBrush = new SolidColorBrush(Colors.Black),
            Foreground = new SolidColorBrush(Colors.Black),
            UseSystemFocusVisuals = false,
            Header = "Bash"
        };

The problem is that the edit box looks like this when selected:

But when it's not selected and the mouse is inside of box it looks exactly how I wanted:

Answer 1

So you can detect when focus is gained and lost on UIElements... Try typing .Focus and you'll see the handlers... This will return the RichTextBox as an element in the arcs of the call. Then here is where you change your color.

Answer 2

How can I change the background of a Rich Edit Box using code while focused?

For your requirement, you need to custom RichEditBox style and modify the Focused VisualState . I create the complete style that you use directly.

<Style x:Key="FocusedDrakBackgroudStyle" TargetType="RichEditBox">
    <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
    <Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
    <Setter Property="ContentLinkForegroundColor" Value="{ThemeResource ContentLinkForegroundColor}" />
    <Setter Property="ContentLinkBackgroundColor" Value="{ThemeResource ContentLinkBackgroundColor}" />
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
    <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
    <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="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
    <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
    <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RichEditBox">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ContentPresenter
                        x:Name="HeaderContentPresenter"
                        Grid.Row="0"
                        Margin="{ThemeResource RichEditBoxTopHeaderMargin}"
                        VerticalAlignment="Top"
                        x:DeferLoadStrategy="Lazy"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        FontWeight="Normal"
                        Foreground="{ThemeResource TextControlHeaderForeground}"
                        TextWrapping="Wrap"
                        Visibility="Collapsed"
                        />
                    <Border
                        x:Name="BorderElement"
                        Grid.Row="1"
                        Grid.RowSpan="1"
                        MinWidth="{ThemeResource TextControlThemeMinWidth}"
                        MinHeight="{ThemeResource TextControlThemeMinHeight}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        />
                    <ScrollViewer
                        x:Name="ContentElement"
                        Grid.Row="1"
                        Margin="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        AutomationProperties.AccessibilityView="Raw"
                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                        IsTabStop="False"
                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                        ZoomMode="Disabled"
                        />
                    <TextBlock
                        x:Name="PlaceholderTextContentPresenter"
                        Grid.Row="1"
                        Margin="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        Foreground="{ThemeResource TextControlPlaceholderForeground}"
                        IsHitTestVisible="False"
                        Text="{TemplateBinding PlaceholderText}"
                        TextAlignment="{TemplateBinding TextAlignment}"
                        TextWrapping="{TemplateBinding TextWrapping}"
                        />
                    <ContentPresenter
                        x:Name="DescriptionPresenter"
                        Grid.Row="2"
                        x:Load="False"
                        AutomationProperties.AccessibilityView="Raw"
                        Content="{TemplateBinding Description}"
                        Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                        />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <!--  modify the BorderElement opacity and backgroud property when focused  -->

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0.5" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>