WPF 可见性动画触发问题

Question

我有两个堆栈面板，其中第二个面板是额外的信息，可以在单击按钮时向下滑动并显示（如jQuerys slideDown effect）。然后向上滑动，再次单击按钮。

我以前从未摆弄过动画，但一直在做一些研究。不过我仍然很困惑，无法弄清楚这个简单的问题。

当我只侦听可见性=可见属性时，它工作正常。但是当我也想向上滑动面板时，它的行为很奇怪。

这是我的 XAML 代码：

<Grid>
                <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="0" Width="600" Orientation="Horizontal">
                        <TextBlock Style="{StaticResource Heading4}">Panel 1</TextBlock>
                        <Button Width="300" Margin="30,0,0,0" Click="Button_OnClick">Click to slide other panel down</Button>
                    </StackPanel>
                    <StackPanel Name="StackPanelShowHide" Grid.Row="1" Width="500" Orientation="Vertical" Background="Beige" Height="70">
                        <StackPanel.Style>
                            <Style TargetType="StackPanel">
                                <Style.Triggers>
                                    <Trigger Property="Visibility"  Value="Visible">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="70" Duration="0:0:1" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                    </Trigger>
                                    <Trigger Property="Visibility"  Value="Collapsed">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="Height" From="70" To="0" Duration="0:0:1" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>   
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </StackPanel.Style>
                        <TextBlock Style="{StaticResource Heading4}">New panel</TextBlock>
                    </StackPanel>
                </Grid>

这是我的代码隐藏：

private void Button_OnClick(object Sender, RoutedEventArgs E) {
        if (StackPanelShowHide.Visibility == Visibility.Collapsed) {
            StackPanelShowHide.Visibility = Visibility.Visible;
        } else {
            StackPanelShowHide.Visibility = Visibility.Collapsed;
        }
    }

真的希望你能帮助:)

亲切问候拉斯

Answer 1

我想它不会在折叠时向上滑动动画，而是立即消失。这是因为您将可见性设置为折叠，因此没有要显示的内容。

要解决此问题，请执行以下操作：

a） 使用 MVVM：向 ViewModel 添加一些属性并在其上触发。通过 ICommand 修改属性。

b） 不要设置可见性，只需在事件处理程序中启动正确的故事板即可。

Answer 2

我相信

你的问题是当StackPanel的Visibility值为 Collapsed 时，它会从 UI 中删除。因此，即使发生Animation，您也不会看到它。