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

Docking Tab Style

6 Answers 66 Views
Docking
This is a migrated thread and some comments may be shown as answers.
KWUN WA
Top achievements
Rank 1
KWUN WA asked on 09 Jan 2019, 02:04 AM

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.

6 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 09 Jan 2019, 05:36 AM
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.
0
KWUN WA
Top achievements
Rank 1
answered on 09 Jan 2019, 07:04 PM
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.
0
KWUN WA
Top achievements
Rank 1
answered on 11 Jan 2019, 05:05 PM
Any thoughts here? Is it possible to achieve this type of styling using the expression dark theme?
0
Martin Ivanov
Telerik team
answered on 16 Jan 2019, 12:18 PM
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.
0
KWUN WA
Top achievements
Rank 1
answered on 16 Jan 2019, 04:52 PM
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?
0
Martin Ivanov
Telerik team
answered on 21 Jan 2019, 09:50 AM
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.
Tags
Docking
Asked by
KWUN WA
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
KWUN WA
Top achievements
Rank 1
Share this question
or