Change selected background color for the RadTabItem header

7 posts, 1 answers
  1. Don
    Don avatar
    31 posts
    Member since:
    Aug 2012

    Posted 05 Apr 2013 Link to this post

    Hello.

    I'm using the RadTabControl with the Expression_DarkTheme.  I want to change the background of the tab headers when selected.  Is there a relatively simple way to do this  or do I have to re-template the whole tab header?

    Thanks in advance.

    - Don Jordan
  2. Don
    Don avatar
    31 posts
    Member since:
    Aug 2012

    Posted 05 Apr 2013 Link to this post

    This is what I have come up with for now...

    I modified these Telerik source files:

    C:\RadControlsSource\Core\Controls\Themes\Expression\Dark\Common.xaml

    Made a new color definition for "ControlBackground_Active" and gave it a unique name, "ControlBackground_Active_Telestream" so the change won't break anything else.


    C:\RadControlsSource\Controls\Navigation\Themes\Expression\TabControl_style.xaml

    Commented-out the old "SelectionVisual" Border definition and replaced the Background value with the new color defintion.


                <Border x:Name="SelectionVisual" Opacity="0"
    Margin="{StaticResource TabItem_Margin}"
    BorderBrush="{StaticResource ControlOuterBorder_Active}"
    Background="{StaticResource ControlBackground_Active_Telestream}"
    BorderThickness="{StaticResource TabItem_OuterBorderThickness}"
    CornerRadius="{StaticResource TabItem_OuterCornerRadius}"/>


    Of course, I had to make a special build of the controls.  My next question: Is there a way to do this by overriding  these attributes frcm my application's XAML?

  3. UI for WPF is Visual Studio 2017 Ready
  4. Don
    Don avatar
    31 posts
    Member since:
    Aug 2012

    Posted 08 Apr 2013 Link to this post

    I guess there isn't a way to do this by overriding the XAML in my application. A custom build it is!

    I had a great conversation with myself. Thank you all for listening! :)
  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 10 Apr 2013 Link to this post

    Hi Don,

    An other way to customize your controls without building them is to use implicit styles. You can read more information about this approach here. Please try this approach out and let me know if you have any further questions.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Don
    Don avatar
    31 posts
    Member since:
    Aug 2012

    Posted 29 Apr 2013 Link to this post

    I played with this trying implicit styles, but I can't figure out how to override this border definition to change the background of a selected tab header:

    <Border x:Name="SelectionVisual" Opacity="0"
    Margin="{StaticResource TabItem_Margin}"
    BorderBrush="{StaticResource ControlOuterBorder_Active}"
    Background="{StaticResource ControlBackground_Active}"
    BorderThickness="{StaticResource TabItem_OuterBorderThickness}"
    CornerRadius="{StaticResource TabItem_OuterCornerRadius}"/>

    The article you  linked to only shows how to override a property that is already visible at the application level in the XAML. I need to override that the tab control uses as the border named "SelectionVisual".

    Any clue would do. :)


  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 30 Apr 2013 Link to this post

    Hello Don,

    In order to achieve your requirement you can change either the StaticResource or the corresponding property in the desired element. In this case I changed the Background property of the "SelectionVisual" Border element to Red so you can easily see and find it in the extracted template.

    Please take a look at the attached project and let me know if it works for you.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Don
    Don avatar
    31 posts
    Member since:
    Aug 2012

    Posted 30 Apr 2013 Link to this post

    OK. I see what you mean.  Add the implicit themes XMAL file to my project and modify that.  Thanks.

    P.S. I was over-thinking this. :)
Back to Top
UI for WPF is Visual Studio 2017 Ready