locked
Learning / Startkit / BeeHive animation VSM question RRS feed

  • Question

  • Hi,

    I'm currently following the Beehive video's from the Learning section. (http://expression.microsoft.com/en-us/ee426922.aspx )

    In de 7th video he's creating an state to switch from the Base state, to an "IsCollided" state. In the video the transition is animated, however whenever i switch from the Base state to the IsCollided state i do not see any animation, its instant. If i add an additional state ("normal") and switch in blend from the normal state to the IsCollided state i do see an animation.

    How did he get his animation to work in the video? and how can i get this to work?

     

    The code of the usercontrol:

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    	x:Class="Gaming.HexShapeControl"
    	d:DesignWidth="44" d:DesignHeight="41">
    
    	<Grid x:Name="LayoutRoot">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="IsCollidedStateGroup" ic:ExtendedVisualStateManager.UseFluidLayout="True">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="00:00:01"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="IsCollided">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
    							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<VisualStateManager.CustomVisualStateManager>
    			<ic:ExtendedVisualStateManager/>
    		</VisualStateManager.CustomVisualStateManager>
    		<Canvas x:Name="honeycomb">
    			<Canvas x:Name="HexShape" Height="41.363" Width="44.168">
    				<Path Fill="#FF512918" Stretch="Fill" Height="41.363" Width="44.168" Canvas.Left="0" Canvas.Top="0" Data="F1M15.0684,41C11.6104,41,9.1844,38.851,8.1564,37.009L0.993400000000001,24.167C-0.589599999999999,21.33,-0.0445999999999991,18.332,0.993400000000001,16.47L8.1564,3.628C9.7994,0.683,12.9074,-0.363,15.0684,-0.363L29.1004,-0.363C32.5574,-0.363,34.9854,1.788,36.0124,3.628L43.1744,16.47C44.7584,19.308,44.2134,22.306,43.1744,24.167L36.0124,37.009C34.3674,39.954,31.2604,41,29.1004,41z"/>
    				<Path Fill="#FFCB5F2B" Stretch="Fill" Height="35.772" Width="38.564" Canvas.Left="2.802" Canvas.Top="2.795" Data="F1M15.0684,38.2041C12.8224,38.2041,11.2554,36.8261,10.5964,35.6451L3.4334,22.8061C2.4104,20.9691,2.7944,18.9791,3.4334,17.8321L10.5964,4.9911C11.6514,3.1021,13.6644,2.4321,15.0684,2.4321L29.1004,2.4321C31.3464,2.4321,32.9124,3.8101,33.5704,4.9911L40.7354,17.8321C41.7584,19.6681,41.3734,21.6581,40.7354,22.8061L33.5704,35.6451C32.5164,37.5361,30.5044,38.2041,29.1004,38.2041z"/>
    				<Path Stretch="Fill" Height="30.185" Width="32.977" Canvas.Left="5.595" Canvas.Top="5.589" Data="F1M15.069,5.226C15.069,5.226,13.665,5.226,13.037,6.352L13.037,6.352L5.874,19.194C5.874,19.194,5.247,20.319,5.874,21.443L5.874,21.443L13.037,34.286C13.037,34.286,13.665,35.411,15.069,35.411L15.069,35.411L29.1,35.411C29.1,35.411,30.503,35.411,31.131,34.286L31.131,34.286L38.293,21.443C38.293,21.443,38.922,20.319,38.293,19.194L38.293,19.194L31.131,6.352C31.131,6.352,30.503,5.226,29.1,5.226L29.1,5.226z">
    					<Path.Fill>
    						<LinearGradientBrush EndPoint="0.696,1.099" StartPoint="0.388,0.157">
    							<GradientStop Color="#FFC85E2B" Offset="0"/>
    							<GradientStop Color="#FFC85E2B" Offset="0.40562400221824646"/>
    							<GradientStop Color="#FFF9A11A" Offset="1"/>
    						</LinearGradientBrush>
    					</Path.Fill>
    				</Path>
    				<Path Fill="#FFFFCF85" Stretch="Fill" Height="21.785" Width="28.973" Canvas.Left="5.595" Canvas.Top="5.589" Data="F1M7.7715,23.2666C7.3375,22.4216,7.1575,21.3906,7.3875,20.4476C8.3815,16.3966,14.3075,19.5216,16.0425,20.5176C17.8665,21.5646,20.2335,22.5616,22.1885,21.1516C24.2465,19.6676,29.8915,14.7626,30.9885,12.6336C32.1115,10.4586,33.2305,12.0416,34.5685,12.5166L31.1315,6.3516C31.1315,6.3516,30.5025,5.2256,29.1005,5.2256L15.0685,5.2256C15.0685,5.2256,13.6655,5.2256,13.0375,6.3516L5.8745,19.1936C5.8745,19.1936,5.2465,20.3186,5.8745,21.4436L8.9795,27.0106C8.9795,26.5646,8.1875,24.0796,7.7715,23.2666"/>
    				<Path Fill="#FFFFE1B5" Stretch="Fill" Height="9.998" Width="21.165" Canvas.Left="8.089" Canvas.Top="5.589" Data="F1M18.4551,8.2202C23.4651,6.1602,27.8251,5.7602,29.2541,5.2322C22.9571,5.2322,14.9381,5.2262,14.9381,5.2262C14.9381,5.2262,13.4041,5.2262,12.7191,6.9992L8.0891,15.2242C9.1881,14.2102,14.1471,9.9902,18.4551,8.2202"/>
    			</Canvas>
    		</Canvas>
    	</Grid>
    </UserControl>

     

     

    • Edited by T.H Boonstra Thursday, April 1, 2010 6:48 PM typo in subject
    Thursday, April 1, 2010 6:47 PM

Answers

  • The reason the block disappears instantly is that in code, you are setting the visibility to collapsed, which takes effect instantly.
    			case CollisionProperties.GoToState:
    VisualStateManager.GoToState(this.AssociatedObject as Control, "IsCollided", true);
    //newTag.CollisionType = "Hidden";
    Control me = this.AssociatedObject as Control;
    me.Visibility = Visibility.Collapsed;
    newTag.IsChangeMotion = false;
    newTag.IsCollision = false;
    newTag.Normal = tag.Normal;
    break;

    If you look carefully in his video, he didn't have the visibility collapsed code included yet at that point, even though it is in the assets.  So if you comment out the line that sets the visibility, the transition will work as you expect, but the collision detection won't, because it relies on the collapsed to determine if it should collide.  To make it work they way you want, you would have to introduce some new piece of data that says whether something should be collidable. I didn't look too deeply into that, it is left as an exercise for the reader :)

     

    The final assets, as well as the beehive sample that came with Blend 3, both have the instant transition from visible to collapsed, so this problem is not your fault, it is just a problem with the video/assets provided.

    • Marked as answer by T.H Boonstra Monday, April 5, 2010 7:44 PM
    Monday, April 5, 2010 2:21 PM
    Moderator

All replies

  • I'm not sure why this wouldn't work, as your xaml appears to be correct.  Are you talking about while inside Blend or the actual SL app?  Inside Blend there won't be any transitions, but it should work correctly inside the SL app.
    Thursday, April 1, 2010 9:15 PM
    Moderator
  • Its not working in Blend (3) or SL. But adding an extra state and switching in blend between those 2 states it does show, but not when switching between the base state and the iscollided state.

    I also took the solution file from lesson 8, which pretty much has the same xaml file, and it doesn't work in that one either.

    Could i be using a wrong *.interactions.dll/*.interactivity.dll  reference?

     

    Friday, April 2, 2010 7:13 AM
  • I don't think that would be the problem, because VSM is part of silverlight, and the behaviors (from interactions/interactivity) are just used to trigger the state change, so if the state change is happening at all, it should be ok.

     

    Now that I think about it, can you post the xaml of the behavior you are using the trigger that state change (or code)?

    Friday, April 2, 2010 12:20 PM
    Moderator
  • Thanks for the help so far,

    i've uploaded there solution here maybe you can see what i'm doing wrong..

     

    Saturday, April 3, 2010 3:03 PM
  • The reason the block disappears instantly is that in code, you are setting the visibility to collapsed, which takes effect instantly.
    			case CollisionProperties.GoToState:
    VisualStateManager.GoToState(this.AssociatedObject as Control, "IsCollided", true);
    //newTag.CollisionType = "Hidden";
    Control me = this.AssociatedObject as Control;
    me.Visibility = Visibility.Collapsed;
    newTag.IsChangeMotion = false;
    newTag.IsCollision = false;
    newTag.Normal = tag.Normal;
    break;

    If you look carefully in his video, he didn't have the visibility collapsed code included yet at that point, even though it is in the assets.  So if you comment out the line that sets the visibility, the transition will work as you expect, but the collision detection won't, because it relies on the collapsed to determine if it should collide.  To make it work they way you want, you would have to introduce some new piece of data that says whether something should be collidable. I didn't look too deeply into that, it is left as an exercise for the reader :)

     

    The final assets, as well as the beehive sample that came with Blend 3, both have the instant transition from visible to collapsed, so this problem is not your fault, it is just a problem with the video/assets provided.

    • Marked as answer by T.H Boonstra Monday, April 5, 2010 7:44 PM
    Monday, April 5, 2010 2:21 PM
    Moderator