Populating Items in .NET MAUI Radial Menu

5 Aug 202621 minutes to read

This section explains how to populate the menu in two ways: by adding SfRadialMenuItem instances directly to the Items collection, or by binding the menu to an ItemsSource and rendering each item with an ItemTemplate.

Prerequisites

Before using the SfRadialMenu, ensure the following NuGet package is installed in your .NET MAUI project:

• Syncfusion.Maui.RadialMenu

For step-by-step setup, refer to the Getting Started documentation.

Populate using SfRadialMenuItem instances

By adding SfRadialMenuItem instances to the menu’s Items collection, you can populate the rim with text, icons, images, or a custom view. Items can be nested to create sub-menus (see Adding nested items).

Text

The following sample creates a menu with text-only items.

XAML

<radialMenu:SfRadialMenu>
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    Items = new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

NOTE

Instead of using ObservableCollection, use RadialMenuItemsCollection for the Radial Menu Items list and SubMenuItemsCollection for the list of items within each Radial Menu item.

Populate using ItemsSource and ItemTemplate

Using ItemsSource, objects of any class can be used as items in Radial Menu. The views corresponding to the objects can be set using the ItemTemplate property. Inside the DataTemplate, the binding context is the data item (not the page), so {Binding EmployeeName} reads the property of each item.

The following sample displays a list of users with a shared image and a per-item name from the view model.

XAML

<radialMenu:SfRadialMenu 
    x:Name="radial_Menu"
    CenterButtonFontSize="28"
    CenterButtonFontFamily="Maui Material Assets"
    CenterButtonText="&#xe71b;"
    ItemsSource="{Binding EmployeeCollection}">
    <radialMenu:SfRadialMenu.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Image Source="user.png" 
                        HorizontalOptions="Center" 
                        WidthRequest="15"/>
                <Label Text="{Binding EmployeeName}" 
                        HorizontalTextAlignment="Center" 
                        VerticalTextAlignment="Center"/>
            </StackLayout>
        </DataTemplate>
    </radialMenu:SfRadialMenu.ItemTemplate>
</radialMenu:SfRadialMenu>

C#

EmployeeViewModel employeeViewModel = new EmployeeViewModel();
SfRadialMenu radial_Menu = new SfRadialMenu
{
    CenterButtonFontSize = 28,
    CenterButtonFontFamily = "Maui Material Assets",
    CenterButtonText = "Edit",
    ItemsSource = employeeViewModel.EmployeeCollection,
    ItemTemplate = new DataTemplate(() =>
    {
        Label label = new Label
        {
            HorizontalTextAlignment = TextAlignment.Center,
            VerticalTextAlignment = TextAlignment.Center
        };
        label.SetBinding(Label.TextProperty, nameof(EmployeeModel.EmployeeName));
        return new StackLayout
        {
            Children =
            {
                new Image
                {
                    Source = "dotnet_bot.png",
                    HorizontalOptions = LayoutOptions.Center,
                    WidthRequest = 15
                },
                label
            }
        };
    })
};

ViewModel

public class EmployeeModel
{
    private string employeeName;

    public string EmployeeName
    {
        get { return employeeName; }
        set { employeeName = value; }
    }
}

public class EmployeeViewModel
{
    private ObservableCollection<EmployeeModel> employeeCollection = new ObservableCollection<EmployeeModel>();

    public ObservableCollection<EmployeeModel> EmployeeCollection
    {
        get { return employeeCollection; }
        set { employeeCollection = value; }
    }

    public EmployeeViewModel()
    {
        EmployeeCollection.Add(new EmployeeModel() { EmployeeName = "Alex" });
        EmployeeCollection.Add(new EmployeeModel() { EmployeeName = "Lee" });
        EmployeeCollection.Add(new EmployeeModel() { EmployeeName = "Ben" });
        EmployeeCollection.Add(new EmployeeModel() { EmployeeName = "Carl" });
        EmployeeCollection.Add(new EmployeeModel() { EmployeeName = "Yang" });
    }
}

Per-item images with ItemTemplate

The previous example used a single user.png for every item. To render a different image per item, expose an ImageUrl (or similar) property on the data item and bind to it.

XAML

<DataTemplate>
    <StackLayout>
        <Image Source="{Binding ImageUrl}"
               HorizontalOptions="Center"
               WidthRequest="15" />
        <Label Text="{Binding EmployeeName}"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </StackLayout>
</DataTemplate>

C#

public class EmployeeModel
{
    public string EmployeeName { get; set; }
    public string ImageUrl { get; set; }
}

