c# - WPF フリップ アニメーション

Question

カードのように、WPFでコントロールを作成しようとしています。これは、「両側」にデータをバインドします。次のコードを使用して、FIRST NAME から LAST 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>

Answer 1

コードの問題は、アニメーションが初めて実行されるときに、「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>