CenterButton Customization in .NET MAUI Radial Menu

29 Jul 202624 minutes to read

The center button (or back button) in the Radial Menu is the view at the center of the menu. It performs operations such as opening and closing the menu and navigating to the next-level items. You can customize the center button / back button with a FontIcon, a Custom View, and a text Caption.

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.

Properties Summary

Property	Type	Default	Description
`CenterButtonText`	`string`	`RadialMenu`	Text shown on the center button.
`CenterButtonBackText`	`string`	`Sub Menu`	Text shown on the center back button.
`CenterButtonTextColor`	`Color`	`Color.FromArgb("#1C1B1F")`	Foreground color of the center button text.
`CenterButtonBackTextColor`	`Color`	`Color.FromArgb("#1C1B1F")`	Foreground color of the center back button text.
`CenterButtonBackgroundColor`	`Color`	`Color.FromArgb("#FFFBFE")`	Background color of the center button.
`CenterButtonRadius`	`double`	`28`	Corner radius of the center button.
`CenterButtonFontFamily`	`string`	`null`	Font family used by the center button text.
`CenterButtonBackFontFamily`	`string`	`null`	Font family used by the center back button text.
`CenterButtonFontSize`	`double`	`14`	Font size of the center button text.
`CenterButtonBackFontSize`	`double`	`14`	Font size of the center back button text.
`CenterButtonFontAttributes`	`FontAttributes`	`None`	Font attributes (e.g., `Bold`, `Italic`) for the center button text.
`CenterButtonBackFontAttributes`	`FontAttributes`	`None`	Font attributes for the center back button text.
`CenterButtonStroke`	`Brush`	`Color = Color.FromArgb("#6750A4")`	Border color of the center button.
`CenterButtonStrokeThickness`	`double`	`2`	Border thickness of the center button.
`CenterButtonView`	`View`	`null`	Custom view rendered as the center button.
`CenterButtonBackView`	`View`	`null`	Custom view rendered as the center back button.
`EnableCenterButtonAnimation`	`bool`	`true`	Enables or disables the open/close animation of the center button.
`CenterButtonFontAutoScalingEnabled`	`bool`	`false`	Scales the center button font with the OS text size. Applies to both the center button and back button.
`CenterButtonSize`	`double`	`56`	Diameter of the center button.

CenterButtonText and CenterButtonBackText

The CenterButtonText changes the text of the center button in Radial Menu, and the CenterButtonBackText changes the text of the center back button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonText="Edit"
                         CenterButtonBackText="Back">
    <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:SfRadialMenuItem.Items>
                <radialMenu:SfRadialMenuItem Text="Font" FontSize="12" ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Gradient" FontSize="12" ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Highlight" FontSize="12" ItemWidth="50"/>
            </radialMenu:SfRadialMenuItem.Items>
        </radialMenu:SfRadialMenuItem>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>
string[] mainItem = [ "Bold", "Copy", "Paste", "Undo", "Color" ];
string[] colorItem = ["Font", "Gradient", "Highlight"];

SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonText = "Edit",
    CenterButtonBackText = "Back",
};

for (int i = 0; i < 5; i++)
{
    SfRadialMenuItem mainMenuItems = new SfRadialMenuItem();
    mainMenuItems.Text = mainItem[i];
    mainMenuItems.FontSize = 12;
    radialMenu.Items.Add(mainMenuItems);
}

for (int i = 0; i < 3; i++)
{
    SfRadialMenuItem colorSubMenuItem = new SfRadialMenuItem();
    colorSubMenuItem.Text = colorItem[i];
    colorSubMenuItem.FontSize = 12;
    colorSubMenuItem.ItemWidth = 50;
    radialMenu.Items[4].Items.Add(colorSubMenuItem);
}

CenterButtonText and CenterButtonBackText.

CenterButtonTextColor and CenterButtonBackTextColor

The CenterButtonTextColor changes the text color of the center button, and the CenterButtonBackTextColor changes the text color of the center back button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonTextColor="Blue"
                         CenterButtonText="Edit"
                         CenterButtonBackTextColor="Yellow"
                         CenterButtonBackText="Back">
    <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:SfRadialMenuItem.Items>
                <radialMenu:SfRadialMenuItem Text="Font" 
                                             FontSize="12" 
                                             ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Gradient" 
                                             FontSize="12" 
                                             ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Highlight" 
                                             FontSize="12" 
                                             ItemWidth="50"/>
            </radialMenu:SfRadialMenuItem.Items>
        </radialMenu:SfRadialMenuItem>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>
