WPF反向双重动画

时间:2018-03-15 14:19:32

标签: wpf xaml

我有以下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>

当用户单击Rectangle时,Rectangle将移动到Canvas的底部。我想要的是当用户再次按下Rectangle时,Rectangle将返回到它的初始位置(因此Canvas.Top = 0)。关于我将如何解决这个问题的任何想法?

1 个答案:

答案 0 :(得分:0)

我认为最简单的方法是挂钩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;
}