Need help with styling

[Martin]

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?

[Martin]

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.

[Evgenia]

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