Styling RadRibbonWindow min/max/close buttons

6 posts, 0 answers
  1. Jason
    Jason avatar
    47 posts
    Member since:
    Jan 2013

    Posted 04 Oct 2013 Link to this post

    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
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1222 posts

    Posted 09 Oct 2013 Link to this post

    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 >>
  3. Jason
    Jason avatar
    47 posts
    Member since:
    Jan 2013

    Posted 09 Oct 2013 Link to this post

    Perfect. 

    Thanks for the prompt assistance.
  4. Paul
    Paul avatar
    2 posts
    Member since:
    Mar 2014

    Posted 04 Jan Link to this post

    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!

  5. Paul
    Paul avatar
    2 posts
    Member since:
    Mar 2014

    Posted 04 Jan in reply to Paul Link to this post

    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.
  6. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 09 Jan Link to this post

    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.
Back to Top