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
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
0
Hi Johno,
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
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.
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
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.
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
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
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
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.
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
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.
Regards,
Pavel R. Pavlov
Telerik
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!!!