Docking Tab Style

7 posts, 0 answers
  1. KWUN WA
    KWUN WA avatar
    17 posts
    Member since:
    Aug 2015

    Posted 08 Jan 2019 Link to this post

    Hi,

    Is there any way to change how the tabs are styled so that it's more obvious which tab is selected? What I'm looking for is for the active tab to 'hug' the tab content below it. Chrome and Visual Studio do something similar.

    Please see the attached screenshots.

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2298 posts

    Posted 08 Jan 2019 Link to this post

    Hello KWUN WA,

    Several of the themes provide the same or similar visualization. Can you please check the Theming demo of RadDocking to see the different tab visualizations and let me know if it this helps?

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. KWUN WA
    KWUN WA avatar
    17 posts
    Member since:
    Aug 2015

    Posted 09 Jan 2019 in reply to Martin Ivanov Link to this post

    Thanks Martin. We are currently using the Expression Dark theme, which won't be changed. For the tabs, what we want is probably something closer to the Visual Studio 2013 Dark theme.
  4. KWUN WA
    KWUN WA avatar
    17 posts
    Member since:
    Aug 2015

    Posted 11 Jan 2019 Link to this post

    Any thoughts here? Is it possible to achieve this type of styling using the expression dark theme?
  5. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2298 posts

    Posted 16 Jan 2019 Link to this post

    Hi,

    By default the RadTabControl ExpressionDark style has such border but its color is gray and it might not be noticeable in some case (see the attached picture - tabcontrol.png). To achieve the effect you are looking for in the ExpressionDark theme you will need to extract the ControlTemplate of RadTabControl and modify the corresponding Border control. You can see the concrete Border element in the attached tabcontrol-visual-tree.png picture.

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. KWUN WA
    KWUN WA avatar
    17 posts
    Member since:
    Aug 2015

    Posted 16 Jan 2019 in reply to Martin Ivanov Link to this post

    Thanks Martin. However, this is within a RadSplitContainer/RadPaneGroup, in a RadDocking control. Is there a similar border or other visual element that can be updated to achieve the same effect?
  7. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2298 posts

    Posted 21 Jan 2019 Link to this post

    Hello KWUN WA,

    I got confused and decided that you are using RadTabControl. My bad. Please excuse me for this. 

    To achieve your goal I can suggest you two options.
    • Extract the RadPaneGroup ControlTemplate and add a new Border control between the ContentBackground and the Header elements (see the attached picture). However, keep in mind with this approach you will need to have a very big custom style, because there are few different ControlTemplates for the different orientations of the tabstrip. This means that you will need to apply the modification on several places. Anyway, if this works for you, extract the RadPaneGroup Style and modify the corresponding ControlTemplates. You can store this in a separate ResourceDictionary. The additionally added Border could have a BorderTickness=0,0,0,1 and its border brush could be the same as the selected tab. In Expression_Dark this is "#CDCDCD".

      You can use an implicit style to apply the custom Style. This is a Style defined without its x:Key property set. For example:
      <Application.Resources>
        <Style TargetType="telerik:RadPaneGroup">
          <!-- template setters here -->
        </Style>
      </Application.Resources>
    • The other approach that you can consider is to alter the brush of the content presenter element. This is the control that shows the content of the selected item. You can get it in code using the visual tree helper methods and then set its BorderBrush and BorderThickness to values different than its defaults. For example:
      private void RadPaneGroup_Loaded(object sender, RoutedEventArgs e)
      {
          var group = (RadPaneGroup)sender;
          var contentBackground = group.ChildrenOfType<ContentControl>().FirstOrDefault(x => x.Name == "ContentBackground");
          contentBackground.BorderThickness = new Thickness(1, 5, 1, 1);
          contentBackground.BorderBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#CDCDCD"));
      }
      This could should be executed after the RadPaneGroup control is loaded.

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top