Skip to content

Commit df27b30

Browse files
authored
ReadMe file updated with KB
1 parent 196341c commit df27b30

File tree

1 file changed

+66
-2
lines changed

1 file changed

+66
-2
lines changed

README.md

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,66 @@
1-
# itemtemplate-customization-node-treeview-xamarin
2-
How to customize TreeView ItemTemplate based on the node in Xamarin.Forms (SfTreeView)
1+
# How to customize TreeView ItemTemplate based on the node in Xamarin.Forms (SfTreeView)
2+
3+
You can customize the [TreeView](https://help.syncfusion.com/xamarin/treeview/overview?) [ItemTemplate](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfTreeView.XForms~Syncfusion.XForms.TreeView.SfTreeView~ItemTemplate.html?) based on the node by using [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector) in Xamarin.Forms.
4+
5+
You can also refer the following article.
6+
7+
https://www.syncfusion.com/kb/11397/how-to-customize-treeview-itemtemplate-based-on-the-node-in-xamarin-forms-sftreeview
8+
9+
**XAML**
10+
11+
Binding ItemTemplateSelector to TreeView ItemTemplate.
12+
``` xml
13+
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
14+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
15+
xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
16+
xmlns:local="clr-namespace:TreeViewXamarin"
17+
x:Class="TreeViewXamarin.MainPage">
18+
19+
<ContentPage.BindingContext>
20+
<local:FileManagerViewModel x:Name="viewModel"/>
21+
</ContentPage.BindingContext>
22+
23+
<ContentPage.Resources>
24+
<ResourceDictionary>
25+
<local:ItemTemplateSelector x:Key="ItemTemplateSelector" />
26+
</ResourceDictionary>
27+
</ContentPage.Resources>
28+
<ContentPage.Content>
29+
<syncfusion:SfTreeView x:Name="treeView" Indentation="15" AutoExpandMode="AllNodesExpanded" ItemTemplateContextType="Node"
30+
ChildPropertyName="SubFiles" ItemsSource="{Binding ImageNodeInfo}" ItemTemplate="{StaticResource ItemTemplateSelector}"/>
31+
32+
</ContentPage.Content>
33+
</ContentPage>
34+
```
35+
**C#**
36+
37+
Apply template to node based on SubFiles.
38+
``` c#
39+
namespace TreeViewXamarin
40+
{
41+
public class ItemTemplateSelector : DataTemplateSelector
42+
{
43+
public DataTemplate _ParentTemplate { get; set; }
44+
public DataTemplate _ChildTemplate { get; set; }
45+
public ItemTemplateSelector()
46+
{
47+
this._ParentTemplate = new DataTemplate(typeof(ParentTemplate));
48+
this._ChildTemplate = new DataTemplate(typeof(ChildTemplate));
49+
}
50+
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
51+
{
52+
var node = item as TreeViewNode;
53+
var treeviewItem = node.Content as FileManager;
54+
if (treeviewItem == null)
55+
return null;
56+
if (treeviewItem.SubFiles!=null)
57+
return _ParentTemplate;
58+
else
59+
return _ChildTemplate;
60+
}
61+
}
62+
}
63+
```
64+
**Output**
65+
66+
![ItenTemplateCustomization](https://github.com/SyncfusionExamples/itemtemplate-customization-node-treeview-xamarin/blob/master/ScreenShots/ItemTemplateCustomization.png)

0 commit comments

Comments
 (0)