WPF XAML网格可见性触发器 [英] WPF XAML Grid Visibility Trigger

问题描述

我在网格的第一行上有一条状态消息，我希望它在可见性发生变化时滑入和滑出。

第一个可见性触发器工作得很好，并且可以滑动打开的第一行很快。添加崩溃触发器后，一切都将失效。

I have a status message located on the first row of my grid and I want it to slide in and out when the visibility changes.
The first visibility trigger works great and slides the first grid row open quickly. As soon as I add the 'Collapsed' trigger, nothing works at all. How do I reverse the animation to slide closed when the visibility is set to 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>

推荐答案

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

You should remove the Visibility binding in your grid and use a DataTrigger that binds to the StatusMessageVisibility property. If you bind the grid's visibility then once it's collapsed it's collapsed and you won't be able to see the animation.

此外，也不要使用两个带有<$的数据触发器c $ c> EnterActions ，使用单个数据触发器，该触发器还具有 ExitAction 处于折叠状态：

Also, instead of having two data triggers with EnterActions, use a single data trigger that also has an ExitAction for the collapsed state:

<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网格可见性触发器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！