RibbonToolbarControl Class

The Ribbon Toolbar control.

Namespace: DevExpress.WinUI.Ribbon

Assembly: DevExpress.WinUI.Ribbon.v21.1.dll

Declaration

[Bindable]
[ContentProperty(Name = "Tabs")]
[TemplatePart(Name = "PART_HeaderControl", Type = typeof(RibbonToolbarHeaderControl))]
[TemplatePart(Name = "PART_HelpPane", Type = typeof(HelpPaneViewBase))]
public class RibbonToolbarControl :
    RibbonControlBase

Remarks

Use the RibbonToolbarControl to create an application menu that organizes commands into tabs and groups.

Ribbon

Add a RibbonToolbarControl to a Project

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

  1. Reference the DevExpress WinUI NuGet package. Refer to the following topic for more information: Get Started.
  2. Reference the xmlns:Ribbon="using:DevExpress.WinUI.Ribbon" assembly in the Page section.
  3. Add the <Ribbon:RibbonToolbarControl>...</Ribbon:RibbonToolbarControl> markup to a XAML page.
  4. Configure the component (see the sections below).

RibbonToolbarControl Structure

Tabs and Groups

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

RibbonToolbarControl - Tabs and Groups

The following code sample populates the RibbonToolbarControl with Tabs and Groups:

<Ribbon:RibbonToolbarControl>
    <Ribbon:RibbonToolbarTab Caption="Main">
        <Ribbon:RibbonToolbarGroup Caption="Font">
            <Ribbon:RibbonToolbarToggleButton/>
            <Ribbon:RibbonToolbarComboBox >
                <ComboBoxItem>Arial</ComboBoxItem>
                <ComboBoxItem>Calibri</ComboBoxItem>
                <ComboBoxItem>Times New Roman</ComboBoxItem>
            </Ribbon:RibbonToolbarComboBox>
            <Ribbon:RibbonToolbarSpinEdit Value="14"/>
        </Ribbon:RibbonToolbarGroup>
        <Ribbon:RibbonToolbarGroup Caption="Alignment">
            <Ribbon:RibbonToolbarToggleButton>
                <Ribbon:RibbonToolbarToggleButton.Icon>
                    <SymbolIcon Symbol="AlignLeft" />
                </Ribbon:RibbonToolbarToggleButton.Icon>
            </Ribbon:RibbonToolbarToggleButton>
            <Ribbon:RibbonToolbarToggleButton>
                <Ribbon:RibbonToolbarToggleButton.Icon>
                    <SymbolIcon Symbol="AlignCenter" />
                </Ribbon:RibbonToolbarToggleButton.Icon>
            </Ribbon:RibbonToolbarToggleButton>
            <Ribbon:RibbonToolbarToggleButton>
                <Ribbon:RibbonToolbarToggleButton.Icon>
                    <SymbolIcon Symbol="AlignRight" />
                </Ribbon:RibbonToolbarToggleButton.Icon>
            </Ribbon:RibbonToolbarToggleButton>
        </Ribbon:RibbonToolbarGroup>
        <Ribbon:RibbonToolbarGroup Caption="Clipboard">
            <Ribbon:RibbonToolbarMenuButton>
                <Ribbon:RibbonToolbarMenuButton.Icon>
                    <SymbolIcon Symbol="Pictures"/>
                </Ribbon:RibbonToolbarMenuButton.Icon>
                <Ribbon:RibbonToolbarButton Content="This Device..." >
                    <Ribbon:RibbonToolbarButton.Icon>
                        <SymbolIcon Symbol="Folder"/>
                    </Ribbon:RibbonToolbarButton.Icon>
                </Ribbon:RibbonToolbarButton>
                <Ribbon:RibbonToolbarButton Content="Stock Images...">
                    <Ribbon:RibbonToolbarButton.Icon>
                        <SymbolIcon Symbol="BrowsePhotos"/>
                    </Ribbon:RibbonToolbarButton.Icon>
                </Ribbon:RibbonToolbarButton>
                <Ribbon:RibbonToolbarButton Content="Online Pictures..." >
                    <Ribbon:RibbonToolbarButton.Icon>
                        <SymbolIcon Symbol="Globe"/>
                    </Ribbon:RibbonToolbarButton.Icon>
                </Ribbon:RibbonToolbarButton>
            </Ribbon:RibbonToolbarMenuButton>
        </Ribbon:RibbonToolbarGroup>
    </Ribbon:RibbonToolbarTab>
    <Ribbon:RibbonToolbarTab Caption="Insert">
        <Ribbon:RibbonToolbarGroup Caption="Group">
            <Ribbon:RibbonToolbarButton IconSource="ms-appx:///Images/Picture.svg" FontSize="14"
                                        Content="Image" IconWidth="32" IconHeight="32"/>
        </Ribbon:RibbonToolbarGroup>
    </Ribbon:RibbonToolbarTab>
</Ribbon:RibbonToolbarControl>

