menu

WinUI

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfRibbon - WinUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfRibbon

    The SfRibbon controls provide a simple way to design an application like Microsoft Office and it includes all the tools in a single place with easy navigation.

    Inheritance
    System.Object
    SfRibbon
    Implements
    System.IDisposable
    Namespace: Syncfusion.UI.Xaml.Ribbon
    Assembly: Syncfusion.Ribbon.WinUI.dll
    Syntax
    public sealed class SfRibbon : Control, IDisposable
    Remarks

    A SfRibbon is a command bar that organizes the features of an application into a series of ribbon tabs at the top of the application window. It replaces both the traditional menu bar and toolbars.

    Examples

    This code example shows how to declare and use SfRibbon control.

    <ribbon:SfRibbon x:Name="ribbon">
         <ribbon:SfRibbon.Tabs>
              <ribbon:RibbonTab Header="Home">
                   <ribbon:RibbonGroup Header="Clipboard">
                        <ribbon:RibbonSplitButton Content="Paste"
                                                  Icon="Paste"
                                                  SizeMode="Large" />
                   </ribbon:RibbonGroup>
                   <ribbon:RibbonGroup Header="Normal">
                        <ribbon:RibbonButton Content="Cut"
                                             Icon="Cut"
                                             SizeMode="Normal" />
                        <ribbon:RibbonButton Content="Copy "
                                             Icon="Copy"
                                             SizeMode="Normal" />
                        <ribbon:RibbonButton Content="Format Painter"
                                             SizeMode="Normal">
                             <ribbon:RibbonButton.Icon>
                                   <FontIcon Glyph="&#xF0E3;" />
                             </ribbon:RibbonButton.Icon>
                        </ribbon:RibbonButton>
                   </ribbon:RibbonGroup>
              </ribbon:RibbonTab>
         </ribbon:SfRibbon.Tabs>
    </ribbon:SfRibbon>

    Constructors

    SfRibbon()

    Initializes a new instance of SfRibbon class.

    Declaration
    public SfRibbon()

    Fields

    ActiveLayoutModeProperty

    Identifies the ActiveLayoutMode dependency property.

    Declaration
    public static readonly DependencyProperty ActiveLayoutModeProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    AllowMinimizeProperty

    Identifies the AllowMinimize property.

    Declaration
    public static readonly DependencyProperty AllowMinimizeProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    BackstageMenuButtonContentProperty

    Identifies the BackstageMenuButtonContent dependency property.

    Declaration
    public static readonly DependencyProperty BackstageMenuButtonContentProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    BackstageProperty

    Identifies the Backstage dependency property.

    Declaration
    public static readonly DependencyProperty BackstageProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    ContextualTabGroupsProperty

    Identifies the ContextualTabGroups dependency property.

    Declaration
    public static readonly DependencyProperty ContextualTabGroupsProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    IsBackstageOpenProperty

    Identifies the IsBackstageOpen dependency property.

    Declaration
    public static readonly DependencyProperty IsBackstageOpenProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    IsMinimizedProperty

    Identifies the IsMinimized dependency property .

    Declaration
    public static readonly DependencyProperty IsMinimizedProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    LayoutModeOptionsProperty

    Identifies the LayoutModeOptions dependency property.

    Declaration
    public static readonly DependencyProperty LayoutModeOptionsProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    QuickAccessToolBarProperty

    Identifies the QuickAccessToolBar dependency property.

    Declaration
    public static readonly DependencyProperty QuickAccessToolBarProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    RightPaneProperty

    Identifies the RightPane dependency property.

    Declaration
    public static readonly DependencyProperty RightPaneProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    SelectedIndexProperty

    Identifies the SelectedIndex dependency property.

    Declaration
    public static readonly DependencyProperty SelectedIndexProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    SelectedTabProperty

    Identifies the SelectedTab dependency property.

    Declaration
    public static readonly DependencyProperty SelectedTabProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    ShowBackstageMenuButtonProperty

    Identifies the ShowBackstageMenuButton dependency property.

    Declaration
    public static readonly DependencyProperty ShowBackstageMenuButtonProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    TabsProperty

    Identifies the Tabs dependency property.

    Declaration
    public static readonly DependencyProperty TabsProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    TitleProperty

    Identifies the Title dependency property.

    Declaration
    public static readonly DependencyProperty TitleProperty
    Field Value
    Type
    Microsoft.UI.Xaml.DependencyProperty

    Properties

    ActiveLayoutMode

    Gets or sets a value specifying the current LayoutMode value of SfRibbon control.

    Declaration
    public LayoutMode ActiveLayoutMode { get; set; }
    Property Value
    Type Description
    LayoutMode

    Normal mode RibbonGroup arrange the ribbon items in maximum of three rows, where in Simplified mode RibbonGroup arrange the ribbon items in a single line. The default value is Normal.

    AllowMinimize

    Gets or sets a value indicating whether the SfRibbon can be minimized.

    Declaration
    public bool AllowMinimize { get; set; }
    Property Value
    Type Description
    System.Boolean

    false, if RibbonTab can't be hide; otherwise, true. The default value is true.

    Backstage

    Gets or sets a reference to the RibbonBackstage that SfRibbon control belongs to.

    Declaration
    public RibbonBackstage Backstage { get; set; }
    Property Value
    Type Description
    RibbonBackstage

    A reference to the RibbonBackstage that SfRibbon control belongs to. The default value is null.

    Remarks

    When the Backstage menu button is clicked, the content of RibbonBackstage is displayed. RibbonBackstage can accommodate BackstageView which includes BackstageViewButtonItem, BackstageViewTabItem, BackstageViewItemSeparator. It also allows to host any controls such as navigation view, tab view etc.

    Examples

    This code example shows how to set content for Backstage.

    <!--Below code shows how to add BackstageView-->
    <ribbon:SfRibbon.Backstage>
        <ribbon:RibbonBackstage Target="{Binding ElementName=rootGrid}" >
            <ribbon:BackstageView BackButtonClick="Backstage_BackButtonClick" >
                 <ribbon:BackstageView.Items>
                    <ribbon:BackstageViewTabItem Header="New"
                                                 Icon="NewFolder">
                        <TextBlock Text="New tab" />
                    </ribbon:BackstageViewTabItem>
                    <ribbon:BackstageViewTabItem Header="Open" />
                    <ribbon:BackstageViewItemSeparator />
                    <ribbon:BackstageViewButtonItem Header="Save"
                                                    Command="{x:Bind SaveCommand}" />
                </ribbon:BackstageView.Items>
                <ribbon:BackstageView.FooterItems>
                    <ribbon:BackstageViewItemSeparator />
                    <ribbon:BackstageViewTabItem Header="Account" />
                    <ribbon:BackstageViewTabItem Header="FeedBack" />
                    <ribbon:BackstageViewButtonItem Header="Option"
                                                    Command="{x:Bind OptionCommand}" />
                </ribbon:BackstageView.FooterItems>
            </ribbon:BackstageView>
        </ribbon:RibbonBackstage>
    </ribbon:SfRibbon.Backstage>
    
    <!--Below code shows how to add custom view-->
    <ribbon:SfRibbon.Backstage>
        <ribbon:RibbonBackstage Target="{Binding ElementName=rootGrid}" >
            <TextBlock Text="Backstage custom control"/>
        </ribbon:RibbonBackstage>
    </ribbon:SfRibbon.Backstage>

    BackstageMenuButtonContent

    Gets or sets the content of the backstage menu button in SfRibbon control.

    Declaration
    public object BackstageMenuButtonContent { get; set; }
    Property Value
    Type Description
    System.Object

    The content for backstage menu button. The default value is File.

    Remarks

    The visibility of the BackstageMenuButtonContent can be handled using ShowBackstageMenuButton property

    ContextualTabGroups

    Gets a collection of contextual tab groups that shows the contextual tab group dynamically only relevant in a specific context.

    Declaration
    public IList<RibbonContextualTabGroup> ContextualTabGroups { get; }
    Property Value
    Type
    System.Collections.Generic.IList<RibbonContextualTabGroup>
    Remarks

    A contextual tab is used to display groups of commands that are only relevant in a specific context. Contextual tab groups are shown or hidden based on the criteria you specify.

    Examples

    This code example shows how to set content for ContextualTabGroups.

    <!--XAML code-->
    
    <ribbon:SfRibbon>
        <ribbon:SfRibbon.Tabs>
            <ribbon:RibbonTab Header="Tab1">
                ...
            </ribbon:RibbonTab>
        </ribbon:SfRibbon.Tabs>
    
        <ribbon:SfRibbon.ContextualTabGroups>
            <ribbon:RibbonContextualTabGroup Name="ContextualTabGroup1" Foreground="Red">
                <ribbon:RibbonTab Header="Tab1">
                    ...
                </ribbon:RibbonTab>
                <ribbon:RibbonTab Header="Tab2">
                    ...
                </ribbon:RibbonTab>
            </ribbon:RibbonContextualTabGroup>
            <ribbon:RibbonContextualTabGroup Foreground="Blue">
                <ribbon:RibbonTab Header="Tab3">
                    ...
                </ribbon:RibbonTab>
            </ribbon:RibbonContextualTabGroup>
        </ribbon:SfRibbon.ContextualTabGroups>
    </ribbon:SfRibbon>
    
    <Button Content="Enable contextual tab group" Click="Button_Click"/>
    
    <!--C# code-->
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ContextualTabGroup1.Visibility = Visibility.Visible;
    }

    IsBackstageOpen

    Gets or sets a value indicating whether the RibbonBackstage visibility is enabled.

    Declaration
    public bool IsBackstageOpen { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if RibbonBackstage is opened; otherwise false. The default value is false

    Remarks

    When the File backstage menu button is clicked, this property value changes to true, and when the Backstage back button is clicked, it changes to false.

    IsMinimized

    Gets or sets a value indicating whether the SfRibbon is in minimized state.

    Declaration
    public bool IsMinimized { get; set; }
    Property Value
    Type Description
    System.Boolean

    false, if RibbonTab content gets displayed; otherwise, true. The default value is false.

    LayoutModeOptions

    Gets or sets a value specifying the layout mode options of SfRibbon control.

    Declaration
    public LayoutModeOptions LayoutModeOptions { get; set; }
    Property Value
    Type Description
    LayoutModeOptions

    A value that indicates the layout options of SfRibbon control either standard, simplified or both layout with toggle option. The default value is Normal | Simplified. Fields:

    EnumerationDescription
    NormalAllows the SfRibbon to display in standard layout, where RibbonGroup arrange the ribbon items in maximum of three rows.
    SimplifiedAllows the SfRibbon to display in simplified layout, where RibbonGroup arrange the ribbon items in a single line.
    Normal | SimplifiedAllows the SfRibbon to display in both standard and simplified layout with toggle option.

    QuickAccessToolBar

    Gets or sets the Quick Access ToolBar panel that is used to render the ribbon items above or below ribbon control.

    Declaration
    public QuickAccessToolBar QuickAccessToolBar { get; set; }
    Property Value
    Type Description
    QuickAccessToolBar

    The default value is null.

    RightPane

    Gets or sets the custom controls like utility which is placed in the right of the tab.

    Declaration
    public object RightPane { get; set; }
    Property Value
    Type Description
    System.Object

    The custom controls like utility which is placed in the right of the tab. The default value is null

    Remarks

    Commonly used items can be placed in the RightPane.The content in the RightPane is shown irrespective of the currently selected tab.

    Examples

    This code example shows how to set content for RightPane.

    <ribbon:SfRibbon.RightPane>
       <StackPanel Orientation="Horizontal">
           <ribbon:RibbonButton Content="Undo"
                                Icon="Undo" />
           <ribbon:RibbonButton Content="Redo"
                                Icon="Redo" />
       </StackPanel>
    </ribbon:SfRibbon.RightPane>

    SelectedIndex

    Gets or sets the index specifying the currently selected item in SfRibbon control.

    Declaration
    public int SelectedIndex { get; set; }
    Property Value
    Type Description
    System.Int32

    The index of the selected item. The default value is -1 which indicates that no item is selected.

    Remarks

    This property indicates the negative one index which denotes there is no selected item in the ribbon tab collection. Setting a new index raises the SelectedTabChanged event.

    SelectedTab

    Gets or sets the currently selected RibbonTab in a SfRibbon control.

    Declaration
    public RibbonTab SelectedTab { get; set; }
    Property Value
    Type Description
    RibbonTab

    The selected tab. The default value is null.

    ShowBackstageMenuButton

    Gets or sets a value indicating whether the backstage menu button visibility is enabled.

    Declaration
    public bool ShowBackstageMenuButton { get; set; }
    Property Value
    Type Description
    System.Boolean

    true, if the backstage menu button is displayed; otherwise, false. The default value is true.

    Remarks

    The backstage menu button is displayed before RibbonTab and its content can be set using BackstageMenuButtonContent property.

    Tabs

    Gets the collection that was used to generate the RibbonTab's within the SfRibbon control.

    Declaration
    public IList<RibbonTab> Tabs { get; }
    Property Value
    Type
    System.Collections.Generic.IList<RibbonTab>
    Remarks

    RibbonTab can be selected using SelectedTab property.

    See Also
    SelectedIndex

    Title

    Gets or sets the text that displays as a title at the top of the SfRibbon control.

    Declaration
    public string Title { get; set; }
    Property Value
    Type Description
    System.String

    The text that displays the title of the SfRibbon control. The default value is an empty string.

    Methods

    Dispose()

    Release the unmanaged resources of SfRibbon.

    Declaration
    public void Dispose()

    MeasureOverride(Size)

    Provides the measure size of the children.

    Declaration
    protected override Size MeasureOverride(Size availableSize)
    Parameters
    Type Name Description
    Windows.Foundation.Size availableSize

    Size available for the control.

    Returns
    Type Description
    Windows.Foundation.Size

    Returns the size measured.

    OnApplyTemplate()

    Contains the template logic of SfRibbon.

    Declaration
    protected override void OnApplyTemplate()

    OnCreateAutomationPeer()

    Declaration
    protected override AutomationPeer OnCreateAutomationPeer()
    Returns
    Type
    Microsoft.UI.Xaml.Automation.Peers.AutomationPeer

    Events

    SelectedTabChanged

    Occurs when the currently selected RibbonTab changes in SfRibbon.

    Declaration
    public event SelectionChangedEventHandler SelectedTabChanged
    Event Type
    Type
    Microsoft.UI.Xaml.Controls.SelectionChangedEventHandler
    Examples

    This example demonstrates how to invoke SelectedTabChanged event.

    ribbon.SelectedTabChanged += Ribbon_SelectedTabChanged;
    private void Ribbon_SelectedTabChanged(object sender, SelectionChangedEventArgs e)
    {
    

    }

    Implements

    System.IDisposable
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved