SfRadialMenuItem Customization

3 Sep 202024 minutes to read

The SfRadialMenuItem class provides various options such as Custom Views, FontIcons, and Images to customize the items. You can add radial menu items by hierarchy. To add a SfRadialMenuItem with SfRadialMenu, create an instance of SfRadialMenuItem, and add it to the Items property that is available in SfRadialMenu.

Items

The Items property populates the items of an inner rim in SfRadialMenu when the items of an outer rim are tapped.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Cut" });
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Copy" });
            radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste" });
            SetContentView(radialMenu);
        }
    }
}

Text

The Text property provides text to the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Cut" });
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Copy" });
            radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste" });
            SetContentView(radialMenu);
        }
    }
}

ItemHeight

The ItemHeight changes the height of the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Cut", ItemHeight = 25 });
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Copy", ItemHeight = 25 });
            radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste" });
            SetContentView(radialMenu);
        }
    }
}

ItemWidth

The ItemWidth property changes the width of the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Cut" , ItemWidth = 50});
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Text = "Copy" , ItemWidth = 50}); radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste"});
            SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with Items

BackgroundColor

The BackgroundColor property changes the background color of the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) {Text = "Cut", BackgroundColor= Color.ParseColor("#FFFF33")});
            radialMenu.Items.Add(new SfRadialMenuItem(this) {Text = "Copy", BackgroundColor= Color.ParseColor("#FFFF33")});
            radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste" });
            SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with BackgroundColor

TextTypeFace

The TextTypeFace property changes the font family of the text in SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) {Text = "Cut", TextTypeFace=Typeface.Create("Times New Roman",TypefaceStyle.Bold)});
            radialMenu.Items.Add(new SfRadialMenuItem(this) {Text = "Copy", TextTypeFace=Typeface.Create("Times New Roman",TypefaceStyle.Bold)});
            radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste" });
            SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with Items

TextSize

The TextSize property changes the text size of the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
			radialMenu.Items.Add(new SfRadialMenuItem(this) {Text = "Cut", TextTypeFace=Typeface.Create("Times New Roman",TypefaceStyle.Bold,TextSize = 20)});
            radialMenu.Items.Add(new SfRadialMenuItem(this) {Text = "Copy", TextTypeFace=Typeface.Create("Times New Roman",TypefaceStyle.Bold,TextSize = 20)});
            radialMenu.Items[0].Items.Add(new SfRadialMenuItem(this) { Text = "Paste" });
            SetContentView(radialMenu);
        }
    }
}

Image

The Image property provides image support to the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
			radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Image = "user.png" });
            radialMenu.Items.Add(new SfRadialMenuItem(this) { Image = "cartImg.png" });
            SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with Image

BackgroundImage

The BackgroundImage property provides the background image support to the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
			radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { BackgroundImage = "editor.png" });
            radialMenu.Items.Add(new SfRadialMenuItem(this) { BackgroundImage = "cartImg.png" });
            SetContentView(radialMenu);
        }
    }
}

FontIconText

The FontIconText property provides font icon support to the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
			radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) {FontIconText= "\uE734",IconFont= Typeface.CreateFromAsset(this.Assets, "Segoe_MDL2_Assets.ttf")});  
            radialMenu.Items.Add(new SfRadialMenuItem(this) {FontIconText= "\uE701",IconFont= Typeface.CreateFromAsset(this.Assets, "Segoe_MDL2_Assets.ttf")});            
            SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with FontIconText

FontIconColor

The FontIconColor property changes the color of the font icon in SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
            radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { FontIconText = "\uE734", IconFont = Typeface.CreateFromAsset(this.Assets, "Segoe_MDL2_Assets.ttf"), FontIconColor = Color.ParseColor("#313131") });
            radialMenu.Items.Add(new SfRadialMenuItem(this) { FontIconText = "\uE701", IconFont = Typeface.CreateFromAsset(this.Assets, "Segoe_MDL2_Assets.ttf"), FontIconColor = Color.ParseColor("#313131") });
            SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with FontIconColor

FontIconSize

The FontIconSize property changes the size of the font icon in the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
			radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) {FontIconText= "\uE734",IconFont = Typeface.CreateFromAsset(this.Assets, "Segoe MDL2 Assets.ttf"),FontIconSize = 10});  
            radialMenu.Items.Add(new SfRadialMenuItem(this) {FontIconText= "\uE701",IconFont = Typeface.CreateFromAsset(this.Assets, "Segoe MDL2 Assets.ttf"),FontIconSize = 10});  
			SetContentView(radialMenu);
        }
    }
}

IconFont

The IconFont property changes the font family of the font icon in the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
			radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) {FontIconText= "\uE734",IconFont = Typeface.CreateFromAsset(this.Assets, "Segoe_MDL2_Assets.ttf")}); 
            radialMenu.Items.Add(new SfRadialMenuItem(this) {FontIconText= "\uE701",IconFont = Typeface.CreateFromAsset(this.Assets, "Segoe_MDL2_Assets.ttf")});    
			SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with FontIconText

NOTE

https://xamarinhelp.com/custom-fonts-xamarin-forms/ provides how to add the TTF file to each platform.

View

The View property provides custom views to the SfRadialMenuItem.

using Android.App;
using Android.Widget;
using Android.OS;
using Syncfusion.SfRadialMenu.Android;
using Android.Graphics;
using Android.Views;
using System.Collections.Generic;

namespace GettingStarted
{
    [Activity(Label = "GettingStarted", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SfRadialMenu radialMenu = new SfRadialMenu(this);
			radialMenu.CenterButtonText = "Go";
            radialMenu.CenterButtonBackText = "Back";
            radialMenu.CenterButtonRadius = 50;
            radialMenu.CenterButtonTextSize = 10;
            radialMenu.CenterButtonBackTextSize = 10;
            radialMenu.Items.Add(new SfRadialMenuItem(this) { View = new TextView(this) { Text = "Cut",TextAlignment = TextAlignment.Center}});
            radialMenu.Items.Add(new SfRadialMenuItem(this) { View = new TextView(this) { Text = "Copy",TextAlignment = TextAlignment.Center}});
			SetContentView(radialMenu);
        }
    }
}

SfRadialMenu with Items