This is a migrated thread and some comments may be shown as answers.

Styling RadRibbonWindow min/max/close buttons

5 Answers 305 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 04 Oct 2013, 08:51 AM
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

5 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 09 Oct 2013, 08:25 AM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Jason
Top achievements
Rank 1
answered on 09 Oct 2013, 11:02 AM
Perfect. 

Thanks for the prompt assistance.
0
Paul
Top achievements
Rank 1
Iron
answered on 04 Jan 2017, 07:52 PM

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!

0
Paul
Top achievements
Rank 1
Iron
answered on 04 Jan 2017, 08:22 PM
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.
0
Evgenia
Telerik team
answered on 09 Jan 2017, 03:45 PM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Tags
RibbonView and RibbonWindow
Asked by
Jason
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Jason
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Iron
Evgenia
Telerik team
Share this question
or