In my previous post I talked about authoring a custom panel called RadialPanel.  In this post, I'd like to give a better impression of what it looked like and how you might go about using it.  So, lets get started: Below is an example of the RadialPanel with 10 Buttons.

Building RadialPanel

First, I actually built the code for RadialPanel in VS but, after compiling, I was able to make quick mock-ups with XamlPad.  To compile, I actually just  created a new class library project, added the appropriate references for the given namespaces, wrote up the code and pressed F5.  For use in XamlPad, I just copied the built assembly - CustomPanelLibrary in this case - to the same working directory for my SDK environment.

The Mapping PI

My first step after starting up XamlPad was to add the Mapping PI, below.  First, I pointed to the appropriate CLR namespace (MyCustomPanels); second, I created an XmlNamespace (which I then, later, associated with the namespace prefix "custom".)  Third, I pointed to the appropriate assembly CustomPanelLibrary.  The parser uses this to find the RadialPanel type.

<?Mapping ClrNamespace="MyCustomPanels" XmlNamespace="MyCustomPanelsXmlNamespace" Assembly="CustomPanelLibrary" ?>

Using RadialPanel in Markup

Okay, now to actually use the RadialPanel.  Easy - I just use it by name prefixed with the appropriate xmlns prefix, drop in a few Buttons and voila!

<?Mapping ClrNamespace="MyCustomPanels" XmlNamespace="MyCustomPanelsXmlNamespace" Assembly="CustomPanelLibrary" ?>

<Grid
 xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
 xmlns:custom="MyCustomPanelsXmlNamespace"
 >
 
 <custom:RadialPanel Background="gold" HorizontalAlignment="Center" VerticalAlignment="center">
  <Button>Button 0</Button>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Button>Button 4</Button>
  <Button>Button 5</Button>
  <Button>Button 6</Button>
  <Button>Button 7</Button>
  <Button>Button 8</Button>
  <Button>Button 9</Button>
 </custom:RadialPanel>

</Grid>

Getting Creative

I have primarily used this custom panel to show off the flexibility of Avalon's layout system but another Microsoft employee, Steve White, actually had a good use for RadialPanel in something he called a TwelveToneClock; he gave me the screenshot, below, showing it in use (thanks, Steve!)  RadialPanel is a great example of a panel that probably doesn't make sense for us to ship out of the box but might be needed in specific scenarios, such as Steve's.

Final Thoughts: Radial Menu

Okay, one more example of using RadialPanel - in a template!  Yes, you can change the layout of the controls in Avalon using various panels, including custom ones.  I'm going to skip a lot of explaining and show how you might do this with a Menu; screenshots and markup are below.

<?Mapping ClrNamespace="MyCustomPanels" XmlNamespace="MyCustomPanelsXmlNamespace" Assembly="CustomPanelLibrary" ?>
<Grid
 xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
 xmlns:custom="MyCustomPanelsXmlNamespace"
 xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
 >
 <Grid.Resources>
  <ControlTemplate x:Key="RadialMenu" TargetType="{x:Type Menu}">  
   <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
    <custom:RadialPanel IsItemsHost="true"/>
   </Border>
  </ControlTemplate>

  <Style TargetType="{x:Type MenuItem}">
   <Setter Property="FontSize" Value="20"/>
  </Style>

 </Grid.Resources>

 

 <Menu Template="{StaticResource RadialMenu}" HorizontalAlignment="center" VerticalAlignment="center">
  <MenuItem Header="File">
   <MenuItem.Items>
    <MenuItem Header="Save"/>
    <MenuItem Header="Save As"/>
    <MenuItem Header="Exit"/>
   </MenuItem.Items>
  </MenuItem>
  <MenuItem Header="Edit">
   <MenuItem.Items>
    <MenuItem Header="Cut"/>
    <MenuItem Header="Copy"/>
    <MenuItem Header="Paste"/>
   </MenuItem.Items>
  </MenuItem>
  <MenuItem Header="Format">
   <MenuItem.Items>
    <MenuItem Header="Font"/>
    <MenuItem Header="Colors"/>
   </MenuItem.Items>
  </MenuItem>
  <MenuItem Header="Tools">
   <MenuItem.Items>
    <MenuItem Header="Tool1"/>
    <MenuItem Header="Tool2"/>
   </MenuItem.Items>
  </MenuItem>
  <MenuItem Header="Window">
   <MenuItem.Items>
    <MenuItem Header="Window"/>
   </MenuItem.Items>
  </MenuItem>

  <MenuItem Header="Help">
   <MenuItem.Items>
    <MenuItem Header="Help"/>
    <MenuItem Header="About"/>
   </MenuItem.Items>
  </MenuItem>

 </Menu>
  
</Grid>