none
how to set animation for mouseEnter event in Expression Blend

    Question

  • In Assets->Behaviors I've chosen GoToStateAction. On the right panel(Properties->Triggers) I've set event name - Mouse Enter.

    How to set animation for this event?

    Friday, May 11, 2012 8:01 AM

Answers

  • Hi ,

      Have you first created states for your element ?  You need to define your states with animations , and all the GoToState does is transition to that state when the trigger event occurs. 

     So select your target object  using the artboard element picker , and define some states for it.   If you choose a button or something for which already states are defined, you can observe how the whole thing works.    You will get a list of states in the StateName combobox  , and you can define which state you want to go to.  Your animations can be kept in the transitions . So  tick the UseTransitions checkbox

    Hope it Helps Laughing

     

    Friday, May 11, 2012 1:47 PM
  • Hi,

     If you are using Expression Blend , then there is a States pane  which can be made available by going to Window -> States.

     You can define State groups and States.  Each State reperesents how your element appears when some action occurs.  There are also transitions, which help in going from one state to another state smoothly.   It is a fairly easy concept if you use Expression Blend, otherwise you need to create states in XAML  , using the concept of Visual State Manager.

    Hope it Helps Laughing

     

    Saturday, May 12, 2012 12:01 PM

All replies

  • Hi ,

      Have you first created states for your element ?  You need to define your states with animations , and all the GoToState does is transition to that state when the trigger event occurs. 

     So select your target object  using the artboard element picker , and define some states for it.   If you choose a button or something for which already states are defined, you can observe how the whole thing works.    You will get a list of states in the StateName combobox  , and you can define which state you want to go to.  Your animations can be kept in the transitions . So  tick the UseTransitions checkbox

    Hope it Helps Laughing

     

    Friday, May 11, 2012 1:47 PM
  • Hi ,

      Have you first created states for your element ?  You need to define your states with animations , and all the GoToState does is transition to that state when the trigger event occurs.  

    States...Where to define them?

    Saturday, May 12, 2012 8:46 AM
  • Hi,

     If you are using Expression Blend , then there is a States pane  which can be made available by going to Window -> States.

     You can define State groups and States.  Each State reperesents how your element appears when some action occurs.  There are also transitions, which help in going from one state to another state smoothly.   It is a fairly easy concept if you use Expression Blend, otherwise you need to create states in XAML  , using the concept of Visual State Manager.

    Hope it Helps Laughing

     

    Saturday, May 12, 2012 12:01 PM
  • Hi

    first i created one rectangle for simple example

    <Grid x:Name="LayoutRoot" Background="White">
    <Rectangle x:Name="rectangle" Fill="#FF1E1E25" HorizontalAlignment="Left" Height="60"
    Margin="167,131,0,0" Stroke="Black" VerticalAlignment="Top" Width="147"
    MouseEnter="rectangle_MouseEnter" Cursor="Hand"/>
    </Grid>
    then i created one storyboard
    <UserControl.Resources>
    <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
    <ColorAnimationUsingKeyFrames
    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">

    <EasingColorKeyFrame KeyTime="0" Value="#FFF4F4F5"/>
    <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF9090F7"/>
    <EasingColorKeyFrame KeyTime="0:0:0.6" Value="#FF90F796"/>
    <EasingColorKeyFrame KeyTime="0:0:1" Value="#FFF7B690"/>
    </ColorAnimationUsingKeyFrames>
    </Storyboard>
    </UserControl.Resources>
    In mouse enter event of that rectangle i begin that animation
    private void rectangle_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
    Storyboard1.Begin();

    }
    I hope this is what you asking...

    Hope this helps you..
    Saturday, May 12, 2012 12:31 PM
  • Solved the problem

    Saturday, May 12, 2012 1:23 PM