Radial Menu Command Binding | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Radial Menu Command Binding

Written by Jawahar, Syncfusion Inc.

Radial Menu has the ability to add items through ItemsSource property. A collection of different types of objects can be added into the Items collection. If the ItemsSource is not null, the items in the items property are read-only. You cannot add an object or change the objects in the Items property.

In this case, it is pretty easy to customize each item using ItemTemplate, but there is a problem in binding the Command property to every item. It is not possible to set binding through the style setter like you would be able to in WPF.

<setter property="Command" value="{Binding Command}"></setter>

The Value property of the Setter class in WinRT is not a dependency property and binding does not work in this case. To overcome this problem in Radial Menu, there is a Path property similar to the DisplayMemberPath property we have in all ItemsControls.

For example, let’s bind a collection of an object containing Command property:

public class Model
{
   public string Header { get; set; }
   private ICommand _command;
   public ICommand Command
    {
     get { return _command ?? (_command = new DelegateCommand(delegate { ExecuteCommand(); })); }
   }

   private void ExecuteCommand()
  {
    //Do some work....
  }
 }

Let’s create a ViewModel which contains a collection of Model objects:

 public class ViewModel
 {
   public List Commands { get; set; }
   public ViewModel()
   {
     Commands = new List
    {
       new Model {Header = "Cut"},
       new Model {Header = "Copy"},
       new Model {Header = "Paste"},
       new Model {Header = "Undo"},
       new Model {Header = "Redo"}
    };
   }
  }

The CommandPath property in Radial Menu is used to map the Command property in the model object to the Radial Menu Item Command property.

<syncfusion:sfradialmenu itemssource="{Binding Commands}" commandpath="Command">
<syncfusion:sfradialmenu.itemtemplate>
 <datatemplate>
 <stackpanel margin="5">
<textblock text="" margin="2" horizontalalignment="Center" fontfamily="Segoe UI Symbol" fontsize="25"></textblock>
<textblock text="{Binding Header}" margin="2" horizontalalignment="Center"></textblock>
 </stackpanel>
 </datatemplate>
 </syncfusion:sfradialmenu.itemtemplate>
</syncfusion:sfradialmenu>

The output of the above code shows a Radial Menu with 5 items. Clicking an item will execute the command bound to it.

image

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed