How to animate an panel that is docked?

General
1

Does any one know how to animate a panel that is docked (Dock="Bottom") so that it slides out of view and the remaining space is then occupied by its siblilings. Please see the below example of the structure.

<App Theme="Basic" Background="#eeef">
  <DockPanel>
      <Panel ux:Name="_header" Dock="Bottom" Height="45" Background="Blue">
        <Text>Header</Text>
    </Panel>
    <Panel ux:Name="_page" Background="Yellow">
        <Text>Page</Text>
        <Clicked>
            <!--
            Do something here that makes panel
            _header animate off the screen while
            having _page fill up the rest of the screen
            -->
        </Clicked>
    </Panel>
  </DockPanel>
</App>
2

Hi! Here is an example of how you can do it

<App Theme="Basic" Background="#eeef">
    <DockPanel>
        <Panel ux:Name="_header" Dock="Bottom" Height="45" Background="Blue">
            <Text>Header</Text>
        </Panel>
        <WhileTrue ux:Name="HidePanel">
            <Change _header.Height="0" Duration="0.5" />
        </WhileTrue>
        <Panel ux:Name="_page" Background="Yellow">
            <Text>Page</Text>
            <Clicked>
                <Toggle Target="HidePanel"/>
            </Clicked>
        </Panel>
    </DockPanel>
</App>
3

Thanks Kristian. That example helped a lot. Got it working now.

4

Super :slight_smile: Good to hear!