# How to move a panel off the screen

**URL:** <https://forums.fusetools.com/t/how-to-move-a-panel-off-the-screen/3863>\
**Category:** How-to Discussions\
**Created:** [August 1, 2017, 2:07pm UTC](https://forums.fusetools.com/t/how-to-move-a-panel-off-the-screen/3863 "2017-08-01T14:07:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Iain](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@Iain](https://forums.fusetools.com/u/Iain)\
**Post date:** [August 1, 2017, 2:07pm UTC](https://forums.fusetools.com/t/how-to-move-a-panel-off-the-screen/3863/1 "2017-08-01T14:07:51Z")

</div>

I have to say, I really don’t understand this stuff at all 🙂 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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 1, 2017, 3:06pm UTC](https://forums.fusetools.com/t/how-to-move-a-panel-off-the-screen/3863/2 "2017-08-01T15:06:14Z")

</div>

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:

```auto
<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>

```