Positioning in Silverlight 2

A common mistake in Silverlight is for people to use the Canvas.Left and Canvas.Top property when positioning elements.  In Silverlight 2, there is a push towards a relative positioning model.  This makes the Margin, HorizontalAlignment, and VerticalAlignment very important (for all you CSS people the Margin starts on the Left and goes clockwise).  So, how do you position, move, or animate elements?  Where is the X and Y?  You can find them in the TranslateTransform which is part of the TransformGroup which is part of the RenderTransform.

XAML (see below for this code to copy)

This is a pain to access from C#.  You have to access the TranslateTransform through the Children collection using the index.  What happens if you switch the positions of the Transforms in XAML?  Your code will fail.  Here is the code to access X and Y through C# (again, see below for code to copy).

So my question: Why not add the X, Y, ScaleX, and ScaleY to the UIElement?  This would eliminate the need to go through multiple castings in C#, it would prevent index failures if you change your transforms in XAML, and it would eliminate the misuse of the Canvas.Left and Canvas.Top properties.

Code to copy:

<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform X=”0″ Y=”0″ />
<ScaleTransform ScaleX=”1″ ScaleY=”0″ />
<RotateTransform Angle=”0″ />
<SkewTransform AngleX=”0″ AngleY=”0″ />
</TransformGroup>
</Grid.RenderTransform>
</Grid>

            ((LayoutRoot.RenderTransform as TransformGroup).Children[0] as TranslateTransform).X;
((LayoutRoot.RenderTransform as TransformGroup).Children[0] as TranslateTransform).Y;

Set the source for an image from C#

In Silverlight, there are two ways to set the source for an image.

1. image.SetValue(Image.SourceProperty,value);
2. image.Source = new BitmapImage(new Uri(value, UriKind.Absolute));

For the second option you will need to include the following namespace: using System.Windows.Media.Imaging;.

How to dynamically create animations from C# in Silverlight

So you want to create an animation from managed code. To do this, there is quite a bit of code needed. For every animation there needs to be a new StoryBoard, and unfortunately a StoryBoard can not be reused between objects. (Correction: You can reuse a dynamically created StoryBoard. Make sure to call StoryBoard.Stop() before setting the new target.)

The approach we are going to take is to animate the TranslateTransforms instead of animating the Canvas.Top and Canvas.Left properties since this is the preferred way of doing animations in WPF. In the below example we will create a rectangle, attached a set of transforms to the rectangle, and dynamically add animations to the rectangle.

1. Create a Rectangle
   
2. Create a function that returns a RenderTransform. (I have added more than the TranslateTransform in case you want to access the other transforms at a later time. It’s good practices to have them there.)
   
3. Create a StoryBoard and add DoubleAnimations for both the X and Y.
   
4. Final product
   

Come back for part 2 and we’ll animate the Scale and add more than one rectangle.

Edit: In case you don’t want to brush off your old OCR programs to get the code, here is a link to the source. Link to working example.

Why won’t media play in Silverlight 2?

The Media Element handles errors pretty gracefully. The errors that do occur are usually related to cross domain problem and setting the Source from managed code.

If you are experiencing errors, make sure to take a look at the address bar. If the site is being run from the local file system and you are trying to access media from http or https there will be an error.

Animate multiple transforms from C# – WPF

I have been stuck in the world of WPF for a while, hence the lack of posts. Things have calmed down and I am back.

Let’s talk about animating objects in WPF/XAML/C#. Animating multiple transforms in XAML is easy: setup the initial transforms, add a storyboard, set up an event trigger, and go. What about doing this in C#? And how do you animate multiple transforms in a TransformGroup from C#? Let’s take a look:

Overview:

• Create your object (say a rectangle, button, user control, etc.)
• Apply a TransformGroup to the object (add one or more of the following to the TranformGroup: TranslateTransform, ScaleTransform, SkewTransform, or RotateTransform)
• In an event get the TransformGroup of the object and apply a DoubleAnimation to the particular Transform in the group