EmployeeCollection.Add(new EmployeeModel { EmployeeName = "Alex", ImageUrl = "alex.png" });
EmployeeCollection.Add(new EmployeeModel { EmployeeName = "Lee", ImageUrl = "lee.png" });

Customization properties

The properties in this section control the appearance and runtime behavior of the menu. They can be set in XAML or in C#.

AnimationDuration

Use the AnimationDuration property (in milliseconds) to control the speed of the open and close animations. The default is 200 ms.

XAML

<radialMenu:SfRadialMenu AnimationDuration="800">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    AnimationDuration = 800,
    Items = new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    };
};

IsOpen

The IsOpen property indicates (or sets) whether the menu is currently open. Setting IsOpen="True" opens the menu at startup; toggle it to false to close.

XAML

<radialMenu:SfRadialMenu IsOpen="True">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    IsOpen = true,
    Items = new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    };
};

Separator thickness and color

Use the SeparatorThickness property to set the thickness of the strip between two adjacent items (in device-independent units, DIUs), and the SeparatorColor property to set its color.

XAML

<radialMenu:SfRadialMenu  SeparatorThickness="5" 
                          SeparatorColor="#FF1493">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    SeparatorThickness = 5,
    SeparatorColor = Color.FromArgb("#FF1493"),
    Items = new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

Rim color and radius

Use the RimRadius property to set the rim radius, and the RimColor property to set the rim color.

XAML

<radialMenu:SfRadialMenu RimRadius="200" 
                         RimColor="#FF1493">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12"/>
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12"/>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    RimRadius = 150,
    RimColor = Color.FromArgb("#FF1493"),
    Items = new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

DisplayMemberPath

When the menu is bound to a data source via ItemsSource, use the DisplayMemberPath property to indicate which property of each data item is rendered as the item text. This is a simpler alternative to ItemTemplate when you do not need a custom view per item.

XAML

<radialMenu:SfRadialMenu ItemsSource="{Binding EmployeeCollection}"
                         DisplayMemberPath="EmployeeName"/>

C#

EmployeeViewModel employeeViewModel = new EmployeeViewModel();

SfRadialMenu radialMenu = new SfRadialMenu
{
    ItemsSource = employeeViewModel.EmployeeCollection,
    DisplayMemberPath = "EmployeeName"
};

ViewModel

public class Employee
{
    private int id;
    public int ID
    {
        get { return id; }
        set { id = value; }
    }
    private string employeeName;
    public string EmployeeName
    {
        get { return employeeName; }
        set { employeeName = value; }
    }
}

public class EmployeeViewModel
{
    private ObservableCollection<Employee> employeeCollection;
    public ObservableCollection<Employee> EmployeeCollection
    {
        get { return employeeCollection; }
        set { employeeCollection = value; }
    }
    public EmployeeViewModel()
    {
        employeeCollection = new ObservableCollection<Employee>();
        employeeCollection.Add(new Employee() { ID = 1, EmployeeName = "Eric" });
        employeeCollection.Add(new Employee() { ID = 2, EmployeeName = "James" });
        employeeCollection.Add(new Employee() { ID = 3, EmployeeName = "Jacob" });
        employeeCollection.Add(new Employee() { ID = 4, EmployeeName = "Lucas" });
    }
}

SelectionColor

Use the SelectionColor property to set the color applied to a menu item when it is selected (highlighted).

XAML

<radialMenu:SfRadialMenu SelectionColor="#FF1493">
    <radialMenu:SfRadialMenu.Items>
        <radialMenu:SfRadialMenuItem Text="Bold" FontSize="12" />
        <radialMenu:SfRadialMenuItem Text="Copy" FontSize="12" />
        <radialMenu:SfRadialMenuItem Text="Undo" FontSize="12" />
        <radialMenu:SfRadialMenuItem Text="Paste" FontSize="12" />
        <radialMenu:SfRadialMenuItem Text="Color" FontSize="12" />
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>

C#

SfRadialMenu radialMenu = new SfRadialMenu()
{
    SelectionColor = Color.FromArgb("#FF1493")
    Items = new RadialMenuItemsCollection()
    {
        new SfRadialMenuItem() { Text = "Bold", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Copy", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Paste", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Undo", FontSize = 12 },
        new SfRadialMenuItem() { Text = "Color", FontSize = 12 },
    },
};

See also

• Radial Menu Item’s Customization in MAUI Radial Menu
• Segmenting and Placing Items in .NET MAUI Radial Menu
• Center Button Customization in MAUI Radial Menu
• Placing and Dragging in MAUI Radial Menu