WPF - Animations dans un utilisateur qui contrôle, apprend, essaie de comprendre, mais se sent n00bish

Question

OK Je refais ça depuis que j'ai raté. :) voici le xaml.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="ucWaitIndicator.Window1" 
    x:Name="Window" 
    Title="Window1" 
    Width="640" Height="480"> 
    <Window.Resources> 
     <Storyboard x:Key="OnLoaded1"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" RepeatBehavior="Forever"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="360"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </Window.Resources> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
      <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/> 
     </EventTrigger> 
    </Window.Triggers> 

    <Grid x:Name="LayoutRoot"> 
     <Path Data="M180.99244,64C116.37543,64 63.992443,116.38299 63.992443,181 63.992443,245.61742 116.37549,298 180.99244,298 245.60981,298 297.99244,245.61737 297.99244,181 297.99244,116.38304 245.60986,64 180.99244,64z M180.99244,0.5C205.91427,0.5 229.65641,5.5507355 251.25119,14.684582 256.64987,16.968037 261.91435,19.506668 267.02946,22.285378 307.95065,44.515015 339.31398,82.108706 353.37751,127.32482 356.89353,138.6289 359.32811,150.40922 360.56053,162.54492 361.79308,174.68071 361.79307,187.31935 360.56053,199.45508 355.63085,247.99793 331.46539,290.85483 295.8072,320.28259 277.97817,334.9964 257.2756,346.35331 234.66763,353.38507 223.36361,356.90106 211.58325,359.33566 199.44752,360.56808 187.31179,361.80063 174.67315,361.80063 162.53737,360.56808 113.99482,355.63844 71.137715,331.47319 41.70987,295.81476 26.995966,277.98571 15.63918,257.28314 8.6073667,234.67519 5.0914601,223.37117 2.6567941,211.59082 1.4243458,199.45508 0.19188775,187.31935 0.19188165,174.68071 1.4243458,162.54492 6.3541056,114.00227 30.519295,71.145355 66.177677,41.717426 84.006863,27.003489 104.70924,15.646738 127.31726,8.6149235 138.62133,5.0989907 150.40165,2.6643478 162.53737,1.4319025 168.60525,0.81567122 174.76199,0.5 180.99244,0.5z" Margin="10,10,0,0" x:Name="path" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Stroke="Black" Height="77" HorizontalAlignment="Left" VerticalAlignment="Top" Width="77" MouseLeftButtonDown="path_MouseLeftButtonDown" MouseRightButtonDown="path_MouseRightButtonDown"> 
      <Path.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform ScaleX="1" ScaleY="1" /> 
        <SkewTransform AngleX="0" AngleY="0" /> 
        <RotateTransform Angle="0" /> 
        <TranslateTransform X="0" Y="0" /> 
       </TransformGroup> 
      </Path.RenderTransform> 
      <Path.Fill> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="Black" Offset="0" /> 
        <GradientStop Color="#FF7E7E7E" Offset="1" /> 
       </LinearGradientBrush> 
      </Path.Fill> 
     </Path> 
    </Grid> 
</Window> 

C'est une animation continue. Dans le codebehind je ai ce qui suit:

public partial class Window1 : Window 
{ 
public Storyboard myStoryboard; 

public Window1() 
    { 
     this.InitializeComponent(); 

     // Insert code required on object creation below this point. 
    myStoryboard = (Storyboard)TryFindResource("OnLoaded1"); 
    myStoryboard.Begin(); 
} 

private void path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
    myStoryboard.Begin(); 
} 


private void path_MouseRightButtonDown(object sender, MouseButtonEventArgs e) 
{ 
    myStoryboard.Stop(); 

} 

} 

Je reçois un contrôle très sporadique en utilisant les méthodes de démarrage et d'arrêt. Parfois, un arrêt fonctionne, mais seulement si j'ai fait le bon clic droit en premier. Je ne comprends pas pourquoi STOP ne l'arrête pas, et start ne le démarre pas?

Merci les gars.

Answer 1

Voulez-vous le faire en XAML ou dans le code C#?

Les deux méthodes peuvent vous donner une grande flexibilité avec vos animations.

Voici la solution de storyboard XAML, faites moi savoir si vous voulez une version C# pure.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Shapes; 
using System.Media.Animation; 
using System.Windows.Resources; 
using System.Windows.Markup; 
// Make sure to include this reference to use Storyboard Class 
using System.Windows.Media.Animation; 


namespace StoryboardSample 
{ 
    public partial class Window1 : Window 
{ 
     // Set up the Storyboard variable 
     public Storyboard myStoryboard; 
     public Window1() 
    { 
    this.InitializeComponent(); 

    // Assign the Storyboard to the variable. 
      myStoryboard = (Storyboard)TryFindResource("myStoryboard"); 
      myFunction(); 

    } 
     public void myFunction() 
     { 
      // Begin the Animation 
      myStoryboard.Begin(); 
     } 
} 
} 


<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class="StoryboardSample.Window1" 
x:Name="Window" 
Title="Window1" 
Width="640" Height="480"> 
<Window.Resources> 
    <Storyboard x:Key="myStoryboard"> 
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="myRect" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> 
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-71"/> 
    </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Grid x:Name="LayoutRoot"> 
