Creating Silverlight Custom Panel

I like Silverlight and WPF about the power of layout system. Sometimes, you want to control where items appear on the screen, and maybe control their size as well. In order to do this, you have to create your own version of a panel in which you do all the work when it comes to positioning and sizing the items.

In this article I will explain how to create custom panel. I’m going to create a panel which positions elements on Sin function.

First you need to know about Measuring and Arranging. The Silverlight layout system starts by doing a Measure pass. This is when each child element tells the layout system its desired size. This includes the panel itself. Then there is an Arrange pass. Here the final size and position of each child’s bounding box is specified as well as the final size of the panel itself.

For creating custom panel, you need to implement just three things:

  1. Create a class that derives from Panel;
  2. Override a MeasureOverride method;
  3. Override an ArrangeOverride method.

Let’s start. I created a class and defined dependency property: Angle – this property defines an angle between panel’s children:

Also I added the one attached property: AngleThickness – this property defines a thickness between panel’s children.

In this way, we can now set and retrieve properties associated with objects, without those objects having any provision for the properties in the first place. This is a powerful way to augment types to track additional data.

    So result XAML could be like this:

Next step is overriding of MeasureOverride and ArrangeOverride methods:

As a result we can get something like this:

Of course it’s a really basic but with this technology we can create awesome effects.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s