locked
Can't get a simple VisualStateManager to work with Silverlight 3 and Expression Blend RRS feed

  • Question

  • Hi all,

    For more than a few days I'm trying to figure out how to make the VisualStateManager work on a simple button.
    I tried following tutorials but for some reason it still didn't work.

    Here's an example for a code I created following a tutorial on creating a visualstatemanager in Expression Blend

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="VisualStateManager.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="00:00:03"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="MouseOver">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="152"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="5"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    	
    		<Button x:Name="button" Height="101" Margin="174,112,204,0" VerticalAlignment="Top" Content="Button" RenderTransformOrigin="0.5,0.5">
    			<Button.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Button.RenderTransform>
    		</Button>
    	
    	</Grid>
    </UserControl>
    This is supposed to move the button on MouseOver, but it just doesn't work!

    Can anyone please help me with this? What am I doing wrong?

    Thanks!

    Dror
    Wednesday, February 10, 2010 7:21 PM

All replies

  • What you have done is created a visual state on the grid, and named it "MouseOver".  Unfortunately that doesn't actually activate the state when you mouse over the layout root.

    If you want a state to happen when you mouse over the button, try this:
    1. Create your button
    2. Right click it, and select "edit template -> edit a copy"
    3. The default values should be fine
    4. You should now see all of the button's states in the states window. The states you see are defined on the control itself.

    If you want something not specific to a control, you can do it the way you did above, but you need additional steps to activate the state.
    1. In the assets panel, select the behaviors category
    2. Drag a GoToStateAction onto the object you want to trigger the visual state (for example, LayoutRoot, or your button)
    3. Assuming you put it on LayoutRoot, select the behavior in the objects and timeline panel, and view its properties
    4. Set the EventName dropdown to MouseEnter
    5. Set the StateName dropdown to be "MouseOver"
    6. If you want to go back to the original state as well, add another GoToStateAction behavior with the trigger set to MouseLeave, and the StateName set to a state you have created, something like "Normal" state.  You can't go back to the base state.

    Hope that helps!
    Thursday, February 11, 2010 3:27 PM
    Moderator
  • Here is an example that uses a red rectangle as the mouseover target:

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="VisualStateManager.MainPage"
    	Width="640" Height="480">
    
    		<Grid x:Name="LayoutRoot" Background="White">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="00:00:03"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="MouseOver">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="152"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="5"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="Normal"/>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    	
    		<Button x:Name="button" Height="101" Margin="174,112,204,0" VerticalAlignment="Top" Content="Button" RenderTransformOrigin="0.5,0.5">
    			<Button.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Button.RenderTransform>
    		</Button>
    	
    			<Rectangle Fill="Red" Stroke="Black" Height="86" HorizontalAlignment="Left" Margin="26,24,0,0" VerticalAlignment="Top" Width="116">
    				<i:Interaction.Triggers>
    					<i:EventTrigger EventName="MouseLeave">
    						<ic:GoToStateAction StateName="Normal"/>
    					</i:EventTrigger>
    					<i:EventTrigger EventName="MouseEnter">
    						<ic:GoToStateAction StateName="MouseOver"/>
    					</i:EventTrigger>
    				</i:Interaction.Triggers>
    			</Rectangle>
    	
    	</Grid>
    </UserControl>
    Thursday, February 11, 2010 3:31 PM
    Moderator
  • What helped me here is the create a button part. I fortgot that you can select any container or set of controls and make it into a control. So what I did if it might help someone else is in Blend select the container which in this case is a Border and right click Make into Control, selected the Button type and as Chuck said all your states are then there for you to use. Can't be easier. Thanks for the tip Chuck.
    Wednesday, November 10, 2010 8:39 PM