locked
Blend 4 VSM state transitions always pass through the 'base' state RRS feed

  • Question

  • Using Blend4, and working inside of a WPF control template, I created a VSM state group.  I'm managing the transition between states using the GoToStateAction behavior.  I noticed, however, that all of my VSM transitions return to the base state before 'snapping' to the destination state.  For example, if a specify a 1sec transition from 'A' to 'B', over the course of the 1sec transition 'A' actually transitions back to the base state, and then in the last few milliseconds it snaps to state 'B'.  Is this a bug, or do I need to flip a bit somewhere to tell WPF/VSM not to return to 'base' between specified transitions?

    Friday, May 21, 2010 10:29 PM

All replies

  • What properties in particular are going back to the base?
    Friday, May 21, 2010 10:57 PM
  • @Kelly - The 'Fill' property of a 'Rectangle' object.  Here's a copy of the button style I created that manifests the problem.  I have the state transition set slow enough (2 sec) so you can track what's going on:

     

    <ResourceDictionary
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions">
    	<Style x:Key="ButtonFocusVisual">
    		<Setter Property="Control.Template">
    			<Setter.Value>
    				<ControlTemplate>
    					<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	<!-- Resource dictionary entries should be defined here. -->
    	<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
    		<GradientStop Color="#F3F3F3" Offset="0"/>
    		<GradientStop Color="#EBEBEB" Offset="0.5"/>
    		<GradientStop Color="#DDDDDD" Offset="0.5"/>
    		<GradientStop Color="#CDCDCD" Offset="1"/>
    	</LinearGradientBrush>
    	<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    	<Style x:Key="MyButtonStyle1" TargetType="{x:Type Button}">
    		<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    		<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    		<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
    		<Setter Property="BorderThickness" Value="1"/>
    		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    		<Setter Property="HorizontalContentAlignment" Value="Center"/>
    		<Setter Property="VerticalContentAlignment" Value="Center"/>
    		<Setter Property="Padding" Value="1"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="{x:Type Button}">
    					<Rectangle x:Name="rectangle" Fill="#FFB5DAFB" Stroke="{x:Null}" RadiusX="4" RadiusY="4">
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="MyBtnStateGroup">
    								<VisualStateGroup.Transitions>
    									<VisualTransition GeneratedDuration="0:0:2"/>
    								</VisualStateGroup.Transitions>
    								<VisualState x:Name="Normal">
    									<Storyboard>
    										<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
    											<SplineColorKeyFrame KeyTime="0" Value="#FFB5DAFB"/>
    										</ColorAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Highlighted">
    									<Storyboard>
    										<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
    											<SplineColorKeyFrame KeyTime="0" Value="#FFF399D3"/>
    										</ColorAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    										<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
    											<SplineColorKeyFrame KeyTime="0" Value="#FFEF34AC"/>
    										</ColorAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<i:Interaction.Triggers>
    							<i:EventTrigger EventName="MouseEnter">
    								<ic:GoToStateAction x:Name="MyMouseEnter" StateName="Highlighted"/>
    							</i:EventTrigger>
    						</i:Interaction.Triggers>
    					</Rectangle>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    </ResourceDictionary>
    Monday, May 24, 2010 5:27 PM