Toggle animation between 0% and 100% Height

How-to Discussions
1

Hi! In my app I have an structure like this:

<App>
	<StackPanel>
		<Clicked>
			<Toggle Target="TriggerContent" />
		</Clicked>

		<Text>Header</Text>
		<StackPanel ux:Name="Content" ClipToBounds="true" Height="0">
			<WhileTrue ux:Name="TriggerContent">
				<Change Content.Height="100%" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
			</WhileTrue>

			<Text>Content 1</Text>
			<Text>Content 2</Text>
			<Text>Content 3</Text>
			<Text>Content 4</Text>
			<Text>Content 5</Text>
			<Text>Content 6</Text>
			<Text>Content 7</Text>
			<Text>Content 8</Text>
		</StackPanel>
	</StackPanel>
</App>

The problem is in my app the Content is dynamic and each element have different Height, so I don’t know the exact Height in pixels.
In this example if I toggle the animation only shows 5 Text elements of the 8.

How can I solve this? To toggle and animate between 0% and 100% Height of any element (Show and Collapse with animation)?

Thanks!

2

Hi Cristian,

the main challenge in your snippet is that you’re tying to set something to a 100% height of undefined. Well, that is still going to be undefined, no matter how hard you try.

A vertical StackPanel does not have a set height and can not have one, because it’s meant to accommodate vertically as much items as necessary. So you can’t do it that way.

What you can do is the opposite - you can set the height of the content as high as it needs to be. Here’s a snippet of one approach you could take. Note how it makes use of the LayoutRole property coupled with a LayoutAnimation, effectively making a neat structure that interacts with itself and by pushing neighbouring elements up and down.

<App>
	<StackPanel>
		<ExpandableThings HeaderText="First Header" Things="8" />
		<ExpandableThings HeaderText="Second Header" Things="5" />
		<ExpandableThings HeaderText="Third Header" Things="12" />
		<ExpandableThings HeaderText="Fourth Header" Things="3" />
	</StackPanel>

	<StackPanel ux:Class="ExpandableThings" ClipToBounds="true">
		<string ux:Property="HeaderText" />
		<int ux:Property="Things" />

		<LayoutAnimation>
			<Resize Vector="1" RelativeTo="SizeChange" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
			<Move Vector="1" RelativeTo="PositionChange" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
		</LayoutAnimation>

		<WhileTrue ux:Name="showContent">
			<Change theThings.LayoutRole="Standard" />
		</WhileTrue>
		<Clicked>
			<Toggle Target="showContent" />
		</Clicked>

		<Text Value="{ReadProperty HeaderText}" Alignment="Center" Color="#000c" />
		<Panel>
			<StackPanel ux:Name="theThings" LayoutRole="Inert">
				<Each Count="{ReadProperty Things}">
					<Text>Some Content</Text>
				</Each>
			</StackPanel>
		</Panel>
	</StackPanel>
</App>
3

Thanks!!!