10

我在网格的第一行有一条状态消息，我希望它在可见性变化时滑入和滑出。
第一个可见性触发器效果很好，可以快速打开第一个网格行。一旦我添加了“折叠”触发器，就什么都没有了。当可见性设置为折叠时，如何反转动画以滑动关闭？

<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>
4

1 回答 1

13

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

此外，不要使用两个数据触发器，而是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>
于 2013-09-18T21:12:48.923 回答