VisualStateManager silverlight

Question

Hello I am stuck on getting my VisualState working properly. What I am trying to achieve is setting a border colour on user input so what I do is this

VisualStateManager.GoToState(textbox, "BorderHighlight", false);

The storyboard is defined in a separate VisualStateGroup

<VisualState x:Name="BorderHighlight" >
    <Storyboard >
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:05"  
            Storyboard.TargetName="Border" Storyboard.TargetProperty="        
               (Border.BorderBrush).(SolidColorBrush.Color)">
                   ...
         </ColorAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

The problem is that the textbox now does not leave the visualstate so it can't be triggered a second time. So somehow I have to switch it back to normal state. I tried adding a Normal state to the group seems this is not allowed (can only have one Normal state?) I also tried to set a Normal state the same way I set highlight state after the first one is completed that did not work either.

Please if anyone can point me in the right direction here I'd be most grateful.

Answer 1

I assume you're creating a custom control. I would have something like this:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="BorderStates">

        <VisualState x:Name="BorderHighlight">
            <Storyboard> ... </Storyboard>
        </VisualState>

        <VisualState x:Name="BorderNormal">
            <Storyboard> ...  </Storyboard>
        </VisualState>

    </VisualStateGroup>
    ...
</VisualStateManager.VisualStateGroups>

And then in response to events in your control implementation, something like

protected override void OnMouseEnter(MouseEventArgs e)
{
    VisualStateManager.GoToState(this, "BorderHighlight, false);
    ...
}

protected override void OnMouseLeave(MouseEventArgs e)
{
    VisualStateManager.GoToState(this, "BorderNormal, false);
    ...
}