Question

I have a panel that should be minimized unless the user hovers the mouse over the panel. It is implemented using a storyboard that lets the height of the panel grow when the use puts the mouse over the control. At the moment the target height is hard coded to 400 which is a bad solution as the content of the panel will be different each time the application starts (it is static during execution).

How do you create an animation that lets the panel grow to the size of the current content?

<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="500" Width="525">
<Grid>
    <Border Margin="10,0" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="0,0,8,8">
        <Border.Effect>
            <DropShadowEffect Opacity="0.5"/>
        </Border.Effect>
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.MouseEnter">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Height" 
                                             From="25" 
                                             To="400" 
                                             Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="Border.MouseLeave">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Height" 
                                             From="400" 
                                             To="25" 
                                             Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <StackPanel Margin="5">
            <TextBlock Height="25" Text="My items panel" />
            <ListBox MinWidth="150" MinHeight="100" ItemsSource="{Binding MyItems}" />
        </StackPanel>
    </Border>
</Grid>

Edit: I have tried with binding to the Height of the StackPanel but that didn’t really help as it didn’t take the margins of the stackpanel into account thus making the panel shorter than needed.

<DoubleAnimation Storyboard.TargetProperty="Height" 
                 From="{Binding ElementName=NameOfStackPanel, Path=ActualHeight}"
                 To="25" 
                 Duration="0:0:0.2" />

Answer 1

You could create a converter to handle adding the margins to the ActualHeight of your StackPanel. You could even use a multivalue convertor so you could bind the margin too and not have to hardcode a fudge factor. Finally, you could probably wrap your stackpanel in another panel (without margins) and bind to the height of that instead.