How can I remove the line beneath the tabs?

11 posts, 0 answers
  1. John
    John avatar
    17 posts
    Member since:
    Jul 2010

    Posted 19 Sep 2010 Link to this post

    Hi

    I would like to remove the horizontal line that appears beneath the tabs, I have managed to remove the border of the content of each tab item, but there is still a line between the tab selectors and the content, which I'd like to remove, but can't find where to set that when editing the template in blend.

    Thanks for any help.

    John
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Sep 2010 Link to this post

    Hi Johno,

    You can remove the border of the Header element in the RadTabControlStyle by setting the BorderThickness property to 0:

    <ControlTemplatex:Key="TabControlTemplate"TargetType="telerik:RadTabControl">
    ...
        <!--Header Border-->
        <Borderx:Name="HeaderBackground"
            Visibility="{TemplateBinding BackgroundVisibility}"
            Background="{StaticResource TabControl_HeaderBackground}"
            BorderBrush="{StaticResource TabControl_ContentBorderBrush}"
            BorderThickness="0 0 0 0"/>
    ...
    </ControlTemplate>

    This will remove the border around the Header part of the RadTabControl. Is this what you were looking for?

    Take a look at the attached project, illustrating the described approach and let me know if this is what you had in mind.

    All the best,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 10 Jan 2013 Link to this post

    I have a similar issue.

    between the tabs and the content there is a thin gray line that goes from one side of the content area to the other. I'd like to remove it as it is making my gradient ugly.

    Please see attached.
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 15 Jan 2013 Link to this post

    Hi Wade,

    Your issues can be solved by editing the default template of the control. In your case (as I see in the picture) you want to set a LinearGradientBrush for background of the header which continues on the content of the selected Item. The gradient of the Header can be set from the Background property of the Border element called "SelectionVisual" in the default template of the RadTabControl.

    <Border x:Name="SelectionVisual"
            Margin="0"
            BorderBrush="#FF848484"
            BorderThickness="1,1,1,0"
            CornerRadius="3,3,0,0"
            Opacity="0">
        <Border.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="White" />
                <GradientStop Offset="1" Color="#FFFAFAFA" />
            </LinearGradientBrush>
        </Border.Background>
        <Border BorderBrush="White"
                BorderThickness="1,1,1,0"
                CornerRadius="2,2,0,0" />
    </Border>

    For your convenience I extracted the default template of the control in the attached project. Please take a look at it and let me know if it works for you.

    Kind regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 17 Jan 2013 Link to this post

    Thanks Pavel for the help, but that solution had no effect on the line between the tab and the header underneath it.
  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 22 Jan 2013 Link to this post

    Hi Wade,

    Can you please send me your project and point me to the border\line that you want to remove? I was not able to find it in my project. It may be a part of your content or content template. I will be able to suggest a better approach if I can see your code. Thank you for your cooperation.

    Kind regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 23 Jan 2013 Link to this post

    In creating the sample project, I discovered that there is something wrong in our own code as I was able to achieve the desired effect in the sample project.

    I suspect that there is another style overriding what I want.

    Thank you very much for your time and your effort.
  9. Jamshed
    Jamshed avatar
    4 posts
    Member since:
    Jul 2014

    Posted 11 Jul 2014 Link to this post

    Hi Pavel R. Pavlov i have same problem with Wade i need to remove line like Wade can you help me?
  10. Jamshed
    Jamshed avatar
    4 posts
    Member since:
    Jul 2014

    Posted 11 Jul 2014 in reply to Jamshed Link to this post

    here my project link https://www.dropbox.com/s/62rqsz4s1730c9v/NoteBookUserControlBrent.rar
  11. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 11 Jul 2014 Link to this post

    Hello Jamshed,

    In this particular scenario the referenced border comes from the TextBox in your custom DataTemplate named TabContent. In order to remove it you can set the BorderThickness property of that TextBox to 0.

    <DataTemplate x:Key="TabContent">
        <Grid>
            <TextBox Text="{Binding Body}" BorderThickness="0" Margin="5"/>
        </Grid>
    </DataTemplate>


    Regards,
    Pavel R. Pavlov
    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.
     
  12. Jamshed
    Jamshed avatar
    4 posts
    Member since:
    Jul 2014

    Posted 14 Jul 2014 in reply to Pavel R. Pavlov Link to this post

    Thanx for your help, but i done it maybe help to some one
    HeaderBackground="Transparent"
Back to Top
DevCraft banner