Silverlight tip: shortcut simple properties

I’ve seen the rumbling a few times now about property setting in Silverlight.  The rumblings are along the lines of “why do I have to use SetValue for setting simple properties like the x/y positioning?”  To those points, I agree from a fundamental standpoint.  From a technical standpoint SetValue is there and serves a great purpose for providing a common way of setting properties on XAML elements regardless of the element.  As a developer, I like it actually.  I do, however, see the point about wanting to set simple properties and it just looks a little verbose.  Take for instance setting the x/y positioning of an Ellipse (in code):

   1: Ellipse circle = new Ellipse();

   2: circle.Width = 10;

   3: circle.Height = 10;

   4: circle.SetValue(NameProperty, "MyCircle");

   5: circle.SetValue(Canvas.TopProperty, 200);

   6: circle.SetValue(Canvas.LeftProperty, 200);

You’ll see the last three lines seem a little verbose when setting simple properties.  Most of the time you’ll run into this using your own custom controls or while providing controls to others.  Here’s a tip to simplify this process…abstract these simple ones away if you know they will be used frequently.

Developers familiar with Flash/Flex will note that for something like the above example, there are .x and .y values.  We can do the same with Silverlight by ensuring our controls follow a pattern we anticipate our developers will use.  Let’s say we have a control called MyCircle which contains only an Ellipse.  We know that our consumers of our control will be animating our circle control using various calculations and moving x/y coordinates frequently.  In our control we can do this (assuming our XAML has an Ellipse in a Canvas element):

   1: public double X

   2: {

   3:     get { return this.GetValue(Canvas.LeftProperty) as double; }

   4:     set { this.SetValue(Canvas.LeftProperty, value); }

   5: }

   6:  

   7: public double Y

   8: {

   9:     get { return this.GetValue(Canvas.TopProperty) as double; }

  10:     set { this.SetValue(Canvas.TopProperty, value); }

  11: }

Now when developers need to move this control around they can simplify things by writing code like this:

   1: MyCircle circle = new MyCircle();

   2: circle.X = 200;

   3: circle.Y = 200;

By doing this we’ve abstracted out the SetValue/GetValue functions (while still there if needed) for some simple properties.  I like this tip a lot and generally is helpful when you need quick/simple access to properties like this.  I learned this tip from Rick Barraza who incidentally does work in Flash, Flex, WPF and Silverlight.  He uses this technique when doing a lot of manipulation of objects that involve math, etc. – in the end the result is the same, but this tip might save you some precious keystrokes.