Styling RadRibbonWindow min/max/close buttons

[Jason]

I have an application that has a RadRibbonWindow form, with a grid and then a RadRibbonView.

<telerik:RadRibbonWindow>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>

      <RowDefinition/>
</Grid.RowDefinitions>
<telerik:RadRibbonView>

    </telerik:RadRibbonView>

  </Grid>
</telerik:RadRibbonWindow>

This is then styled, using the Windows 8 style.

All is working as you'd expect. My issue is with the min/max/close icons on the form. They look too block and thick, particularly when maximized. The restore icon in especially blob like. Is there a way to change the styling of these buttons to use finer lines, or an outline similar to the office style?

Cheers

[Pavel R. Pavlov]

Hi Jason,

In order to customize those buttons you need to extract and edit the default template of the RadRibbonWindow control.

However, with our latest official release you are not allowed to easily extract it. This is why I extracted it for you in a separate ResourceDictionary. In that dictionary you will be able to find a Style targeting the RadToggleButton, called "RadRibbonWindowToggleButtonStyle".  You need to change the Data property of the only Path component nested in the Grid called "Collapse".

In order to apply this Style to your RadRibbonWindow you need to subscribe to its Loaded event. In the event handler you need to get and apply the style. You can do this with the following code:

public partial class MainWindow : RadRibbonWindow
{
    static MainWindow()
    {
        RadRibbonWindow.IsWindowsThemeEnabled = false;
    }

    public MainWindow()
    {
        InitializeComponent();

        this.Loaded += MainWindow_Loaded;
    }

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        var pair = new KeyValuePair<object, object>(new Style(), "RadRibbonWindowStyle");

        var ribbonDictionary = Application.Current.Resources.MergedDictionaries.FirstOrDefault(x => x.Contains(pair.Value));

        var style = ribbonDictionary["RadRibbonWindowStyle"] as Style;

        this.Style = style;
    }
}

Please try to import this dictionary in your project and let me now if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

[Jason]

Perfect. 

Thanks for the prompt assistance.

[Paul]

Pavel,

I am trying to achieve a similar result using the Visual Studio 2013 theme. Would you be able to provide the corresponding ResourceDictionary for the latest release of this theme, as you did for Jason with the Windows 8 style? Or outline the steps necessary for customers to accomplish this on their own?

 

Thanks!

[Paul]

I should qualify that my only objective here is to create a small margin between the "close" button and the edge of the title bar. Maybe there is an easier way.

[Evgenia]

Hi Paul,

You can fairly easy review and modify the requried resource dictionary on your own if you go to its exact location in your Telerik controls installation folder.  The default styles and resources for each theme are shipped in the Themes.Implicit folder. Then as described in our documentation the corresponding styles and templates are located in a file with the same name as the assembly the control depends on. So in your case since RadRibbonWindow is part of Telerik.Windows.Controls.RibbonView.dll you should search for Telerik.Windows.Controls.RibbonView.xaml style file. Please make sure that you are in the folder with the correct theme name -- in your case VisualStudio2013.
In the corresponding file you can search for Style with x:Key RadRibbonWindowStyle and as you will see the three Buttons (Minimize, Restore and Close) that are well known with MS Windows are all wrapped in a StackPanel with x:Name StackPanel. Tweak its Margin to achieve your requirement.

Regards,
Evgenia
Telerik by Progress