Floating pane with a complex header

[Patrick]

Hello,
create a new Silverlight application, add references to Telerik.Windows.Control, Telerik.Windows.Controls.Docking and Telerik.Windows.Controls.Navigation.
Now, replace MainPage.xaml with:

<UserControl
  x:Class="Docking_Header_In_Floating_Pane.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:tk="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400">

  <tk:RadDocking>
    <tk:RadDocking.DocumentHost>
      <tk:RadSplitContainer>
        <tk:RadPaneGroup>

          <tk:RadPane Header="First" />

          <tk:RadPane>
            <tk:RadPane.Header>
              <StackPanel>
                <TextBlock Text="Second" />
              </StackPanel>
            </tk:RadPane.Header>
          </tk:RadPane>

        </tk:RadPaneGroup>
      </tk:RadSplitContainer>
    </tk:RadDocking.DocumentHost>
  </tk:RadDocking>
</UserControl>

Run the application: when the First pane is set floating, the title of the window is displayed correctly. When the Second pane is set floating, the title of the window just contains the name of the class!

Patrick

[Kalin]

Hello Patrick,

This is happening because when the Pane is docked it visualize its Header property and when is floating it shows its Title property. So for a complex header I would suggest that you use the HeaderTemplate and TitleTemplate properties set to the same DataTemplate which contains the desired header. Note that the DataTemplate needs to be defined in the App.xaml as floating Pane is located in another visual tree and won't be able to reach it if it is not in App.xaml. Please check the attached sample project which demonstrates the exact approach.

Hope this helps.

Regards,
Kalin
Telerik

[Patrick]

Hello Kalin,
I thought about using the HeaderTemplate property, but there is a problem with this approach: it is not possible to set the DataContext of the header. In my case, the header contains bindings to a data item.
Patrick

[Kalin]

Hello Patrick,

What you need to is to bind the Header property of the Pane to a custom object in the ViewModel with desired properties. Afterwards in the Template you would need to bind the Text of the TextBlocks to the properties of the custom object. I have modified the same project in order to demonstrate the exact approach.

Hope this helps.

Regards,
Kalin
Telerik