WPF翻转动画

时间：2013-10-30 17:59:55

标签： c# wpf animation flip

我正在尝试在WPF中创建一个类似于卡的控件，它将在两个“边”上绑定数据。使用以下代码，我可以将它从FIRST NAME转换为LAST NAME，而不是回来。一旦它翻转到最后一个名字，我点击它只是闪烁，就像它正在执行相同的动画而不是反向运行。任何对此问题的见解都将非常感激。

<UserControl x:Class="WpfApplication2.TileControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<UserControl.Resources>
  <Storyboard x:Key="FlipFirst">
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
        <EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
     </DoubleAnimationUsingKeyFrames>
  </Storyboard>
  <Storyboard x:Key="FlipLast">
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
  <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
     <BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
  </EventTrigger>
  <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
     <StopStoryboard BeginStoryboardName="Storyboard_Begin" />
     <BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
  </EventTrigger>
</UserControl.Triggers>

<Grid x:Name="LayoutRoot" Width="280" Height="680">
  <Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
     <Grid.RenderTransform>
        <TransformGroup>
           <ScaleTransform/>
           <SkewTransform/>
           <RotateTransform/>
           <TranslateTransform/>
        </TransformGroup>
     </Grid.RenderTransform>
     <TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
  </Grid>
  <Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
     <Grid.RenderTransform>
        <TransformGroup>
           <ScaleTransform/>
           <SkewTransform/>
           <RotateTransform/>
           <TranslateTransform/>
        </TransformGroup>
     </Grid.RenderTransform>
     <TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
  </Grid>
</Grid>
</UserControl>

1 个答案:

答案 0 :(得分：2)

代码的问题在于，第一次运行动画时，名为“back”的网格对用户可见，名为“front”的网格变为透明。但它仍然位于“后退”网格的顶部并捕获所有鼠标命中。 因此，当用户再次左键单击鼠标时，它将被前栅格而不是后栅格捕获。 要解决此问题，当网格透明时，您需要将IsHitTestVisible设置为false。 请参阅以下代码。

<UserControl x:Class="WpfApplication2.TileControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <UserControl.Resources>
        <Storyboard x:Key="FlipFirst">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
                <EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="FlipLast">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
            <BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
            <StopStoryboard BeginStoryboardName="Storyboard_Begin" />
            <BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="LayoutRoot" Width="280" Height="680">
        <Grid.Resources>
            <Style TargetType="Grid">
                <Setter Property="IsHitTestVisible" Value="True" />
                <Style.Triggers>
                    <Trigger Property="Opacity" Value="0">
                        <Setter Property="IsHitTestVisible" Value="False"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
        <Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
        </Grid>
        <Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
        </Grid>
    </Grid>
</UserControl>
相关问题
最新问题