2

I'm trying to make my Windows 10 app utilize responsive design by using visual state triggers to change the width of a grid. When the state changes, the width jumps to the next width.

Is there a way to smoothen this change with a transition or animation of some kind?

<VisualStateManager.VisualStateGroups>
     <VisualStateGroup>
         <VisualState x:Name="DesktopWideState">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="1280" />
             </VisualState.StateTriggers>

             <VisualState.Setters>
                 <Setter Target="ContentPanel.Width"
                    Value="1000" />
             </VisualState.Setters>
         </VisualState>

        <VisualState x:Name="DefaultState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
         </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
1
  • Would you be able to provide a demo project or some more code that we can play with?
    – Justin XL
    Feb 26, 2016 at 8:14

1 Answer 1

3

VisualState does contain the property Storyboard, so it's indeed possible to create storyboard-based animations based based on StateTriggers.

VisualState.Setters have been introduced to remove the noise that ObjectAnimationUsingKeyFrames within a Storyboard creates.

To add an animation to your example use the following:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState x:Name="DesktopWideState">
      <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="1280" />
      </VisualState.StateTriggers>
      <VisualState.Storyboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetName="ContentPanel" Storyboard.TargetProperty="Width" Duration="0:0:0.5" To="1000" EnableDependentAnimation="True" />
        </Storyboard>
      </VisualState.Storyboard>
    </VisualState>
</VisualStateManager.VisualStateGroups>

Do not use this example! Why?

Because by animating Width you affect layout. That's why the animation is disabled by default and does only work by setting EnabledDependentAnimation to true. You will see, that this animation will stutter a lot.

Try to avoid dependent animations and use storyboard in your AdaptiveTriggers only for independent animations like Transforms.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.