I'm trying to implement a FlipView control in a Win10 UWP app, but I don't seem to be able to animate the transition between the open and closed states like in the Windows 10 calendar app. If I look at the default style of the SplitView, it seems that the panel size is altered by animating the Width property of a ColumnDefinition. This property can not be animated using the default animations provided by the framework. Any help would be appreciated.
In the DefaultStyle, look for the ClosedCompactLeft visual state. Then modify the Duration for the animation on PaneClipRectangleTransform. Look for this animation (which is the one you will modify):
<DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform"
Storyboard.TargetProperty="TranslateX"
To="{Binding TemplateSettings.NegativeOpenPaneLengthMinusCompactLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Duration="0:0:0.0" />
You can define a Storyboard inside a VisualState. If the trigger is fired, the story will begin automatically.
Example structure of code:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-260">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1020" />
</VisualState.StateTriggers>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
<EasingDoubleKeyFrame KeyTime="0" Value="-260"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
If you are using SplitView, you can code a class that extends SplitView and custom it's Style , which makes you get the Pane and the Content in your code and thus you can animate them on your own.
Related
I'm currently working on a custom control for my application that expands and collapses content with a header which you can click to change states. The template for it looks like this at the moment.
<Style TargetType="controls:ExpandControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ExpandControl">
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="State">
<VisualState x:Name="Visible">
<VisualState.Setters>
<Setter Target="Grid.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Collapsed">
<VisualState.Setters>
<Setter Target="Grid.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" />
<Grid x:Name="Grid" Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see from the template, I'm currently using visual states to set the visibility of the content in this control but it's not a great user experience as the content just disappears.
I'd like to be able to manipulate the content somehow that would allow the content to look like it's collapsing and expanding from the header when the Visibility of the control changes.
I've taken a look at animations using Storyboards but I'm completely new to that and if anyone could provide some help on Storyboards and how I can make the scenario work for my control, it would be very much appreciated!
Thanks in advance!
Storyboarding isn't a brilliant experience in Visual Studio and attempting to write them manually may not be the best idea.
I'd recommend opening your project in Blend which comes as part of your Visual Studio installation. It's a great tool for designing your applications, and in particular, adding Storyboards in a very easy manner and it will automatically generate the Storyboard XAML for you while you get to see the changes in the designer.
As for your animation scenario, I've played around with your XAML template in a page and have come up with something that makes it look like it's collapsing and expanding but it does it without manipulating the Visibility property like this:
<VisualStateGroup x:Name="State">
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.1">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
You'll also want to change your content Grid to look like this:
<Grid x:Name="Grid" Grid.Row="1" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" />
</Grid>
I'll explain why you'll have to make the changes to the Grid and what the Storyboards do next.
In order to achieve something similar to what you're looking for, I've chosen the Opacity and Y scale on your Grid to animate.
Because we will be manipulating the Y scale of the control, we added the RenderTransform to the Grid. The reason for using the CompositeTransform is so that you can manipulate most common transforms (scale, rotation, translation etc.).
In the states, we use key frames to manipulate the values across time. This is how you achieve the animation in Storyboards. If you only set one KeyFrame with time of 0, it will appear as an immediate change similar to using the VisualState.Setters mechanism of changing properties.
In the Collapsed state, we are changing the opacity and Y scaling of the Grid from 1 to 0. This gives the animation that shows the content collapsing up into the header. As you can see from the key frames, we're staggering the animations of the two properties so the content fades out before it's finished manipulating the scale.
In the Visible state, we are essentially reversing the Collapsed state by changing the opacity and Y scaling from 0 to 1 over the same amount of time.
Try loading these into your control and having a play with them in Blend. It's a great starting point as I threw this together very quickly.
You can find some more information on Storyboarding using Blend here: https://blogs.msdn.microsoft.com/avtarsohi/2016/02/16/understand-storyboard-concept-in-xaml-using-blend-2015/
I am trying to Collapse/Expand Grid with animation and while it's animating move all other components accordingly.
So far I used
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="GridName">
<DiscreteObjectKeyFrame KeyTime="0:0:0.59" Value="0,0,0,0" />
(...more frames)
</ObjectAnimationUsingKeyFrames >
But the effect is far from acceptable (animation not smooth). I was wandering if the new controls has such options? I also came across some Expanding/Collapsing ListViews - but they did not work with which contains data.
Edit: I tried animating the heights property - but nothing happen (no error and no visible result). Below my code:
<Storyboard x:Name="MainImageSlideOut">
<DoubleAnimation Duration="0:0:1" To="0"
Storyboard.TargetProperty="Height"
Storyboard.TargetName="Grid"
EnableDependentAnimation="True"/>
</Storyboard>
<Storyboard x:Name="MainImageSlideIn">
<DoubleAnimation Duration="0:0:1" To="250"
Storyboard.TargetProperty="Height"
Storyboard.TargetName="Grid"
EnableDependentAnimation="True"/>
</Storyboard>
....
<Grid Background="#171717">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="1"
Height="250"
x:Name="Grid"
Background="#202020" />
<ScrollViewer Grid.Row="2">
...
</ScrollViewer>
</Grid>
I have a similar functionality in my application.
the way I use it is by using ScaleTransform here is an example:
<Storyboard x:Key="gridLoading">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="IAmGroot">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="IAmGroot">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
This will load the grid from the middle of the screen and expand it to fit the screen.
If you want to perform an animation on all of the elements then this animation will do the trick, however if you need different behavior you will probably have to handle animation for the items inside of your Grid separately.
HTH
I have a problem with Closed VisualState for ComboBox. Animations in Closed state are being played only for the first time.
ComboBox opened for the first time [all animations OK]
ComboBox opened for the second time [no Closed animations]
Here's XAML I'm using:
<VisualStateGroup x:Name="DropDownStates">
<VisualState x:Name="Opened">
<Storyboard>
<SplitOpenThemeAnimation ClosedTargetName="ContentPresenter"
OpenedTargetName="PopupBorder"
ClosedLength="0"
OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<ColorAnimation To="Transparent"
Duration="0:0:0.1"
Storyboard.TargetProperty="(UIElement.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="Background"/>
<DoubleAnimation Storyboard.TargetName="DropDownGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<SplitCloseThemeAnimation ClosedTargetName="ContentPresenter"
OpenedTargetName="PopupBorder"
ClosedLength="0"
OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<ColorAnimation To="#66D3D3D3"
Duration="0:0:0.1"
Storyboard.TargetProperty="(UIElement.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="Background" />
<DoubleAnimation Storyboard.TargetName="DropDownGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
Could you give me some advise, what I'm doing wrong? Thanks!
The workaround I used for this was to remove the VisualState for "Closed" from my Style. Once I had done this the ComboBox worked as expected.
I am having this css rule
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content
{
transform: scale(0.7);
opacity: 0;
transition: all 0.3s;
}
Taken from the demo Nifty Modal Window Effects
I would like to have the same effect when I show a modal dialog in my wf app. The dialog is not a window but a UIElement with a high z-order.
It should start with opacity set to zero and scaled down to 70% since I don't know the size of the dialog.
this is the code that sets the start state for the grid, and the storyboard for the animation.
Grid x:Name="MyGrid" Opacity="0">
<Grid.RenderTransform>
<ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
RenderTransformOrigin="0.5,0.5"
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard Storyboard="{StaticResource ModalDialogStoryboard}"/>
</EventTrigger>
</Grid.Triggers>
</Grid>
The code for the storyboard
<Storyboard x:Key="ModalDialogStoryboard" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation
From="0"
To="1"
Duration="0:0:02"
Storyboard.TargetName="MyGrid"
Storyboard.TargetProperty="Opacity"
/>
<SizeAnimation To=""></SizeAnimation>
</Storyboard>
The Opacity works but I can't find a way to scale the grid back to 100%.
Why is css so powerfull compared to xaml? I wish the good fairy would sprinkle some magic dust on XAML
OK this is working and looks exactly like the css rule. The content of the dialog is removed to keep it short.
Now I just need to find a way to put it in a style so I can apply it to any UI Element.
UserControl x:Class="AnimationTest.Dialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
RenderTransformOrigin="0.5,0.5"
Opacity="0"
x:Name="ModalDialogControl"
Width="600" Height="400">
<UserControl.Resources>
<Storyboard x:Key="ModalDialogStoryboard">
<DoubleAnimation
From="0"
To="1"
Duration="0:0:0.3"
Storyboard.TargetName="ModalDialogControl"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation
Storyboard.TargetName="ModalDialogControlScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
To="1" Duration="0:0:0.3" />
<DoubleAnimation
Storyboard.TargetName="ModalDialogControlScaleTransform"
Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
To="1" Duration="0:0:0.3" />
</Storyboard>
</UserControl.Resources>
<UserControl.RenderTransform>
<ScaleTransform ScaleX="0.7" ScaleY="0.7" x:Name="ModalDialogControlScaleTransform" />
</UserControl.RenderTransform>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UserControl.Loaded">
<BeginStoryboard Storyboard="{StaticResource ModalDialogStoryboard}" />
</EventTrigger>
</UserControl.Triggers>
With a little help from my friends
<UserControl.Resources>
<Style x:Key="FadeInAndScaleUpStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="Opacity" Value="0"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.7" ScaleY="0.7" />
</Setter.Value>
</Setter>
<Style.Triggers >
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetProperty="RenderTransform.ScaleX"/>
<DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetProperty="RenderTransform.ScaleY"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
It isn't that complicated at all:
<Storyboard x:Key="ModalDialogStoryboard" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation To="1" Duration="0:0:0.3"
Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To="1" Duration="0:0:0.3"
Storyboard.TargetProperty="RenderTransform.ScaleX"/>
<DoubleAnimation To="1" Duration="0:0:0.3"
Storyboard.TargetProperty="RenderTransform.ScaleY"/>
</Storyboard>
Note that you usually don't have to specify any From values. Moreover, you don't need to explicitly specify the Storyboard.Target or Storyboard.TargetName when you call BeginStoryboard on a specific element, as you do in the EventTrigger.
Which animation What you want in this site (http://tympanus.net/Development/ModalWindowEffects/) Sorry I dont know very well English.I couldn't understand exactly what you say
I did this animation for you.I hope benefits to your business.
Here is code:
<Storyboard x:Key="ScaleAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="13.6">
<EasingDoubleKeyFrame.EasingFunction>
<QuarticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="13.6">
<EasingDoubleKeyFrame.EasingFunction>
<QuarticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource ScaleAnimation}"/>
</EventTrigger>
</Window.Triggers>
Here is Grid object;
<Grid x:Name="grid" Background="#FFFF6363" Margin="298,216.5" RenderTransformOrigin="0.5,0.5" Opacity="0">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="textBlock" VerticalAlignment="Center" HorizontalAlignment="Center" Text="CONTENT" FontSize="2" Opacity="0"/>
</Grid>
So...
I've got a listview containing several flag images 20 px apart(as spec'ed) . When the user selects a flag, the flag needs to 'get bigger by 2x' to show that it is selected . So I tried the following:
I edited the SelectedUnfocused state on the listview.
At first, I just created a scaletransform to zoom the flag. but the problem is that the zoom factor makes the flag overlap its neighbour. So I animated the width of the container to grow by a few pixels so that it can accomodate the size change, however this results in a jagger on quick selection changes.So I thought it is caused by the stackpanel inside the listview not being able to re-measure and layout the containers fast enough. I created a sizechanged event to invalidate and re-layout but no success. Any ideas on what I could try to force the itemspanel to continually re-measure during an animation?
A video of the behaviour
here
Note thata the size of the image grows and overlaps a neighbour. only after the animation finishes do they re-layout
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="OuterContainer">
<EasingDoubleKeyFrame KeyTime="0" Value="108"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="150"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="OuterContainer">
<EasingDoubleKeyFrame KeyTime="0" Value="100"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
(I know that it is not traditional metro design and such but I'm following a spec)