basic panel animation

How-to Discussions
1

Hi,

i am quite lost with all the animations (or i haven’t found many documentation about it):

        <WhileActive>
            <Move RelativeTo="Size" Y="1" Duration="0.4" Easing="CircularInOut"/>
        </WhileActive>

        <EnteringAnimation Scale="0.35">
            <Move X="-4" RelativeTo="Size" />
        </EnteringAnimation>

so on… but i haven’t found how to animate the panel when changing the panel visibility from visible to collapsed

<Panel ux:Name="Panel1">
    //Panel1
</Panel>

<Panel>
    //Panel2
</Panel>

<whileTrue Value="Whatever">
    <Change Panel1.Visibility="Collapsed">
</whileTrue>
2

In that case you have to consider changing the Visibility to be the animation. If you want it to resize before it collapses, you have to do that explicitly.

Something like this

<whileTrue Value="Whatever">
    <Change Panel1.Height="0" Duration="0.3" />
    <Change Panel1.Visibility="Collapsed" Delay="0.3">
</whileTrue>
3

ok!!

consider doing something like:

 <CollapsingAnimation> :)

as i guess it may be quite common for example to want a bounce when collapsing a panel

4

You can pretty easily build that component yourself by combining basic UX building blocks though. We’ve deliberately stayed away from single-use-case abstractions like that :slight_smile:

5

> **Bent Stamnes wrote:** > >

You can pretty easily build that component yourself by combining basic UX building blocks though. We’ve deliberately stayed away from single-use-case abstractions like that :slight_smile:

> Sorry but I dont think that animating the “Collapsed” would be a single-use-case. It would be awesome if Change Collapsed would have a working Duration Property instead behaving like the Delay-Property. If anyone could complete the above code, how to create a custom collapsed animation, it would be VERY helpful for such noobs like me. Thank you very much Blade

6

Here is a full example:

<App>
	<Panel>
		<Panel ux:Class="CollapsePanel" Duration="1" ClipToBounds="true">
			<double ux:Property="Duration" />
			<bool ux:Property="Collapse" />
			
			<WhileTrue ux:Name="collapse" Value="{Property this.Collapse}">
				<Change this.Height="0" Duration="{Property this.Duration}"/>
				<Change this.Visibility="Collapsed" Delay="{Property this.Duration}" DelayBack="0"/>
			</WhileTrue>
		</Panel>

		<StackPanel Alignment="Center">
			<CollapsePanel ux:Name="cp1" Height="100" Width="300" Color="Red">
				<Text Value="This is a collapse panel" Alignment="Center" FontSize="25"/>
			</CollapsePanel>
			<Button Text="Click to collapse">
				<WhilePressed>
					<Change cp1.Collapse.Value="true" />
				</WhilePressed>
			</Button>
		</StackPanel>
	</Panel>
</App>

The CollapsePanel class is reusable.

Hoping this helps :slight_smile:

7

Kristian Hasselknippe wrote:

Here is a full example:

…

The CollapsePanel class is reusable.

Hoping this helps :slight_smile:

Helps??? OMG Mr Kristian Hasselknippe!!! This answers more than one of my questions.

Thanks a million. I know, its a total noob-sh*t for you, but its a whole world for me :slight_smile: Thank you soo much for taking your time!!!

The support here in this community is OUTSTANDING !

Gratefully

Blade

8

Glad to hear it :slight_smile: Happy to help

9

This is very interesting, but if you don’t mind how would you collapse only from one side let’s say I only want the animation to only collapse from the bottom?

10

Edwin:

All you have to do is align it to the top. In the case above, you have to align the wrapping StackPanel because of the way the StackPanel does layout:

        <StackPanel Alignment="Top">
            <CollapsePanel ux:Name="cp1" Height="100" Width="300" Color="Red">
                <Text Value="This is a collapse panel" Alignment="Center" FontSize="25"/>
            </CollapsePanel>
            <Button Text="Click to collapse">
                <WhilePressed>
                    <Change cp1.Collapse.Value="true" />
                </WhilePressed>
            </Button>
        </StackPanel>