Silverlight 4 Setting background color of textbox on focus

Question

I am trying to set the background color of a Textbox to white on focus using a Style. My enabled Textbox has a Linear Gradient background by default:

    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#e8e8e8" Offset="0.0" />
                <GradientStop Color="#f3f3f3" Offset="0.25" />
                <GradientStop Color="#f4f4f4" Offset="0.75" />
                <GradientStop Color="#f4f4f4"  Offset="1.0" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>

I have a focus visual state defined:

 <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation     Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                </Storyboard>
                            </VisualState>

Here is the rest of the Control Template:

<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid>
                            <Border x:Name="ReadOnlyVisualElement" Opacity="0" Background="#5EC9C9C9"/>
                            <Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent">
                                <ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>
                            </Border>
                        </Grid>
                    </Border>
                    <Border x:Name="DisabledVisualElement" Background="#A5D7D7D7" BorderBrush="#A5D7D7D7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
                    <Border x:Name="FocusVisualElement" Background="#A5ffffff" BorderBrush="#FF72c1ec" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" Opacity="0" IsHitTestVisible="False"/>

On the last Border tag is where I am trying to set the background to white (#ffffff). Right now I have the opacity at A5 which does turn the background white, however it also starts to obscure the text in the box. Any higher opacity makes the text invisible so I am pretty sure that setting the background of that border is not the right way to do this.

Can I set the Background color of the ContentElement somehow through a StoryBoard?

Thanks.

Answer 1

Have you tried using ColorAnimation?