Question

我的网格的第一行有一条状态消息，我想让它在可见性发生变化时滑入和滑出。
第一个可见性触发器运行良好，并快速打开第一个网格行。一旦我添加'Collapsed'触发器，一切都没有效果。当可见性设置为折叠时，如何将动画反转为滑动关闭？

<Grid Grid.Row="0" Height="55" Visibility="{Binding StatusMessageVisibility, Mode=TwoWay}">
    <Grid.Style>
        <Style TargetType="Grid">
            <Style.Triggers>
                <Trigger Property="Visibility" Value="Visible">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="55" Duration="0:0:.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
                <Trigger Property="Visibility" Value="Collapsed">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Height" From="55" To="0" Duration="0:0:.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>                        
            </Style.Triggers>
        </Style>
    </Grid.Style>
    <TextBlock Text="Hi There" />
</Grid>

Answer 1

您应该删除网格中的Visibility绑定，并使用绑定到DataTrigger属性的StatusMessageVisibility。如果你绑定网格的可见性，那么一旦它被折叠，它就会折叠，你将无法看到动画。

此外，与EnterActions使用两个数据触发器不同，使用单个数据触发器，对于折叠状态也具有ExitAction：

<Grid Grid.Row="0" Height="55">
    <Grid.Style>
        <Style TargetType="Grid">
            <Style.Triggers>
                <DataTrigger Binding="{Binding StatusMessageVisibility}" Value="Visible">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="55" Duration="0:0:.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Height" From="55" To="0" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>               
            </Style.Triggers>
        </Style>
    </Grid.Style>
    <TextBlock Text="Hi There" />
</Grid>

WPF XAML网格可见性触发器

1 个答案: