Less Screen Space with the New Simplified Mode of RibbonView

Check out the latest feature of RadRibbonView - changing the default layout mode to a simplified one. Designed for all fans of keeping things neat and organized!

There are some things that we use every (or almost every) single day of our lives. If there is something we can all agree on, it is that we all strive for all these things to be well-organized and balanced. This was one of the main goals for Telerik UI for WPF’s R2 2019 Release as well.

That's why we make it easier to simplify the new Ribbon in our latest release. I believe that if you are fan of keeping things neat and organized, you’ll love it!

This smaller, more compact ribbon is designed to show you the most commonly used ribbon elements in a streamlined single line interface. It replaces the bulkier design that has dominated Microsoft Office for years. According to Microsoft's announcement of this new ribbon UI, the change is "designed to help users focus on their work and collaborate naturally with others".

How is this change achieved? By reducing vertical space and using a smaller number of highly used commands.

What is the main advantage? Boosted end user productivity, while still providing the ability to go back to the traditional ribbon view in a single toggle.

Let's dive into RadRibbonView’s new feature - changing the default layout mode to simplified. 

Setting Up Simplified Content

RadRibbonView’s new LayoutMode is designed to be fully customizable. What do I mean?

YOU are the author of the whole simplified content that will be shown when switching to the new mode. So, make the most of your power and use it wisely.

Some secret weapons to properly carry out this task include:

• The SimplifiedItems property of the RadRibbonTab
• The SimplifiedContentHeight property of the RadRibbonView
• Last but not least - this awesome help article

The SimplifiedItems property gives you full control over what is displayed, when the layout mode of the RadRibbonView is simplified. The idea of the simplified ribbon is to save vertical screen space; however, it comes at the cost of horizontal space. You may find the upcoming tips on how to adapt the default layout accordingly useful:

• Remove elements (buttons, groups) that are not an integral part of your application. They can always be reached by switching to the default mode.
• Combine multiple elements inside a dropdown. For example, if you have "Cut", "Copy" and "Paste" buttons in the default layout, you can combine them in a single RadRibbonSplitButton in the simplified layout.
• If you do not want a particular RadRibbonGroup to be collapsed when the LayoutMode is Simplified, you can utilize the Variants property of the RadRibbonGroup.

To see them in action, shall we begin our journey to perfection? In the following example, I use RadDiagram’s ribbon + the handy tips a bit higher up. Oh, and the popular Fluent theme (yes, the new LayoutMode undoubtedly comes with built-in support for all available themes!).

