Silverlight的Animation问题

Question

 我尝试了MSDN的一段Code，但是没有移动的动画效果，找不出问题，请expert帮忙,我用的是silverlight 2.0 beta

 

Code Snippet

Page.xaml:

<UserControl x:Class="SilverlightApplicationTest.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">

</Grid>

</UserControl>

 

Page.xaml.cs

public partial class Page : UserControl

{

 public Page()

 {

 InitializeComponent();

 }

 

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

{

Rectangle myRectangle = new Rectangle();

myRectangle.Width = 20;

myRectangle.Height = 20;

Color myColor = Color.FromArgb(255, 255, 0, 0);

SolidColorBrush myBrush = new SolidColorBrush(myColor);

myRectangle.Fill = myBrush;

LayoutRoot.Children.Add(myRectangle);

Duration duration = new Duration(TimeSpan.FromSeconds(0.2));

DoubleAnimation myDoubleAnimationTop = new DoubleAnimation();

DoubleAnimation myDoubleAnimationLeft = new DoubleAnimation();

myDoubleAnimationTop.Duration = duration;

myDoubleAnimationLeft.Duration = duration;

myDoubleAnimationLeft.RepeatBehavior = RepeatBehavior.Forever;

myDoubleAnimationTop.RepeatBehavior = RepeatBehavior.Forever;

myDoubleAnimationLeft.AutoReverse = true;

myDoubleAnimationTop.AutoReverse = true;

Storyboard sb = new Storyboard();

sb.Duration = duration;

sb.Children.Add(myDoubleAnimationLeft);

sb.Children.Add(myDoubleAnimationTop);

Storyboard.SetTarget(myDoubleAnimationLeft, myRectangle);

Storyboard.SetTarget(myDoubleAnimationTop, myRectangle);

//Storyboard.SetTargetName(myDoubleAnimationLeft, "myRectangle");

//Storyboard.SetTargetName(myDoubleAnimationTop, "myRectangle");

Storyboard.SetTargetProperty(myDoubleAnimationTop, new PropertyPath("(Canvas.Top)"));

Storyboard.SetTargetProperty(myDoubleAnimationLeft, new PropertyPath("(Canvas.Left)"));

myDoubleAnimationLeft.To = 200;

myDoubleAnimationTop.To = 200;

LayoutRoot.Resources.Add("unique_id", sb);

sb.Begin();

}

}

 

 

 

Answer 1

 

改成这样既可

 

Code Snippet

 

 

<UserControl x:Class="SilverlightAmation.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid Background="White">
  <Canvas  x:Name="LayoutRoot"  Loaded="LayoutRoot_Loaded"></Canvas>
 </Grid>
</UserControl>

 

 

 

Answer 2

为了使动画明显，可以改成这样

Code Snippet

 

<UserControl x:Class="SilverlightAmation.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid Background="White">
  <Canvas  x:Name="LayoutRoot"  Loaded="LayoutRoot_Loaded"></Canvas>
 </Grid>
</UserControl>

 

 

 

 

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 20;
myRectangle.Height = 20;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush(myColor);
myRectangle.Fill = myBrush;
LayoutRoot.Children.Add(myRectangle);
Duration duration = new Duration(TimeSpan.FromSeconds(0.2));
DoubleAnimation myDoubleAnimationTop = new DoubleAnimation();
DoubleAnimation myDoubleAnimationLeft = new DoubleAnimation();
myDoubleAnimationTop.Duration = duration;
myDoubleAnimationLeft.Duration = duration;
myDoubleAnimationLeft.RepeatBehavior = RepeatBehavior.Forever;
myDoubleAnimationTop.RepeatBehavior = RepeatBehavior.Forever;
myDoubleAnimationLeft.AutoReverse = true;
myDoubleAnimationTop.AutoReverse = true;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimationLeft);
sb.Children.Add(myDoubleAnimationTop);
Storyboard.SetTarget(myDoubleAnimationLeft, myRectangle);
Storyboard.SetTarget(myDoubleAnimationTop, myRectangle);
Storyboard.SetTargetProperty(myDoubleAnimationTop, new PropertyPath("(Canvas.Top)"));
Storyboard.SetTargetProperty(myDoubleAnimationLeft, new PropertyPath("(Canvas.Left)"));
myDoubleAnimationLeft.To = 200;
myDoubleAnimationTop.To = 200;
LayoutRoot.Resources.Add("unique_id", sb);
sb.AutoReverse = true;
sb.Duration = new Duration(TimeSpan.FromSeconds(0.2));
sb.RepeatBehavior = RepeatBehavior.Forever;
sb.Begin();

 

 

 

Answer 3

谢谢专家！同时这段Code还有两个问题：
（1）为什么用Grid的布局就不能产生动画效果，而必须改为在其中嵌套Canvas?
 (2) AutoReverse 和 RepeatBehavior在我的第一段Code中没有起作用。即我只将myDoubleAnimationTop 和myDoubleAnimationLeft 的这两个属性设定，而你不仅将这两个属性设定，而且将Storyboard的这两个属性也设定。你这样做就可以有这两个属性的效果，而我那样做却不行，想知道为什么？