Styling the RadPane Header

14 posts, 0 answers
  1. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 06 Mar 2012 Link to this post

    Hi all, 

    We've been trying to stylish the rad pane header following the online documentation with no success. Could you please elaborate a bit more on how to do that, or even provide a sample where this is achieved (this would be great ;-) )? We're a bit of newbies in WPF complex tunning and any support is highly appreciated. 

    We're using SL 4 and ExpressionBlend 4. 

    Regards,

    Pablo.
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 07 Mar 2012 Link to this post

    Hi Pablo,

    In order to style the PaneHeader of RadPaneGroup, you need to generate and modify the style of the PaneHeader. You can gain access to that style and the ControlTemplate of the PaneHeader by editing the style of its containing element first - RadPaneGroupStyle.

    I attach here an example. You can search for "NOTE" to find a few useful bits of information.

    Hope this will be helpful.


    All the best,
    Dani
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 07 Mar 2012 Link to this post

    Hi Dani,

    thanks for your help! We'll take a look at it and get back with any additional questions.

    BR,

    Pablo.
  5. Pablo
    Pablo avatar
    38 posts
    Member since:
    Oct 2012

    Posted 07 Mar 2012 Link to this post

    Hello Dani,

    Thanks for the sample. After inspecting it, we have two questions:

    1. How to completely hide the RadPane Header? We are trying to build an environment with two panels docked on the left side of the layout that may be hidden/pinned (these two should show the header), and the rest of the space is used by only one RadPane. Becouse it will always be only one we'd like to hide its Pane Header if possible. 
    2. How to remove the border of the radpane? We'd like remove the border completely (or hide it) if possible.
    3. How to change the background color of the radpane header? I guess this is included in the sample, but if you could provide the shortcut on where to look at it would be great.

    Thank you very much for your support. Regards,

    Pablo.
  6. Dani
    Admin
    Dani avatar
    848 posts

    Posted 13 Mar 2012 Link to this post

    Hi Pablo,

    I have attached an updated version of the same project. Hope it will help.

    1. The PaneHeader is now hidden for the DocumentHost (the RadPane in the middle). This is done by setting an additional DocumentPaneStyle to RadDocumentPane and hiding the content of the PaneDocumentHostTemplate. Furthermore, the header of the PaneGroupDocumentTemplate is also hidden.

    2. The Border is removed in the PaneHeaderTemplate by setting BorderThickness of the main containing Border to 0.

    3. The background of the PaneHeader can be easily chnaged in the PaneHeaderStyle1 by an ordinary Style Setter for the Background.

    Let me know if you need a hand with further customizations.

    All the best,
    Dani
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  7. YK
    YK avatar
    6 posts
    Member since:
    Nov 2011

    Posted 20 Mar 2012 Link to this post

    Hi,
    I am using the RadDocumentPane int he RadPaneGroup container. By default I am hiding the Header by using the Visibility property provided Visibility="Collapsed". But my reqirement is to hide the Header by default and provide a button at the top left corner, which by clicking shows the Header. The reason I need to show the Header by using the click is I need to have access for undocking the pane and the reason for not showing the header is to conserve the space on the layout.
    So basically here's my question
    How can I show and hide the header of the raddocumentpane depending on the button click (would liek to know if there another way of achieving this say by using radpane etc.)
    Any pointers would be really appreciated
    Thanks
    YK
  8. Dani
    Admin
    Dani avatar
    848 posts

    Posted 26 Mar 2012 Link to this post

    Hi,

    You can easily implement such a functionality by adding a CheckBox or a ToggleButton in the template of RadPaneGroup. Data-bind the visibility of the header to the IsChecked property of the added element.

    Consider the following implementation:

    <ContentControl x:Name="ContentBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{StaticResource PaneGroup_PaneFrameStyle}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0" Visibility="{Binding IsChecked, ElementName=test, Mode=TwoWay, Converter={StaticResource BoolToVisConverter}}">
                                <Border Grid.Row="0" Visibility="{Binding SelectedItem.PaneHeaderVisibility, RelativeSource={RelativeSource TemplatedParent}}">
                                    <telerik:PaneHeader x:Name="HeaderElement" MinHeight="16" Grid.Row="0" SelectedPane="{TemplateBinding SelectedPane}" 
                                    telerik:StyleManager.Theme="{StaticResource Theme}" Margin="22 0 0 0"/>
                                </Border>   
                            </Border>                       
                              
                            <CheckBox x:Name="test" HorizontalAlignment="Left" VerticalAlignment="Center" IsChecked="True" />                   
                              
                            <Grid Grid.Row="1">
                                <ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Visibility="{Binding IsContentPreserved, Converter={StaticResource InvertBoolToVisConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <Grid x:Name="ContentElementsPanel" Visibility="{Binding IsContentPreserved, Converter={StaticResource BoolToVisConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                            </Grid>
                        </Grid>
                    </ContentControl>

    Hope this helps.

    Kind regards,
    Dani
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  9. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 11 Jan 2013 Link to this post

    If I'm just changing the background color of the pane header, can I get by with just

    <ControlTemplate x:Key="PaneHeaderTemplate" TargetType="telerik:PaneHeader" /><br>
    <br>
        <Style x:Key="PaneHeaderStyle" TargetType="telerik:PaneHeader"><br>
            <Setter Property="Template" Value="{StaticResource PaneHeaderTemplate}"/><br>
            <Setter Property="Background" Value="Yellow"/><br>
        </Style>


    Or do I have to have all that other gobbledygook that comes with the default template?

    Thanks

    Wade
  10. Masha
    Admin
    Masha avatar
    355 posts

    Posted 17 Jan 2013 Link to this post

    Hi Pablo,

    I prepared an illustrative sample of how you can customize the Style of RadPaneHeaders. You should modify background property of PaneHeaderStyle. I hope this will help with the styling issues you are experiencing.

    Kind regards,
    Maria
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  11. Barry
    Barry avatar
    90 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2013 Link to this post

    In less I'm missing something, this doesn't change the style of the pane header when it is floating or auto-hidden. How do you do that? I want the style to stay the same no matter where it is or what it is doing...
  12. Masha
    Admin
    Masha avatar
    355 posts

    Posted 11 Jul 2013 Link to this post

    Hello Barry,

    The background of the PaneHeader can be easily changed in the PaneHeaderStyle by an ordinary Style Setter for the Background. This will affect and background color even if the pane is auto hidden. Keep in mind you need to modify the control template if you want to change the background color of PaneHeader in its focus state. For floating windows you need to modify the background property of ToolWindowStyle.

    If you have any further questions, do not hesitate to contact us again.

    Regards,
    Masha
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  13. Barry
    Barry avatar
    90 posts
    Member since:
    Jul 2011

    Posted 12 Jul 2013 Link to this post

    Masha,

    No matter what I do to the style, it does not affect the auto hidden pane. The one that isn't pinned is always the same default style. What am I doing wrong?

     I don't care about floating panes...
  14. Masha
    Admin
    Masha avatar
    355 posts

    Posted 15 Jul 2013 Link to this post

    Hello Barry,

    It is hard to say what causing the problem only from the screenshot. Could I ask you to send a support ticket and  attach the sample project there as well. This will be of great help for us for pinpointing the problem.

    I am glad to assist you further.

    Regards,
    Masha
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  15. koen
    koen avatar
    6 posts
    Member since:
    Dec 2010

    Posted 29 Oct 2013 Link to this post

    I'm struggling with the same issue. I can not get to the style of the auto hidden pane. Do you have a solution for the problem?

    Kind regards,

    Koen Meijer

    EDIT: I found the solution: The RadPaneHeader has to be styled implicity. When I changed 

    <Style x:Key="PaneHeaderStyle1" TargetType="telerik:PaneHeader">
    to 
    
    <Style TargetType="telerik:PaneHeader">
    
    the auto hidden pane is also styled. 
Back to Top
DevCraft banner