Question

I have a Button containing a Grid inside:

    <Button>
        <Grid Name="grid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Name="txt0" Grid.Row="0" Text="Text0"/>
            <TextBlock Name="txt1" Grid.Row="1" Text="Text1"/>
        </Grid>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="grid" 
                                             Storyboard.TargetProperty="Height" 
                                             From="{Binding ElementName=grid, Path=ActualHeight}" 
                                             To="{Binding ElementName=txt0, Path=ActualHeight}" 
                                             Duration="0:0:1"
                                             FillBehavior="HoldEnd"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Button.Triggers>
    </Button>

When Button is clicked, Grid should be collapsed to display only the text in the first row. And this part works correctly. The strange behaviour happens when I click the collapsed Button again: it expands back to its initial size (two rows are visible), and then collapses to one-row height again. It seems like ActualHeight of the Grid remains unchanged during the animation and after the animation is finished.

So I have two questions:

1) Why is ActualHeight of the Grid not changed, although visually Grid's size is changed.

2) I can achieve desired behaviour if I set Height="*" for the second row. Why in such case Grid's ActualHeight is changed?

Any information would be appreciated.

Was it helpful?

Solution

In your setup with Row heights set to auto the grid's ActualHeight will be at minimum the sum of the heights of TextBlocks. So when you animat it to a smaller value the ActualHeight does not change however the size given to the grid to be rendered is set with Height property. Actually what you see is the grid being clipped not resized.

With Height="*" it works because the size of the grid is at minimum the size of the first TextBlock only. However if you animate it to 0 you will se the same behaviour.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top