ContentTemplate for items in RadPanelBar

7 posts, 0 answers
  1. Miłosz Cechnicki
    Miłosz Cechnicki avatar
    34 posts
    Member since:
    Sep 2009

    Posted 29 May 2014 Link to this post

    Helo,

    i want bind ItemsSource to RadPanelBar and define template for item header and item content. I know  that to define header template I must use ItemTemplate property, but I don't know how to define content template. In RadTabControl I have ContentTemplate property but no in RadPanelBar. I don't want implement hierarchical structure (ItemsSource is flat one level list). Could you explain me how can i do this?
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 31 May 2014 Link to this post

    Hello,

    When working with the RadPanelBar control you need to know that it actually derives from the RadTreeView control. It also inherits the hierarchical structure of the RadTreeView. This is why it is important to understand that the ItemHeader is actually a RadTreeViewItem with custom style applied. And the Items are also RadTreeViewItems with another style applied.

    For more information about how you can bind the control you can take a look at our QSF demo project. I hope this will help you.

    Regards,
    Pavel R. Pavlov
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
  4. Miłosz Cechnicki
    Miłosz Cechnicki avatar
    34 posts
    Member since:
    Sep 2009

    Posted 02 Jun 2014 in reply to Pavel R. Pavlov Link to this post

    Not exactly. I could define something like this:

    <telerik:RadPanelBar>
        <telerik:RadPanelBarItem Header="My header">
            <StackPanel>
                <TextBlock Text="My" />
                <TextBlock Text=" content" />
            </StackPanel>
        </telerik:RadPanelBarItem>
    </telerik:RadPanelBar>

    And I could define HeaderTemplate for item (using property HeaderTemplate for RadPanelBarItem or using property ItemTemplate for RadPanelBar). As you can see I could define content for RadPanelBarItem (StackPanel with TextBlocks). I want define template for content, but I don't know how.

    Example:
    I have flat (one level) collection of persons (with properties Name, Surname, Age, etc.). And I want bind this collection to RadPanelBar and I want to see in header Name of person and when I expand item I want to see other properties (Surname, Age, etc.).

    Thanks for your help.
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 02 Jun 2014 Link to this post

    Hi,

    In that particular scenario the StackPanel will be wrapped in a RadPanelBarItem which will be styled with a different style. You can check this with a XAML inspecting tool.

    However, in order to create the hierarchy that the RadPanelBar control needs, you can use a HierarchicalDataTemplate. For your convenience I prepared a sample project demonstrating this approach. Please take a look at it and let me know if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Miłosz Cechnicki
    Miłosz Cechnicki avatar
    34 posts
    Member since:
    Sep 2009

    Posted 02 Jun 2014 in reply to Pavel R. Pavlov Link to this post

    Ok, I understand this. So in my example better way is to use ItemsControl and define ItemTemplate with Expander (with binding in Header and Content).

    Thanks for your help.
  7. vimal
    vimal avatar
    1 posts
    Member since:
    Aug 2015

    Posted 04 Aug 2015 in reply to Pavel R. Pavlov Link to this post

    Pavel R. Pavlov said:Hi,

    In that particular scenario the StackPanel will be wrapped in a RadPanelBarItem which will be styled with a different style. You can check this with a XAML inspecting tool.

    However, in order to create the hierarchy that the RadPanelBar control needs, you can use a HierarchicalDataTemplate. For your convenience I prepared a sample project demonstrating this approach. Please take a look at it and let me know if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     

     

    Hi 

    I was able to follow the implementation of RadPanelBar with HierarchicalDataTemplate. In this case I want to have Header style for RadPanelBarItem. How can i achieve that?

     Thanks

    Vimal

  8. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 06 Aug 2015 Link to this post

    Hello vimal,

    You can use the explanation that Pavel provided in his previous posts stating that RadPanelBar is like RadTreeView - the ItemHeader is actually a RadPanelBarItem with custom style applied. And its child Items are also RadPanelBarItems with another style applied. Having this in mind you can apply implicit style that targets RadPanelBarItem that will apply on all items. To distinguish those that are second level items (children of root items) you can apply ItemContainerStyle to the HierarchicalDataTemplate again with TargetType RadPanelBarItem. I attached a modified version of Pavel's sample to demonstrate how you might apply two different Foreground-s on root and child items based on the styles I described.

    P.S. Please add reference to NoXAML binaries to run the sample and don't forget to reference Telerik.Windows.Themes.OfficeBlack assembly as well. You might read more about the separation of XAML and NoXAML binaries and why we ship them in this help article.

    I hope this information helps.

    Regards,
    Evgenia
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner