Change TextBox Background on focus

07-03-2009 11:22 AM |

 Hi,

I am very new to Silverlight and I just try to style my own TextBox.

My task: Change the background color of the textbox, when it receives focus.

I took the default TextBox Style from msdn, put it in my App.xaml, gave it a key and eventually enhanced the Storyboard in the Focused state by a ColorAnimation. Simple enough, I thought. Unfortunately what happens is, that the Silverlight application crashes, as soon as I focus the textbox (a blank page appears). So the problem is similar to the one described here.

 What's going wrong? Thanks.

<Style x:Key="Test" TargetType="TextBox">
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Background" Value="#FFFFFFFF" />
  <Setter Property="Foreground" Value="#FF000000" />
  <Setter Property="Padding" Value="2" />
  <Setter Property="BorderBrush">
    <Setter.Value>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFA3AEB9" Offset="0"/>
        <GradientStop Color="#FF8399A9" Offset="0.375"/>
        <GradientStop Color="#FF718597" Offset="0.375"/>
        <GradientStop Color="#FF617584" Offset="1"/>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TextBox">
        <Grid x:Name="RootElement">
          <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="CommonStates">
              <vsm:VisualStateGroup.Transitions>
                <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="ReadOnly"/>
                <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Disabled"/>
              </vsm:VisualStateGroup.Transitions>
              <vsm:VisualState x:Name="Normal" />
              <vsm:VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimation Storyboard.TargetName="MouseOverColor" Storyboard.TargetProperty="Color" To="#FF99C1E2" Duration="0"/>
                </Storyboard>
              </vsm:VisualState>
              <vsm:VisualState x:Name="Disabled">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".7" Duration="0"/>
                </Storyboard>
              </vsm:VisualState>
              <vsm:VisualState x:Name="ReadOnly" >
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                </Storyboard>
              </vsm:VisualState>
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="FocusStates">
              <vsm:VisualState x:Name="Focused">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>

                  <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" To="Red" Duration="0"/>

                </Storyboard>
              </vsm:VisualState>
              <vsm:VisualState x:Name="Unfocused">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                </Storyboard>
              </vsm:VisualState>
            </vsm:VisualStateGroup>
          </vsm:VisualStateManager.VisualStateGroups>

          <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
            <Grid>
              <Border x:Name="ReadOnlyVisualElement" Background="#72F7F7F7" Opacity="0" />
              <Border BorderThickness="1">
                <Border.BorderBrush>
                  <SolidColorBrush x:Name="MouseOverColor" Color="Transparent"/>
                </Border.BorderBrush>
                <ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>
              </Border>
            </Grid>
          </Border>
          <Border x:Name="DisabledVisualElement" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
          <Border x:Name="FocusVisualElement" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" CornerRadius="1" Opacity="0" IsHitTestVisible="False"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Re: Change TextBox Background on focus

07-03-2009 4:23 PM |

The problem here is that the Background property is of type Brush and as such, you can't set it directly to a Color (such as Red). When setting the Background attribute in a Control element, you will notice that you can do this sort of thing, but it doesn't work this way for Animations. Replace your current ColorAnimation with the markup below.

<ColorAnimation

    Storyboard.TargetName="Border"

    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"

    To="Red"

    Duration="0" />

Re: Change TextBox Background on focus

07-06-2009 3:56 AM |

 Thanks for your answer. Your first approach works great!

However, your alternative solution does work in a different way. The element overlaps the cursor and your text. So, the TextBox always is red, while focussed. You don't see what you type. Seems like the element has a bigger z-index.

Is there an easy way/pattern, how you find out the property name?

(Border.Background).(SolidColorBrush.Color) is kind of confusing and unintuitive for me. Why the brackets and why in this way?