C# and Silverlight provide a rich set of layout controls that can be used in constructing elegant user interfaces, including a do-it-yourself Canvas class that allows you to manually position elements on it’s surface.

Positioning Elements in Code

With a Canvas you’re almost always going to want to have some code that positions the child elements.  To move things about, the property you are concerned with is not, as you might expect, a Position or Left/Top property on the child element, but rather it is a property of the Canvas that can be set on a child element.

There are two ways I have seen used to set the Canvas.Left or Canvas.Top property on a child element, and in some cases you’ll want to distinguish between the two.

The first way is to call SetValue on the Child element with the DependencyProperty you want to set, Canvas.LeftProperty or Canvas.TopProperty.   The second way is to call Canvas.SetLeft or Canvas.SetTop and pass in the UIElement to set it on.

When Speed Matters

In some situations it can be helpful to understand the difference in performance of the various ways of setting these properties.

I could not find any information comparing the performance of these two methods so I wrote a small unit test (below) that could tell me which was faster.  It turns out that on average, calling the Canvas.SetLeft/SetTop methods are about 3 times faster than calling Element.SetValue with the DependencyProperty.

When you think about that for a moment, it begins to make sense, because the Element.SetValue method takes a DependencyProperty and a value, which means that it resolve the property to end up at it’s destination.  On the other hand the SetLeft/SetTop methods already know what data they’re setting (they even explicitly specify it in the naming!), which means they should have a pretty direct path to the data.

Testing Performance

I’ve provided below the source code that I used to generate the data for this graph so you can try it for yourself.

public void TestCanvasElementPositioning()
{
   long elapsedSetValueTop = 0;
   long elapsedSetTop = 0;
   long elapsedSetValueLeft = 0;
   long elapsedSetLeft = 0;
   var timer = new Stopwatch();

   var testCanvas = new Canvas();
   var testChild = new Ellipse();
   testCanvas.Children.Add(testChild);

   // How many iterations to time
   const long iterations = 10000;

   // Canvas.SetLeft
   timer.Start();
   for (int i = 0; i < iterations; i++)
      Canvas.SetLeft(testChild, (double)i % 10);
   timer.Stop();
   elapsedSetLeft = timer.ElapsedMilliseconds;
   timer.Reset();

   // Element.SetValue(Canvas.LeftProperty)
   timer.Start();
   for (int i = 0; i < iterations; i++)
      testChild.SetValue(Canvas.LeftProperty, (double)i % 10);
   timer.Stop();
   elapsedSetValueLeft = timer.ElapsedMilliseconds;
   timer.Reset();

   testCanvas = new Canvas();
   testChild = new Ellipse();
   GC.Collect();

   // Element.SetValue(Canvas.TopProperty)
   timer.Start();
   for (int i = 0; i < iterations; i++)
      testChild.SetValue(Canvas.TopProperty, (double)i % 10);
   timer.Stop();
   elapsedSetValueTop = timer.ElapsedMilliseconds;
   timer.Reset();

   // Canvas.SetTop
   timer.Start();
   for (int i = 0; i < iterations; i++)
      Canvas.SetTop(testChild, (double)i % 10);
   timer.Stop();
   elapsedSetTop = timer.ElapsedMilliseconds;
   timer.Reset();

   Assert.IsTrue(elapsedSetLeft < elapsedSetValueLeft,
                 "Expected SetLeft to be less than SetValue");
   Assert.IsTrue(elapsedSetTop < elapsedSetValueTop,
                 "Expected SetTop to be less than SetValue");
}

Some dynamic languages like C# and ActionScript allow you to put metadata inline with your code.  Metadata can be a really cool way to make extra data available to you at runtime.  To make full use of it, you need to know how to specify this metadata and then how to access it.

MetadataSample.cs

The sample below shows how to specify a custom Attribute called “SomeExtraData”, use it on a class “SomeClass” and retrieve the custom data in code for further use.

using System;
using System.Diagnostics;

namespace SilverShorts
{
   // This class makes the [SomeExtraData] tag below valid
   class SomeExtraData : Attribute
   {
      public string SomeField;
   }

   // Tag this class with a custom attribute
   [SomeExtraData (SomeField="SomeValue")]
   class SomeClass
   {
      public SomeClass()
      {
         // Retrieve the value of the SomeField item in the metadata
         // tag on this class.
         Type t = typeof(SomeClass);
         SomeExtraData attr = t.GetCustomAttributes(false)[0] as SomeExtraData;
         Debug.WriteLine("SomeExtraData.SomeField = " + attr.SomeField);
      }
   }
}

A word of caution: Be aware of how often you perform operations like querying custom attributes in the constructor above.  The system reflection calls can negatively impact performance if you abuse them. I won’t preach about it, just use them only when you need to.