I am looking for a little help using the tree control. I have a ObservableCollection of nodes in a hierarchy on my ViewModel
i.e each node has a Childrens Collection.
I then bind the xamWebTree to the nodes collection. Looking at the examples I have defined a HierarchicalItemTemplate.
But this only shows not 1 level deep. I was expecting it to use the template n levels deep ? is this possible ?
<igTree:XamWebTree x:Name="contextTree" ItemsSource="{Binding TNodes}">
<igTree:XamWebTree.HierarchicalItemTemplate >
<ig:HierarchicalDataTemplate ItemsSource="{Binding Children}">
<DataTemplate>
<TextBlock Text="{Binding name}" Margin="5,0,0,0" />
</DataTemplate>
<ig:HierarchicalDataTemplate.ItemTemplate>
<DataTemplate >
<TextBlock Text="{Binding name}" Foreground="Gray" Margin="5,0,0,0" />
</ig:HierarchicalDataTemplate.ItemTemplate>
</ig:HierarchicalDataTemplate>
</igTree:XamWebTree.HierarchicalItemTemplate>
</igTree:XamWebTree>
Thanks
Marcus
Hi Marcus,
You need to define a Data Template for each level, this could be done for example with IG HierarchicalDataTemplate or by setting the Data Template for the corresponding level of the corresponding parent node. I am giving you a sample for the first case:
xmlns:ig="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.v9.1" xmlns:igTree="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.XamWebTree.v9.1"
<igTree:XamWebTree x:Name="MyTree" ItemsSource="{StaticResource MyDataSource}"> <igTree:XamWebTree.HierarchicalItemTemplate> <ig:HierarchicalDataTemplate ItemsSource="{Binding NextLevelCollection}"> <DataTemplate> <TextBlock Text="{Binding CurrentLevelData}" /> </DataTemplate> <ig:HierarchicalDataTemplate.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding CurrentLevelData}" /> </DataTemplate> </ig:HierarchicalDataTemplate.ItemTemplate> </ig:HierarchicalDataTemplate> </igTree:XamWebTree.HierarchicalItemTemplate> </igTree:XamWebTree>
where:
-MyDataSource is your data source defined in a ResourceDictionary. Note that this could also be set via c#, e.g. MyTree.ItemsSource = new DataSource();
-note the usage of the HierarchicalItemTemplate property on the XamWebTree, which accepts ig:HierarchicalDataTemplate - this is a template defining which collection to bind to (ItemsSource) and also how to present the data from the data source object as a tree item (ItemTemplate) and this is difined for as many levels as you would like to use. In this case you would have a data source with the following structure:
CurrentLevelDataNextLevelCollection|--CurrentLevelData--NextLevelCollection | --CurrentLevelData --NextLevelCollection
CurrentLevelData NextLevelCollection | --CurrentLevelData --NextLevelCollection
etc.
I know it could be a little confusing sometimes, so if you have any further questions please let us know.
HTH,
Hi,
This still dosent work for me as it the same as I wrote above. I get the root level and the just child nodes below. My tree can be any number of levels deep.
I would have thought that it would use the same template at all levels if the ItemsSource was bound.
My xaml:
<igTree:XamWebTree x:Name="mytree" ItemsSource="{Binding TNodes}">
<igTree:XamWebTree.HierarchicalItemTemplate>
<TextBlock Text="{Binding name}" />
TNodes is and ObserableCollection of type node that have a "name" public property and a public Collection called "Children" containing child node objects.
If i use the MS tree it works fine I define a single Template and set the ItemsSource to the Children and it then uses that template for all nodes. Does your control work differently.
Yes, our control works in a different way. If your number of levels in the hierarchy is finite, you could define the template for this number of levels as follows:
<igTree:XamWebTree.HierarchicalItemTemplate> <ig:HierarchicalDataTemplate ItemsSource="{Binding NextLevelCollection}"> <DataTemplate> <TextBlock Text="{Binding CurrentLevelData}" /> </DataTemplate> <ig:HierarchicalDataTemplate.HierarchicalItemTemplate> <ig:HierarchicalDataTemplate ItemsSource="{Binding NextLevelCollection}"> <DataTemplate> <TextBlock Text="{Binding CurrentLevelData}" /> </DataTemplate> <ig:HierarchicalDataTemplate.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding CurrentLevelData}" /> </DataTemplate> </ig:HierarchicalDataTemplate.ItemTemplate> </ig:HierarchicalDataTemplate> </ig:HierarchicalDataTemplate.HierarchicalItemTemplate> </ig:HierarchicalDataTemplate> </igTree:XamWebTree.HierarchicalItemTemplate>
this is for example a 3-level hierarchy. Repeat the nested HierarchicalDataTemplates for each level of hierarchy you have.
If you don't know the depth of your hierarchy, then you will need to set the Template and the ItemsSource correspondingly at runtime (which you are probably doing already for the ItemsSource), which will be something like the following:
DataTemplate tpl = (DataTemplate)this.Resources["MyDataTemplate"]; ;
HierarchicalDataTemplate treeItemTemplate = new HierarchicalDataTemplate(); treeItemTemplate.Template = tpl; treeItemTemplate.ItemTemplate = tpl;
navigationTree.ItemsSource = testItemsRoot.TestNavigationItems; if (testItemsRoot.TestNavigationItems != null && testItemsRoot.TestNavigationItems.Count > 0) navigationTree.HierarchicalItemTemplate = treeItemTemplate;
List<XamWebTreeItem> parents = navigationTree.XamWebTreeItems.ToList(), parentstmp = new List<XamWebTreeItem>(); ObservableCollection<TestNavigation> testItems = testItemsRoot.TestNavigationItems; while (parents.Count() > 0) { parentstmp = new List<XamWebTreeItem>(); foreach (XamWebTreeItem i in parents) { if (((TestNavigation)i.Data).TestNavigationItems == null || ((TestNavigation)i.Data).TestNavigationItems.Count == 0) continue;
i.ItemsSource = ((TestNavigation)i.Data).TestNavigationItems; i.HierarchicalItemTemplate = treeItemTemplate;
parentstmp.AddRange(i.XamWebTreeItems.ToList()); } parents = parentstmp; }
where testItemsRoot is my data source and TestNavigation is my data object type.
I am trying to create the tree hierarchy dynamically. Can you please explain the below code:
DataTemplate tpl = (DataTemplate)this.Resources["MyDataTemplate"];
If you are using a resource "MyDataTemplate" ,can you please provide the template code. Is it possible to provide a working sample of the same?
Thanks,
Suman.
I am also facing the same issue that is mentioned above. Can you provide the explanation for the below code:
Where i need to add the above mentioned resouce? If there is any sample code please share with us.
And also can some body provide the sample for the below mentioned:
<igTree:XamWebTreeItem CollapsedIcon="{Binding CollapsedIcon}" ExpandedIcon="{Binding ExpandedIcon}"></igTree:XamWebTreeItem>
Thanks in Advance.
Regards,
Amarendra.
This line>
amarendraboddu said:
Is probably declared in his user control Resources.
<UserControl.Resourses>
<DataTemplate x:Key="someKey">
<....Elements...>
</UserControl.Resourses>
The sample "Using Custom Icons" under "XamTree" at
https://ko.infragistics.com/samples/silverlight
shows this being used.