string[] mainItem = new string[] { "Bold", "Copy", "Paste", "Undo", "Color" };
string[] colorItem = new string[] { "Font", "Gradient", "Highlight" };

SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonText = "Edit",
    CenterButtonBackText = "Back",
    CenterButtonTextColor = Colors.Blue,
    CenterButtonBackTextColor = Colors.Yellow,
};
            
for (int i = 0; i < 5; i++)
{
    SfRadialMenuItem mainMenuItems = new SfRadialMenuItem();
    mainMenuItems.Text = mainItem[i];
    mainMenuItems.FontSize = 12;
    radialMenu.Items.Add(mainMenuItems);
}

for (int i = 0; i < 3; i++)
{
    SfRadialMenuItem colorSubMenuItem = new SfRadialMenuItem();
    colorSubMenuItem.Text = colorItem[i];
    colorSubMenuItem.FontSize = 12;
    colorSubMenuItem.ItemWidth = 50;
    radialMenu.Items[4].Items.Add(colorSubMenuItem);
}

this.Content = radialMenu;

CenterButtonBackgroundColor

The CenterButtonBackgroundColor changes the background color of the center button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonBackgroundColor="#000000" 
                         CenterButtonText="Edit"
                         CenterButtonTextColor="White">
    <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>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonBackgroundColor = Color.FromArgb("#000000"),
    CenterButtonText = "Edit",
    CenterButtonTextColor = Colors.White,
    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 },
    },
};

CenterButtonBackgroundColor

CenterButtonRadius

The CenterButtonRadius changes the radius of the center button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonText="Edit" CenterButtonRadius="5">
    <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>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonText="Edit",
    CenterButtonRadius = 5,
    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 },
    },
};

CenterButtonRadius

CenterButtonFontFamily and CenterButtonBackFontFamily

The CenterButtonFontFamily changes the font family of the center button, and the CenterButtonBackFontFamily changes the font family of the center back button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonBackFontFamily="Maui Material Assets"
                         CenterButtonBackText="&#xe72d;"
                         CenterButtonFontFamily="Maui Material Assets"
                         CenterButtonText="&#xe710;">
    <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:SfRadialMenuItem.Items>
                <radialMenu:SfRadialMenuItem Text="Font" FontSize="12"  ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Gradient" FontSize="12" ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Highlight" FontSize="12" ItemWidth="50"/>
            </radialMenu:SfRadialMenuItem.Items>
        </radialMenu:SfRadialMenuItem>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>
string[] mainItem = new string[] { "Bold", "Copy", "Paste", "Undo", "Color" };
string[] colorItem = new string[] { "Font", "Gradient", "Highlight" };
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonBackFontFamily="Maui Material Assets",
    CenterButtonBackText="\ue72d",
    CenterButtonFontFamily="Maui Material Assets",
    CenterButtonText="\ue710",
};

for (int i = 0; i < 5; i++)
{
    SfRadialMenuItem mainMenuItems = new SfRadialMenuItem();
    mainMenuItems.Text = mainItem[i];
    mainMenuItems.FontSize = 12;
    radialMenu.Items.Add(mainMenuItems);
}

for (int i = 0; i < 3; i++)
{
    SfRadialMenuItem colorSubMenuItem = new SfRadialMenuItem();
    colorSubMenuItem.Text = colorItem[i];
    colorSubMenuItem.FontSize = 12;
    colorSubMenuItem.ItemWidth = 50;
    radialMenu.Items[4].Items.Add(colorSubMenuItem);
}

CenterButtonFontSize and CenterButtonBackFontSize

The CenterButtonFontSize changes the font size of the center button, and the CenterButtonBackFontSize changes the font size of the center back button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonBackFontFamily="Maui Material Assets"
                         CenterButtonBackFontSize="28"
                         CenterButtonBackText="&#xe72d;"
                         CenterButtonFontFamily="Maui Material Assets"
                         CenterButtonFontSize="20"
                         CenterButtonText="&#xe710;">
    <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:SfRadialMenuItem.Items>
                <radialMenu:SfRadialMenuItem Text="Font" 
                                             FontSize="12" 
                                             ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Gradient" 
                                             FontSize="12" 
                                             ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Highlight" 
                                             FontSize="12" 
                                             ItemWidth="50"/>
            </radialMenu:SfRadialMenuItem.Items>
        </radialMenu:SfRadialMenuItem>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>
