WPF翻轉動畫

我正在嘗試在WPF中創建一個類似於卡片的控件，該控件將綁定兩側的數據。使用下面的代碼，我可以把它從FIRST NAME翻轉到LAST NAME，只是沒有回來。一旦它翻轉到LAST NAME，我點擊它就會閃爍，就像它執行相同的動畫，而不是相反。任何洞察這個問題將不勝感激。WPF翻轉動畫

<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>

來源

2013-10-30 Brian Anderson

[Josh Smith已經爲你做了這個。檢查出來]（http://thriple.codeplex.com/） –

我嘗試了一些這樣的事情，我可能是錯的，但我似乎記得我不得不添加一個'StopStoryboard'來停止第二個' Storyboard'，你的'Storyboard_Reversed' ......不知怎的，它正在干擾另一個。 – Sheridan

@HighCore Thriple的問題在於，它只在你的控件是方形的時候才能起作用。我的控制是280 X 680，這會扭曲內容。我嘗試玩Thriple和PerspectiveCamera的嘗試並沒有那麼好。任何其他建議將不勝感激。 –

與代碼的問題是，動畫運行時第一次，網格命名爲「背」變得對用戶和網格命名爲「前」可見變得透明。但它仍然位於「返回」網格的頂部並捕獲所有鼠標命中。因此，當用戶再次點擊鼠標時，它會被前網格而不是後網格捕獲。要解決此問題，當網格透明時，您需要將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>

來源

2013-11-10 11:07:30

不錯的工作.... :) –

回答

相關問題