RadPane Header Template

[Steve Chadbourne]

I'm trying to replace the standard RadPane header with one of my own. I have followed a blog example but can't get it to work. The close button appears when the pane is hidden but when it is visible the default header is shown. What am I doing wrong?

<Window xmlns:my="clr-namespace:WpfTelerikDocking"
        x:Class="WpfTelerikDocking.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="Docking Test" Height="600" Width="1024">

    <DockPanel LastChildFill="True">

        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File"/>
            <MenuItem Header="_Help"/>
        </Menu>

        <StatusBar DockPanel.Dock="Bottom">
            <StatusBarItem Margin="5,0,5,0" Content="Status Info"/>
        </StatusBar>

        <Grid>
            <telerik:RadDocking Name="radDocking1" HasDocumentHost="False">

                <telerik:RadDocking.Resources>
                    <DataTemplate x:Key="PaneWithCloseButton_HeaderTemplate">
                        <StackPanel Orientation="Horizontal">
                            <ContentPresenter Content="{Binding}" />
                            <Button Content="X" Width="18" Height="18"
                                />
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadDocking.Resources>

                <telerik:RadSplitContainer Name="LeftContainer" InitialPosition="DockedLeft">

                    <telerik:RadPaneGroup>
                        <telerik:RadPane Header="PANE"
                                HeaderTemplate="{StaticResource PaneWithCloseButton_HeaderTemplate}">
                            <TextBlock Text="Text content" />
                        </telerik:RadPane>

                    </telerik:RadPaneGroup>

                </telerik:RadSplitContainer>

                <telerik:RadSplitContainer Name="RightContainer" InitialPosition="DockedRight">

                    <telerik:RadPaneGroup>
                        <telerik:RadPane Header="Map">
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>

                </telerik:RadSplitContainer>

            </telerik:RadDocking>
        </Grid>

    </DockPanel>
</Window>

Cheers

Steve

[Pana]

Hi Steve,

You are doing great but when the panes are moved around new SplitContainer and RadPaneGroups are generated. Same for hiding and showing a RadPane. You will have to define Styles for the RadPaneGroup and RadPane controls without x:Key somewhere above the dock so newly created items inside may get them too. Please don't hesitate to ask if you need further help.

Thanks for your interest in our controls.

Kind regards,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve Chadbourne]

Please can you provide an example.

I thought the code provided by this blog would work?

http://blogs.telerik.com/miroslavnedyalkov/posts/09-08-19/customizing_the_header_of_radpane_control_and_adding_behavior_to_it.aspx

Cheers

Steve

[Pana]

Hello Steve Chadbourne,

The example modifies the tabs. While the header (the long line with title and pin and X mark) is not presented in the RadPane but in the RadPaneGroup. The code in the blog works but I think you want to style somewhat else. Can you send us a screenshot and mark the visual elements you want to change?

All the best,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve Chadbourne]

Hi Panayot

I have tried replacing the RadPaneGroup template to no effect. Is there any way to simpy hide the RadPaneGroup header?

I have attached a image of what I am trying to do. I want to get rid of the header completely and replace it with my own. Or if that is not possible I want to hide the menu, pin and close buttons and replace with my own controls.

Cheers

Steve

[Pana]

Hi Steve,

I have created an example project for you. I used the Office_Black's Docking theme (Docking.xaml) and merged it in the resource dictionary of the main application. In the Docking.xaml I set the header style to be applied to all instances by removing the x:Key from the it. This will use a special key generated from the style's TargetType and will apply the style to all headers. After that I edited the Template used for the header and added a combobox.

You can wire up the combobox using attached properties and/or binding with relative source to the panegroup's selected pane and converters. It depends on your project.

To find the changes search for "NOTE:" in the solution. It's well explained there.

Thanks for your interest in our controls.

Regards,
Panayot
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve Chadbourne]

Hi Panayot

Thanks for your answer and example project. It explains a lot.

I have 2 rad pane groups and I want each to have a different header. The technique you suggest would put the combobox in both headers. I suppose I could set the visibility property of the combo but it is not a very elegent solution.

Is there any way to simply hide the header and construct my own in the rad pane body? Have a look at AvalonDock for an example of this - it has a ShowHeader property. Perhaps something that could be done in a future version?

Cheers

Steve

[Pana]

Hello Steve,

The header is displayed in the RadPaneGroup so in the rad pane group you can implement somewhat logic that switches the header's template but it's no better than setting the combo's visibility.

...

I have created 2 RadPaneGroups with 3 RadPanes each main.xaml. I have also created a very small public class HeaderManager that defines the HeaderVisibility attached property. (by default is Visible) I have marked some of the panes with: 

local:HeaderManager.HeaderVisibility="Visible"
or
local:HeaderManager.HeaderVisibility="Collapsed"

Also I have defined the RadPaneGroup without x:Key (as the header in the previous post) and modified the header in it's template a little. I added:

Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.(local:HeaderManager.HeaderVisibility)}"

Since the header is in the RadPaneGroup its TemplatedParent is the RadPaneGroup. Than it will bind to it's SelectedItem which is the currently selected and displayed RadPane and in the end it will get the HeaderManager.HeaderVisibility attached property.

Now if you switch between panes and groups you will notice that the Header's Visibility is controlled by that attached property.

You can use similar approach to bind the combobox's visibility to a pane or even to create attached property that sets template to the header.

I believe this solution fits best in your description anyway. As a front-end-developer I can't promise that we will implement HeaderVisibility property but it's pretty easy implemented so we will consider it for one of our upcoming releases.

Sincerely yours,

Panayot
the Telerik team

 

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve Chadbourne]

Thanks for your help Panayot. I'm off on vacation for a week or so but will have a look at your solution when I get back. I think I have all the pieces I need now to get our prototype up and running.

Cheers

Steve