Animer un seul point d'un chemin WPF

J'ai un chemin, qui est essentiellement un triangle:Animer un seul point d'un chemin WPF

<Path Data="M0,0 15,0 15,25" Fill="{Binding Background}"/>

Je veux avoir un déclencheur de données (lié à un bool) qui va commencer une animation qui va s'effondrer ce triangle quand le bool est vrai, et le restituer quand c'est faux. Je dois encore être en mesure de comprendre comment faire cela.

Plus précisément, replier le long de cette direction: 0,0 15,0 15,25 5,0 15,0 15,25 10,0 15,0 15,25 15,0 15,0 15, 25

Merci pour toute aide!

Source

2012-11-26 JonD

Eh bien, je l'ai fait avec peu de triche appelé Expression Blend. Mais vous pouvez voir comment c'est fait. Il y a toujours des options.

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="WpfApplication1.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <Storyboard x:Key="CollapseTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="ExpandTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> 
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/> 
    </EventTrigger> 
</Window.Triggers> 

<Grid x:Name="LayoutRoot"> 
    <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5"> 
     <Path.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Path.RenderTransform> 
    </Path> 
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/> 
</Grid> 
</Window>

Lorsque vous avez des storyboards, vous pouvez toujours modifier les déclencheurs.

Comme vous vouliez basé sur la valeur de bool. Par exemple comme ceci:

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="WpfApplication1.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
Width="640" Height="480"> 
<Window.Resources> 
    <Storyboard x:Key="CollapseTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="ExpandTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Control> 
<Control.Template> 
    <ControlTemplate> 
      <Grid x:Name="LayoutRoot"> 
       <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5"> 
        <Path.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Path.RenderTransform> 
       </Path> 
       <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/> 
      </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger SourceName="checkBox" Property="IsChecked" Value="True"> 
       <Trigger.EnterActions> 
        <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/> 
       </Trigger.EnterActions> 
       <Trigger.ExitActions> 
        <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/> 
       </Trigger.ExitActions> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Control.Template> 
</Control> 
</Window>

EDIT

S'il vous plaît garder une chose dans votre esprit. Si vous souhaitez appliquer votre déclencheur directement à l'élément, il ne peut s'agir que de EventTrigger. Si vous souhaitez utiliser un Trigger ou DataTrigger vous devez le mettre dans Style ou ControlTemplate. C'est pourquoi j'ai ajouté Control à mon deuxième exemple.

Source

2012-11-26 19:51:04

Si vous avez besoin d'informations supplémentaires, s'il vous plaît laissez-moi savoir. Je suis toujours heureux d'aider. –

Il suffit de coller ce code dans une fenêtre de studio visuel et il semble faire exactement ce dont j'ai besoin. Je vais faire les réglages dont j'ai besoin et ça devrait être parfait. Merci beaucoup pour la réponse rapide! – JonD

Ajout de mes réglages à votre code ci-dessous. La seule chose que je n'aime pas à propos de l'utilisation de XAML produit par Blend, c'est qu'il colle à un tas de choses inutiles. Certainement génial pour avoir la bonne syntaxe! – JonD

Voici ma version simplifiée du code ci-dessus. J'ai sorti les images clés supplémentaires inutiles et j'ai également supprimé les transformations supplémentaires qui n'étaient pas utilisées. Finalement, j'ai retiré l'animation supplémentaire qui la fait glisser d'un côté et qui préfère simplement définir RenderTransformOrigin à 1 (à l'origine .5). Tout le crédit ira toujours à Viktor La Croix pour la source originale!

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Width="640" Height="480"> 

<Window.Resources> 
    <Storyboard x:Key="CollapseTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path"> 
      <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="ExpandTriangel"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path"> 
      <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> 
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox"> 
     <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/> 
    </EventTrigger> 
</Window.Triggers> 

<Grid x:Name="LayoutRoot"> 
    <Path x:Name="path" Data="M0,0 15,0 15,25" Fill="#FF0202FF" HorizontalAlignment="right" Stretch="Fill" Stroke="Black" RenderTransformOrigin="1,0.5"> 
     <Path.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
      </TransformGroup> 
     </Path.RenderTransform> 
    </Path> 
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/> 
</Grid>

Source

2012-11-26 20:47:53 JonD

Animer un seul point d'un chemin WPF

Répondre

Questions connexes