My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. WPF
  3. Ribbon

How to working with ribbon button image size in WPF Ribbon control?

4 mins read

The WPF Ribbon control accommodates all the tools required for an application in a single, easy-to-navigate user interface like Microsoft Office. The built-in ribbon buttons provide basic functionalities like normal button and facilitates different options to customize ribbon button image size and its content. This article explains how to create simple ribbon and working with ribbon button image size in various states of ribbon.

Steps to create simple WPF Ribbon

  1. Create a new C# WPF application project.

Create new C# WPF application project

 

  1. Search and install the Syncfusion.Tools.WPF NuGet package as reference to your application from nuget.org.

Install Syncfusion.Tools.WPF Nuget package reference

 

  1. Include the Syncfusion namespace to access controls from the Syncfusion.Tools.WPF assembly.

XAML

<Window x:Class="CreateRibbonSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CreateRibbonSample"
        mc:Ignorable="d" 
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

 

  1. Change the default window to RibbonWindow.

XAML

<syncfusion:RibbonWindow x:Class="CreateRibbonSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CreateRibbonSample"
        mc:Ignorable="d" 
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</syncfusion:RibbonWindow>

 

  1. Add following namespace and inherit MainWindow from "RibbonWindow" in code behind.

C#

using Syncfusion.Windows.Tools.Controls;
public partial class MainWindow : RibbonWindow

VB

Imports Syncfusion.Windows.Tools.Controls
Public Partial Class MainWindow
    Inherits RibbonWindow
End Class

 

  1. Now add Ribbon control using the Syncfusion namespace.

XAML

<syncfusion:RibbonWindow x:Class="CreateRibbonSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CreateRibbonSample"
        mc:Ignorable="d" 
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <syncfusion:Ribbon/>
    </Grid>
</syncfusion:RibbonWindow>
  1. Ribbon supports various visual styles using SfSkinManager. To apply Microsoft Office 2016 Colorful like UI, search and install Syncfusion.SfSkinManager.WPF and Syncfusion.Themes.Office2016Colorful.WPF NuGet package as reference from nuget.org. Then include the SfSkinManager namespace and set "Office2016Colorful" style as shown in below code snippet.

XAML

<syncfusion:RibbonWindow x:Class="CreateRibbonSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CreateRibbonSample"  
        mc:Ignorable="d" 
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
        skin:SfSkinManager.VisualStyle="Office2016Colorful"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <syncfusion:Ribbon VerticalAlignment="Top"/>
    </Grid>
</syncfusion:RibbonWindow>

 

  1. Add RibbonTab and include RibbonBar's as its children.

XAML

<syncfusion:RibbonWindow x:Class="CreateRibbonSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CreateRibbonSample"  
        mc:Ignorable="d"         xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
        skin:SfSkinManager.VisualStyle="Office2016Colorful"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <syncfusion:Ribbon VerticalAlignment="Top">
            <syncfusion:RibbonTab Caption="HOME"  IsChecked="True">
                <syncfusion:RibbonBar Name="New" Width="90"  Header="New"/>
                <syncfusion:RibbonBar Name="Delete" Width="180"  Header="Delete"/>
                <syncfusion:RibbonBar Header="Basic Text"/>
            </syncfusion:RibbonTab>
            <syncfusion:RibbonTab Background="Transparent" Caption="Insert" FocusVisualStyle="{x:Null}" Focusable="False" MinWidth="23"/>
        </syncfusion:Ribbon>
    </Grid>
</syncfusion:RibbonWindow>

 

 

Working with ribbon button image size

Now add Ribbon items such as RibbonButton, SplitButton, DropDownButton, etc. The ribbon button image size can be changed using its SizeForm and IconStretch properties. The various SizeForm enumeration values in ribbon button are:

  • Large: Defines a large size button with large image and text.
  • Small: Defines a small size button with small image and text.
  • ExtraSmall: Defines an extra small size button with a small image alone.

The IconStretch property describes how an image should be stretched to fill the destination rectangle layout. Its various values are:

  • Fill: The aspect ratio of the image is not preserved as the image is resized to fill the destination dimensions.
  • Uniform: The aspect ratio is preserved as the image is resized to fit in the destination dimensions.
  • UniformToFill: The aspect ratio is preserved as the image is resized to fill the destination dimensions.
  • None: The original size of the image is preserved.

XAML

<syncfusion:RibbonTab Caption="HOME"  IsChecked="True">
    <syncfusion:RibbonBar Name="New" Header="New">
        <syncfusion:RibbonButton SizeForm="Large" Label="New Email" IconStretch="Uniform" LargeIcon="Resources\Mail-16.png"/>
        <syncfusion:DropDownButton SizeForm="Large" Label="New Items" LargeIcon="Resources/Mail Add-WF.png">
            <syncfusion:DropDownMenuItem Header="E-mail Message"/>
            <syncfusion:DropDownMenuItem Header="Appointment"/>
            <syncfusion:DropDownMenuItem Header="Meeting"/>
            <syncfusion:DropDownMenuItem Header="Contact"/>
            <syncfusion:DropDownMenuItem Header="Task"/>
        </syncfusion:DropDownButton>
    </syncfusion:RibbonBar>
    <syncfusion:RibbonBar Name="Delete" Header="Delete">
        <syncfusion:RibbonButton Label="Ignore" SmallIcon="Resources\Mail-16.png" />
        <syncfusion:SplitButton Label="Clean Up" SmallIcon="Resources/Mail Delete-WF.png" >
            <syncfusion:DropDownMenuItem Header="Clean Up Folder"/>
            <syncfusion:DropDownMenuItem Header="Clean Up Conversation"/>
            <syncfusion:DropDownMenuItem Header="Clean Up Folder/SubFolder"/>
        </syncfusion:SplitButton>
        <syncfusion:SplitButton Label="Junk" SmallIcon="Resources/Mail Remove-WF.png">
            <syncfusion:DropDownMenuItem Header="Block sender"/>
            <syncfusion:DropDownMenuItem Header="Never block sender"/>
        </syncfusion:SplitButton>
 
        <syncfusion:RibbonButton Label="Delete" SizeForm="Large" LargeIcon="Resources/Garbage-WF.png" />
        <syncfusion:RibbonButton Label="Archive" SizeForm="Large" LargeIcon="Resources/Archive02-WF.png"/>
    </syncfusion:RibbonBar>
    <syncfusion:RibbonBar Header="Basic Text">
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Bold.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Text-Italic.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Text Decoration-05.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignCenter-WF.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignLeft-WF.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignRight-WF.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignJustify-WF.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Bullets-02-WF.png"/>
        <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Bullets-01-WF.png"/>
    </syncfusion:RibbonBar>
