Question

我正在尝试实现与iPhone消息视图类似的功能。单击按钮时，每个消息都会删除一个删除按钮，单击“完成”时，删除按钮会滑入。我已经能够使用mvvm实现这一点，除了滑动效果。这是我用我有限的知识写的风格：

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

这里“ShowDeleteButton”是视图模型中的bool属性。这很好用。但是崩溃和“变得可见”正在突然而且非常快地发生。我需要一些滑动动画。请注意，当删除按钮消失时，其余控件应占用剩余空间，并且当按钮出现时，现有控件应缩小并为按钮提供空间。我试过故事板动画，但即使几个小时后我也无法弄清楚它投掷的奇怪错误。这是代码：

<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 宽度设置为自动。 Uff：）

所以这里有一个名为“容器”的Width="*"，有两列。在第一列中可以放置任何您想要的，但是您应该将它对齐到右边，因为您希望它在显示删除按钮时移动。在第二列中有一个Control （代表您的DeleteButton）注意第一列有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

根据您的ViewModel属性“ShowDeleteButton”

，Grid第二列中的DataTrigger为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>的宽度，并获得所需行为。

修改

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

{{1}}

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

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

1 个答案: