Animation not playing with WPF VisualStateManager - wpf

Question

I want the items added to my ItemsControl to animate the height when they're added. The following sample, using triggers, did the job, but I couldn't get it to work with a non-fixed height for the items (50 in this case).
<ItemsControl ItemsSource="{Binding Notifications}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type Notifications1:Notification}">
<Button x:Name="ItemButton"
ClipToBounds="True"
Height="0">
<Button.Template>
<ControlTemplate>
<Notifications:NotificationTile />
</ControlTemplate>
</Button.Template>
</Button>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"
SourceName="ItemButton">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="ItemButton"
Duration="0:0:0.5"
To="50" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.Resources>
I then tried to use the VisualStateManager to perform the animations, so the tiles would grow to whatever height they required. In the example below, the items are added at the correct size, but no animation is performed. I assume the EventTrigger isn't even being fired?
Any ideas much appreciated!
<ItemsControl ItemsSource="{Binding Notifications}"
Width="230"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type Notifications1:Notification}">
<Button x:Name="ItemButton"
ClipToBounds="True"
Command="{Binding DataContext.ItemClicked, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
CommandParameter="{Binding}"
Visibility="{Binding IsVisible, Converter={StaticResource boolToVisibilityConverter}}">
<Button.Template>
<ControlTemplate>
<Notifications:NotificationTile />
</ControlTemplate>
</Button.Template>
<VisualStateManager.CustomVisualStateManager>
<is:ExtendedVisualStateManager />
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup is:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:2" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemButton"
Duration="0"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemButton">
<DiscreteDoubleKeyFrame KeyTime="0"
Value="NaN" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<i:Interaction.Triggers>
<i:EventTrigger SourceName="ItemButton"
EventName="(FrameworkElement.Loaded)">
<is:GoToStateAction StateName="Expanded" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</DataTemplate>
</ItemsControl.Resources>

Answer 1

Maybe this is a bit off-topic, sorry for that. I'm not sure I understood your question fully.
Anyway, it generally cannot be recommended to have an animation with only "To", as the "From" is originally set to a Double.NaN, and the DoubleAnimation doesn't work in this case.