Floating pane with a complex header

4 posts, 1 answers
  1. Patrick
    Patrick avatar
    372 posts
    Member since:
    Aug 2012

    Posted 21 Jan 2014 Link to this post

    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"
      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
  2. Kalin
    Admin
    Kalin avatar
    1208 posts

    Posted 24 Jan 2014 Link to this post

    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
    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 >>
  3. DevCraft banner
  4. Patrick
    Patrick avatar
    372 posts
    Member since:
    Aug 2012

    Posted 24 Jan 2014 Link to this post

    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
  5. Answer
    Kalin
    Admin
    Kalin avatar
    1208 posts

    Posted 27 Jan 2014 Link to this post

    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
    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 >>
Back to Top