Using TargetTypeName="Node" uses the ItemTemplate and outputs the ff
Hello,
You can create a Node Layout for both the TargetTypeName = Folder and one for the TargetTypeName = Node then it will create the Nodes based underlying type od the data. Please see attached sample.
Let me know if you have any questions.
Valerie
Thanks for sample Valerie.
However I noticed that to get it to work, Folder had to contain an additional list specific for the Folder objects. In terms of design, I think this is unnecessary since the list of Node objects already allows for both Folder and File types because of the inheritance relationship. Another issue is the display of "Nodes" and "Folders" items in the tree, these should not appear because they just introduce added levels of hierarchy which are not really needed.
Any other way to achieve the desire effect using only a list of Node objects?
Kind regards,
Faye
There are two other options you have.
1) You could bind the tree to a collection of Folders and set the global layout to look for the Folders with the corresponding Key set to collection of child nodes thereby eliminating the need to add the collection to the Node class:
<ig:XamDataTree.GlobalNodeLayouts >
<ig:NodeLayout Key="Children" TargetTypeName="Folder" DisplayMemberPath="Text"/>
</ig:XamDataTree.GlobalNodeLayouts>
2) You can bind the Grid to the collection of nodes using a nested layout instead of using GlobalNodeLayout
<ig:XamDataTree HorizontalAlignment="Left" Name="xamDataTree1" VerticalAlignment="Top"
DisplayMemberPath="Text">
<ig:XamDataTree.NodeLayouts>
<ig:NodeLayout Key="Children" DisplayMemberPath="Text" TargetTypeName="Node">
<ig:NodeLayout.NodeLayouts>
<ig:NodeLayout Key="Children" DisplayMemberPath="Text"
TargetTypeName="Node">
</ig:NodeLayout>
</ig:NodeLayout.NodeLayouts>
</ig:XamDataTree.NodeLayouts>
</ig:XamDataTree>
Thank you Valerie, the 1st option is the answer I'm looking for.
Actually I've already tried that previously but I couldn't find a way to use a different template for the leaf nodes. Used the same strategy for xamGrid and couldn't find a way to use different templates either.
XAML test code is as follows:
<UserControl.Resources>
<DataTemplate x:Key="TreeFolderTemplate">
<TextBlock Text="{Binding Data.Name}"/>
</DataTemplate>
<DataTemplate x:Key="GridFolderTemplate">
<TextBlock Text="{Binding Name}"/>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<ig:XamGrid x:Name="grid"
ItemsSource="{Binding Folders}"
AutoGenerateColumns="False">
<ig:XamGrid.ColumnLayouts>
<ig:ColumnLayout Key="Children" TargetTypeName="Folder">
<ig:ColumnLayout.Columns>
<ig:TemplateColumn Key="Text" HeaderText="Name"
ItemTemplate="{StaticResource GridFolderTemplate}" />
</ig:ColumnLayout.Columns>
</ig:ColumnLayout>
</ig:XamGrid.ColumnLayouts>
</ig:XamGrid>
<ig:XamDataTree x:Name="dataTree"
DisplayMemberPath="Name">
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout Key="Children"
TargetTypeName="Folder"
DisplayMemberPath="Text"
ItemTemplate="{StaticResource TreeFolderTemplate}" />
</StackPanel>
Any suggestion on how to apply a different ItemTemplate to the leaf nodes (File type) using this recursive layout?
Also, I noticed that I cannot apply the same ItemTemplate to xamDataTree and xamGrid because the Binding is inconsistent (Data.Name vs. Name). Am I just missing something here or is this really how they work?
You could create different looks for the files and the folders using a converter to assign the Content to the Content Presenter in the Item Template. I believe I showed you this in a prior sample. I am attaching a sample using option 1 with the converter to see if this resolves your issue.
Thanks,
Is there a way to hide the automatically generated header node if there are no children?
There is nothing in the tree that would do that. You would either have to prefilter your data collection to remove those elements, or you might be able to retemplate the NodeControl and associate the .HasChildren of the node with the Visibiltiy of the control through a converter.