Animate Rows in Grid

How-to Discussions
1

I’s possible to animate the Rows parameter in a Grid? I try:

<Change MyGrid.Rows="0*,1*,0.5*" Duration="1" Easing="CubicOut" />

But Change without animation

2

If you want to animate the layout of cells in a Grid, you should add a LayoutAnimation to the individual cells. If you’re adding/removing rows or columns, that might be quite complicated.

<App>
	<WhileTrue ux:Name="resizeGrid">
		<Change theGrid.Rows="2*,1*" />
	</WhileTrue>
	<Grid ux:Name="theGrid" Rows="1*,2*">
		<Panel Color="#18f">
			<Clicked>
				<Toggle Target="resizeGrid" />
			</Clicked>
			<LayoutAnimation>
				<Resize RelativeTo="SizeChange" Duration="1" Vector="1"/>
				<Move RelativeTo="PositionChange" Duration="1" Vector="1"/>
			</LayoutAnimation>
		</Panel>
		<Panel Color="#1f8">
			<LayoutAnimation>
				<Resize RelativeTo="SizeChange" Duration="1" Vector="1"/>
				<Move RelativeTo="PositionChange" Duration="1" Vector="1"/>
			</LayoutAnimation>
		</Panel>
	</Grid>
</App>
3

There is an alternate syntax for rows and columns:

<Grid>
  <Row Height="0" WidthMetric="Proportional" ux:Name="row1"/>
  <Row Height="1" WidthMetric="Proportional" ux:Name="row2"/>
  <Row Height="0.5" WidthMetric="Proportional" ux:Name="row3"/>

You can then target the row items with a Change.

4

Thanks!