How can I use RadPanelBar with Caliburn.Micro?

3 posts, 0 answers
  1. Pencil
    Pencil avatar
    2 posts
    Member since:
    Mar 2012

    Posted 02 Sep 2013 Link to this post

    I want to use RadPanelBar with CM (use MEF as DI container). Every RadPanelBarItem should has something that is determined by other modules.

    For examples, the following is my code structure:


           Example1View.xaml            (maybe any content)

           Example2View.xaml             (maybe any content)

    NavigationPaneView.xaml contains the RadPanelBar. I want to use the strength of CM to dynamically create two RadPanelBarItem to show the content of Example1View.xaml or Example2View.xaml.

    I want to make the code in NavigationPaneView.xaml like this:
        <HierarchicalDataTemplate x:Key="NavigationItemTemplate">
          <ContentControl cal:View.Model="{Binding }" />
          ItemTemplate="{StaticResource NavigationItemTemplate}"
             ItemsSource="{Binding }">
          <TextBlock Text="{Binding Name}" />
             ItemTemplate="{StaticResource rootLevelTemplate}"
             ItemsSource="{Binding NavigationItems}"/>

    in NavigationPaneViewModel.cs:
    public BindableCollection<INavigationItem> NavigationItems { get; set; }

    public interface INavigationItem
        string Name { get; }

    in Example1ViewModel.cs: (Example2ViewModel.cs is the same)
    ExportMetadata("Name", "Example1")]
    public class Example1ViewModel : INavigationItem
        public string Name
            get { return "Example1"; }

    Because I'm a newbie for Telerik and CM. So I totally have no idea now. Can anybody kindly give me some hint or help?
  2. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1237 posts

    Posted 05 Sep 2013 Link to this post

    Hi Pencil,

    As far as I understand your scenario you need to dynamically add items of the RadPanelBar control using some third party framework. As the Caliburn Micro framework is not involved in any way with RadControls for WPF we consider it out of our support scope.

    However, you can find their documentation here.

    Let me now explain how you can use the RadPanelBar in MVVM scenario. You need to create a class which describes one PanelBarItem. Then in other class you need to create an ObservableCollection which will hold all the items that will be visualized by the control. Furthermore, this collection should be set as ItemsSource of the RadPanelBar control.

    Once you have defined the ItemsSource you need to define how your RadPanelBarItems (second level and first level) will look like. This can be done by using the ItemTemplate property of the RadPanelBar control.

    In case that you need to visualize the first level items in different way than the second level items, you can use the ItemContainerStyleSelector property of the RadPanelBar control. Basically, you need to define a class deriving from the native StyleSelector and override the SelectStyle method. In this method you actually can implement your custom style selecting logic.

    For your convenience I prepared a sample solution demonstrating this MVVM approach. Please take a look at it and let us know if you need any further assistance.

    Pavel R. Pavlov
    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. Pencil
    Pencil avatar
    2 posts
    Member since:
    Mar 2012

    Posted 05 Sep 2013 Link to this post

    Thank you very much! I have resolved my problem.

    the following is my code:
    <telerik:RadPanelBar ItemsSource="{Binding Items}">
            <HierarchicalDataTemplate ItemsSource="{Binding Self}">
                <TextBlock Text="{Binding Name}" />
                        <ContentControl cal:View.Model="{Binding }" />

    and every Item must have a Self property and like this:
    private IObservableCollection<INavigationItem> _self;
    public IObservableCollection<INavigationItem> Self
            if (_self == null)
                _self = new BindableCollection<INavigationItem>();
            return _self;

    more detail please see this post.
Back to Top