PanelBar & Databinding

[Mike]

Hi,

Another databinding question for PanelBar... I have ViewModel with two properties Header (string) and View (UserControl)

I want to bind "Header" property to the Header of RadPanelBarItem, and...
"View" property on my VM to the "content" area of the RadPanelBarItem.

For each ViewModel, there is only ONE Header and ONE View property.

I see from examples something like

<RadPanelBarItem>
  <RadPanelBarItem.Header>
      HEADER TEXT GOES HERE
  </RadPanelBarItem.Header>
 
   CONTENT GOES HERE
</RadPanelBarItem>

But I can not get this working with databindings... there are HierarchicalDataTemplate examples, but that does not compute for me, mostly because HierarchicalDataTemplate ItemsSource="{Binding View}", since View in my case is a singel property, not collection; and I am not sure if HierarchicalDataTemplate would work for a (singel value) property as a source.

This is what I got on my own...

<telerik:RadPanelBar ItemsSource="{Binding ...}">
   <telerik:RadPanelBar.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding View}">
     <TextBlock Text="{Binding Header}" />
     <HierarchicalDataTemplate.ItemTemplate>
      <DataTemplate>
       <ContentControl Content="{Binding View}" />
      </DataTemplate>
     </HierarchicalDataTemplate.ItemTemplate>
    </HierarchicalDataTemplate>
   </telerik:RadPanelBar.ItemTemplate>
  </telerik:RadPanelBar>

[Kiril Stanoev]

Hi Mike,

In your particular scenario, the View property must become a collection containing only one item.

public class DataItem
{
    public DataItem()
    {
        this.View = new ObservableCollection<ViewUserControl>();
    }
    public string Header { get; set; }
    public ObservableCollection<ViewUserControl> View { get; set; }
}

For further reference, please take a look at the attached project. Let me know if you have further questions or comments.

Kind regards,
Kiril Stanoev
the Telerik team