</syncfusion:RibbonTab>

 

By executing the above code sample, Ribbon control will be displayed like below.

Ribbon control showcasing various properties to change ribbon button image size

Adaptive Ribbon Layout (Ribbon Resizing)

The ribbon control dynamically resizes as width of the window increases or decreases. When the window border touches the last positioned form, items inside will re-arrange itself as per the window size. On further decrease in ribbon window size, the items in the Ribbon bar(s) will be converted from "Large" to "Small" and then to "Extra Small".  Finally, Ribbon bar(s) will end up converted into a dropdown button (by default) and its items can be accessed by clicking on the dropdown arrow.

You need to set the IsAutoSizeFormEnabled property as "True" to get responsive ribbon window. The image for the dropdown button converted from Ribbon bar can be set using the CollapseImage property.

XAML

<syncfusion:Ribbon VerticalAlignment="Top" syncfusion:Ribbon.IsAutoSizeFormEnabled="True">
    <syncfusion:RibbonTab Caption="HOME"  IsChecked="True">
        <syncfusion:RibbonBar Name="New" Header="New" CollapseImage="Resources\Mail-16.png">
            <syncfusion:RibbonButton SizeForm="Large" Label="New Email" IconStretch="Uniform" LargeIcon="Resources\Mail-16.png" SmallIcon="Resources\Mail-16.png"/>
            <syncfusion:DropDownButton SizeForm="Large" Label="New Items" LargeIcon="Resources/Mail Add-WF.png" SmallIcon="Resources/Mail Add-WF.png">
                <syncfusion:DropDownMenuItem Header="E-mail Message"/>
                <syncfusion:DropDownMenuItem Header="Appointment"/>
                <syncfusion:DropDownMenuItem Header="Meeting"/>
                <syncfusion:DropDownMenuItem Header="Contact"/>
                <syncfusion:DropDownMenuItem Header="Task"/>
            </syncfusion:DropDownButton>
        </syncfusion:RibbonBar>
        <syncfusion:RibbonBar Name="Delete" Header="Delete" CollapseImage="Resources/Mail Delete-WF.png">
            <syncfusion:RibbonButton Label="Ignore" SmallIcon="Resources\Mail-16.png" IconStretch="Fill"/>
            <syncfusion:SplitButton Label="Clean Up" SmallIcon="Resources/Mail Delete-WF.png" >
                <syncfusion:DropDownMenuItem Header="Clean Up Folder"/>
                <syncfusion:DropDownMenuItem Header="Clean Up Conversation"/>
                <syncfusion:DropDownMenuItem Header="Clean Up Folder/SubFolder"/>
            </syncfusion:SplitButton>
            <syncfusion:SplitButton HorizontalAlignment="Left" Label="Junk" SmallIcon="Resources/Mail Remove-WF.png">
                <syncfusion:DropDownMenuItem Header="Block sender"/>
                <syncfusion:DropDownMenuItem Header="Never block sender"/>
            </syncfusion:SplitButton>
            <syncfusion:RibbonButton Label="Delete" SizeForm="Large" LargeIcon="Resources/Garbage-WF.png" SmallIcon="Resources/Garbage-WF.png" />
            <syncfusion:RibbonButton Label="Archive" SizeForm="Large" LargeIcon="Resources/Archive02-WF.png" SmallIcon="Resources/Archive02-WF.png"/>
        </syncfusion:RibbonBar>
        <syncfusion:RibbonBar Header="Basic Text" CollapseImage="Resources/AlignJustify-WF.png">
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Bold.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Text-Italic.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Text Decoration-05.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignCenter-WF.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignLeft-WF.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignRight-WF.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/AlignJustify-WF.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Bullets-02-WF.png"/>
            <syncfusion:RibbonButton SizeForm="ExtraSmall" SmallIcon="Resources/Bullets-01-WF.png"/>
        </syncfusion:RibbonBar>
 
    </syncfusion:RibbonTab>
    <syncfusion:RibbonTab Background="Transparent" Caption="Insert" FocusVisualStyle="{x:Null}" Focusable="False" MinWidth="23"/>
</syncfusion:Ribbon>

 

Adaptive Ribbon Layout (Ribbon Resizing)

UG link: Adding Ribbon Button

Reference: How to load vector image as Ribbon Icon in WPF for better icon quality?

View WPF Ribbon Button Image Demo in GitHub

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied