Skip to main content

RibbonControl Class

The Ribbon Control.

Namespace: DevExpress.WinUI.Ribbon

Assembly: DevExpress.WinUI.Ribbon.v23.2.dll

NuGet Package: DevExpress.WinUI

#Declaration

public class RibbonControl :
    ContentControl,
    ILogicalOwner

#Remarks

Use the RibbonControl to create an application menu that organizes items into tabs and groups.

DevExpress WinUI RibbonControl

Run Demo: Ribbon Module in the WinUI Demo

#Add a RibbonControl to a Project

Follow the steps below to add a RibbonControl to an application:

  1. Reference the DevExpress.WinUI NuGet package. Refer to the following topic for more information: Get Started.
  2. Reference the xmlns:dxr="using:DevExpress.WinUI.Ribbon" assembly in the Window or UserControl section.
  3. Add the <dxr:RibbonControl></dxr:RibbonControl> markup to a XAML page.
  4. Add ribbon tabs, groups, and items (see the sections below).

#RibbonControl Structure

#Tabs and Groups

RibbonControl organizes content into multiple Tabs. Each tab contains Groups of command Items.

The following code sample populates the RibbonControl with Tabs, Groups, and items:

Show Code Sample
<Window ... 
    xmlns:dxr="using:DevExpress.WinUI.Ribbon"
    xmlns:dxc="using:DevExpress.WinUI.Core">
    <Grid>
        <dxr:RibbonControl>
            <dxr:RibbonControl.Tabs>
                <dxr:RibbonTab Caption="Home">
                    <dxr:RibbonGroup Caption="File">
                        <dxr:RibbonButton Content="Open" ItemType="Large"
                        ToolTipDescription="Open an existing document.">
                            <dxr:RibbonButton.LargeIcon>
                                <dxc:DXSymbolIconSource Symbol="OpenFile" />
                            </dxr:RibbonButton.LargeIcon>
                        </dxr:RibbonButton>
                        <dxr:RibbonButton Content="Save" ItemType="SmallWithText"
                        ToolTipDescription="Save the active document.">
                            <dxr:RibbonButton.SmallIcon>
                                <dxc:DXSymbolIconSource Symbol="Save" />
                            </dxr:RibbonButton.SmallIcon>
                        </dxr:RibbonButton>
                    </dxr:RibbonGroup>
                <dxr:RibbonGroup Caption="Zoom">
                    <dxr:RibbonDropdownButton Content="Zoom" ItemType="Large">
                        <dxr:RibbonDropdownButton.LargeIcon>
                            <dxc:DXSymbolIconSource Symbol="Zoom" />
                        </dxr:RibbonDropdownButton.LargeIcon>
                        <dxr:RibbonDropdownButton.Flyout>
                            <MenuFlyout>
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="10%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="25%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="50%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="75%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="100%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="150%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="200%" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="500%" />
                                <MenuFlyoutSeparator />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="Whole Page" />
                                <RadioMenuFlyoutItem GroupName="Zoom" Text="Page Width" />
                            </MenuFlyout>
                        </dxr:RibbonDropdownButton.Flyout>
                </dxr:RibbonGroup>
                <dxr:RibbonGroup Caption="Layout">
                    <dxr:RibbonDropdownButton Content="Page Layout" ItemType="Large">
                        <dxr:RibbonDropdownButton.LargeIcon>
                            <dxc:DXFontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C3;" />
                        </dxr:RibbonDropdownButton.LargeIcon>
                        <dxr:RibbonDropdownButton.Flyout>
                            <MenuFlyout>
                                <RadioMenuFlyoutItem GroupName="PageLayout" Text="Single Page">
                                    <RadioMenuFlyoutItem.Icon>
                                        <SymbolIcon Symbol="Page2" />
                                    </RadioMenuFlyoutItem.Icon>
                                </RadioMenuFlyoutItem>
                                <RadioMenuFlyoutItem GroupName="PageLayout" Text="Two Page">
                                    <RadioMenuFlyoutItem.Icon>
                                        <SymbolIcon Symbol="TwoPage" />
                                    </RadioMenuFlyoutItem.Icon>
                                </RadioMenuFlyoutItem>
                                <RadioMenuFlyoutItem GroupName="PageLayout" Text="Wrap Pages" />
                                <MenuFlyoutSeparator />
                                <ToggleMenuFlyoutItem Text="Enable Continuous Scrolling" />
                                <ToggleMenuFlyoutItem Text="Show Cover Page" />
                            </MenuFlyout>
                        </dxr:RibbonDropdownButton.Flyout>
                    </dxr:RibbonDropdownButton>
                    <dxr:RibbonSeparator />
                    <dxr:RibbonCheckBox Text="Ruler" ToolTipDescription="Show or hide ruler." />
                    <dxr:RibbonCheckBox Text="Gridlines" ToolTipDescription="Show or hide grid lines." />
                    <dxr:RibbonCheckBox Text="Status bar" ToolTipDescription="Show or hide status bar." />
                </dxr:RibbonGroup>
                </dxr:RibbonTab>
                <dxr:RibbonTab Caption="View">
                    <!-- ... -->
                </dxr:RibbonTab>
            </dxr:RibbonControl.Tabs>
            <RichEditBox ... />
        </dxr:RibbonControl>
    </Grid>
</Window>

#Items

Class Description Image
RibbonButton A button within a RibbonControl. WinUI RibbonControl - RibbonButton
RibbonCheckBox A checkbox within a RibbonControl.
RibbonCustomItem A custom item within a RibbonControl. The following image displays ComboBox in the RibbonControl‘s custom item. WinUI RibbonControl - Custom Item Combobox
RibbonDropdownButton A RibbonControl‘s button that includes a dropdown (a FlyoutBase class instance).
RibbonSeparator A line that separates neighboring RibbonItems within a single RibbonGroup. WinUI Ribbon Separator
RibbonSplitButton A RibbonControl‘s split button that consists of the regular RibbonButton and the dropdown button that displays a dropdown when you click or tap it.
RibbonToggleButton A toggle button within a RibbonControl. WinUI RibbonControl - ToggleButton

#Display a Specific Tab from Code

Set the SelectedTabIndex property to a ribbon tab’s index to display the tab in the RibbonControl.

See Also