RadialPanel - A Picture's Worth a Thousand Words

  • Article

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="https://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="https://schemas.microsoft.com/winfx/avalon/2005"
xmlns:custom="MyCustomPanelsXmlNamespace"
xmlns:x="https://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>