WPF反向双重动画答案

【问题标题】：WPF reverse doubleanimationWPF反向双重动画
【发布时间】：2018-03-15 14:19:32
【问题描述】：

我有以下 XAML 代码：

 <Canvas Grid.Column="1" Margin="106,219,157,0" Grid.ColumnSpan="2" Height="450" Grid.RowSpan="2">
        <ListView x:Name="lvUsers" HorizontalAlignment="Stretch" Grid.Column="2" Grid.Row="2" VerticalAlignment="Bottom" Height="433" Width="398" Background="#FF2C2C2C" FontFamily="Microsoft Sans Serif" FontSize="20" Canvas.Top="17" Foreground="White">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="5" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                        <StackPanel.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Margin" Value="5,0,0,0"/>
                            </Style>
                        </StackPanel.Resources>
                        <Image Source="{Binding ProfilePicture}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <TextBlock Text="{Binding FirstName}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <TextBlock Text="{Binding LastName}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                        <TextBlock Text="{Binding IsOnline}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Rectangle x:Name="rectUsers" Fill="#FFFFE000" HorizontalAlignment="Left" Height="39" Stroke="#FFFFE000" Canvas.Top="0" Width="398" MouseUp="rectUsers_MouseUp">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseUp">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetName="rectUsers"
                                Storyboard.TargetProperty="(Canvas.Top)" 
                                From="0" To="411" Duration="0:0:1" AutoReverse="False"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>

当用户点击矩形时，矩形会移动到画布的底部。我想要的是当用户再次按下矩形时，矩形将回到它的初始位置（所以 Canvas.Top = 0）。关于如何解决这个问题的任何想法？

【问题讨论】：

标签： wpf xaml

【解决方案1】：

我认为最简单的方法是挂钩 DoubleAnimation Completed 事件并交换 From 和 To 值。

<DoubleAnimation x:Name="rectSB" Completed="rectSB_Completed"
    Storyboard.TargetName="rectUsers"
    Storyboard.TargetProperty="(Canvas.Top)" 
    From="0" To="411" Duration="0:0:1" AutoReverse="False"/>

在事件处理程序中，我们只是交换 From 和 To。

private void rectSB_Completed(object sender, EventArgs e)
{
    var from = rectSB.From;
    rectSB.From = rectSB.To;
    rectSB.To = from;
}

【讨论】：