How to move a panel off the screen

I have to say, I really don’t understand this stuff at all :slight_smile: but I’m going to keep on trying…!

I have a panel docked to the bottom of the screen. When it’s clicked I want it to slide down off the screen. Therefore I want it to slide down the screen an amount that is the height of the panel, eg:

<Panel ux:Name="signIn">
	<LayoutAnimation>
		<Move X="1" Y="1" RelativeTo="PositionChange" Duration="0.25"/>
	</LayoutAnimation>
	<Text>SIGN IN</Text>
	<Clicked>
		<Set signIn.Y="60"/>
	</Clicked>
</Panel>

So this code works, but it has a constant “60” to move it off the screen. How would I tell it to move down by the actual height of the “signIn” panel?

Thanks. And thanks for the patience.

There’s several things you could use to achieve the desired effect. Keywords for further exploring: RelativeTo, RelativeNode, Translation, and UX Expressions.

Here’s a little something I threw together as a proof of concept to show off a couple of approaches you could take:

<App>
    <WhileTrue ux:Name="hideTopPanel">
        <Move Target="topPanel" Y="-1" RelativeTo="Size" Duration="0.32" />
    </WhileTrue>

    <Panel ux:Name="topPanel" Alignment="Top" Height="56" Color="#18f" />

    <StackPanel Alignment="VerticalCenter" ItemSpacing="4">
        <Panel Width="240" Height="56" Color="#f81">
            <Text Value="Toggle top panel" Alignment="Center" TextColor="#fff" />
            <Clicked>
                <Toggle Target="hideTopPanel" />
            </Clicked>
        </Panel>
        <Panel Width="240" Height="56" Color="#f81">
            <Text Value="Toggle bottom panel" Alignment="Center" TextColor="#fff" />
            <Clicked>
                <Set bottomPanel.Y="height(bottomPanel)" />
            </Clicked>
        </Panel>
    </StackPanel>

    <Panel ux:Name="bottomPanel" Alignment="Bottom" Height="56" Color="#18f">
        <LayoutAnimation>
            <Move RelativeTo="PositionChange" Vector="1" Duration="0.32" />
        </LayoutAnimation>
    </Panel>
</App>