none
Expression Blend: Adding storyboard in transition - Visual State Manager

    Question

  • Hi,

    I have some questions:

    1. how can I add storyboard to transition in VSM in Expression Blend?

     

    <vsm:VisualTransition GeneratedDuration="00:00:01" To="MouseOver">
                                    <Storyboard>


                                    </Storyboard>
                                </vsm:VisualTransition>

    I may edit and add animation to visual state, but I don't no how do it with animation included in transition....

    2. when I edit object Style (Object -> Edit Style) template is automatically included in generated style. May I generate style without copying template?

    3. when I edit empty Template, Template is generated as Template in resource dictionary - but when I edit copy Template, Template is generated as Style (with Template ) in resource dictionary. Why are differences?

    Thursday, October 30, 2008 10:07 AM

Answers

  • VSMs include StoryBoards..so to add an animation transition inside VSM, you can simply call: VisualStateManger.GotoState(this, "MouseOver", true);

    The first parameter is the reference to the control (for example if we are calling this in code for the control we are in, we can use this).  The second parameter is a string name of your state and the third tells it to use the VSM transition (in your example above it is 1 second).

    You can create an empty style, by doing: Edit Control Parts -> Create Empty (this way you can copy and paste whatever you like from the styles or make your own).  This is good if you want to keep the VSM states (i.e. a button MouseOver, Normal, Pressed) and override the look of all of them

    I am not sure what your 3rd question is.  You can create resource as part of the application (global).  For example, all the buttons will have this look or just UserControl resources and just that control will have the look.

     

     

    Monday, November 03, 2008 1:24 AM
  • 1. In the states panel, on the right side of each state, you can find an arrow, and its Tooltip is Add Transition. So just click this arrow, select a transition you want, such as "Normal to MouseOver", and then you can open the Storyboard to design it. For more information, please watch this video.

    2. Simply choose "Edit Style" => "Create Empty".

    3. Maybe I don't understand you very well. But the difference between Style and Template is: Style is used to modify properties of a Control, such as Background. The overall look of the Control remains the same. You can think it is something similar to CSS. ControlTemplate is used to completely override the look of a Control. For example, you can create a ControlTemplate for a Button which looks like a dog, whose eyes display some videos. That is, the Button no longer looks like a standard Button, but actually it's still a Button. You can click it.

    Monday, November 03, 2008 4:02 AM

All replies

  • VSMs include StoryBoards..so to add an animation transition inside VSM, you can simply call: VisualStateManger.GotoState(this, "MouseOver", true);

    The first parameter is the reference to the control (for example if we are calling this in code for the control we are in, we can use this).  The second parameter is a string name of your state and the third tells it to use the VSM transition (in your example above it is 1 second).

    You can create an empty style, by doing: Edit Control Parts -> Create Empty (this way you can copy and paste whatever you like from the styles or make your own).  This is good if you want to keep the VSM states (i.e. a button MouseOver, Normal, Pressed) and override the look of all of them

    I am not sure what your 3rd question is.  You can create resource as part of the application (global).  For example, all the buttons will have this look or just UserControl resources and just that control will have the look.

     

     

    Monday, November 03, 2008 1:24 AM
  • 1. In the states panel, on the right side of each state, you can find an arrow, and its Tooltip is Add Transition. So just click this arrow, select a transition you want, such as "Normal to MouseOver", and then you can open the Storyboard to design it. For more information, please watch this video.

    2. Simply choose "Edit Style" => "Create Empty".

    3. Maybe I don't understand you very well. But the difference between Style and Template is: Style is used to modify properties of a Control, such as Background. The overall look of the Control remains the same. You can think it is something similar to CSS. ControlTemplate is used to completely override the look of a Control. For example, you can create a ControlTemplate for a Button which looks like a dog, whose eyes display some videos. That is, the Button no longer looks like a standard Button, but actually it's still a Button. You can click it.

    Monday, November 03, 2008 4:02 AM
  • So just click this arrow, select a transition you want, such as "Normal to MouseOver", and then you can open the Storyboard to design it.
     

    Can you please elaborate on this a bit? When I add a transition in Blend, it generates a VisualTransition with a GeneratedDuration, but no Storyboard. How do I get Blend to generate a Storyboard inside the VisualTransition and how do I then edit the Storyboard in Blend? Thank you!

    Tuesday, March 10, 2009 11:11 AM