Question

我有一个应该最小化的面板，除非用户将鼠标悬停在面板上。它是使用故事板实现的，当用户将鼠标放在控件上时，该故事板可以使面板的高度增大。目前高度被硬编码为400，这是一个不好的解决方案，因为每次应用程序启动时面板的内容都会不同（在执行期间它是静态的）。

如何创建一个动画，让面板增长到当前内容的大小？

<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>

编辑：我已尝试绑定到StackPanel的高度，但这并没有真正帮助，因为它没有考虑堆栈面板的边距，因此使面板比需要的更短。

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

Answer 1

您可以创建一个转换器来处理将边距添加到StackPanel的ActualHeight。您甚至可以使用多值转换器，因此您也可以绑定边距，而不必硬编码软糖因子。最后，你可以将你的stackpanel包装在另一个面板中（没有边距），然后绑定到它的高度。

具有动态内容的控制高度的XAML动画

1 个答案: