WPF Flip 애니메이션

WPF에서 컨트롤을 만들려고하는데, 카드와 비슷하게 양쪽에 데이터를 바인딩합니다. 다음 코드를 사용하면 FIRST NAME에서 LAST NAME으로 되돌릴 수 있습니다. 마지막 이름으로 넘어 가면 같은 애니메이션을 실행하는 것과 반대로 실행하지 않는 것처럼 깜박입니다. 이 문제에 대한 통찰력은 크게 감사 할 것입니다.WPF Flip 애니메이션

<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

[조쉬 스미스는 이미이 작업을 수행했습니다. 그것을 확인해 보라] (http://thriple.codeplex.com/) –

나는 이것과 같은 약간의 것을 시도했는데 틀릴 수 있었다. 그러나 나는 두 번째''StopStoryboard''를 멈추기 위해'StopStoryboard'를 추가해야만했던 것을 기억하는 것 같다. Storyboard', 당신의 Storyboard_Reversed ... 어떻게 든 그것은 다른 하나를 방해하고있었습니다. – Sheridan

@HighCore Thriple의 문제점은 제어가 정사각형 인 경우에만 작동한다는 것입니다. 나의 통제는 내용을 왜곡하는 280 X 680이다. Thriple과 PerspectiveCamera로 놀기위한 나의 시도는 꽤 밝혀지지 않았습니다. 다른 모든 의견은 크게 감사하겠습니다. –

코드의 문제는 애니메이션이 실행될 최초로이 그리드 "위로", "앞"이라는 사용자가 그리드에 보이게된다라는 투명하게한다는 것이다. 그러나 여전히 "Back"그리드 상단에 있으며 모든 마우스 히트를 캡쳐합니다. 그래서 사용자가 다시 마우스 왼쪽 버튼을 클릭하면 백 그리드가 아닌 전면 그리드에 캡쳐됩니다. 이 문제를 해결하려면 격자가 투명 할 때 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

좋은 직장 .... :) –

답변

관련 문제