wpf - 可见性动画从隐藏到折叠，反之亦然

Question

我正在尝试实现类似于 iPhone 消息 View 的功能。单击按钮时，每条消息的删除按钮都会滑出，单击“完成”时，删除按钮会滑入。除了 之外，我已经能够使用 mvvm 实现这一点。滑动 影响。
这是我可以用我有限的知识写的风格:

<Style TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
            <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

这里的“ShowDeleteButton”是 View 模型中的一个 bool 属性。这工作正常。但是崩溃和“变得可见”发生得非常突然和非常快。我需要一些滑动动画。
请注意，当删除按钮消失时，其余控件应占用其余空间，当按钮出现时，现有控件应缩小并为按钮留出空间。
我尝试使用 Storyboard动画，但即使在几个小时后，我也无法弄清楚它抛出的奇怪错误。这是代码:

<DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
     <DataTrigger.EnterActions>
          <BeginStoryboard>
               <Storyboard BeginTime="0:0:1">
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
                     <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
           </BeginStoryboard>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard BeginTime="0:0:1">
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
                     <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                 </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
      </DataTrigger.ExitActions>
</DataTrigger>

有人可以帮助陷入困境的灵魂吗？

问候

Answer 1

老问题了……嗯……

无论如何......忘记可见性。诀窍是动画Width/Height放置在 Grid's Column/Row 中的控件哪里Column/Row有 宽度设置为自动。 噗 :)

所以这里是 Grid命名为“容器”，有两列。在第一列中可以放置任何你想要的东西，但你应该将它对齐到右，因为你希望它在显示删除按钮时移动。在第二列中有一个 Control(代表您的 DeleteButton) 注意第一列有 Width="*"第二列有 Width="Auto"

<Grid Background="Purple" Width="350" Height="100">
    <CheckBox Content="Show" IsChecked="{Binding Path=ShowDeleteButton}" Height="16" HorizontalAlignment="Left" Margin="12,12,0,0" Name="checkBox1" VerticalAlignment="Top" />
    <Grid x:Name="container" Margin="40,0,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid Name="content" Margin="0">
            <Label Content="Look I'm flyin'!" Margin="0,30,10,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
        </Grid>
        <Control Grid.Column="1" Margin="0">
            <Control.Template>
                <ControlTemplate>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding ShowDeleteButton}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation 
                                Storyboard.TargetName="flyout"
                                Storyboard.TargetProperty="(Grid.Width)" 
                                From="0" To="120" Duration="0:0:1" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation 
                                Storyboard.TargetName="flyout"
                                Storyboard.TargetProperty="(Grid.Width)" 
                                From="120" To="0" Duration="0:0:1" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                    <Grid x:Name="flyout" Width="0">
                        <Rectangle Fill="Green"/>
                        <Label Content="I'm DELETE button" Margin="10,30,0,0" VerticalAlignment="Top"/>
                    </Grid>
                </ControlTemplate>
            </Control.Template>
        </Control>
    </Grid>
</Grid>

和 Control在网格的第二列中有 DataTrigger基于您的 ViewModel 的属性“ShowDeleteButton”

自 Width栏目所在的 Control被放置的是 Auto您可以更改 Control 的宽度使用简单 DoubleAnimation你会得到想要的行为。

编辑

如果您希望弹出窗口超过其他所有内容，请查看此内容。

<Grid x:Name="LayoutRoot">
    <Grid x:Name="container" Width="120" HorizontalAlignment="Right">
            <Button x:Name="button" Content="In" Margin="0,13,7.5,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="HorizontalAlignment">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="flyout"
                                    Storyboard.TargetProperty="(Grid.Width)" 
                                    From="0" To="120" Duration="0:0:1" AutoReverse="False"/> 
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
    </Grid>
    <Grid x:Name="flyout" Width="120" Margin="0" HorizontalAlignment="Right">
            <Rectangle Fill="Green"/>
            <Label Content="This is some label" Margin="6.038,27,1.006,0" VerticalAlignment="Top"/>
            <Button Content="Out" Margin="11.917,58,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="80.083">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="flyout"
                                    Storyboard.TargetProperty="(Grid.Width)" 
                                    From="120" To="0" Duration="0:0:1" AutoReverse="False"/> 
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Grid>
</Grid>

请注意，可以在移动时单击“退出”按钮。它可能应该被禁用。我只是这样做是因为我想在 xaml 中简单地完成它。当然你可以使用 mahapps。或者你可以让它像在 MahApps 中一样快，而且不可能点击它两次。 :) 我看过 MahApps FlyOutDemo，我的解决方案对我来说看起来要简单得多。而且我不需要第三方库。