ControlTemplate Question

[Evan]

Hi all,

I'm pretty new to both silverlight and telerik controls.  I have a hierarchical data structure that I am creating RadPanelBarItems for in the code behind.  Some of the objects in hierarchy have children and some don't.  Using the out-of-the-box template, is it possible to hide the arrow for those items that don't have children?

Next question:

Is there an example of how to bind my List to this control and have it pick up the hierarchy (e.g. have all children be a RadPanelBarItem, and all the childrens children etc..)?

Thanks in advance,

E

[Kiril Stanoev]

Hi Evan,

There are few approaches you can take to remove the arrow if an item does not have children.
The first one is to have 2 Styles for a RadPanelBarItem. The first Style will have the arrow and the second will not. With an ItemContainerStyleSelector you can choose the appropriate Style to apply based on whether the item has children. This link explains how to use ItemContainerStyleSelector in RadTreeView, but the approach is the same with RadPanelBar.
The second approach is to find the arrow programatically and set its visibility in code behind:

    public MainPage()
    {
        InitializeComponent();
        this.panelBar1.ItemsSource = new DataItems();
        Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        Dispatcher.BeginInvoke(() =>
        {
            foreach (var item in this.panelBar1.Items)
            {
                // Get the PanelBarItem container
                RadPanelBarItem container = this.panelBar1.ItemContainerGenerator.ContainerFromItem(item) as RadPanelBarItem;
                // Get the first child in the container's ControlTemplate
                var root = VisualTreeHelper.GetChild(container, 0) as Panel;
                // Find an element with name arrow
                var arrow = root.FindName("arrow") as UIElement;
                // Hide/Show it based on whether the PanelBarItem container has children or not
                arrow.Visibility = container.Items.Count > 0 ? Visibility.Visible : Visibility.Collapsed;
            }
        });
    }
}

The attached project demonstrates approach #2.

As for your second question, initially if you have a hierarchical data you will have to convert it to flat data and give it to the ListBox. On the other hand, initially if you have flat data, you can give it to the ListBox, but you will have to convert it to hierarchical data in order to give it to PanelBar. This article explains how to transform flat data to hierarchical data.

All the best,
Kiril Stanoev
the Telerik team

[Evan]

Thanks Kiril.  I'll look into the two approaches.  It seems to me that having tow different styles would be more efficient as I will not have child items more than I will have child items.

[Kiril Stanoev]

Hello Evan,

Let us know if you encounter any problem along the way.

Best wishes,
Kiril Stanoev
the Telerik team

[Evan]

I will.  Thanks Kiril.  I think the right approach is to make another template using the Telerik template as a guide.  Is it as simple as removing the arrow nodes?  If so, once I do that where do I put the template and how do I reference it?  Will I need to do anything special in the new template as far as references to Teleric namespaces?

E

[Kiril Stanoev]

Hi Evan,

I've prepared an alternative version of the previous project. In this version, depending on the sub items count, I apply different style. Please have a look at the project and let me know which approach suits you better.

All the best,
Kiril Stanoev
the Telerik team

[Evan]

Kiril,

I am having difficulties running the project.  I'm not sure if it is relevant but I am not using SL4 and do not have the Telerik controls for SL4.  I tried to copy and paste your templates into my MainPage.xaml but am getting errors:

Error 6 The tag 'HierarchicalDataTemplate' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 13 10 MetricsSilverlightInterface
Error 7 The tag 'LayoutTransformControl' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 196 22 MetricsSilverlightInterface
Error 8 The tag 'LayoutTransformControl' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 328 22 MetricsSilverlightInterface
Error 9 The tag 'PanelBarPanel' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 491 26 MetricsSilverlightInterface
Error 10 The tag 'PanelBarPanel' does not exist in XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 512 26 MetricsSilverlightInterface
Error 1 The type 'telerik:HierarchicalDataTemplate' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 13 10 MetricsSilverlightInterface
Error 2 The type 'telerik:LayoutTransformControl' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 196 22 MetricsSilverlightInterface
Error 3 The type 'telerik:LayoutTransformControl' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 328 22 MetricsSilverlightInterface
Error 4 The type 'telerik:PanelBarPanel' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 491 26 MetricsSilverlightInterface
Error 5 The type 'telerik:PanelBarPanel' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built. D:\Development\AOE\Metrics\Services\AbacusMetrics\MetricsSilverlightInterface\MainPage.xaml 512 26 MetricsSilverlightInterface

Can you advise?

Thanks for all the trouble you've gone to.

Evan

[Tina Stancheva]

Hi Evan,

Thank you for the clarification. I modified Kiril's example to work with SL3 binaries. Please take a look at it and let us know if it works for you or if you need more info.

Greetings,
Tina Stancheva
the Telerik team

[Evan]

After some trouble, I got the project up and working.  It's great but I am having some difficulties applying it to my project.  My ItemsSource is a List<T> where T is a type returned by a WCF service.  There is 1 object in the list.  It has many children of the same type.  Some of the children have children of the same type as well.  That's as deep as it gets.  In your MainPage_Loaded event handler, the ItemContainerGenerator.ContainerFromItem is returning null and I don't know why.  Any thoughts?

[Tina Stancheva]

Hi Evan,

In this case I'd recommend you to use an ItemContainerStyleSelector. In the selector you can define the RadPanelBarItemStyleWithArrow and RadPanelBarItemStyleNoArrow styles and control which one to be applied depending on the children count of the data items:

public class MyStyleSelector : StyleSelector

{

    public Style RadPanelBarItemStyleWithArrow { get; set; }

    public Style RadPanelBarItemStyleNoArrow { get; set; }

 

    public override Style SelectStyle(object item, DependencyObject container)

    {

        DataItem dataItem = item as DataItem;

        if (dataItem.Children.Count > 0)

            return RadPanelBarItemStyleWithArrow;

        else

            return RadPanelBarItemStyleNoArrow;

    }

}


XAML:


<local:MyStyleSelector x:Key="ItemContainerStyleSelector"
   RadPanelBarItemStyleNoArrow="{StaticResource RadPanelBarItemStyleNoArrow}"
   RadPanelBarItemStyleWithArrow="{StaticResource RadPanelBarItemStyleWithArrow}"/>

I modified the example to illustrate this approach. Please give it a try and let me know if it works for you.

Kind regards,
Tina Stancheva
the Telerik team

[Evan]

Tina, I'm just getting back to working this issue.  I'll let you know how things go.

Evan