Change focused textbox background/foreground in WP7

Question

Whenever the textbox is focused, the border and foreground of the text is changed according to the current theme:

theme light ->border:black, text:white, background:transparent

theme dark ->border:white, text:white, background:white

I want the textbox always have border:white, text:white, background:transparent

I can control these settings when the textbox is not focused, but I cannot change background when it has focus.

The XML of the textbox is:

<TextBox    InputScope="EmailSmtpAddress" Height="72" LostFocus="textBox1_LostFocus"  GotFocus="textBox1_GotFocus" HorizontalAlignment="Left" Margin="0,62,0,0" Name="textBox1" Text="Enter URL here..." VerticalAlignment="Top" Width="460" TextChanged="textBox1_TextChanged" Foreground="White" Background="#005DADF5" SelectionForeground="White" BorderBrush="#DEEAEAEA" FontFamily="Tahoma" FontWeight="Normal" />

Answer 1

You can override the default styling by using a template:

<Style x:Key="TextBoxStyle1" TargetType="TextBox">
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}" />
        <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}" />
        <Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReadOnly">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyContent" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
        <!-- COMMENT THIS OUT ----->    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>-->
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="EnabledBorder"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentControl x:Name="ContentElement"
                                            Margin="{StaticResource PhoneTextBoxInnerMargin}"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch"
                                            BorderThickness="0"
                                            Padding="{TemplateBinding Padding}" />
                        </Border>
                        <Border x:Name="DisabledOrReadonlyBorder"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Background="Transparent"
                                BorderBrush="{StaticResource PhoneDisabledBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Visibility="Collapsed">
                            <TextBox x:Name="DisabledOrReadonlyContent"
                                     Background="Transparent"
                                     FontFamily="{TemplateBinding FontFamily}"
                                     FontSize="{TemplateBinding FontSize}"
                                     FontStyle="{TemplateBinding FontStyle}"
                                     FontWeight="{TemplateBinding FontWeight}"
                                     Foreground="{StaticResource PhoneDisabledBrush}"
                                     IsReadOnly="True"
                                     SelectionBackground="{TemplateBinding SelectionBackground}"
                                     SelectionForeground="{TemplateBinding SelectionForeground}"
                                     Template="{StaticResource PhoneDisabledTextBoxTemplate}"
                                     Text="{TemplateBinding Text}"
                                     TextAlignment="{TemplateBinding TextAlignment}"
                                     TextWrapping="{TemplateBinding TextWrapping}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I used Expression Blend to get the default template, then modified it by removing (commenting out) the ObjectAnimationUsingKeyFrames element that changed the BorderBrush in the Focused VisualState . Apply this style to the TextBox and change its BorderBrush to your color.

<TextBox BorderBrush="Red" Style="{StaticResource TextBoxStyle1}" />

Answer 2

The easiest way is to set the Event on GotFocus.

XamlCode of the TextBox:

<TextBox x:Name="InputUserName"
         Foreground="Black"
         Background="LightGray"
         BorderBrush="LightGray"
         GotFocus="GotFocusaAction" />

The Codebehind of the GotFocusAction:

private void GotFocusaAction(object sender, System.Windows.RoutedEventArgs e)
    {
        InputUserName.Background = new SolidColorBrush(Colors.LightGray);
        InputUserName.BorderBrush = new SolidColorBrush(Colors.LightGray);
    }

When you want to set the color of the focused TextBox to an different color you should also set the Event of LostFocus to change the BackgroundColor back.

XamlCode of the TextBox:

<TextBox x:Name="InputUserName"
     Foreground="Black"
     Background="Red"
     BorderBrush="Red"
     GotFocus="GotFocusaAction"
     LostFocus="GotFocusaAction" />

The Codebehind:

private void GotFocusaAction(object sender, System.Windows.RoutedEventArgs e)
    {
        InputUserName.Background = new SolidColorBrush(Colors.Purple);
        InputUserName.BorderBrush = new SolidColorBrush(Colors.Purple);
    }

    private void LostFocusAction(object sender, System.Windows.RoutedEventArgs e)
    {
        InputUserName.Background = new SolidColorBrush(Colors.Red);
        InputUserName.BorderBrush = new SolidColorBrush(Colors.Red);
    }

Answer 3

Apparently you cannot change the background of textbox when it gets focused, not in dark theme (It's even like that in the integrated textboxes of the system).

So I came up with a solution that solved my problem,

I created two textbox instances Exactly above each other, and change the Opacity of the front one to be equal 0 (completely invisible).

Then I connected both textboxes through code so that if the front one is being typed into (it's invisible so no one will see the text being written) I edit the text of the back one to be exactly the same.

Answer 4

You need to comment a greater zone :

<VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <!--<Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>-->
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                    </VisualStateGroup>