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

Need help with styling

2 Answers 58 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 27 May 2014, 09:53 PM
I currently have two nested tab controls with TabStripPlacement="Left":



And could use some help with styling. I'd like to remove the border and make the tab item take up all of the width. Illustrated below:



I've tried experimenting with the ControlTemplate, but I'm getting nowhere, so now I'm hoping for some help here :-) Perhaps it's possible without editing the template?

2 Answers, 1 is accepted

Sort by
0
Martin
Top achievements
Rank 1
answered on 28 May 2014, 09:09 AM
Hmm. Inline images were removed. I'm attaching them now.

Now.png is what i have now and Want.png is what I'm looking to implement.

About Want.png. The First element is selected in both tab controls. The tab items should take up all the width of the tab control.
0
Evgenia
Telerik team
answered on 30 May 2014, 03:55 PM
Hi Martin,

You can get use of our Implicit Styles mechanism to easily remove the BorderBrush, BorderThickness and to make the HeaderBackground Transparent. Here's a sample:

<Grid>
        <Grid.Resources>
            <Style TargetType="telerik:RadTabControl" BasedOn="{StaticResource RadTabControlStyle}">
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="HeaderBackground" Value="Transparent" />
            </Style>
        </Grid.Resources>
         
        <telerik:RadTabControl TabStripPlacement="Left" TabOrientation="Vertical">
            <telerik:RadTabItem Header="Froots" DropDownContent="Froots" >
                <telerik:RadTabItem.Content>
                    <telerik:RadTabControl TabStripPlacement="Left" TabOrientation="Vertical">
                        <telerik:RadTabItem Header="Apples" DropDownContent="Apples" />
                        <telerik:RadTabItem Header="Pears" DropDownContent="Pears" />
                    </telerik:RadTabControl>
                </telerik:RadTabItem.Content>
            </telerik:RadTabItem>
            <telerik:RadTabItem Header="Vegetables" DropDownContent="Vegetables" >
                <telerik:RadTabItem.Content>
                    <telerik:RadTabControl TabStripPlacement="Left" TabOrientation="Vertical">
                        <telerik:RadTabItem Header="Tomatoes" DropDownContent="Tomatoes" />
                        <telerik:RadTabItem Header="Carrots" DropDownContent="Carrots" />
                    </telerik:RadTabControl>
                </telerik:RadTabItem.Content>
            </telerik:RadTabItem>
        </telerik:RadTabControl>
    </Grid>

However to be able to modify the TabItem-s background when selected you'll have to strip down the RadTabItem ControlTemplate and do the needed modifications in the Selected VisualState. I believe this help topic will make you familiar with styles and templates and how to modify them in Blend.

Let me know if you need any further assistance.

Regards,
Evgenia
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
TabControl
Asked by
Martin
Top achievements
Rank 1
Answers by
Martin
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or