Dependancy Properties and the Light Fantastic - Silverlight

Get Microsoft Silverlight
PulseFlower screen shot
PulseFlower screen shot
PulseFlower screen shot
PulseFlower screen shot
PulseFlower screen shot
PulseFlower screen shot

So the above Silverlight app looks quite nice. Similar to some old school Amiga style demos.

But where this differs is the amount of code required to create it from scratch. If you look at the source there is 'code' but most of it is automatically generated by Visual Studio 2010 when you use the 'propd' snippit.

But before we get on to that lets have, a quick look at what is in the xaml files.

A single pulse is just an ellipse with radial gradient fill with a scale transform all wrapped up in a grid that has a triggered storyboard animating the scale.

The pulse user control is then used within the PulseContainer. The Pulse container has a grid with a collection of pulse user controls, each with a rotate transform. This also has a triggered storyboard, but this time it rotates the whole grid.

Finally there is the MainPage xaml which has a number of PulseContainer user controls each with a difference radius.

For this demonstration it also has a load of buttons for setting properties, but these are unecessary for non-interactive demonstrations.

As you can see that is all very brief so how does it work?

Now, we can look at the code behind for the Pulse.

Although there are three properties of the Pulse user control they are so similar that we are only seeing one below.

       public Color Shade

        {

            get { return (Color)GetValue(ShadeProperty); }

            set

            {

                SetValue(ShadeProperty, value);

                shader.Color = Shade;

            }

        }

 

        // Using a DependencyProperty as the backing store for Shade.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty ShadeProperty =

            DependencyProperty.Register("Shade", typeof(Color), typeof(Pulse), new PropertyMetadata(Colors.Orange));

 

 


Only one line of code was written for the above snippit as the propd[tab][tab] gives you all this

        public int MyProperty

        {

            get { return (int)GetValue(MyPropertyProperty); }

            set { SetValue(MyPropertyProperty, value); }

        }

 

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...

        public static readonly DependencyProperty MyPropertyProperty =

            DependencyProperty.Register("MyProperty", typeof(int), typeof(ownerclass), new UIPropertyMetadata(0));

 

Setting the type and name automatically updates all the references, all you have to do is change the typeof(ownerclass) to point to your class and change UIPropertyMetadata to PropertyMetadata as Silverlight does not support the standard .NET UIPropertyMetadata.

In fact that is so important I am going to say it again.
CHANGE UIPropertyMetadata to PropertyMetadata for Silverlight !!

So, as you can imagine the Radius property sets the Ellipse width and height, with the Delay property setting the BeginTime of the Storyboard.

The PulseContainer has slightly more to it.
The Shade property updates all the child Pulse objects

                foreach (UIElement uie in RotationContainer.Children)

                {

                    if (uie is Pulse) ((Pulse)uie).Shade = Shade;

                }

 

With the same for ElementRadius and Delay. Radius property here referes to the container radius.
RotateSpeedms updates the storyboard rotating the whole container.
The last Property I added was Arms. This is the number of arms/spokes the container has.

                // kill all current arms

                RotationContainer.Children.Clear();

                // calculate division

                double angle = Math.Round(360.0 / Arms);

                double step = 0;

                // add arms

                Pulse pulse;

                RotateTransform rt;

                for (int i = 0; i < Arms; i++)

                {

                    pulse = new Pulse

                        {

                            Radius = ElementRadius,

                            Shade = Shade,

                            Delay = Delay

                        };

                    rt = new RotateTransform();

                    rt.Angle = step;

                    step += angle;

                    pulse.RenderTransform = rt;

                   

                    RotationContainer.Children.Add(pulse);

                }

 

Lots of fun and lots of room for future scope.

Download the source code

email silverlight (AT) jumpstation.co.uk

more silverlight

root



Disclaimer:
This page is by me for me, if you are not me then please be aware of the following


I am not responsible for anything that works or does not work including files and pages made available at slsushi.co.uk,  www.jumpstation.co.uk and www.pay4foss.org
I am also not responsible for any information(or what you or others do with it) available at slsushi.co.uk, www.jumpstation.co.uk and www.pay4foss.org

In fact I'm not responsible for anything ever, so there!

[Pay4Foss banner long]
#