In this post I will show you a really cool library that allows you to build a nice menu for your GUI like in the preview picture.
How to get sample ?
What is it ?
The library I will talk about is called RadialMenu.
It has been created by Julien Marcou who did a really nice job on it.
Where to find it ?
You can find this library on this Gitub repo. Everything is very well explained.
You can find also the Nuget package on the Nuget websit, here.
How to install it ?
1 / To install it, download the Github repo folder in order to get the assembly file.
Now you have downloaded the repository, we will create our project.
2 / Create a folder assembly
3 / Create a folder resources
My project will look like as below:
4 / In the downloaded folder go to the resources folder
5 / Copy the RadialMenu.dll file to the resources folder previously created
6 / Go in the RadialMenuDemo > Utils folder
7 / Copy the Icons.xml file to the resources folder previously created
Now we have everything we need, let us see how to use it.
How to use it ?
XAML part
Copy the below lines in the Window part.
Copy the below Resources part below the Window part.
Now to create your menu follow the below structure.
As you may noticed the menu is divised in two parts
- The centralitem menu this one that allows you to close the menu
- The other menu
As mentioned above, you can choose easily your icon to display in the menu.
In order to have an overview of what looks like each icon, you can go to this site.
If you type for instance user in the search bar, it will display the below icons. Choose yours and replace the character "." by a "_".
In the above example to use the icon "appbar.user" we will change it "appbar_user".
PS1 part
Add the below line to load the RadialMenu assembly.
The only thing you will need to use it is to open or hide the menu.
It will work like the Flyout part from Mahapps.
Indeed to open or close the menu proceed as below:
The menu action should be done from a button.
In the below example I created a simple menu which is displayed after loading the GUI.
Once you click on the close button, it will hide the menu and display a button that allows you to display again the menu.
You can also call a second menu from an item.
For that just create a second menu structure by changing its name.
See below an example of a second menu.
How to change the design ?
It's possible to custmize the menu design.
For that copy the below part just below the line <RadialMenu:RadialMenu Name="MainMenu" IsOpen="true">.
See below the new design in action.
Of course you can customize it as you want.
Menu in action
See below an idea about how to use this menu in your GUI.
In this example I use Mahapps and the RadialMenu.
A button to interact (open/close) the menu is localised in the titlebar.
You can find this example in the With_datagrid folder from the link above in my post or here.