RibbonToolbarControl - Tabs and Groups - Example

Items

Class Image
RibbonToolbarButton Ribbon_Button
RibbonToolbarCheckBox Ribbon_Checkbox
RibbonToolbarComboBox Ribbon_Combobox
RibbonToolbarMenuButton Ribbon_Menu_Button
RibbonToolbarRadioButton Ribbon_Radio
RibbonToolbarSpinEdit Ribbon_SpinEdit
RibbonToolbarSplitButton Ribbon_SplitButton
RibbonToolbarTextBox Ribbon_Textbox
RibbonToolbarToggleButton Ribbon_ToggleButton

Help Pane

If you want to enable quick access to certain commands, use the HelpPane. It displays the same content in the control's top-right corner regardless of the currently selected tab.

RibbonToolbarControl - Help Pane

You can add the following items to the HelpPane:

The following code sample adds a HelpPane to a RibbonToolbarControl:

<Ribbon:RibbonToolbarControl>
    <Ribbon:RibbonToolbarControl.HelpPane>
        <Ribbon:RibbonToolbarHelpPane>
            <Ribbon:RibbonToolbarHelpPaneButton Content="Save Changes" Command="{Binding SaveChangesCommand}">
                <Ribbon:RibbonToolbarHelpPaneButton.Icon>
                    <SymbolIcon Symbol="Save" />
                </Ribbon:RibbonToolbarHelpPaneButton.Icon>
            </Ribbon:RibbonToolbarHelpPaneButton>
            <Ribbon:RibbonToolbarHelpPaneToggleButton Content="Delete" IconSource="&#xE74D;"
                                                       Click="RibbonToolbarHelpPaneToggleButton_Click" />
        </Ribbon:RibbonToolbarHelpPane>
    </Ribbon:RibbonToolbarControl.HelpPane>
</Ribbon:RibbonToolbarControl>

Context Menu

You can specify a context menu for the RibbonToolbarControl's content area. In the RibbonToolbarControl.Content section, add a ContextToolbarControl.

RibbonToolbarControl - ContextPanel

You can add the following items to the Context Panel:

The following code sample displays a ContextToolbarControl with a ContextToolbarMenuButton and three ContextToolbarButtons in a RibbonToolbarControl:

<Ribbon:RibbonToolbarControl Width="400">
    <Ribbon:RibbonToolbarTab Caption="Page Layout" >
        <Ribbon:RibbonToolbarGroup Caption="Sheet Options">
            <Ribbon:RibbonToolbarButton Content="Button"  />
        </Ribbon:RibbonToolbarGroup>
    </Ribbon:RibbonToolbarTab>
    <Ribbon:RibbonToolbarControl.Content>
        <StackPanel x:Name="Content">
            <Ribbon:ContextToolbarControl Target="{Binding ElementName=Content}" Orientation="Vertical">
                <Ribbon:ContextToolbarGroup>
                    <Ribbon:ContextToolbarMenuButton Content="Pictures" ItemStyle="Glyph" Orientation="Vertical">
                        <Ribbon:ContextToolbarMenuButton.Icon>
                            <SymbolIcon Symbol="Pictures"/>
                        </Ribbon:ContextToolbarMenuButton.Icon>
                        <Ribbon:ContextToolbarButton Content="This Device..." >
                            <Ribbon:ContextToolbarButton.Icon>
                                <SymbolIcon Symbol="Folder"/>
                            </Ribbon:ContextToolbarButton.Icon>
                        </Ribbon:ContextToolbarButton>
                        <Ribbon:ContextToolbarButton Content="Stock Images...">
                            <Ribbon:ContextToolbarButton.Icon>
                                <SymbolIcon Symbol="BrowsePhotos"/>
                            </Ribbon:ContextToolbarButton.Icon>
                        </Ribbon:ContextToolbarButton>
                        <Ribbon:ContextToolbarButton Content="Online Pictures..." >
                            <Ribbon:ContextToolbarButton.Icon>
                                <SymbolIcon Symbol="Globe"/>
                            </Ribbon:ContextToolbarButton.Icon>
                        </Ribbon:ContextToolbarButton>
                    </Ribbon:ContextToolbarMenuButton>
                    <Ribbon:ContextToolbarButton Content="Cut"/>
                    <Ribbon:ContextToolbarButton Content="Copy"/>
                    <Ribbon:ContextToolbarButton Content="Paste"/>
                </Ribbon:ContextToolbarGroup>
            </Ribbon:ContextToolbarControl>
            <Button Width="400" Height="100" />
        </StackPanel>
    </Ribbon:RibbonToolbarControl.Content>
</Ribbon:RibbonToolbarControl>

RibbonToolbarControl - ContextPanel Example

Inheritance

Object
DependencyObject
UIElement
FrameworkElement
Control
ContentControl
DevExpress.WinUI.Controls.Core.Internal.ContentControlEx
RibbonControlBase
RibbonToolbarControl
See Also