Adding Radial Menu Buttons

Now that you have a control like the one above, buttons are added by adding instances of RadialMenuButton to the Buttons property of your radial menu.

<Page xmlns:rm="using:RadialMenuControl.UserControl" xmlns:rmb="using:RadialMenuControl.Components">
    <rm:RadialMenu x:Name="MyRadialMenu" Diameter="300" StartAngle="-22.5" OuterArcThickness="20" CenterButtonBorder="Black" CenterButtonIcon="&#x1f369;">
        <rm:RadialMenu.Buttons>
            <rmb:RadialMenuButton x:Name="Eraser" Label="Eraser" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Radio" />
            <rmb:RadialMenuButton x:Name="Pen" Label="Pen" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Radio" />
            <rmb:RadialMenuButton x:Name="Party" Label="Party" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Simple" />
        </rm:RadialMenu.Buttons>
    </rm:RadialMenu>
</Page>

There are four different types of buttons: Simple, Toggle, Radio, and Custom. Simple have no predefined behavior. Toggle buttons can either be True or False, while Radio buttons are Toggle buttons that automatically deselect all other Radio buttons in the same menu when selected. Custom buttons are capable of holding a string value which the user can input directly on the button.

All of them share the same properties and methods:

Properties: Label & Icon

Name	Type	Description
Label	string	Label, displayed in the inner portion of the button
LabelSize	int	Font Size for the label
IsLabelHidden	bool	Should the label be hidden?
Icon	string	Text-based icon, displayed in a TextBox (usually used with icon fonts)
IconFontFamily	FontFamily	Font for the text-based icon
IconSize	int	Font size for the text-based icon
IconForegroundBrush	Brush	ForegroundBrush for the text-based icon
IconImage	ImageSource	A ImageSource for the icon. If set, the text-based icon will be hidden.

Properties: Colors & Thickness

You can configure colors and thickness for three elements. Each button is represented by a "pie slice", which has an inner and an outer portion - as well as optionally an "indication arc", which is a thin line right below the outer arc, indicating that the current button is selected.

Name	Type	Description
InnerNormalColor	Color?	Normal color for the inner portion of the button
InnerHoverColor	Color?	Hover color for the inner portion of the button
InnerTappedColor	Color?	Tapped color for the inner portion of the button
InnerReleasedColor	Color?	Released color for the inner portion of the button
OuterHoverColor	Color?	Hover color for the outer portion of the button
OuterNormalColor	Color?	Normal color for the outer portion of the button
OuterDisabledColor	Color?	Disabled color for the outer portion of the button
OuterTappedColor	Color?	Tapped color for the outer portion of the button
OuterThickness	double?	Thickness of the outer arc, on the outer side of the button
IndicationArcDistanceFromEdge	double?	Distance from the inner part of the outer band to the indication arc
UseIndicationArc	bool?	When set to true, an indication arc will be placed on this button
IndicationArcColor	Color?	Color for the indication arc
IndicationArcStrokeThickness	double?	The Stroke thickness of the indication arc
StrokeColor	Color?	Color of the stroke around the whole "pie slice"
StrokeThickness	double?	Thickness of the stroke around the "pie slice"

Properties: Value, Type & Submenus

Buttons can be host to a submenu or a custom submenu. Normal submenus are just another RadialMenu - it will be openend whenever the user presses the outer portion of your button. A custom submenu is a special submenu, like the RadialMeterMenu, which is an interactive gauge, or the ListSubmenu, which is a long list selector.

Name	Type	Description
Submenu	RadialMenu	A submenu, reachable by clicking on the button
ButtonType	ButtonType	Button type, indicating the way users can interact with this button
Value	object	Value of this button
MenuSelected	MenuSelected	If the button is a radio button and selected on behalf of the whole RadialMenu, this value will be true (false otherwise)
CustomMenu	MenuBase	CustomMenu behind the button

Properties: Events

These booleans are simple shortcuts, reporting whether or not buttons have events registered on them.

Name	Type	Description
HasOuterArcEvents	bool	Does this radial menu button have events on the outer arc?
HasOuterArcAction	bool	Does this radial menu button have actions on the outer arc?

Events

Name	Description
ValueChanged	Fired when the value of this button is changed
InnerArcPressed	Fired when the inner arc of the button has been pressed (mouse, touch, stylus)
InnerArcReleased	Fired when the inner arc of the button has been released (mouse, touch, stylus)
OuterArcPressed	Fired when the outer arc of the button has been pressed (mouse, touch, stylus)
OuterArcReleased	Fired when the outer arc of the button has been released (mouse, touch, stylus)

Methods

Name	Parameters	Description
SetColors	Dictionary<string, Color> colors	Allows the use of key/value pairs to set the colors
InnerArcPressed		Fired when the inner arc of the button has been pressed (mouse, touch, stylus)

The Different Button Types

Simple

A Simple type button is one that triggers an event, but it does not contain any value. To add a Simple type button, set Type to "Simple".

<rmb:RadialMenuButton x:Name="Party" Label="Party" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Simple" />

Toggle

A Toggle type button contains a boolean value of either true or false. To add a Toggle type button, set Type to "Toggle".

<rmb:RadialMenuButton x:Name="Bold" Label="Bold" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Toggle" />

When the button is clicked, its value is set to the opposite of the current value. By default the visual state of the button is bind to the current boolean value of the button. For example, if a toggle button is selected and its value is true, then the pie slice is set to the InnerReleased visual state to indicate it has been selected. If the button's value is false, then the pie slice is set to the InnerNormal visual state to indicate it is currently not selected.

Radio

A Radio type button can contain any value of any type that the application provides. To add a Radio type button, set Type to "Radio" and provide a value for the button.

<rmb:RadialMenuButton x:Name="RedColor" Label="Red" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Radio" Value="#..."/>
<rmb:RadialMenuButton x:Name="BlueColor" Label="Blue" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Radio" Value="#..."/>
<rmb:RadialMenuButton x:Name="YellowColor" Label="Yellow" Icon="" IconFontFamily="Segoe MDL2 Assets" Type="Radio" Value="#..."/>

In a given pie, all Radio buttons added to the pie belong to a Radio button set such that when one Radio button is selected, all other Radio buttons in the pie become deselected. In the example above, if the Red button is clicked, then the RedColor RadialMenuButton's MenuSelected field is set to true and all other Radio buttons in the pie are deselected such that their MenuSelected fields are set to false. In turn, the SelectedItem field for the Pie is now set to the current selected Radio button.

Custom

A Custom type button allows users to input custom values. To add a Custom type button, set Type to "Custom" and provide a default value for the input control.

<rmb:RadialMenuButton x:Name="Pen1CustomStrokeButton" IconImage="Icons/stroke.png" Label="Custom Stroke" Type="Custom" Value="5" />

When the pie slice is clicked, by default all the text in the TextBox is selected and the TextBox is focused to allow user to enter a value. To get the custom value the user entered, you can catch the event in your application. Take the example from above, create an event handler for the ValueChanged event.

Pen1CustomStrokeButton.ValueChanged += Pen1CustomStrokeButton_ValueChanged;

// ...

private void Pen1CustomStrokeButton_ValueChanged(object sender, RoutedEventArgs args)
{
    Debug.WriteLine("User updated value to: " + (sender as RadialMenuButton)?.Value);
}