Is Databinding or TemplateBinding supported in VisualStateManager?

Question

I am trying to defer animation of a custom control based on a binding value. In the example below, Id, like an animation, starts 5 seconds after selecting the visual state "SelectedAndHit". However, it is not possible to use template binding in VisualStateManage.

Is TemplateBinding supported in VisualStateManager? Is there a workaround?

<local:ButtonEx x:Name="Button01" AnimationBeginTime="00:00:05" /> public TimeSpan AnimationBeginTime { get { return (TimeSpan)base.GetValue(ButtonEx.AnimationBeginTimeProperty); } set { base.SetValue(ButtonEx.AnimationBeginTimeProperty, value); } } public static readonly DependencyProperty AnimationBeginTimeProperty = DependencyProperty.Register("AnimationBeginTime", typeof(TimeSpan), typeof(ButtonEx), new PropertyMetadata(TimeSpan.Zero)); <Style TargetType="local:ButtonEx"> <!-- ... --> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:ButtonEx"> <Grid x:Name="Container" RenderTransformOrigin="0.5, 0.5"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="SelectedAndHit"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundColorSelectedAndHit}" /> </ObjectAnimationUsingKeyFrames> <Storyboard> <DoubleAnimation Storyboard.TargetName="GridScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.2" BeginTime="{TemplateBinding AnimationBeginTime}" Duration="00:00:00.300" AutoReverse="True"> <DoubleAnimation.EasingFunction> <ExponentialEase EasingMode="EaseIn" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="GridScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.2" BeginTime="{TemplateBinding AnimationBeginTime}" Duration="00:00:00.300" AutoReverse="True"> <DoubleAnimation.EasingFunction> <ExponentialEase EasingMode="EaseIn" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.RenderTransform> <ScaleTransform x:Name="GridScaleTransform" /> </Grid.RenderTransform> <!-- ... --> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Answer 1

I confirm that WinRT does not support Binding / TemplateBinding in style. To get around the problem, I wrote code to manually update the BeginTime storyboard. That way, I was in full control when the storyboard begins.

Answer 2

I would look at Interactivity . I personally used EventTrigger with GoToStateAction , which was enough for my purposes. From a glance at MSDN, it looks like you can use TimerTrigger and GoToStateAction to create the effect you are looking for. TimerTrigger has dependency properties for setting a delay.