string[] mainItem = new string[] { "Bold", "Copy", "Paste", "Undo", "Color" };
string[] colorItem = new string[] { "Font", "Gradient", "Highlight" };
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonBackFontFamily="Maui Material Assets",
    CenterButtonBackFontSize=28,
    CenterButtonBackText="\ue72d",
    CenterButtonFontFamily="Maui Material Assets",
    CenterButtonFontSize=20,
    CenterButtonText="\ue710",
};

for (int i = 0; i < 5; i++)
{
    SfRadialMenuItem mainMenuItems = new SfRadialMenuItem();
    mainMenuItems.Text = mainItem[i];
    mainMenuItems.FontSize = 12;
    radialMenu.Items.Add(mainMenuItems);
}

for (int i = 0; i < 3; i++)
{
    SfRadialMenuItem colorSubMenuItem = new SfRadialMenuItem();
    colorSubMenuItem.Text = colorItem[i];
    colorSubMenuItem.FontSize = 12;
    colorSubMenuItem.ItemWidth = 50;
    radialMenu.Items[4].Items.Add(colorSubMenuItem);
}

CenterButtonFontAttributes and CenterButtonBackFontAttributes

The CenterButtonFontAttributes sets the font attributes (for example, Bold or Italic) of the center button. The CenterButtonBackFontAttributes does the same for the center back button.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonText="Edit"
                         CenterButtonBackText="Back"
                         CenterButtonFontAttributes="Bold"
                         CenterButtonBackFontAttributes="Bold">
    <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:SfRadialMenuItem.Items>
                <radialMenu:SfRadialMenuItem Text="Font"
                                             FontSize="12"
                                             ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Gradient"
                                             FontSize="12"
                                             ItemWidth="50"/>
                <radialMenu:SfRadialMenuItem Text="Highlight"
                                             FontSize="12"
                                             ItemWidth="50"/>
            </radialMenu:SfRadialMenuItem.Items>
        </radialMenu:SfRadialMenuItem>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>
string[] mainItem = new string[] { "Bold", "Copy", "Paste", "Undo", "Color" };
string[] colorItem = new string[] { "Font", "Gradient", "Highlight" };
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonText = "Edit",
    CenterButtonBackText = "Back",
    CenterButtonFontAttributes = FontAttributes.Bold,
    CenterButtonBackFontAttributes = FontAttributes.Bold,
};

for (int i = 0; i < 5; i++)
{
    SfRadialMenuItem mainMenuItems = new SfRadialMenuItem();
    mainMenuItems.Text = mainItem[i];
    mainMenuItems.FontSize = 12;
    radialMenu.Items.Add(mainMenuItems);
}

for (int i = 0; i < 3; i++)
{
    SfRadialMenuItem colorSubMenuItem = new SfRadialMenuItem();
    colorSubMenuItem.Text = colorItem[i];
    colorSubMenuItem.FontSize = 12;
    colorSubMenuItem.ItemWidth = 50;
    radialMenu.Items[4].Items.Add(colorSubMenuItem);
}

CenterButtonStroke

The CenterButtonStroke property changes the stroke color of the center button in the Radial Menu.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonText="Edit" CenterButtonStroke="Black">
    <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>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonStroke = Colors.Black,
    CenterButtonText="Edit",
};

RadialMenuItemsCollection itemCollection =  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 },
};
radialMenu.Items = itemCollection;

CenterButtonStroke

CenterButtonStrokeThickness

The CenterButtonStrokeThickness changes the stroke thickness of the center button in Radial Menu.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonText="Edit"
                         CenterButtonStroke="Black"
                         CenterButtonStrokeThickness="5">
    <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>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonText="Edit",
    CenterButtonStroke = Colors.Black,
    CenterButtonStrokeThickness = 5,
    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 },
    },
};

CenterButtonStrokeThickness

CenterButtonView and CenterButtonBackView

You can customize the center button using CenterButtonView and the center back button using CenterButtonBackView in Radial Menu.

