Configuration

This help topic describes the basic properties used to configure the way RadRadialMenu looks & behaves.

Open the RadialMenu

Initially RadRadialMenu is closed, you should click on the RadialMenuButton in order to open it and show its items. IsOpen boolean property of the RadialMenu allows you to make it open by default. Example 1 shows how IsOpen can be set.

Example 1: Setting IsOpen property

<telerik:RadRadialMenu IsOpen="True"> 
    <!--...--> 
</telerik:RadRadialMenu>

Automatically Size the MenuItems

Since the R1 2021 release, the RadRadialMenu can auto-size its items. This enables the option of defining more or less than 8 items per level. In order to turn on this feature, set the AutoSizeMenuItems property of the RadRadialMenu to True.

When the items are auto-sized, the start angle of the first item is automatically calculated. If you want the StartAngle property to be respected in that case, you can set the AutoCalculateStartAngle property to False.

Example 2: Setting the AutoSizeMenuItems property

<telerik:RadRadialMenu IsOpen="True" AutoSizeMenuItems="True"> 
    <telerik:RadRadialMenuItem Header="Item 1"> 
        <telerik:RadRadialMenuItem Header="Item 1.1" /> 
        <telerik:RadRadialMenuItem Header="Item 1.2" /> 
        <telerik:RadRadialMenuItem Header="Item 1.3" /> 
        <telerik:RadRadialMenuItem Header="Item 1.4" /> 
        <telerik:RadRadialMenuItem Header="Item 1.5" /> 
        <telerik:RadRadialMenuItem Header="Item 1.6" /> 
        <telerik:RadRadialMenuItem Header="Item 1.7" /> 
        <telerik:RadRadialMenuItem Header="Item 1.8" /> 
        <telerik:RadRadialMenuItem Header="Item 1.9" /> 
        <telerik:RadRadialMenuItem Header="Item 1.10" /> 
        <telerik:RadRadialMenuItem Header="Item 1.11" /> 
        <telerik:RadRadialMenuItem Header="Item 1.12" /> 
    </telerik:RadRadialMenuItem> 
    <telerik:RadRadialMenuItem Header="Item 2" /> 
    <telerik:RadRadialMenuItem Header="Item 3" /> 
    <telerik:RadRadialMenuItem Header="Item 4" /> 
</telerik:RadRadialMenu>

When the AutoSizeMenuItems property is True, menu items on all levels will be auto-sized. If you want to dynamically control this, you can handle the Navigating event and set the AutoSizeMenuItems property of the event arguments.

Figure 1: RadRadialMenu with less than 8 Autosized Items

RadRadialMenu with less than 8 autosized items

Figure 2: RadRadialMenu with more than 8 Autosized Items

RadRadialMenu with more than 8 autosized items

Change the size of the RadialMenu

The size of RadRadialMenu is set through MinWidth and MinHeight properties. Both should be set to the same value which refers to the diameter of the circle representing the menu.

Example 3: Setting MinWidth and MinHeight properties

<telerik:RadRadialMenu IsOpen="True" MinWidth="200" MinHeight="200"> 
    <telerik:RadRadialMenuItem Header="Item 1" /> 
    <telerik:RadRadialMenuItem Header="Item 2" /> 
    <telerik:RadRadialMenuItem Header="Item 3" /> 
</telerik:RadRadialMenu>

Figure 3 shows how the RadialMenu looks in smaller size.

Figure 3: Setting MinWidth and MinHeight properties

Rad Radial Menu Configuration 03

Change the StartAngle property

StartAngle property is used to set the angle at which the first RadRadialMenuItem will be positioned.

Example 4: Setting StartAngle property

<telerik:RadRadialMenu IsOpen="True" StartAngle="180" > 
    <telerik:RadRadialMenuItem Header="Item 1" /> 
    <telerik:RadRadialMenuItem Header="Item 2" /> 
    <telerik:RadRadialMenuItem Header="Item 3" /> 
</telerik:RadRadialMenu>

Figure 4 shows how the RadialMenu looks with different settings of the StartAngle property.

Figure 4: Setting StartAngle property

Rad Radial Menu Configuration 01

Change the Radius properties

RadRadialMenu provides the following Radius properties:

InnerRadiusFactor - defines the inner radius of the panel holding all RadRadialMenuItems as a fraction of the size of RadRadialMenu control. The value should be between 0 and 1. If the passed value lies outside this range, it is automatically set to the nearest boundary value.
InnerNavigationRadiusFactor - defines the inner radius of the panel holding the NavigationItemButton items as a fraction of the size of RadRadialMenu control. The value should be between 0 and 1. If the passed value lies outside this range, it is automatically set to the nearest boundary value.
OuterRadiusFactor - defines the outer radius of the panel holding the NavigationItemButton items as a fraction of the size of RadRadialMenu control. The value should be between 0 and 1. If the passed value lies outside this range, it is automatically set to the nearest boundary value.

Figure 5: Radius Properties

Rad Radial Menu Configuration 02

Change the AnimationSpeedFactor property

RadRadialMenu provides a static double property that will help you to adjust the speed of the animations as required. The default value of the AnimationSpeedFactor property is 1.5d and the minimum possible value is 0.1d. The property can be set as shown below:

Example 5: Setting AnimationSpeedFactor property

RadRadialMenu.AnimationSpeedFactor = 1.2d;