RadialMenu Control – Windows 8

image

This control was inspired from OneNote Windows 8 modern app. It allows you to show a nice circular contextual menu. Let’s start by adding the control to the root grid:

<radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" />

image

To open the radial menu, IsOpen property should be changed to true

<radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True" />

image

Now lets start adding couple of items to it, this is how the xaml looks like:

<radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True">            <radial:RadialMenuItem Icon="&#xE186;" Text="Color" />            <radial:RadialMenuItem Icon="&#xE185;" Text="Font" />            <radial:RadialMenuItem Icon="&#xE19B;" Text="Bold" />            <radial:RadialMenuItem Icon="&#xE1A2;" Text="Alignment" />            <radial:RadialMenuItem Icon="&#xE16F;" Text="Copy" />            <radial:RadialMenuItem Icon="&#xE16D;" Text="Paste" />        </radial:RadialMenu>

image

The index of the menu items can be changed by changing the RadialMenuIndex value:

<radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True">    <radial:RadialMenuItem Icon="&#xE186;" Text="Color" />    <radial:RadialMenuItem Icon="&#xE185;" Text="Font" />    <radial:RadialMenuItem Icon="&#xE19B;" Text="Bold" />    <radial:RadialMenuItem Icon="&#xE1A2;" Text="Alignment" />    <radial:RadialMenuItem Icon="&#xE16F;" Text="Copy" RadialMenuIndex="5" />    <radial:RadialMenuItem Icon="&#xE16D;" Text="Paste" RadialMenuIndex="6" /></radial:RadialMenu>

image

Now let’s add more items inside each root menu item:

<radial:RadialMenu x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True">    <radial:RadialMenuItem Icon="&#xE186;" Text="Color" >        <radial:RadialMenuItem />    </radial:RadialMenuItem>    <radial:RadialMenuItem Icon="&#xE185;" Text="Font" >        <radial:RadialMenuItem />    </radial:RadialMenuItem>    <radial:RadialMenuItem Icon="&#xE19B;" Text="Bold" >        <radial:RadialMenuItem Icon="&#xE19B;" Text="Bold" />        <radial:RadialMenuItem Icon="&#xE199;" Text="Italic" />        <radial:RadialMenuItem Icon="&#xE19A;" Text="Underline" />        <radial:RadialMenuItem Icon="&#xE10C;" Text="More" >            <radial:RadialMenuItem Icon="&#xE108;" Text="Minus" />            <radial:RadialMenuItem Icon="&#xE109;" Text="Plus" />            <radial:RadialMenuItem Icon="&#xE10A;" Text="Cross" />            <radial:RadialMenuItem Icon="&#xE10B;" Text="Yes" />        </radial:RadialMenuItem>    </radial:RadialMenuItem>    <radial:RadialMenuItem Icon="&#xE1A2;" Text="Align" >        <radial:RadialMenuItem Icon="&#xE1A0;" Text="Right" />        <radial:RadialMenuItem Icon="&#xE1A1;" Text="Center" />        <radial:RadialMenuItem Icon="&#xE1A2;" Text="Left" />    </radial:RadialMenuItem>    <radial:RadialMenuItem Icon="&#xE16F;" Text="Copy" RadialMenuIndex="5" />    <radial:RadialMenuItem Icon="&#xE16D;" Text="Paste" RadialMenuIndex="6" /></radial:RadialMenu> 

image   image

The default color for the RadiaMenu is Purple, which can be changed by assign the ThemeColor:

<radial:RadialMenu ThemeColor="DarkGreen" x:Name="menu" Icon="A" VerticalAlignment="Center" HorizontalAlignment="Center" IsOpen="True">    ...</radial:RadialMenu>

image    image

To add command once the buttons are clicked, you can either register the event “Click” or with MVVM bind the command to Command property:

<radial:RadialMenuItem Icon="&#xE186;" Text="Color" Click="Menu_Click" /><radial:RadialMenuItem Icon="&#xE185;" Text="Font" Command="{Binding FontCommand}" />

RadialMenuService

So far what we saw is the RadialMenu control, and how it can be created.

Of course you can control how/where/when the control should be shown. But you can also use RadialMenuService, which basically do that for you. The RadialMenu will show whenever the user right click on mouse, or hold and tab on touch devices.

<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <radial:RadialMenuService.RadialMenu>        <radial:RadialMenu ThemeColor="DarkGreen" x:Name="menu" Icon="A">            ...        </radial:RadialMenu>    </radial:RadialMenuService.RadialMenu></Grid>

This video shows how the final result will look like:

You can find the control by searching for “RadialMenu” on Nuget, or by typing the following command in the Nuget console:

Install-Package RadialMenu

You’re free to use this control for any free or commercial project

Please reach me for any feature request (or bugs report) on Twitter @TareqAteik

Tareq Ateik

Read more posts by this author.