Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
190
How do you bind to a complex property in a XamDataTree
posted

My Data Type:

public interface IHierarchyNode

    {

        object Value { get; }

        IEnumerable<IHierarchyNode> ChildNodes { get; }

    }

Before I was using a TreeView like this:

<TreeView ItemsSource="{Binding Path=ChildNodes}" VirtualizingStackPanel.IsVirtualizing="True">

    <TreeView.Resources>

        <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource {x:Type TreeViewItem}}">                                                

            <Setter Property="ItemsSource" Value="{Binding Path=ChildNodes}"/>

            <Setter Property="HeaderTemplate">

                <Setter.Value>

                    <DataTemplate>

                       <StackPanel Orientation="Horizontal">

                            <TextBlock Text="{Binding Value.Name}" />

                            <TextBlock Text="Loading..." 

                               Visibility="{Binding IsPopulating, Converter={StaticResource booleanToVisibilityConverter}}"

      Style="{StaticResource AccentTextStyle}"/>

                     </StackPanel>

                  </DataTemplate>

                </Setter.Value>

            </Setter>

         </Style>

    </TreeView.Resources>

</TreeView>

How do a define my NodeLayouts for the XamDataTree to bind to the complex property IHierarchyNode.Value.Name?

  • 2677
    posted

    Hello,

    I have a collection of Item objects which also have a collection of Item objects called Items.  Here is the object structure which is very similar to yours.

    public class Item
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public ObservableCollection<Item> Items { get; set; }
        }

    There area  few ways to accomplish this.  One is to use the GlobalNodeLayouts.  In here, you can set the same layout for all nodes in the hierarchy.  Since this is a collection of the parent object inside the parent object, the TargetTypeName property will ally you to use this template for all objects of this type. 

     <ig:XamDataTree.GlobalNodeLayouts>
                    <ig:NodeLayout Key="ItemLayout" TargetTypeName="Item" DisplayMemberPath="Name">
                        <ig:NodeLayout.ItemTemplate>
                            <DataTemplate >
                                <TextBlock Text="{Binding Data.Name}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                            </DataTemplate>
                        </ig:NodeLayout.ItemTemplate>
                    </ig:NodeLayout>
                </ig:XamDataTree.GlobalNodeLayouts>

    However, if you wnat to have different templates per level, you can nest node layouts like the following code.  In this code, the more you nest, the deeper in levels your tree will go.  This code will go two levels.  The parent because of the DisplayMemberPath, and the children because of the NodeLayout.  Notice the Key property of the NodeLayout points to Items which is the property on the Item object which contains the children.

    <ig:XamDataTree Grid.Column="0" HorizontalAlignment="Stretch" Margin="20" DisplayMemberPath="Name"
                            Name="xamDataTree1" VerticalAlignment="Stretch"  >
                <ig:XamDataTree.NodeLayouts>
                    <ig:NodeLayout DisplayMemberPath="Name" Key="Items" TargetTypeName="Item">
                       
                    </ig:NodeLayout>
                </ig:XamDataTree.NodeLayouts>

            </ig:XamDataTree>

    I hope I answered your question.  If I haven't, please let me know. 

    Here is a help article to help you understand Node Layouts in XamDataTree.  Pay no attention that the article is for silverlight as the control is exactly the same in WPF as in silverlight because of our Unified Xaml strategy.