Need help with styling

3 posts, 0 answers
  1. Martin
    Martin avatar
    17 posts
    Member since:
    May 2014

    Posted 27 May 2014 Link to this post

    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.
  3. Martin
    Martin avatar
    17 posts
    Member since:
    May 2014

    Posted 28 May 2014 in reply to Martin Link to this post

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

    Posted 30 May 2014 Link to this post

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