Ribbon Customization in WPF Spreadsheet (SfSpreadsheet)

23 Jul 20266 minutes to read

Ribbon Customization can be done in two ways,

Using Control Template

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

Using Event

You can add or remove ribbon menu items by handling the SfSpreadsheetRibbon.Loaded event.

Adding a RibbonTab

To add a custom ribbon tab with user-defined menu options to 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 Item to an Existing Tab

To add a ribbon item to an 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 a ribbon tab from 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 Item from a RibbonTab

To remove ribbon menu items from a ribbon tab 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);
    
    // To remove the Freeze Panes menu group in the View tab,
    
    if (ribbon1 != null)
    {
      var ribbonTab = ribbon1.Items[2] as RibbonTab;
      ribbonTab.Items.Remove(ribbonTab.Items[1]);
    }
}

Canceling a Ribbon Command

You can cancel particular actions of SpreadsheetRibbon commands by handling the 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 the copy button's command execution.
	if (args.CommandName == "Copy")
	{
		// Set the bool value to true.
		// The operation specified in CommandName will not be performed.
		args.Cancel = true;
	}
}

NOTE

You can refer to our WPF Spreadsheet Editor 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.