Screenshot

Code

        public Window1()
        {
            InitializeComponent();

            //Create event for the button
            btn.Click += new RoutedEventHandler(btn_Click);

            //Create a rectangle
            Rectangle rect = new Rectangle();
            rect.Name = "rect";
            rect.Width = 50;
            rect.Height = 50;
            rect.Fill = Brushes.Beige;

            //Add a TransformGroup to the rectangle (note the order)
            TransformGroup tg = new TransformGroup();
            tg.Children.Add(new TranslateTransform(50.0, 50.0));
            tg.Children.Add(new ScaleTransform(1.0,1.0));
            tg.Children.Add(new SkewTransform(1.0,1.0));
            tg.Children.Add(new RotateTransform(0.0,150.0,150.0));
            rect.RenderTransform = tg;

            //Add controls to the page
            cnvMain.Children.Add(rect);
        }

        void btn_Click(object sender, RoutedEventArgs e)
        {
            //Rectangle rect = cnvMain.FindName("rect") as Rectangle;
            Rectangle rect = cnvMain.Children[2] as Rectangle;

            //Define DoubleAnimation for Translate Transform
            DoubleAnimation daTranslateX = GenerateDoubleAnimation(300);
            DoubleAnimation daTranslateY = GenerateDoubleAnimation(300);

            //Get the TranslateTransform for the rectangle (note Children[0], we added TranslateTransform first)
            TranslateTransform tt = (rect.RenderTransform as TransformGroup).Children[0] as TranslateTransform;

            //Apply animation to the TranslateTransform
            tt.BeginAnimation(TranslateTransform.XProperty, daTranslateX);
            tt.BeginAnimation(TranslateTransform.YProperty, daTranslateY);

            ////Do the same for Scale
            DoubleAnimation daScaleX = GenerateDoubleAnimationDouble();
            DoubleAnimation daScaleY = GenerateDoubleAnimationDouble();
            ScaleTransform sct = (rect.RenderTransform as TransformGroup).Children[1] as ScaleTransform;
            sct.BeginAnimation(ScaleTransform.ScaleXProperty, daScaleX);
            sct.BeginAnimation(ScaleTransform.ScaleYProperty, daScaleX);

            //Do the same for Skew
            //DoubleAnimation daSkewX = GenerateDoubleAnimation(45);
            //DoubleAnimation daSkewY = GenerateDoubleAnimation(45);
            //SkewTransform skt = (rect.RenderTransform as TransformGroup).Children[2] as SkewTransform;
            //skt.BeginAnimation(SkewTransform.AngleXProperty, daSkewX);
            //skt.BeginAnimation(SkewTransform.AngleYProperty, daSkewY);

            //Do the same for Rotate
            DoubleAnimation daRotate = GenerateDoubleAnimation(360);
            RotateTransform rt = (rect.RenderTransform as TransformGroup).Children[3] as RotateTransform;
            rt.BeginAnimation(RotateTransform.AngleProperty, daRotate);
            rt.BeginAnimation(RotateTransform.CenterXProperty, daTranslateX);
            rt.BeginAnimation(RotateTransform.CenterYProperty, daTranslateY);
        }

        DoubleAnimation GenerateDoubleAnimation(int max)
        {
            DoubleAnimation da = new DoubleAnimation();
            da.To = randomNumber.Next(max);
            da.AccelerationRatio = .8;
            da.DecelerationRatio = .1;
            da.Duration = new Duration(TimeSpan.FromSeconds(2));

            return da;
        }

        DoubleAnimation GenerateDoubleAnimationDouble()
        {
            DoubleAnimation da = new DoubleAnimation();
            da.To = randomNumber.NextDouble();
            da.AccelerationRatio = .8;
            da.DecelerationRatio = .1;
            da.Duration = new Duration(TimeSpan.FromSeconds(2));
            return da;
        }

Download the project (not up yet). I am in the process of converting this to a Silverlight project. Please leave me some feedback or questions.