Silverlight: How to Create a VisualState for a Templated / Custom Control

Question

I'm trying to create a templated/custom control in Silverlight.

The base control can be a System.Windows.Controls.Button. The button has the following visual states:

<vsm:VisualStateManager.VisualStateGroups>
    <!--Define the states for the common states. The states in a 
                            VisualStateGroup are mutually exclusive to each other.-->
    <vsm:VisualStateGroup x:Name="CommonStates">
        <!--Define the VisualStates in this VistualStateGroup.-->
        <vsm:VisualState x:Name="Normal"/>
        <vsm:VisualState x:Name="MouseOver" />
        <vsm:VisualState x:Name="Pressed" />
        <vsm:VisualState x:Name="Disabled" />
    </vsm:VisualStateGroup>
    <!--Define the states for the focus states. The states in a 
                            VisualStateGroup are mutually exclusive to each other.-->
    <vsm:VisualStateGroup x:Name="FocusStates">
        <!--Define the VisualStates in this VistualStateGroup.-->
        <vsm:VisualState x:Name="Focused" />
        <vsm:VisualState x:Name="Unfocused" />
    </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

My custom control requires another state, MouseButtonUp (MouseButtonDown can be represented by the predefined Pressed state). Here, the MouseButtonUp state will be interpreted as a MouseOver state by default, but I want the MouseButtonUp state behaves differently from a MouseOver state.

How can I add this MouseButtonUp visual state? (MouseButtonUp states only exists after the user releases the mouse and before the user starts moving.

BTW: Should I use Custom Control or User Control? I've been very confused about these two. It seems both of them would work in lots of cases.

Thanks a lot.

UPDATE: Once we added this MouseButtonUp state, I could do the visual transitions like:

<vsm:VisualTransition From="Pressed" To="MouseButtonUp" GeneratedDuration="0:0:5" />

Or:

<vsm:VisualTransition From="MouseButtonUp" To="MouseOver" GeneratedDuration="0:0:5" />

score 2 · Answer 1 · answered Oct 14 '11 at 07:28

The below line creates a Visual-State for you in your xaml.

    <vsm:VisualState x:Name="MouseButtonUp">
        ...Your code for animation
    </vsm:VisualState>

That's not all. It is useless unless you force your execution control to go to this Visual-State. Well, how do you do that? Here's how.

    VisualStateManager.GoToState(this, "MouseButtonUp", true);

The above code will execute any animation that you might have defined in your 'MouseButtonUp' VisualState definition in your xaml. Call the above code statement wherever you feel your mouse had a MousebuttonUp state.

I followed your instructions. It seems the system detected the new state "MouseButtonUp", but I cannot animate this state, for example, ``, this transition is ignored. Please advice. — Peter Lee, Oct 15 '11 at 01:58

Silverlight: How to Create a VisualState for a Templated / Custom Control

1 Answers1