Ribbon Customization in WPF Spreadsheet (SfSpreadsheet)

28 Jul 20216 minutes to read

Ribbon Customization can be done in two ways,

Using Control Template

User can customize the ribbon items by overriding the template of SfSpreadsheetRibbon.

Using Event

By invoking SfSpreadsheetRibbon Loaded Event, User can add/delete the ribbon menu items.

Adding a RibbonTab

To add a custom ribbon tab with user defined menu options in SfSpreadsheetRibbon,

XAML

<syncfusion:SfSpreadsheetRibbon x:Name="ribbon" DataContext="{Binding ElementName=spreadsheet}" />

C#

ribbon.Loaded += ribbon_Loaded;
    
void ribbon_Loaded(object sender, RoutedEventArgs e)
{
    var ribbon1 = GridUtil.GetVisualChild<Ribbon>(sender as FrameworkElement);

    if (ribbon1 != null)
    {
      RibbonTab ribbonTab = new RibbonTab();
      ribbonTab.Caption = "OTHER";
      RibbonButton Button1 = new RibbonButton();
      Button1.Label = "PRINT";
      Button1.SmallIcon = new BitmapImage(new Uri("/../Icon/Icons_Print.png", UriKind.Relative));
      Button1.Click += Button1_Click;
      RibbonButton Button2 = new RibbonButton();
      Button2.Label = "PRINT PREVIEW";
      Button2.SmallIcon = new BitmapImage(new Uri("/../Icon/Icons_Print.png", UriKind.Relative));
      Button2.Click += Button2_Click;
      var customRibbonBar = new RibbonBar();
      customRibbonBar.Header = "Printing Options";
      customRibbonBar.Items.Add(Button1);
      customRibbonBar.Items.Add(Button2);
      customRibbonBar.IsLauncherButtonVisible = false;
      ribbonTab.Items.Add(customRibbonBar);
      ribbon1.Items.Add(ribbonTab);
    }
}

Adding a Ribbon Items in Existing Tab

To add a ribbon items in already existing tab,

XAML

<syncfusion:SfSpreadsheetRibbon x:Name="ribbon" DataContext="{Binding ElementName=spreadsheet}" />

C#

ribbon.Loaded += ribbon_Loaded;
    
void ribbon_Loaded(object sender, RoutedEventArgs e)
{
    var ribbon1 = GridUtil.GetVisualChild<Ribbon>(sender as FrameworkElement);
    
    // To add the ribbon button in View tab,
    
    if (ribbon1 != null)
    {
      var ribbonTab = ribbon1.Items[2] as RibbonTab;
      RibbonButton Button1 = new RibbonButton();
      Button1.Label = "PRINT";
      Button1.SmallIcon = new BitmapImage(new Uri("/../Icon/Icons_Print.png", UriKind.Relative));
      Button1.Click += Button1_Click;
      ribbonTab.Items.Add(Button1);
    }
}

Removing a RibbonTab

To remove the ribbon tab in the SfSpreadsheetRibbon,

XAML

<syncfusion:SfSpreadsheetRibbon x:Name="ribbon" DataContext="{Binding ElementName=spreadsheet}" />

C#

ribbon.Loaded += ribbon_Loaded;
    
void ribbon_Loaded(object sender, RoutedEventArgs e)
{
    var ribbon1 = GridUtil.GetVisualChild<Ribbon>(sender as FrameworkElement);
    
    //To remove the Data tab from the ribbon,

    if (ribbon1 != null)
    {
      var item = ribbon1.Items[1];
      ribbon1.Items.Remove(item);
    }
}

Removing a Ribbon Items in a RibbonTab

To remove the ribbon menu items in the ribbon tab of SfSpreadsheetRibbon,

XAML

<syncfusion:SfSpreadsheetRibbon x:Name="ribbon" DataContext="{Binding ElementName=spreadsheet}" />

C#

ribbon.Loaded += ribbon_Loaded;
    
void ribbon_Loaded(object sender, RoutedEventArgs e)
{
    var ribbon1 = GridUtil.GetVisualChild<Ribbon>(sender as FrameworkElement);
    
    // To remove the Freeze panes menu group in View tab,
    
    if (ribbon1 != null)
    {
      var ribbonTab = ribbon1.Items[2] as RibbonTab;
      ribbonTab.Items.Remove(ribbonTab.Items[1]);
    }
}

Canceling a Ribbon commands

You can cancel particular action of SpreadsheetRibbon commands by handling CommandExecuting event.

XAML

<syncfusion:SfSpreadsheetRibbon x:Name="ribbon" DataContext="{Binding ElementName=spreadsheet}" />

C#

this.ribbon.Commands.CommandExecuting += Commands_CommandExecuting;

void Commands_CommandExecuting(object sender, CommandExecutingEventArgs args)
{
	//stops copy button command execution.
	if(args.CommandName == "Copy")
	{
		//set the bool value is true.
		//the operation is not performed as you mentioned in CommandName
		args.cancel = true;
	}
}

NOTE

You can refer to our WPF Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our WPF Spreadsheet example to know how to render and configure the spreadsheet.