<telerikRibbon:RadRibbonGroupHeader="{telerik:LocalizableResource Key=DiagramRibbon_General}"x:Name="generalGroup"
    telerik:ScreenTip.Description="{telerik:LocalizableResource Key=DiagramRibbon_GeneralDescription}"
    telerik:ScreenTip.Title="{telerik:LocalizableResource Key=DiagramRibbon_General}"
    Icon="{telerik:IconResource IconRelativePath=16/CollapsedGroupIcons/home_general.png, IconSources={StaticResource IconPaths}}">
    <telerikRibbon:RadRibbonButtonx:Name="NewButton"Command="diagram:DiagramCommands.Clear"ribbonPrimitives:KeyTipService.AccessText="N"
        CommandTarget="{TemplateBinding Diagram}"
        LargeImage="{telerik:IconResource IconRelativePath=new.png, IconSources={StaticResource IconPaths}}"Size="Large"Text="{telerik:LocalizableResource Key=DiagramRibbon_New}"/>
    <telerikRibbon:RadRibbonButtonx:Name="OpenButton"Command="diagram:DiagramCommands.Open"ribbonPrimitives:KeyTipService.AccessText="O"
        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
        LargeImage="{telerik:IconResource IconRelativePath=open.png, IconSources={StaticResource IconPaths}}"Size="Large"Text="{telerik:LocalizableResource Key=DiagramRibbon_Open}"/>
    <telerikRibbon:RadRibbonButtonx:Name="SaveButton"Command="diagram:DiagramCommands.Save"ribbonPrimitives:KeyTipService.AccessText="S"
        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
        LargeImage="{telerik:IconResource IconRelativePath=save.png, IconSources={StaticResource IconPaths}}"Size="Large"Text="{telerik:LocalizableResource Key=DiagramRibbon_Save}"/>
    <telerik:RadCollapsiblePanelx:Name="undoRedoPanel">
        <telerikRibbon:RadRibbonSplitButton  telerik:StyleManager.Theme="{StaticResource Theme}"Command="diagram:DiagramCommands.Undo"x:Name="UndoButton"ribbonPrimitives:KeyTipService.AccessText="U"
            CommandTarget="{TemplateBinding Diagram}"CollapseToSmall="WhenGroupIsSmall"
            LargeImage="{telerik:IconResource IconRelativePath=Undo.png, IconSources={StaticResource IconPaths}}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_Undo}">
            <telerikRibbon:RadRibbonSplitButton.DropDownContent>
                <telerik:RadListBoxtelerik:StyleManager.Theme="{StaticResource Theme}"MaxHeight="500"BorderThickness="0"ItemsSource="{Binding Diagram.UndoRedoService.UndoStack, RelativeSource={RelativeSource TemplatedParent}}"ItemTemplate="{StaticResource UndoItemTemplate}"x:Name="UndoStackListBox"/>
            </telerikRibbon:RadRibbonSplitButton.DropDownContent>
        </telerikRibbon:RadRibbonSplitButton>
        <telerikRibbon:RadRibbonSplitButtontelerik:StyleManager.Theme="{StaticResource Theme}"Command="diagram:DiagramCommands.Redo"x:Name="RedoButton"ribbonPrimitives:KeyTipService.AccessText="R"
            CommandTarget="{TemplateBinding Diagram}"CollapseToSmall="WhenGroupIsSmall"
            LargeImage="{telerik:IconResource IconRelativePath=Redo.png, IconSources={StaticResource IconPaths}}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_Redo}">
            <telerikRibbon:RadRibbonSplitButton.DropDownContent>
                <telerik:RadListBoxtelerik:StyleManager.Theme="{StaticResource Theme}"MaxHeight="500"BorderThickness="0"ItemsSource="{Binding Diagram.UndoRedoService.RedoStack, RelativeSource={RelativeSource TemplatedParent}}"ItemTemplate="{StaticResource UndoItemTemplate}"x:Name="RedoStackListBox"/>
            </telerikRibbon:RadRibbonSplitButton.DropDownContent>
        </telerikRibbon:RadRibbonSplitButton>
    </telerik:RadCollapsiblePanel>
</telerikRibbon:RadRibbonGroup>

Now, let’s define its SimplifiedItems.

