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

How can I remove the line beneath the tabs?

11 Answers 243 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 19 Sep 2010, 02:18 PM
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

11 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 23 Sep 2010, 11:23 AM
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
0
Wade
Top achievements
Rank 1
answered on 10 Jan 2013, 10:35 PM
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.
0
Pavel R. Pavlov
Telerik team
answered on 15 Jan 2013, 07:08 AM
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.

0
Wade
Top achievements
Rank 1
answered on 17 Jan 2013, 10:06 PM
Thanks Pavel for the help, but that solution had no effect on the line between the tab and the header underneath it.
0
Pavel R. Pavlov
Telerik team
answered on 22 Jan 2013, 10:30 AM
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.

0
Wade
Top achievements
Rank 1
answered on 23 Jan 2013, 07:59 PM
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.
0
Jamshed
Top achievements
Rank 1
answered on 11 Jul 2014, 05:34 AM
Hi Pavel R. Pavlov i have same problem with Wade i need to remove line like Wade can you help me?
0
Jamshed
Top achievements
Rank 1
answered on 11 Jul 2014, 05:36 AM
here my project link https://www.dropbox.com/s/62rqsz4s1730c9v/NoteBookUserControlBrent.rar
0
Pavel R. Pavlov
Telerik team
answered on 11 Jul 2014, 10:34 AM
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.
 
0
Jamshed
Top achievements
Rank 1
answered on 14 Jul 2014, 06:58 AM
Thanx for your help, but i done it maybe help to some one
HeaderBackground="Transparent"
0
EricOuellet
Top achievements
Rank 1
answered on 26 Jun 2018, 09:36 PM
Thanks a lot, very useful!!!
Tags
TabControl
Asked by
John
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Wade
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Jamshed
Top achievements
Rank 1
EricOuellet
Top achievements
Rank 1
Share this question
or