Blend styling of the AutoHide component?

2 posts, 0 answers
  1. Dan
    Dan avatar
    202 posts
    Member since:
    May 2006

    Posted 02 Nov 2011 Link to this post

    Please help me to understand how to approach styling the "AutoHide" component of the RadDocking component via Blend. 


    I have attached 2 screens shots. 


    The "BaseSS" attachment is the initial view of the Docking component styled up to this point via Blend, and the "AutoHideSS" attachment is the result of selecting "AutoHide" from the pin dropdown menu.


    When creating the RadDockingStyle for the RadDocking TargetType / there are many references to telerik:Office_BlackTheme which seems to control the presentation for the AutoHideArea Target Type. 


    I need to know specifically how I should approach styling <ControlTemplate TargetType="{x:Type telerik:AutoHideArea}">  to match up with the styling I have already completed.

    // I am assuming I'm correct in thinking this controls the display shown in "AutoHideSS.png"


    When in Blend I do not get the ability to access this template in the "Edit Additional Templates" menu options.


    I need to know how to get to this template and if it is not the correct one... if you could point me to the correct template I need to augment.


    OR if I would be better served editing the Office_BlackTheme resources in the Telerik base files to match up the hex values or if that is even wise / feasible.

  2. Dani
    Dani avatar
    848 posts

    Posted 07 Nov 2011 Link to this post

    Hi Dan,

    It seems to me you are using the Expression_Dark theme for your design. If you are not, maybe you can reconsider switching from customizing styles to simply applying an application theme for your RadControls. This will save lots of the XAML mark-up in your project.

    If you wish to customize the auto-hide area style anyway, you can do that by generating the style for RadDocking in Expression Blend. Once you have done that, you will be able to find the LeftAutoHideArea in the "Objects and Timeline" pane. You can generate the style for that auto-hide area in order to apply your customizations.

    You can do the same for other auto-hide areas. If you wish to apply a change to all AutoHide areas , you can do that by creating an implicit style. For example:
    <Style TargetType="telerik:AutoHideArea">
                <Setter Property="Background" Value="Pink" />

    However, if you wish to change the control template, you will need to apply your change to each type of auto-hide area: Left, Right, Top, Bottom.

    I hope this will be helpful.

    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft R3 2016 release webinar banner
Back to Top