<telerikRibbon:RadRibbonTab.SimplifiedItems>
    <telerikRibbon:RadRibbonGroupHeader="{telerik:LocalizableResource Key=DiagramRibbon_General}"
        telerik:ScreenTip.Description="{telerik:LocalizableResource Key=DiagramRibbon_GeneralDescription}"
        telerik:ScreenTip.Title="{telerik:LocalizableResource Key=DiagramRibbon_General}"
        Icon="{telerik:IconResource IconRelativePath=16/CollapsedGroupIcons/home_general.png, IconSources={StaticResource IconPaths}}">
        <telerikRibbon:RadRibbonDropDownButtonText="{telerik:LocalizableResource Key=DiagramRibbon_New}"VerticalAlignment="Center"SmallImage="{telerik:RadGlyph Glyph=}">
            <telerikRibbon:RadRibbonDropDownButton.DropDownContent>
                <StackPanel>
                    <telerikRibbon:RadRibbonButtonCommand="diagram:DiagramCommands.Clear"ribbonPrimitives:KeyTipService.AccessText="N"
                        CommandTarget="{TemplateBinding Diagram}"Margin="0 5 0 0"
                        LargeImage="{telerik:IconResource IconRelativePath=new.png, IconSources={StaticResource IconPaths}}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_New}"/>
                    <telerikRibbon:RadRibbonButtonCommand="diagram:DiagramCommands.Open"ribbonPrimitives:KeyTipService.AccessText="O"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                        LargeImage="{telerik:IconResource IconRelativePath=open.png, IconSources={StaticResource IconPaths}}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_Open}"/>
                    <telerikRibbon:RadRibbonButtonCommand="diagram:DiagramCommands.Save"ribbonPrimitives:KeyTipService.AccessText="S"
                        CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"Margin="0 0 0 5"
                        LargeImage="{telerik:IconResource IconRelativePath=save.png, IconSources={StaticResource IconPaths}}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_Save}"/>
                </StackPanel>
            </telerikRibbon:RadRibbonDropDownButton.DropDownContent>
        </telerikRibbon:RadRibbonDropDownButton>
        <telerik:RadCollapsiblePanel>
            <telerikRibbon:RadRibbonSplitButtontelerik:StyleManager.Theme="{StaticResource Theme}"Command="diagram:DiagramCommands.Undo"ribbonPrimitives:KeyTipService.AccessText="U"LargeImage="{telerik:IconResource IconRelativePath=Undo.png, IconSources={StaticResource IconPaths}}"CommandTarget="{TemplateBinding Diagram}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_Undo}">
                <telerikRibbon:RadRibbonSplitButton.DropDownContent>
                    <telerik:RadListBoxtelerik:StyleManager.Theme="{StaticResource Theme}"MaxHeight="500"BorderThickness="0"ItemsSource="{Binding Diagram.UndoRedoService.UndoStack, RelativeSource={RelativeSource TemplatedParent}}"ItemTemplate="{StaticResource UndoItemTemplate}"/>
                </telerikRibbon:RadRibbonSplitButton.DropDownContent>
            </telerikRibbon:RadRibbonSplitButton>
            <telerikRibbon:RadRibbonSplitButtontelerik:StyleManager.Theme="{StaticResource Theme}"Command="diagram:DiagramCommands.Redo"ribbonPrimitives:KeyTipService.AccessText="R"LargeImage="{telerik:IconResource IconRelativePath=Redo.png, IconSources={StaticResource IconPaths}}"CommandTarget="{TemplateBinding Diagram}"Size="Medium"Text="{telerik:LocalizableResource Key=DiagramRibbon_Redo}">
                <telerikRibbon:RadRibbonSplitButton.DropDownContent>
                    <telerik:RadListBoxtelerik:StyleManager.Theme="{StaticResource Theme}"MaxHeight="500"BorderThickness="0"ItemsSource="{Binding Diagram.UndoRedoService.RedoStack, RelativeSource={RelativeSource TemplatedParent}}"ItemTemplate="{StaticResource UndoItemTemplate}"/>
                </telerikRibbon:RadRibbonSplitButton.DropDownContent>
            </telerikRibbon:RadRibbonSplitButton>
        </telerik:RadCollapsiblePanel>
    </telerikRibbon:RadRibbonGroup>
<!-- Other groups here -->
</telerikRibbon:RadRibbonTab.SimplifiedItems>

And this is what the simplified mode looks like:

Switching to the Simplified Ribbon

Switching the layout of the ribbon can either be completed using the UI, or programmatically.

To be able to switch to Simplified Mode, you just set the ShowLayoutModeButton property of the control to True. The content of this button is also fully customizable through the LayoutModeButtonContent property.

And yes - using this button allows you to toggle back and forth between the simplified  and the traditional ribbon UI.

<telerik:RadRibbonViewShowLayoutModeButton="True"LayoutModeButtonContent="Simplified Ribbon">
        <!--
            RadRibbonTabs
        -->
</telerik:RadRibbonView>

Choosing to change the layout in code, you can:

this.ribbonView.LayoutMode = RibbonLayout.Simplified; 
 
// or 
  
RibbonCommands.ToggleLayoutModeCommand.Execute(null, this.ribbonView); 

Just look what we did! Tiny, tidy, totally tubular! 

Try It Out and Share Your Feedback

Didn’t that fire you with enthusiasm to immediately give the new RadRibbonView’s simplified layout mode a try? I know it did. Do not wait another minute and get the latest version of:

Telerik UI for WPF

If you have any difficulties, feel free to reach out to us – we are always there for you. And don’t forget to drop a line in the comments section or share your feedback to help us build the future of Telerik UI for WPF together.

Happy coding all!