Which layout elements should I use to implement a submenu with an animation transition

Question

I'am very new to this WinRT and XAML stuff and not sure how to achieve this goal. For my page layout I have basically 2 rows. The first row is representing my (static) basic menu with some buttons and pictures (about 130 height). The rest of the screen should be used to display content. Like this:

screen layout

now when a user clicks on a main menu button the submenu "filter settings" should be move down with an animation. The main content is also responding to this event and moving accordingly ("filter settings" should not overlay the main content).

My current idea to define this layout is using a grid with 3 rows and 2 frames placed inside it. When no filter is activated, I use rowspan for my main content to span over the whole area. When a click event is recognized, I change the rownum of the frame which hold the main content (ModuleContentFrame) to 2 and its rowspan to 1. Then I'am loading the filter page to frame ModuleFadeInFrame.

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="130"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="2*"/>
</Grid.RowDefinitions>

<Frame
    x:Name="ModuleFadeInFrame"
    Grid.Row="1"/>

<Frame
    x:Name="ModuleContentFrame"
    Grid.Row="1"
    Grid.RowSpan="2"/>

</Grid>

My question is: is this layout definition with a grid and frames inside it a suitable solution to solve this problem and how can I achieve a "moving" animation when displaying a sub-menu. I tried this with an Storyboard but there the main content is just "jumping" to row 2

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ModuleContentFrame"
                               Storyboard.TargetProperty="(Grid.Row)">
                <DiscreteObjectKeyFrame KeyTime="1" Value="2" />
</ObjectAnimationUsingKeyFrames>

Tamás Deme Tamás Deme · Accepted Answer · 2015-04-20T10:53:20

You can't really animate Grid row/col/etc... changes. Also any animation that'll result in a layout change is a dependent animation - and has bad performance. What I'd do is something like this:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    x:Class="App1.MainPage"
    mc:Ignorable="d">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="MenuState">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.3">
                        <VisualTransition.GeneratedEasingFunction>
                            <ExponentialEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="ClosedState"/>
                <VisualState x:Name="OpenState">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid>
            <Grid Margin="0,50,0,0" Background="Black">
                <TextBlock>
                    Long text blablabla
                </TextBlock>
            </Grid>
            <Grid x:Name="grid" Margin="0,50,0,0" Height="50" VerticalAlignment="Top" Background="#77ffff00">
                <Grid.RenderTransform>
                    <CompositeTransform TranslateY="-50"/>
                </Grid.RenderTransform>
                <Button Content="Close" >
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Core:GoToStateAction StateName="ClosedState"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </Button>
            </Grid>
            <Grid Margin="0,0,0,0" Height="50" VerticalAlignment="Top" Background="Red">
                <Button Content="Open" >
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Core:GoToStateAction StateName="OpenState"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </Button>
            </Grid>
        </Grid>
    </Grid>
</Page>

This way there's no layout change, as your submenu is going to end up on top of the content.

if you're really insisting on the 'not obscuring content' way

You could just have your submenu before your content with a Height="0", and animate the height of the element with a DoubleAnimation. If you do this, you'll have to set EnableDependentAnimation to true.

More info: https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.media.animation.pointanimation.enabledependentanimation.aspx

Which layout elements should I use to implement a submenu with an animation transition

2 Answers