How to move a panel off the screen

How-to Discussions
1

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.

2

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>