You can use a LayoutTransform
with a ScaleTransform
on the grid and, animate this transform at the button's click, as the following:
Add a LayoutTransform
to the grid:
<Grid Name="grid1" Grid.Row="1" Margin="3,0,0,12" Height="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="244">
<Grid.LayoutTransform>
<ScaleTransform ScaleY="0" />
</Grid.LayoutTransform>
...
</Grid>
Then, add an EventTrigger
to the button:
<Button Height="23" Margin="0,0,93,30" Name="button1" VerticalAlignment="Bottom" Click="button1_Click" HorizontalAlignment="Right" Width="77">
<Button.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="grid1"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"
To="1"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
Run
</Button>
In addition, set the Height
of the 2nd RowDefinition
of the main Grid
to Auto
.