Silverlight: How to Create a VisualState for a Templated / Custom Control
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" />
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.
精彩评论