How to animate HubSection when visibility changed in WinRT Hub Control - xaml

Question

I have a HubSection that is dynamically shown/hidden using Visibility Collapsed/Visible during runtime. I would like to animate the HubSection by having it expand and shrink instead of just instantly showing or hiding it.
Animations in WinRT tend to be a science, and I haven't found a good method yet.
If someone could help with a code snippet I would appreciate it. I would prefer to keep it to XAML if possible, rather than putting the animation in a code-behind. Thanks!

Answer 1

Assuming that the visibiity of the hubsection is controlled by a boolean property of a viewmodel, bound through a converter then the solution is simpler than I thought. Even if this is not the case I'm sure you can modify the solution below easily.
You will need to reference the Behaviors SDK for this to work. You can do that either by going to References>Add Reference>Windows 8.1>Extensions>Behaviors SDK or by opening your project in blend and dragging a DataTriggerBehavior on yor hubsection.
Necessary xmlns declarations
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>
<Converters:BoolToVisConverter x:Key="BoolToVisConverter"/>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="hubSection">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Hub Header="Hub">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior/>
</Interactivity:Interaction.Behaviors>
<HubSection Header="HubSection 0">
<DataTemplate>
<Grid/>
</DataTemplate>
</HubSection>
<HubSection x:Name="hubSection" Header="HubSection 1" Visibility="{Binding MyProperty, Converter={StaticResource BoolToVisConverter}}" Width="400" Background="#FFB02626">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding MyProperty}" Value="True">
<Media:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<DataTemplate>
<Grid/>
</DataTemplate>
</HubSection>
</Hub>
<ToggleSwitch Header="ToggleSwitch" HorizontalAlignment="Left" Margin="824,249,0,0" VerticalAlignment="Top" IsOn="{Binding MyProperty, Mode=TwoWay}"/>
The xaml defines a hub with 2 hubsections a toggleswitch to manipulate the boolean property in the viewmodel and a storyboard to animate the second hubsection.
The trick is to use a DataTriggerBehavior instead of an EventTriggerBehavior.
You can even bind directly to the visibility property of the hubsection for the DataTriggerBevavior if you want.