How can I use RadPanelBar with Caliburn.Micro?

[Pencil]

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:

MyProject.NavigationPane
       NavigationPaneView.xaml
       NavigationPaneViewModule.cs

MyProject.NavigationItem.Example1
       Example1View.xaml            (maybe any content)
       Example1ViewModel.cs

MyProject.NavigationItem.Example2
       Example2View.xaml             (maybe any content)
       Example2ViewModel.cs

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:

<Grid>
  <Grid.Resources>
    <HierarchicalDataTemplate x:Key="NavigationItemTemplate">
      <ContentControl cal:View.Model="{Binding }" />
    </HierarchicalDataTemplate>

    <HierarchicalDataTemplate
     x:Key="rootLevelTemplate"
     ItemTemplate="{StaticResource NavigationItemTemplate}"
        ItemsSource="{Binding }">
      <TextBlock Text="{Binding Name}" />
    </HierarchicalDataTemplate>
  </Grid.Resources>
  <telerik:RadPanelBar
        x:Name="pBar"
        ItemTemplate="{StaticResource rootLevelTemplate}"
        ItemsSource="{Binding NavigationItems}"/>
</Grid>

in NavigationPaneViewModel.cs:

public BindableCollection<INavigationItem> NavigationItems { get; set; }

and

public interface INavigationItem
{
    string Name { get; }
}

in Example1ViewModel.cs: (Example2ViewModel.cs is the same)

[Export(typeof(INavigationItem)),
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?

[Pavel R. Pavlov]

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.

Regards,
Pavel R. Pavlov
Telerik

[Pencil]

Thank you very much! I have resolved my problem.

the following is my code:

<telerik:RadPanelBar ItemsSource="{Binding Items}">
    <telerik:RadPanelBar.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Self}">
            <TextBlock Text="{Binding Name}" />
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <ContentControl cal:View.Model="{Binding }" />
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </telerik:RadPanelBar.ItemTemplate>
</telerik:RadPanelBar>

and every Item must have a Self property and like this:

private IObservableCollection<INavigationItem> _self;
public IObservableCollection<INavigationItem> Self
{
    get
    {
        if (_self == null)
        {
            _self = new BindableCollection<INavigationItem>();
            _self.Add(this);
        }
        return _self;
    }
}

more detail please see this post.