Advertisement

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.


This work is licensed under a Creative Commons Attribution By license.

  1. 8/4/2008 5:06 PM | # re: Silverlight tip: shortcut simple properties
    The question is why the Height and Width are accessed directly and not Top and Left which are almost used more frequently then Height and Width or at least as often as them.

    I mean, lets go, give us at least these 2 others and I think people will all be happy.
  2. 8/4/2008 6:26 PM | # re: Silverlight tip: shortcut simple properties
    The reason for the difference between Width/Height and Top/Left is that width and height always apply to a control, whereas Top/Left or X/Y only apply if the control is placed inside a Canvas. That's why when you set X and Y you actually use the attached properties of Canvas.
  3. 8/5/2008 6:26 AM | # re: Silverlight tip: shortcut simple properties
    Once you get familiar working with DPs and APs this is no big deal. If you create your own, you can use the snippet propdp which will generate you a WPF DP with standard clr property accessors.

    A Silverlight DP is the same as a WPF DP except for the last parameter. In WPF it is UIPropertyMetadata, in Silverlight Beta 2 it is PropertyMetadata.

    If you search the web you should be able to find a Silverlight DP snippet to save an extra 2 seconds :)
  4. 8/7/2008 10:43 AM | # re: Silverlight tip: shortcut simple properties
    Actually the prefered way of getting/setting Canvas.Left/Top is by using the static methods provided by the panel - Canvas in our case:

    Canvas.GetLeft/GetTop/SetLeft/SetTop.

    Also you can create a static class with the extension methods for the FrameworkElement:

    public static class FrameworkElementExtensions
    {
    public static double GetLeft(this FrameworkElement element)
    {
    return Canvas.GetLeft(element);
    }
    public static double GetTop(this FrameworkElement element)
    {
    return Canvas.GetTop(element);
    }
    public static void SetLeft(this FrameworkElement element, double value)
    {
    Canvas.SetLeft(element, value);
    }
    public static void SetTop(this FrameworkElement element, double value)
    {
    Canvas.SetTop(element, value);
    }
    }

    and use it easily:

    button.SetLeft(button.GetLeft() + 10);
    button.SetTop(button.GetTop() + 10);
  5. 8/13/2008 9:12 AM | # re: Silverlight tip: shortcut simple properties
    It's also worth mentioning that after encapsulating your GetValue and SetValue calls, you can simplify your property assignments even more by using object initializer feature in C# 3.0:

    MyCircle circle = new MyCircle { X = 200, Y = 200 };
  6. 4/21/2009 6:50 PM | # re: Silverlight tip: shortcut simple properties
    What about Silverlight 2.0?

    tb.SetValue(Canvas.TopProperty, 50.0);

    has no effect. upperleft corner everytime.
  7. 4/21/2009 9:17 PM | # re: Silverlight tip: shortcut simple properties
    alek -- can you give me more to go on? what object are you using, does it have a width, etc., etc.

 
Please add 7 and 4 and type the answer here:
First time here? You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting! (hide this)