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?
Thanks for your response. I was able to get my xamDataTree to work correctly for child nodes, but not the parent nodes. The top level nodes were not getting the NodeLayout applied to them at all. The data I was binding the tree to was asynchronous, so I think that it wasn't picking the NodeLayout correctly on the top level, but was on the child nodes. I only had one NodeLayout used by all levels of the hierarchy - and all levels of the hierarchy were the same data type. Thanks again.
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.