Question

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

我从来没有在动画中摆弄动画，但一直在做一些研究。我仍然很困惑，无法弄清楚这个简单的问题。

当我只收听Visibility = Visible属性时，它运行正常。但是，当我还想将面板向上滑动时，它表现得很奇怪。

这是我的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>

这是我的Codebehind：

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

    }

真的希望你能帮忙:)。

亲切的问候，拉斯

Answer 1

我认为您的问题是，当StackPanel的{{1}}值为Visibility时，它会从用户界面中删除。因此，即使Collapsed发生，您也不会看到它。

Answer 2

我想这不会在崩溃时向上滑动动画，而是立即消失。这是因为您将“可见性”设置为“折叠”，因此无需显示任何内容。

解决此问题：

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

b）不要设置Visibility，只需在事件处理程序中启动正确的Storyboard。

WPF可见性动画触发问题

2 个答案: