ControlTemplate Question

11 posts, 0 answers
  1. Evan
    Evan avatar
    6 posts
    Member since:
    Jun 2010

    Posted 09 Jul 2010 Link to this post

    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
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 14 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Evan
    Evan avatar
    6 posts
    Member since:
    Jun 2010

    Posted 14 Jul 2010 Link to this post

    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.
  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 16 Jul 2010 Link to this post

    Hello Evan,

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

    Best wishes,
    Kiril Stanoev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Evan
    Evan avatar
    6 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    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
  7. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 20 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Evan
    Evan avatar
    6 posts
    Member since:
    Jun 2010

    Posted 21 Jul 2010 Link to this post

    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
  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 22 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Evan
    Evan avatar
    6 posts
    Member since:
    Jun 2010

    Posted 22 Jul 2010 Link to this post

    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?
  11. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Evan
    Evan avatar
    6 posts
    Member since:
    Jun 2010

    Posted 30 Jul 2010 Link to this post

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

    Evan
Back to Top
DevCraft banner