Change Header Font - size, type, etc.

[Robert]

Hello,

I'm editing the style for the tab control.  In doing so I can change the various items easily - TabItem_OuterBorderThickness, ControlForeground_Normal, TabItem_Background_Normal, etc.  But I don't see anything related to the font used in the header.  How would I go about editing the font size, face, etc?

One other question, how do I remove the gray border around the selected tab page area?  Not the border on the tab but rather the border around the content enclosed by the tab.

Thank you,
Bob

[Dimitrina]

Hi Robert,

Please find attached an example.

If you have further questions please do not hesitate to ask us.
I hope this will help you.

Best wishes,
Dimitrina
the Telerik team

[Robert]

Hello Dimitrina,

Thank you for the response but I'm not seeing how this answers my question.  I opended the project you sent in Blend but have no idea what you're trying to show me.

Please understand I'm a designer not a developer.  I would like information on where to change the header font size etc in the style.  I should be able to change something as simple as the font simply by adjusting a style.  If this is burried somehwere in C# I'm never going to find it.

Can you please explain how the file provided is meant to help me change the font?

Bob

[Tina Stancheva]

Hello Robert,

The RadTabItem supports font properties that allow you to control the font size, font weight, etc of the RadTabControl headers.

In the project that Dimitrina attached, you can find a Style defined for the RadTabItems where the FontWeight and FontSize properties are set:

<Style TargetType="telerik:RadTabItem" >
    <!-- add this property in your style -->
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontWeight" Value="Bold" />
</Style>

Is this what you need to implement?

Also the project contains a style definition  for the RadTabControl, which removes the RadTabControl Border by setting its BorderThickness to 0:

<Style TargetType="telerik:RadTabControl" >
    <!-- the default setter is bellow-->
    <!--<Setter Property="BorderThickness" Value="1 0 1 1" />-->
    <!-- However in order to remove the border around the content area you have to set the BorderThickness to 0 -->
    <Setter Property="BorderThickness" Value="0" />
</Style>

However, we are not sure if this is the Border you need to remove, so if it isn't, can you please attach a snapshot indicating which Border you want to hide?

Best wishes,
Tina Stancheva
the Telerik team

[Mohamed]

Hi,

Can you please let me know how to remove the tab header border and background color for the selected tab...?

please check the attachment.

Thanks & Best Regards,
Mohamed Sallam

[Tina Stancheva]

Hello Mohamed,

In order to implement this style you need to edit the ControlTemplate of the RadTabControl as well as the ControlTemplate of the RadTabItem control.

In the RadTabControl ControlTemplate you need to set a BorderThickness of 0 to the Border that wraps the  TabStrip and in the RadTabItem ControlTemplate you only need to change the TabItem_OuterBorderThickness resource thickness since it is used in the SelectedVisual and the MouseOver visual elements of the TabItem.

I attached a sample project to help you get started. Let me know if it helps or if you need more info.

Best wishes,
Tina Stancheva
the Telerik team