WPF Radial Context Menu (Pie Menu)

I recently wanted to improve the boring context menu, a quick Google search found radial context menu (or pie menu). I couldn’t find a simple generic example so thought I would write one.

Rather than write a menu I decided to write a generic radial panel that can be used to host any items, to use it as a menu I display the panel in a transparent Popup which is triggered from a ToggleButton. You could modify this to be displayed on a context menu or wherever you require. My usage is displayed below:

Example Usage

To create this using the panel is fairly simple, the following XAML is the source for the above image.


    <Grid>
        <ToggleButton Name="button" Height="20" Width="50" Content="Click"/>
        <Popup IsOpen="{Binding IsChecked, ElementName=button}"  PlacementTarget="{Binding ElementName=button}" Placement="Center" PopupAnimation="Fade" AllowsTransparency="True">
            <WpfApplication1:RadialPanel OuterRadius="60" InnerRadius="30" Angle="360" IsClockwise="True" StartAngle="0" ShowBorder="True" ShowPieLines="False" >
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\1.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\2.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\3.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\4.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\5.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\6.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\7.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\8.png" />
                </Button>
                <Button Width="20" Height="20" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                    <Image Source="Images\9.png" />
                </Button>
            </WpfApplication1:RadialPanel>
        </Popup>
    </Grid>

It is configurable too, only the circle radius are required, the rest have default values but can be modified:

Inner radius (Required)
Outer radius (Required)
Clockwise/Anti-clockwise display
Start angle
Angle of display
Show/hide borders/background
Show/hide pie lines for each section
Background color
Background opacity

So for example you could only display items in a semi circle with no border etc you can simply modify the properties shown in the XAMl above.

The full source for the RadialPanel and example can be found on my SkyDrive:

https://skydrive.live.com/redir?resid=898DB13CEAF6C0AE!122

Advertisements

6 thoughts on “WPF Radial Context Menu (Pie Menu)

  1. I stumbled upon this blog while searching for a solution to the exact same problem (creating custom context menus) for a class project. I was wondering what what is your policy (license-wise) was for the code posted here, as our professor allows us to use open-source code in our projects, provided we cite sources, document it, etc.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s