locked
Animation without XAML RRS feed

  • Question

  • I'm creating Paths (Shapes) at run time and I want to animate their fill color.  In XAML I see it would be this:
    Storyboard.TargetProperty="Fill.Color"

    But how do I do this with C#?

    The closest I have gotten with my color animation is:
    ca.SetValue(Storyboard.TargetPropertyProperty,
                            new PropertyPath(Path.FillProperty));
    but that's a brush. 

    Tuesday, March 24, 2009 7:42 PM

Answers

  • This should show you how to animate without using any xaml for the storyboard:
    http://msdn.microsoft.com/en-us/library/system.windows.media.animation.coloranimation.aspx


    Here I just created a very simple example taken from the msdn's more extensive examples.

    1 <Window x:Class="ItemsControlMSDN.Window1" 
    2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4         Title="Window1" Height="500" Width="500">  
    5     <Grid> 
    6         <Canvas> 
    7             <Polygon Points="300,200 400,125 400,275 300,200" Stroke="Purple" StrokeThickness="2" x:Name="poly">  
    8             </Polygon> 
    9         </Canvas> 
    10     </Grid> 
    11 </Window> 

    1 using System;  
    2 using System.Windows;  
    3 using System.Windows.Media;  
    4 using System.Windows.Media.Animation;  
    5  
    6 namespace ItemsControlMSDN  
    7 {  
    8     /// <summary>  
    9     /// Interaction logic for Window1.xaml  
    10     /// </summary>  
    11     public partial class Window1 : Window  
    12     {  
    13         public Window1()  
    14         {  
    15             InitializeComponent();  
    16             SolidColorBrush brush = new SolidColorBrush();  
    17             brush.Color = Colors.Red;  
    18             poly.Fill = brush;  
    19  
    20             this.RegisterName("AnimatedBrush", brush);  
    21             ColorAnimation loopAnimation = new ColorAnimation();  
    22             loopAnimation.To = Colors.Green;  
    23             loopAnimation.Duration = TimeSpan.FromSeconds(5);  
    24             loopAnimation.AutoReverse = true;  
    25               
    26               
    27             Storyboard.SetTargetName(loopAnimation,  "AnimatedBrush");  
    28             Storyboard.SetTargetProperty(loopAnimation, new PropertyPath(SolidColorBrush.ColorProperty));  
    29  
    30             Storyboard sboard = new Storyboard();  
    31             sboard.Children.Add(loopAnimation);  
    32             sboard.Begin(this);  
    33  
    34         }  
    35     }  
    36

    This posting is provided "AS IS" with no warranties, and confers no rights.
    Tuesday, March 24, 2009 8:29 PM
  • Ah I think I got it:

    PropertyPathConverter ppc;
    ppc = new PropertyPathConverter();
    ca.SetValue( Storyboard.TargetPropertyProperty,
       ppc.ConvertFromString("(Path.Fill).(SolidColorBrush.Color)"));

    It runs and I see animation.  It's not what I expect but that's the next issue for me. 
    • Marked as answer by Tao Liang Thursday, March 26, 2009 7:32 AM
    Tuesday, March 24, 2009 8:32 PM

All replies

  • This should show you how to animate without using any xaml for the storyboard:
    http://msdn.microsoft.com/en-us/library/system.windows.media.animation.coloranimation.aspx


    Here I just created a very simple example taken from the msdn's more extensive examples.

    1 <Window x:Class="ItemsControlMSDN.Window1" 
    2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4         Title="Window1" Height="500" Width="500">  
    5     <Grid> 
    6         <Canvas> 
    7             <Polygon Points="300,200 400,125 400,275 300,200" Stroke="Purple" StrokeThickness="2" x:Name="poly">  
    8             </Polygon> 
    9         </Canvas> 
    10     </Grid> 
    11 </Window> 

    1 using System;  
    2 using System.Windows;  
    3 using System.Windows.Media;  
    4 using System.Windows.Media.Animation;  
    5  
    6 namespace ItemsControlMSDN  
    7 {  
    8     /// <summary>  
    9     /// Interaction logic for Window1.xaml  
    10     /// </summary>  
    11     public partial class Window1 : Window  
    12     {  
    13         public Window1()  
    14         {  
    15             InitializeComponent();  
    16             SolidColorBrush brush = new SolidColorBrush();  
    17             brush.Color = Colors.Red;  
    18             poly.Fill = brush;  
    19  
    20             this.RegisterName("AnimatedBrush", brush);  
    21             ColorAnimation loopAnimation = new ColorAnimation();  
    22             loopAnimation.To = Colors.Green;  
    23             loopAnimation.Duration = TimeSpan.FromSeconds(5);  
    24             loopAnimation.AutoReverse = true;  
    25               
    26               
    27             Storyboard.SetTargetName(loopAnimation,  "AnimatedBrush");  
    28             Storyboard.SetTargetProperty(loopAnimation, new PropertyPath(SolidColorBrush.ColorProperty));  
    29  
    30             Storyboard sboard = new Storyboard();  
    31             sboard.Children.Add(loopAnimation);  
    32             sboard.Begin(this);  
    33  
    34         }  
    35     }  
    36

    This posting is provided "AS IS" with no warranties, and confers no rights.
    Tuesday, March 24, 2009 8:29 PM
  • Ah I think I got it:

    PropertyPathConverter ppc;
    ppc = new PropertyPathConverter();
    ca.SetValue( Storyboard.TargetPropertyProperty,
       ppc.ConvertFromString("(Path.Fill).(SolidColorBrush.Color)"));

    It runs and I see animation.  It's not what I expect but that's the next issue for me. 
    • Marked as answer by Tao Liang Thursday, March 26, 2009 7:32 AM
    Tuesday, March 24, 2009 8:32 PM
  • I have a canvas that I'm adding paths to at run time.  So only the canvas is defined in XAML.  It looks like the animation is changing the fill of the canvas instead of the fill of the polygons. 

    I want the animation of all of the paths in one storyboard so their animations occur at the same time.  I'm looking at this sample from the book for an idea of how to do it. 
    http://www.charlespetzold.com/blog/2006/04/220232.html
    Where he's animating multiple points at once. 

    Here's my code if I cut out the pertinent pieces:

    //in the class are these two: 
    Storyboard ZoneStoryboard; 
    static int ZoneNumber = 1
     
     
    //in a function I do something like this:            
    ZoneStoryboard =  new System.Windows.Media.Animation.Storyboard(); 
    ZoneStoryboard.FillBehavior = FillBehavior.HoldEnd; 
    ZoneStoryboard.SetValue(Storyboard.TargetNameProperty, "ZoneCanvas"); 
    //ZoneCanvas is the name of my canvas 
    ZoneStoryboard.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 800)); 
     
    for each path to add 
    {           
      Path pth = new Path(); 
      //setup path taken out 
     
      pth.Name = "Zone" + ZoneNumber.ToString(); 
      ZoneCanvas.RegisterName(pth.Name, pth); 
      ZoneNumber++; 
     
      ColorAnimation ca = new ColorAnimation(); 
      ca.SetValue(Storyboard.TargetNameProperty, pth.Name); 
      PropertyPathConverter ppc; 
      ppc = new PropertyPathConverter(); 
      ca.SetValue( Storyboard.TargetPropertyProperty, 
        ppc.ConvertFromString("(Path.Fill).(SolidColorBrush.Color)")); 
      ZoneStoryboard.Children.Add(ca); 
     
    later in another function 
     
    for each path 
      //set the To color for each color animation that goes with the path 
    ZoneStoryboard.Begin(ZoneCanvas); 


    Tuesday, March 24, 2009 9:15 PM
  • I'm just stumped with this one.  I thought the animation was affecting the canvas.  Nope it's affecting more than that.  This canvas is in my UserControl.  And the animation is even affecting things outside of the user control!  I've even moved my Storyboard to XAML using a trigger in the canvas but still it affects everything.  The animations are still created at run time and added to the storyboard. 
    Wednesday, March 25, 2009 4:42 PM
  • I think the piece of the picture that I was missing was the brush itself.  before delving into animation I had profiled the program for memory use and found I was using many many many brushes.  So since I use a set of colors I used one brush for each color and reused the brush.  See where I'm going now. :)   So since I'm animating the brush I'm animating anywhere it's used.  So it looks like it's back to using a ton of brushes.  Ugh!
    Wednesday, March 25, 2009 5:45 PM