ComponentOne OrgChart for UWP
Working with OrgChart for UWP / Advanced Binding Scenarios
In This Topic
    Advanced Binding Scenarios
    In This Topic

    In addition to the flexibility provided by data templates and bindings, the C1OrgChart control also supports advanced binding scenarios using two standard classes: DataTemplateSelector and HierarchicalDataTemplate.

    DataTemplateSelector

    The DataTemplateSelector class provides a way for you to select different templates based on the data object and the data-bound element. For example, you could use different templates to display directors, managers, and clerical staff.

    To do this, you would create a custom class that inherits from DataTemplateSelector and override the SelectTemplate object. You would then create an instance of this class and assign it to the ItemTemplateSelector property of the C1OrgChart control.

    The example below shows a simple DataTemplateSelector implementation:

    C#
    Copy Code
    /// <summary>
    /// Class used to select the templates for items being created.
    /// </summary>
     public class PersonTemplateSelector : C1.Xaml.OrgChart.DataTemplateSelector
        {
          public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
                var p = item as Person;        
    
    
                if (p.Position.IndexOf("Director") > -1)
                {
                    return DirectorTemplate;
                }
                else if (p.Position.IndexOf("Manager") > -1)
                {
                    return ManagerTemplate;
                }
                else if (p.Position.IndexOf("Designer") > -1)
                {
                    return DesignerTemplate;
                }
                else
                {
                    return OtherTemplate;
                }
            }
    

    Once the custom DataTemplateSelector is available, you can use it in XAML as usual:

    Markup
    Copy Code
    <Page.Resources>
            <!-- TemplateSelector: picks _tplDirector or _tlpOther -->
            <local:PersonTemplateSelector x:Key="_personTplSelector">
                <local:PersonTemplateSelector.DirectorTemplate>
                    <!-- data template for Directors -->
                    <DataTemplate>
                        ...
                    </DataTemplate>
                </local:PersonTemplateSelector.DirectorTemplate>
                <local:PersonTemplateSelector.ManagerTemplate>
                    <!-- data template for managers -->
                    <DataTemplate>
                       ...
                    </DataTemplate>
                </local:PersonTemplateSelector.ManagerTemplate>
                <local:PersonTemplateSelector.DesignerTemplate>
                    <!-- data template for designers -->
                    <DataTemplate>
                       ...
                    </DataTemplate>
                </local:PersonTemplateSelector.DesignerTemplate>
                <local:PersonTemplateSelector.OtherTemplate>
                    <!-- data template for everyone else -->
                    <DataTemplate>
                        ...
                    </DataTemplate>
                </local:PersonTemplateSelector.OtherTemplate>
            </local:PersonTemplateSelector>
        </Page.Resources>
    

    And bind to the Template in the <OrgChart:C1OrgChart> tag:

    Markup
    Copy Code
    <OrgChart:C1OrgChart x:Name="c1OrgChart1"  Grid.Row="1" ItemTemplateSelector="{StaticResource _personTplSelector}">
    

    The image below shows the result:

     

     

    ItemTemplateSelector

    The ItemTemplateSelector is useful when the data items are of the same type, but you want to display certain items differently based on the properties of specific data items.

    HierarchicalDataTemplate class: This class allows you to bind the C1OrgChart control to items that contain items of different types. For example, you could create a chart that displays leagues, divisions within each league, and teams within each division.

    To do this, you would create a HierarchicalDataTemplate for each of the classes with sub-items, and a regular data template for the last class in the hierarchy. In our example, you would create a HierarchicalDataTemplate for the leagues, another for the divisions, and finally a regular data template for the teams:

    Markup
    Copy Code
    <Page.Resources>
            <!-- template for Team objects -->
            <DataTemplate x:Key="TeamTemplate" >
                <Border Background="LightBlue" Padding="4" >
                    <TextBlock FontStyle="Italic" Text="{Binding Name}" />
                </Border>
            </DataTemplate>
    
            <!-- template for Division objects -->
            <Xaml:C1HierarchicalDataTemplate  x:Key="DivisionTemplate"
                ItemTemplate="{StaticResource TeamTemplate}" ItemsSource="{Binding Teams}">
                <DataTemplate>
                    <Border Background="Gold" >
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" />
                    </Border>
                </DataTemplate>
            </Xaml:C1HierarchicalDataTemplate >
            <!-- template for League objects -->
            <Xaml:C1HierarchicalDataTemplate  x:Key="LeagueTemplate"
                ItemTemplate="{StaticResource DivisionTemplate}" ItemsSource="{Binding Divisions}">
                <DataTemplate>
                    <Border Background="LightCoral" >
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="40" />
                    </Border>
                </DataTemplate>
            </Xaml:C1HierarchicalDataTemplate >
        </Page.Resources>
    

    The top-level template is the LeagueTemplate. In addition to defining how League object should be displayed (as regular templates do), its ItemsSource property specifies that subordinate objects should be retrieved from the League.Divisions property. Finally, the ItemTemplate property specifies the template that should be used to display the subordinate objects.

    In this case, the ItemTemplate is DivisionTemplate, another HierarchicalDataTemplate that specifies how Division objects should be displayed, that the Division.Teams property exposes subordinate objects, and that the subordinate objects should be displayed using the TeamTemplate, which is a regular (non-hierarchical) data template.

    Notice the following important point:

    Once the templates have been defined, using them is just a matter of setting the ItemTemplate property as usual:

    Markup
    Copy Code
    <OrgChart:C1OrgChart Name="_chart" ItemTemplate="{StaticResource LeagueTemplate}" ConnectorDashArray="1 2" ConnectorStroke="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
    

     

     

    Notice how the C1OrgChart uses the hierarchical data templates to navigate the hierarchy picking the right child collections and data templates.