<Rectangle x:Name="myRect" Fill="Black" Width="300" Height="150" RenderTransformOrigin="0.5,0.5" > 
    <Rectangle.RenderTransform> 
    <TransformGroup> 
    <ScaleTransform ScaleX="1" ScaleY="1"/> 
    <SkewTransform AngleX="0" AngleY="0"/> 
    <RotateTransform Angle="0"/> 
    <TranslateTransform X="0" Y="0"/> 
    </TransformGroup> 
    </Rectangle.RenderTransform> 
</Rectangle> 
</Grid> 
</Window> 

J'ai une écriture sur my blog avec un peu plus de détails sur ce code.

Answer 2

Vous n'avez encore rien à démarrer ou à arrêter. Vous avez besoin d'un storyboard. Commencez avec ceci Animation Overview (msdn)

Answer 3

Jetez un oeil à l'indicateur d'attente dans Chris Anderson'sSilverlight 2 app: (source complète et une démonstration en direct est disponible sur le lien.)

<!-- Created by Chris Anderson: http://chrisa.wordpress.com --> 
<UserControl x:Class="SilverlightLOBFramework.Controls.Layout.WaitIndicator" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="30" Height="30"> 

    <UserControl.Resources> 
     <Storyboard x:Name="IndicatorStoryboard"> 
      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse1" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse2" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse3" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse4" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse5" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse6" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse7" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 

      <ColorAnimationUsingKeyFrames 
            Storyboard.TargetName="Ellipse8" 
            Storyboard.TargetProperty="(Fill).(SolidBrush.Color)" 
            BeginTime="0" RepeatBehavior="Forever"> 

       <LinearColorKeyFrame Value="#9CFFFFFF" KeyTime="00:00:00" /> 
       <LinearColorKeyFrame Value="#6DFFFFFF" KeyTime="00:00:00.15" /> 
       <LinearColorKeyFrame Value="#3EFFFFFF" KeyTime="00:00:00.3" /> 
       <LinearColorKeyFrame Value="#2EFFFFFF" KeyTime="00:00:00.45" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.60" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.75" /> 
       <LinearColorKeyFrame Value="#1EFFFFFF" KeyTime="00:00:00.90" /> 
       <LinearColorKeyFrame Value="#CCFFFFFF" KeyTime="00:00:01.05" /> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 
    </UserControl.Resources> 

    <Canvas x:Name="LayoutRoot"> 
     <Ellipse x:Name="Ellipse1" Fill="#1EFFFFFF" Canvas.Left="0" Canvas.Top="11" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse2" Fill="#1EFFFFFF" Canvas.Left="3" Canvas.Top="3" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse3" Fill="#1EFFFFFF" Canvas.Left="11" Canvas.Top="0" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse4" Fill="#2EFFFFFF" Canvas.Left="19" Canvas.Top="3" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse5" Fill="#3EFFFFFF" Canvas.Left="22" Canvas.Top="11" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse6" Fill="#6DFFFFFF" Canvas.Left="19" Canvas.Top="19" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse7" Fill="#9CFFFFFF" Canvas.Left="11" Canvas.Top="22" Height="8" Width="8"></Ellipse> 
     <Ellipse x:Name="Ellipse8" Fill="#CCFFFFFF" Canvas.Left="3" Canvas.Top="19" Height="8" Width="8"></Ellipse> 
    </Canvas> 
</UserControl> 

---

using System.Windows; 
using System.Windows.Controls; 

namespace SilverlightLOBFramework.Controls.Layout 
{ 
    public partial class WaitIndicator : UserControl 
    { 
     #region Constructor 
     public WaitIndicator() 
     { 
      InitializeComponent(); 

      if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)) 
       LayoutRoot.Visibility = Visibility.Collapsed; 
     } 
     #endregion 

     #region Public Functions 
     public void Start() 
     { 
      LayoutRoot.Visibility = Visibility.Visible; 
      IndicatorStoryboard.Begin(); 
     } 

     public void Stop() 
     { 
      LayoutRoot.Visibility = Visibility.Collapsed; 
      IndicatorStoryboard.Stop(); 
     } 
     #endregion 
    } 
} 

Answer 4

Cela fonctionne exactement comment j'attendre travailler. Faites-moi savoir si vous avez besoin de plus d'informations sur ce que j'ai fait. Cela revient à la façon dont les Storyboards XAML se comportent. Ils peuvent être un peu difficiles au début parce que le comportement Begin/Stop/Pause/Resume n'est pas vraiment évident. Vous ne pouvez pas Pause/Reprendre à moins qu'il ne soit déjà en cours d'exécution, et (dans Silverlight) vous ne pouvez plus recommencer un Storyboard SAUF si vous l'avez réellement arrêté. Donc, la fonction de boucle a ces deux lignes

// Silverlight ONLY  
storyboard.Stop(); 
storyboard.Begin(); 

Heureusement, WPF ne vous oblige pas à le faire. Vous devez également supprimer le déclencheur d'événement et démarrer le storyboard à partir du code ci-dessous.

<Window.Triggers> 
     <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
      <!-- REMOVE THIS LINE 
        <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/> 
        --> 
     </EventTrigger> 
    </Window.Triggers>