WPF/XAML - 动画扩展器内容

Question

我正在尝试使用 xaml 添加扩展动画（类似于 windows 10 使用的动画），点击它会从扩展栏下方滑出新信息（从 底部滚动到顶部） .在 Windows 10 中，可以通过转到控制面板、电源选项并单击“显示其他计划”旁边的扩展器来找到我尝试实现的示例。

我已经让动画工作了，但是如果我设置窗口属性 SizeToContent="Height"（我最终想使用它以便窗口大小自动调整以适应其内容），扩展信息将从 从上到下！如果我使用把手手动调整窗口高度（即使只有 1 个像素），然后再次单击扩展器，那么动画会按照我想要的方式工作（从下到上）但是然后展开的信息滚动到窗口顶部>_

有什么想法吗？

xaml:

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Width="480"
        SizeToContent="Height">

    <StackPanel VerticalAlignment="Bottom">

        <!-- --><TextBlock Margin="5 0 0 0" Height="21">TITLE</TextBlock>

        <!-- First Panel -->
        <StackPanel>

            <!-- First Panel Style -->
            <StackPanel.Resources>
                <BooleanToVisibilityConverter x:Key="boolToVisibility" />
                <Style TargetType="StackPanel" x:Key="StackPanelMain">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Expander.Expanded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" To="160" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Expander.Collapsed">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
                <Style TargetType="TextBox">
                    <Setter Property="Margin" Value="5 5 0 0" />
                    <Setter Property="Width" Value="360" />
                </Style>
            </StackPanel.Resources>

            <!-- First Panel Code -->
            <StackPanel Style="{StaticResource StackPanelMain}" Height="21">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="5 0 0 0">First Panel</TextBlock>
                    <Separator Margin="5 0 5 0" Opacity="0.5" Width="360"/>
                    <Expander x:Name="FirstPanelExpander" />
                </StackPanel>
                <StackPanel Orientation="Vertical" Visibility="{Binding IsExpanded, ElementName=FirstPanelExpander, Converter={StaticResource boolToVisibility}}">
                    <TextBox />
                    <TextBox />
                    <TextBox />
                    <TextBox />
                    <TextBox />
                </StackPanel>
            </StackPanel>

        </StackPanel>

        <!-- Next Panel -->
        <StackPanel Height="21">

            <!-- Next Panel Code -->
            <TextBlock Margin="5 0 0 0">Next Panel</TextBlock>

        </StackPanel>

    </StackPanel>

</Window>

Answer 1

首先，没有必要隐藏你的Textboxes。当您的对象在 Expander 内时，如果 expander 关闭，它们将被隐藏。下面是一个接近您想要的设计示例。

    <Window.Resources>
    <Style TargetType="Expander" x:Key="ExpanderMain">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Expander.Expanded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" From="30" To="160" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Expander.Collapsed">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" From="160" To="30" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="TextBox">
        <Setter Property="Margin" Value="5 5 0 0" />
        <Setter Property="Width" Value="360" />
    </Style>
</Window.Resources>

<ScrollViewer>
    <StackPanel>
        <Expander Name="AnimatedExpander" Style="{StaticResource ExpanderMain}">
            <Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Panel - 1" />
                    <Separator Width="300" Margin="5,0,0,0"/>
                </StackPanel>
            </Expander.Header>
            <StackPanel>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
            </StackPanel>
        </Expander>

        <Expander Name="AnimatedExpander2" Style="{StaticResource ExpanderMain}">
            <Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Panel - 2" />
                    <Separator Width="300" Margin="5,0,0,0"/>
                </StackPanel>
            </Expander.Header>
            <StackPanel>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
            </StackPanel>
        </Expander>

        <Expander Name="AnimatedExpander3" Style="{StaticResource ExpanderMain}">
            <Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Panel - 3" />
                    <Separator Width="300" Margin="5,0,0,0"/>
                </StackPanel>
            </Expander.Header>
            <StackPanel>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
            </StackPanel>
        </Expander>

        <Expander Name="AnimatedExpander4" Style="{StaticResource ExpanderMain}">
            <Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Panel - 4" />
                    <Separator Width="300" Margin="5,0,0,0"/>
                </StackPanel>
            </Expander.Header>
            <StackPanel>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
                <TextBox/>
            </StackPanel>
        </Expander>
    </StackPanel>

</ScrollViewer>