WPF - 动画用户控件，学习，试图了解，但感觉n00bish [英] WPF - Animations in a user control, learning, trying to understand, but feeling n00bish

问题描述

OK，我重做这一点，因为我把事情搞糟了。 :)这里的XAML。

OK I'm redoing this since I messed it up. :) here's the 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>

这是一个连续的动画。在codebehind我有以下几点：

It's a continuous animation. In the codebehind I have the following:

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();

}

}

我得到使用开始真正控制零星和停止方法。有时停止工作，但前提是我已经做了第一次单击鼠标右键启动。我不明白为什么停止不阻止它，并开始没有启动呢？

I get really sporadic control using the start and stop methods. Sometimes a stop works, but only if I've done the rightclick start first. I don't understand why STOP is not stopping it, and start is not starting it?

谢谢你们。

推荐答案

你想为此在XAML或C＃code后面？

Do you want to do this in XAML or in the c# code behind?

这两种方法都可以给你一些伟大的灵活性与你的动画。

Both methods can give you some great flexibility with your animations.

下面是XAML的故事板解决方案，让我知道如果你想要一个纯粹的C＃版本。

Here is the XAML storyboard solution, let me know if you want a pure c# version.

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>

我对的我的博客与此code更详细一点。

I have a write-up on my blog with a little more detail on this code.

这篇关于WPF - 动画用户控件，学习，试图了解，但感觉n00bish的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！