Simple Databinding

[Thomas]

Hi,

I have a very simple scenario in which I try to use the RadPanelBar, the goal is something like this:

<telerik:RadPanelBar >
    <telerik:RadPanelBarItem Header="Group1">
        <local:GroupList />
    </telerik:RadPanelBarItem>
    <telerik:RadPanelBarItem Header="Group2">
        <local:GroupList />
    </telerik:RadPanelBarItem>
</telerik:RadPanelBar>

Now the actual list of Groups is not static so I need to databind, and this is where the problems begin.
It seems there is no way of declaring the content of each RadPanelBarItem so that it will use the same datacontext as the item itself.

The only way to solve this that I have come up with so far is to let the ViewModel implement IEnumerable and simply return itself. Doing that will make the following work.

<telerik:RadPanelBar ItemsSource="{Binding Groups}" >
    <telerik:RadPanelBar.ItemTemplate>
        <telerik:HierarchicalDataTemplate ItemsSource="{Binding}">
            <TextBlock Text="{Binding Title}" Margin="5,3" />
            <telerik:HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <local:GroupList />
                </DataTemplate>
            </telerik:HierarchicalDataTemplate.ItemTemplate>
        </telerik:HierarchicalDataTemplate>
    </telerik:RadPanelBar.ItemTemplate>
</telerik:RadPanelBar

This just seems like a rather cumbersome and unintuitive way to solve a very simple scenario. I would have expected something like a HeaderTemplate and a BodyTemplate instead.

Am I missing something?

Brgds,
Thomas Scheelhardt

[Thomas]

After a good many tries I finally found the way to do it.
The following style will achieve the wanted functionality. It still needs to have the viewmodel implement IEnumerable returning itself (or use a converter doing the same).

<Style x:Key="RadPanelBarItemSingleStrechedContentStyle" TargetType="telerik:RadPanelBarItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="ChildItemsTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadPanelBarItem">
                    <Grid x:Name="HeaderRow" Background="Transparent">
                        <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The style must be assigned to the ItemContainerStyle property of the RadPanelBar.

Also if hosting a list as the sole content you may want to set ScrollViewer.VerticalScrollBarVisibility="Disabled" on the RadPanelBar as well so that the list will scroll itself.

Hope this can save others from pulling out too many hairs ;).

brgds,
Thomas Scheelhardt

[Frédéric]

Thank you so much!!!

You saved me a lot of time.

I wish Telerik had an accordion control, it is very usefull...

[Petar Mladenov]

Hello Frédéric,

The RadPanelBar can have an Accordion-like layout. Could you please examine this demo and let us know if it gives you a good starting point? You can also elaborate more on your scenario and we'll try to advice you better.

Regards,
Petar Mladenov
the Telerik team

[Frédéric]

Hi Petar,

I did see the demo your are refering to. Putting the PanelBar horizontaly make it looks like an acordion, the musical instrument that is :)

What we need is a control that behave like the acordion in the Silverlight Control Toolkit, like the RadPanelBar but with the content of each RadPanelBarItem beeing a container that can host any content instead of a collection of RadPanelBarItem child items.

It should be a control more like the RadOutlookBar that does not inherit from RadTreeView like the RadPanelBar, so we won't have to resort to complex workaround like the one elaborated by Thomas.

Thanks a lot

[Tina Stancheva]

Hello Frédéric,

Thank you for getting back to us and your feedback. An accordion control is definitely on our radar, however at the moment we cannot bind to a specific time frame when such a control will be included in the RadControls suite.

Kind regards,
Tina Stancheva
the Telerik team