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: Enumeration Description Normal Allows the SfRibbon to display in standard layout, where RibbonGroup arrange the ribbon items in maximum of three rows. Simplified Allows the SfRibbon to display in simplified layout, where RibbonGroup arrange the ribbon items in a single line. Normal | Simplified Allows 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