Performance Enhancements

May 19, 2021
4 minutes to read

This topic contains recommendations to help you improve RibbonControl performance.

Deferred RibbonPage Content Loading

You can load RibbonPage content when a user opens the page. This will speed up your RibbonControl cold[1] and hot[2] startup times.

When to Use

This technique works the best when your RibbonControl contains multiple RibbonPages with lots of items, galleries, or other heavy-weight content.

Application Startup Time Acceleration

The following table demonstrates application startup times when the RichEdit ‘s RibbonControl deferred loading is enabled and disabled:

Deferred Loading

Startup time, ms

| | --- | --- | |

Cold Start[1]

Hot Start[2]

| | --- | --- | |

Disabled

4700

1775

| |

Enabled

3094

891

The results above were obtained from the .NET Framework application with the default theme (Office2019Colorful) applied.

How to Enable

To enable deferred RibbonPage item loading, move a RibbonPage’s RibbonPageGroups to the GroupCollectionTemplate.

The code sample below populates the RibbonPage ‘s GroupCollectionTemplate with items.

XAML

xaml

<dx:ThemedWindow ...
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon">
    <dxr:RibbonControl RibbonStyle="Office2019">
        <dxr:RibbonDefaultPageCategory>
            <dxr:RibbonPage Caption="File">
                <!-- ... -->
            </dxr:RibbonPage>
            <dxr:RibbonPage Caption="Home">
                <dxr:RibbonPage.GroupCollectionTemplate>
                    <DataTemplate>
                        <ItemsControl>
                            <dxr:RibbonPageGroup Caption="File">
                                <dxb:BarButtonItem ... />
                                <dxb:BarButtonItem ... />
                                <dxb:BarButtonItem ... />
                                <dxb:BarButtonItem ... />
                                <dxb:BarItemLinkSeparator />
                                <dxb:BarSplitButtonItem ... />
                            </dxr:RibbonPageGroup>
                            <dxr:RibbonPageGroup Caption="Edit">
                                <!-- ... -->
                            </dxr:RibbonPageGroup>
                            <dxr:RibbonPageGroup Caption="Format">
                                <!-- ... -->
                            </dxr:RibbonPageGroup>
                        </ItemsControl>
                    </DataTemplate>
                </dxr:RibbonPage.GroupCollectionTemplate>
            </dxr:RibbonPage>
            <dxr:RibbonPage Caption="Gallery Page">
                <dxr:RibbonPage.GroupCollectionTemplate>
                    <DataTemplate>
                        <ItemsControl>
                            <dxr:RibbonPageGroup Caption="Font">
                                <dxr:RibbonGalleryBarItem Content="Font">
                                    <!-- ... -->
                                </dxr:RibbonGalleryBarItem>
                                <dxb:BarEditItem ... >
                            </dxr:RibbonPageGroup>
                        </ItemsControl>
                    </DataTemplate>
                </dxr:RibbonPage.GroupCollectionTemplate>
            </dxr:RibbonPage>
        </dxr:RibbonDefaultPageCategory>
    </dxr:RibbonControl>
</dx:ThemedWindow>

Limitations

Keyboard Shortcuts

If BarItems are defined in the GroupCollectionTemplate and this RibbonPage is not shown yet, their keyboard shortcuts cannot trigger specified commands.

Follow these steps to enable a BarItem’s shortcuts:

Populate the Commands collection with BarItemCommand items and define their key (x:Key), commands (the Command property), and keyboard shortcuts (the KeyGesture property).
Bind BarItems in the GroupCollectionTemplate to BarItemCommand items. Note that you should use the RibbonPage attached property to get a proper RibbonPage ‘s DataContext.

The following code sample is based on the previous code sample and extends its functionality with keyboard shortcut support for the New, Open, and Close buttons:

XAML

xaml

<dx:ThemedWindow ...
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon">
    <dxr:RibbonControl RibbonStyle="Office2019">
        <dxr:RibbonDefaultPageCategory>
            <dxr:RibbonPage Caption="File">
                <!-- ... -->
            </dxr:RibbonPage>
            <dxr:RibbonPage Caption="Home">
                <dxr:RibbonPage.Commands>
                    <dxb:BarItemCommand x:Key="newCommand" Command="{Binding Path=newCommand}" KeyGesture="CTRL+N" />
                    <dxb:BarItemCommand x:Key="openCommand" Command="{Binding Path=openCommand}" KeyGesture="CTRL+O" />
                    <dxb:BarItemCommand x:Key="closeCommand" Command="{Binding Path=closeCommand}" KeyGesture="CTRL+W" />
                </dxr:RibbonPage.Commands>
                <dxr:RibbonPage.GroupCollectionTemplate>
                    <DataTemplate>
                        <ItemsControl>
                            <dxr:RibbonPageGroup Caption="File">
                                <dxb:BarButtonItem Name="bNew" Content="New"
                                    Command="{Binding Path=(dxr:RibbonPage.RibbonPage).Commands[newCommand], RelativeSource={RelativeSource Self}}" />
                                <dxb:BarButtonItem Content="Open"
                                    Command="{Binding Path=(dxr:RibbonPage.RibbonPage).Commands[openCommand], RelativeSource={RelativeSource Self}}" />
                                <dxb:BarButtonItem Content="Close" 
                                    Command="{Binding Path=(dxr:RibbonPage.RibbonPage).Commands[closeCommand], RelativeSource={RelativeSource Self}}" />
                                <!-- ... -->
                            </dxr:RibbonPageGroup>
                        </ItemsControl>
                    </DataTemplate>
                </dxr:RibbonPage.GroupCollectionTemplate>
            </dxr:RibbonPage>
            <!-- ... -->
    </dxr:RibbonControl>
</dx:ThemedWindow>

BarItemLinks

BarItems defined in GroupCollectionTemplate are not available until their parent RibbonPage is displayed. We do not recommend you to reference such items with BarItemLink. If you need to display an item from GroupCollectionTemplate in the Quick Access Toolbar (QAT), define a copy of an item instead.

Customization Window

Customization Window does not display BarItems defined in GroupCollectionTemplate until their parent RibbonPage is displayed.

Deferred Ribbon Merging

In this mode, a RibbonControl merges only displayed RibbonPages. When you open a page on the merged RibbonControl for the first time, Ribbon merges it with the child Ribbon’s page.

Disable This Behaviour

You can set the UseRibbonDeferredPageMerging property to false to disable deferred page merging. In this case, the application loads all content from main and child Ribbons, and then merges these Ribbons. This technique slows down Ribbon merging.

Lightweight Templates

Ribbon uses lightweight templates to render its items in optimized mode. This mode improves scrolling performance and reduces subsequent load times after loading the first instance of a control.

Optimized mode is enabled out of the box for all the supported controls. You can set the UseLightweightBarItems compatibility property to false to disable BarItem lightweight templates in your application.

You can use lightweight templates with the following BarItem descendants:

Lightweight templates are available in the following themes ( enabled out of the box):

Footnotes

The time span between when an application starts and when content is rendered.
The time it takes to show a form for the second and subsequent times.