Last week I found myself needing a Silverlight layout control that arranges its items radially so I could use it to template a ListBox. A quick Web search revealed a number of RadialPanel implementations, but none that offered the features I needed. For example, I wanted to be able to rotate the items in the panel to create a spoked arrangement. But I also wanted to have the option of NOT rotating the items to achieve a more traditional layout.

So I built a RadialPanel that supports both options. It has three key properties (all dependency properties) that you can use to configure it:

  • Radius, which specifies the radius of the radial layout
  • ItemAlignment, which specifies whether items are left, center, or right-aligned 
  • ItemOrientation, which specifies whether items are upright or rotated

To demonstrate, I declared a ListBox containing eight colored rectangles and assigned a RadialPanel to the ListBox’s ItemsPanel property:

<ListBox Width=”600″ Height=”600″>

  <ListBox.ItemsPanel>

    <ItemsPanelTemplate>

      <custom:RadialPanel Radius=”200″ ItemAlignment=”Center”

        ItemOrientation=”Upright” />

    </ItemsPanelTemplate>

  </ListBox.ItemsPanel>

  <Rectangle Width=”75″ Height=”75″ Fill=”Red” />

  <Rectangle Width=”75″ Height=”75″ Fill=”Orange” />

  <Rectangle Width=”75″ Height=”75″ Fill=”Yellow” />

  <Rectangle Width=”75″ Height=”75″ Fill=”Green” />

  <Rectangle Width=”75″ Height=”75″ Fill=”Blue” />

  <Rectangle Width=”75″ Height=”75″ Fill=”Darkblue” />

  <Rectangle Width=”75″ Height=”75″ Fill=”Purple” />

  <Rectangle Width=”75″ Height=”75″ Fill=”#ff80c0″ />

</ListBox>

Here’s what the resulting ListBox looked like:

RadialPanel with Upright Items 

Next, I created another RadialPanel ListBox, but this time I set ItemOrientation to “Rotated” and used TextBlocks as ListBox items. I also set ItemAlignment to “Left” to align the TextBlocks along the inside radius:

<ListBox Width=”600″ Height=”600″ FontSize=”20″>

  <ListBox.ItemsPanel>

    <ItemsPanelTemplate>

      <custom:RadialPanel Radius=”150″ ItemAlignment=”Left”

        ItemOrientation=”Rotated” />

    </ItemsPanelTemplate>

  </ListBox.ItemsPanel>

  <TextBlock Text=”Jeff Prosise” Foreground=”Red” />

  <TextBlock Text=”Jeffrey Richter” Foreground=”Orange” />

  <TextBlock Text=”John Robbins” Foreground=”Green” />

  <TextBlock Text=”Steve Porter” Foreground=”Blue” />

  <TextBlock Text=”Keith Rome” Foreground=”Blue” />

  <TextBlock Text=”Rik Robinson” Foreground=”Darkblue” />

  <TextBlock Text=”Andy Hopper” Foreground=”Purple” />

  <TextBlock Text=”Sergio Lascio” Foreground=”#ff80c0″ />

   

</ListBox>

And here was the result:

RadialPanel with Rotated Items 

I posted the source code in case you need a RadialPanel, too. It works in Silverlight 2 and in Silverlight 3 Beta 1. Feel free to use my RadialPanel in projects of your own, with one condition: let me know if you find bugs. I think I accounted for everything, but custom layout controls are tricky to write, and many of the custom layout controls that are bandied about the Web aren’t very robust.

Incidentally, if you’re coming to TechEd next week and want to see lots of cool Silverlight samples, drop by my Silverlight precon on Sunday. The last couple of hours of the day will be devoted to Silverlight 3, so it’s sure to be a blast!