XAML
C#
<radialMenu:SfRadialMenu x:Name="radialMenu">
    <radialMenu:SfRadialMenu.CenterButtonView>
        <Grid>
            <StackLayout VerticalOptions="Center">
                <Image Source="dotnet_bot.png"/>
            </StackLayout>
        </Grid>
    </radialMenu:SfRadialMenu.CenterButtonView>
    <radialMenu:SfRadialMenu.CenterButtonBackView>
        <Grid>
            <StackLayout VerticalOptions="Center">
                <Image Source="backicon.png"/>
            </StackLayout>
        </Grid>
    </radialMenu:SfRadialMenu.CenterButtonBackView>
        <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:SfRadialMenuItem.Items>
                        <radialMenu:SfRadialMenuItem Text="Font" 
                                                     FontSize="12" 
                                                     ItemWidth="50"/>
                        <radialMenu:SfRadialMenuItem Text="Gradient" 
                                                     FontSize="12" 
                                                     ItemWidth="50"/>
                        <radialMenu:SfRadialMenuItem Text="Highlight" 
                                                     FontSize="12" 
                                                     ItemWidth="50"/>
                    </radialMenu:SfRadialMenuItem.Items>
                </radialMenu:SfRadialMenuItem>
    </radialMenu:SfRadialMenu.Items>
</radialMenu:SfRadialMenu>
string[] mainItem = new string[] { "Bold", "Copy", "Paste", "Undo", "Color" };
string[] colorItem = new string[] { "Font", "Gradient", "Highlight" };
Grid centerButtonGrid = new Grid();
Grid centerButtonBackGrid = new Grid();
StackLayout centerButtonLayout = new StackLayout()
{
    VerticalOptions = LayoutOptions.Center
};
StackLayout centerButtonBackLayout = new StackLayout()
{
    VerticalOptions = LayoutOptions.Center
};

centerButtonLayout.Children.Add(new Image() { Source = "dotnet_bot.png" });
centerButtonGrid.Children.Add(centerButtonLayout);
centerButtonBackLayout.Children.Add(new Image() { Source = "backicon.png" });
centerButtonBackGrid.Children.Add(centerButtonBackLayout);

SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonView = centerButtonGrid,
    CenterButtonBackView = centerButtonBackGrid
};

for (int i = 0; i < 5; i++)
{
    SfRadialMenuItem mainMenuItems = new SfRadialMenuItem();
    mainMenuItems.Text = mainItem[i];
    mainMenuItems.FontSize = 12;
    radialMenu.Items.Add(mainMenuItems);
}

for (int i = 0; i < 3; i++)
{
    SfRadialMenuItem colorSubMenuItem = new SfRadialMenuItem();
    colorSubMenuItem.Text = colorItem[i];
    colorSubMenuItem.FontSize = 12;
    colorSubMenuItem.ItemWidth = 50;
    radialMenu.Items[4].Items.Add(colorSubMenuItem);
}

CenterButtonView and CenterButtonBackView

EnableCenterButtonAnimation

The EnableCenterButtonAnimation property allows you to enable or disable animation of the center button in the Radial Menu.

XAML
C#
<radialMenu:SfRadialMenu EnableCenterButtonAnimation="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>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    EnableCenterButtonAnimation = 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 },
    },
};

CenterButtonFontAutoScalingEnabled

The CenterButtonFontAutoScalingEnabled property is used to automatically scale the Radial Menu’s center button font size based on the operating system’s text size. The default value of the CenterButtonFontAutoScalingEnabled property is false. This property applies to both the CenterButtonText and the CenterButtonBackText.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonFontAutoScalingEnabled="True">
 </radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonFontAutoScalingEnabled = true,
};

CenterButtonSize

You can customize the size of the Radial Menu’s center button using the CenterButtonSize property. The default value of the CenterButtonSize property is 56.

XAML
C#
<radialMenu:SfRadialMenu CenterButtonSize="80">
 </radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    CenterButtonSize = 80,
};

StartAngle

You can adjust the starting angle at which the radial menu items are arranged by using the StartAngle property. The default value of the StartAngle property is 0.

XAML
C#
<radialMenu:SfRadialMenu  StartAngle="50">
 </radialMenu:SfRadialMenu>
SfRadialMenu radialMenu = new SfRadialMenu()
{
    StartAngle = 50,
};

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

CenterButton Customization in .NET MAUI Radial Menu (SfRadialMenu)

Prerequisites

Properties Summary

CenterButtonText and CenterButtonBackText

CenterButtonTextColor and CenterButtonBackTextColor

CenterButtonBackgroundColor

CenterButtonRadius

CenterButtonFontFamily and CenterButtonBackFontFamily

CenterButtonFontSize and CenterButtonBackFontSize

CenterButtonFontAttributes and CenterButtonBackFontAttributes

CenterButtonStroke

CenterButtonStrokeThickness

CenterButtonView and CenterButtonBackView

EnableCenterButtonAnimation

CenterButtonFontAutoScalingEnabled

CenterButtonSize

StartAngle

See also