Silverlight Controls and Silverlight Toolkit

Re: Change TextBox Background on focus

elmore.adam — Mon, 06 Jul 2009 14:37:18 GMT

I didn't think through the situation properly the first time around; typically, you shouldn't need to change the color of the focus visual element. Set it initially and then display the element by altering the Opacity (or Visibility).

As far as targeting properties goes, this is the proper way to do so. Essentially you are navigating to the property that you wish to target. It can get ugly, but it will be necessary in some situations.

Re: Change TextBox Background on focus

sco0ter — Mon, 06 Jul 2009 07:56:17 GMT

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?

Re: Change TextBox Background on focus

elmore.adam — Fri, 03 Jul 2009 20:31:57 GMT

Alternatively, you could name the SolidColorBrush which will fill the Background of your Border like so:

<Border

    x:Name="FocusVisualElement"

    BorderThickness="{TemplateBinding BorderThickness}"

    BorderBrush="#FF45D6FA"

    Margin="1"

    CornerRadius="1"

    Opacity="0"

    IsHitTestVisible="False">

    <Border.Background>

        <SolidColorBrush

            x:Name="BackgroundBrush"

            Color="White" />

    </Border.Background>

</Border>

Then you would simply target this Brush in your ColorAnimation:

<ColorAnimation

    Storyboard.TargetName="BackgroundBrush"

    Storyboard.TargetProperty="Color"

    To="Red"

    Duration="0" />

Re: Change TextBox Background on focus

elmore.adam — Fri, 03 Jul 2009 20:23:37 GMT

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" />

Change TextBox Background on focus

sco0ter — Fri, 03 Jul 2009 15:22:04 GMT

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>