Styling RadPane

10 posts, 0 answers
  1. Rodney
    Rodney avatar
    4 posts
    Member since:
    Jul 2012

    Posted 07 Jul 2012 Link to this post

    Hello,

    I am trying to change the styling of RadPanes. I ultimately want to also change the shape of the tabs, but for now I am just trying to customize the colors of the tabs, text, and border of the pane.

    I tried putting a RadDocking with a RadPaneGroup and two RadPanes in Blend. I can see the tabs, but when I click on the RadDocking item in the Objects and Timeline, I only see an option to edit a copy of the Template, not the Style. Using the Object > Edit Style menu only show the Create Empty option enabled.

    I would appreciate any help as I won't have any hair left to pull out soon. Thanks.
  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 09 Jul 2012 Link to this post

    Hello Rodney,

    To customize the colors on the tabs,  text and border of RadPanes,  you will have to edit the style of the RadPane control. Select RadPane in Objects and Timeline, right-click it and choose from the menu Edit Template-> Edit A Copy. Then  Blend will generate all the necessary templates and resources and you can easily modify them. I've attached a project to this post with generated xaml for RadPanes.

    You can read more about styling the RadPane here:
    http://www.telerik.com/help/wpf/raddocking-styling-the-radpane.html

    Hope this hepls.

    Kind regards,
    Maria
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Rodney
    Rodney avatar
    4 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

    Thank you.

    I was able to change the color of everything except for the border area around the content of the Pane.

    Is this inheriting from elsewhere? The border looks like a basic raised white bevel about 5 or 6 pixels wide. I would really like to override.

    I also just want to note that the linked information for styling RadPanes also describes editing a copy of the RadPane Style in Blend, which was the exact problem I was referring to (as only an option for editing the template copy is available). I just want to bring attention to it in case the documentation is out of date.

    Thanks again.
  5. Rodney
    Rodney avatar
    4 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

    I've attached an image to show the border that I am having trouble restyling. Thanks.
  6. Masha
    Admin
    Masha avatar
    355 posts

    Posted 10 Jul 2012 Link to this post

    Hello Rodney,

    To customize the border area around the content of RadPane, you will have to edit the style of the RadPaneGroup.  Select RadPaneGroup in Objects and Timeline, right-click it and choose from the menu Edit Template-> Edit A Copy. Find the following:

    <ControlTemplate TargetType="{x:Type ContentControl}">
    <Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0,2,2,2">
    <Border x:Name="BorderLayer3" BorderBrush="Red" BorderThickness="2" CornerRadius="0,1,1,1">
    <Border x:Name="BorderLayer2" BorderBrush="Red" BorderThickness="2" CornerRadius="0">
    <Border x:Name="BorderLayer1" BorderBrush="#FF848484" BorderThickness="1" CornerRadius="0">
    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
    </Border>
    </Border>
    </Border>
                            </Border>
                        </ControlTemplate>

    and modify border to the colour of your choice.

    Regards,
    Maria
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  7. Rodney
    Rodney avatar
    4 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2012 Link to this post

    Thank you.
  8. Spurk
    Spurk avatar
    40 posts
    Member since:
    Feb 2012

    Posted 10 Oct 2012 Link to this post

    Hi Maria,

    I'm struggling with applying a custom theme to the RadPane (nested in a RadPaneGroup and RadDocking control).  What I've discovered is that it seems that the RadPanes do not apply a style if they are outside the DocumentHost element.  As soon as I moved the RadSplitContainer in your example project out of document host and into the root of RadDocking, all of the styles failed to apply.  Is this normal behaviour?
  9. Masha
    Admin
    Masha avatar
    355 posts

    Posted 17 Oct 2012 Link to this post

    Hello Sheldon,

    RadPaneStyle has four different control templates depending on the position it occupies in the  RadDocikng control.

    <Setter Property="LeftTemplate" Value="{StaticResource PaneTemplate}" />
    <Setter Property="TopTemplate" Value="{StaticResource PaneTemplate}" />
    <Setter Property="RightTemplate" Value="{StaticResource PaneTemplate}" />
    <Setter Property="BottomTemplate" Value="{StaticResource PaneBottomTemplate}" />        
    <Setter Property="DocumentHostTemplate" Value="{StaticResource PaneDocumentHostTemplate}" />

    To reflect changes everywhere you need to modify all the templates. The changes described in previous post was made only for DocumentHostTemplate.

    Hope this helps.

    Greetings,
    Maria
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 24 Jan 2013 Link to this post

    The documentation in the linked help file is either out of date or inaccurate. Nothing is displayed in the triggers panel in Blend when editing the template.
  11. Masha
    Admin
    Masha avatar
    355 posts

    Posted 29 Jan 2013 Link to this post

    Hi Wade,

    Thank you for your feedback. In the near future, we will update this article with the new documentation of styling RadDocking control.

    Meanwhile, if you have any questions about styling RadPanes do not hesitate to contact us.

    Greetings,
    Maria
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready