Change Header Font - size, type, etc.

6 posts, 0 answers
  1. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 13 Apr 2011 Link to this post

    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

  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 19 Apr 2011 Link to this post

    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
    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. Robert
    Robert avatar
    58 posts
    Member since:
    Dec 2008

    Posted 19 Apr 2011 Link to this post

    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
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 19 Apr 2011 Link to this post

    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
    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
  6. Mohamed
    Mohamed avatar
    1 posts
    Member since:
    Jun 2011

    Posted 07 Jun 2011 Link to this post

    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
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Jun 2011 Link to this post

    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
    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
Back to Top
DevCraft banner