Painting the Canvas with Silverlight 2.0

Now that Silverlight 2.0 BETA 1 is out, developers are discovering some unique and compelling applications. Here is a short example of how to paint a Silverlight Canvas with randomly colored and sized rectangles.

There is a lot of developer interest in Silverlight 2.0. If you go to my "social tagging short urls" site and search on the silverlight tag you will see that a number of very smart people have been using the facility to draw attention to their Silverlight work (you are welcome to use the site, too). 

I too have started to take an interest in Silverlight, and though the applications I am currently working on do not really apply, I expect that at some point in the not-too-distant future I will have some that do. So, I want to devote a small portion of my available "study time" to Silverlight as it evolves.

One thing I like to do with a new programming medium is to look at its graphics capabilites.  Since Silverlight does not support bitmap graphics (e.g. no "SetPixel" method) but rather works with vector graphics, this requires a bit of a mind-shift for those fractal geometry types who like to play with imaginary numbers on the complex plane. However, you can plot a colored point with Silverlight quite easily - just use a rectangle and set the size to 1,1.

To paint with shapes in Silverlight we want to use the <Canvas ..> rather than the default <Grid...> that you get with a new Visual Studio 2008 Silverlight project.

For repeated painting of shapes to the Canvas, Silverlight sports a handy DispatcherTimer that lives in the System.Windows.Threading namespace:

System.Windows.Threading.DispatcherTimer dt = new System.Windows.Threading.DispatcherTimer();

The timer has a callback and a start method:

dt.Interval = new TimeSpan(0, 0, 0, 0, 10); // 10 Milliseconds
dt.Tick += new EventHandler(dt_Tick);  // callback

So now that we have the ingredients, here's the code for my extra-cool "Rectangle painter":

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SLPainting
    public partial class Page : UserControl
        System.Windows.Threading.DispatcherTimer dt = new System.Windows.Threading.DispatcherTimer();
        public Page()
            dt.Interval = new TimeSpan(0, 0, 0, 0, 10); // 10 Milliseconds  
            dt.Tick += new EventHandler(dt_Tick);

        void dt_Tick(object sender, EventArgs e)
            Rectangle rect;
            Random rnd = new Random((int)System.DateTime.Now.Ticks);
            int r = rnd.Next(0, 255);
            int g = rnd.Next(0, 255);
            int b = rnd.Next(0, 255);
           // create rectangle with width, height, color and alpha channel opacity
            rect = new Rectangle() { Height = r * 100 % 600, Width = g * 100 % 800, 
                Fill = new SolidColorBrush { Color = Color.FromArgb((byte)r, (byte)r, (byte)g, (byte)b) } };
            Random rnd2 = new Random((int)System.DateTime.Now.Ticks);
            // set the location of the rect
            int left = rnd2.Next(0, 800);
            int top = rnd2.Next(0, 600);
            rect.SetValue(Canvas.LeftProperty, left);
            rect.SetValue(Canvas.TopProperty, top);  

This will create an ever-changing layout of various random colored rectangles of differing opacity all over the screen in the browser that looks like this:


The next step might be to use this arrangement to draw fractals. You could do hopalong (Martin style) fractals as I have done in several previous articles on this site (including one in "pure" javascript), or if you are extra ambitious, there are several good implementations of the Mandelbrot / Julia set in C# that would be easy to plug into the timer callback. 

You can download the sample Visual Studio 2008 project here.
By Peter Bromberg   Popularity  (6994 Views)