Skip to content

Commit 22d9563

Browse files
jayaleshwarijayaleshwari
authored
ReadMe file updated with KB details
1 parent 2462b63 commit 22d9563

File tree

1 file changed

+163
-2
lines changed

1 file changed

+163
-2
lines changed

‎README.md‎

Lines changed: 163 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,163 @@
1-
# treeview-expander-view-customization-on-demand-load-xamarin
2-
How to customize the expander view when loading on demand in Xamarin.Forms TreeView (SfTreeView)
1+
# How to customize the expander view when loading on demand in Xamarin.Forms TreeView (SfTreeView)
2+
3+
You can customize the load indicator by using custom expander icon and [SfBusyIndicator](https://help.syncfusion.com/xamarin/busy-indicator/overview) in Xamarin.Forms [SfTreeView](https://help.syncfusion.com/xamarin/treeview/overview). Also, you can customize load indicator based on level.
4+
5+
You can also refer to the following documents regarding custom expander icon,
6+
7+
[https://www.syncfusion.com/kb/10289/how-to-expand-and-collapse-treeview-node-using-image-instead-expander](https://www.syncfusion.com/kb/10289/how-to-expand-and-collapse-treeview-node-using-image-instead-expander)
8+
9+
You can also refer the following article.
10+
https://www.syncfusion.com/kb/11934/how-to-customize-the-expander-view-when-loading-on-demand-in-xamarin-forms-treeview
11+
12+
**XAML: Expander View – BusyIndicator as load indicator and Image used for expand and collapse**
13+
14+
Load custom expander icon and **BusyIndicator** in the same column and change the visibility based on [TreeViewNode](https://help.syncfusion.com/cr/xamarin/Syncfusion.TreeView.Engine.TreeViewNode.html) properties using [Converters](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters).
15+
16+
``` xml
17+
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
18+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
19+
xmlns:local="clr-namespace:TreeViewXamarin"
20+
xmlns:treeview="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
21+
xmlns:sfbusyindicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms"
22+
x:Class="TreeViewXamarin.MainPage" Padding="0,20,0,0">
23+
<ContentPage.BindingContext>
24+
<local:MusicInfoRepository x:Name="viewModel"/>
25+
</ContentPage.BindingContext>
26+
<ContentPage.Resources>
27+
<ResourceDictionary>
28+
<local:ExpanderIconVisibilityConverter x:Key="ExpanderIconVisibilityConverter"/>
29+
<local:ExpanderIconConverter x:Key="ExpanderIconConverter" />
30+
<local:IndicatorColorConverter x:Key="IndicatorColorConverter" />
31+
</ResourceDictionary>
32+
</ContentPage.Resources>
33+
<ContentPage.Behaviors>
34+
<local:Behavior/>
35+
</ContentPage.Behaviors>
36+
<ContentPage.Content>
37+
<treeview:SfTreeView x:Name="treeView" ExpanderWidth="0" ItemTemplateContextType="Node" LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}" ItemsSource="{Binding Menu}">
38+
<treeview:SfTreeView.ItemTemplate>
39+
<DataTemplate>
40+
<Grid x:Name="grid" Padding="5,5,5,5" BackgroundColor="White">
41+
<Grid.ColumnDefinitions>
42+
<ColumnDefinition Width="50" />
43+
<ColumnDefinition Width="*" />
44+
</Grid.ColumnDefinitions>
45+
<Grid Grid.Column="1" Padding="1,0,0,0" VerticalOptions="Center">
46+
<Label LineBreakMode="NoWrap" TextColor="Black" Text="{Binding Content.ItemName}" FontSize="20" VerticalTextAlignment="Center"/>
47+
</Grid>
48+
<Grid >
49+
<Image Source="{Binding IsExpanded, Converter={StaticResource ExpanderIconConverter}}"
50+
IsVisible="{Binding HasChildNodes, Converter={StaticResource ExpanderIconVisibilityConverter}}"
51+
VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35">
52+
<Image.GestureRecognizers>
53+
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
54+
</Image.GestureRecognizers>
55+
</Image>
56+
<Grid IsVisible="{Binding Content.IsInAnimation, Mode=TwoWay}">
57+
<sfbusyindicator:SfBusyIndicator x:Name="grid1" TextColor="{Binding Level, Converter={StaticResource IndicatorColorConverter}}"
58+
IsBusy="True" Margin="2" BackgroundColor="White" ViewBoxHeight="25" ViewBoxWidth="25" HeightRequest="32" AnimationType="SingleCircle"/>
59+
</Grid>
60+
</Grid>
61+
</Grid>
62+
</DataTemplate>
63+
</treeview:SfTreeView.ItemTemplate>
64+
</treeview:SfTreeView>
65+
</ContentPage.Content>
66+
</ContentPage>
67+
```
68+
69+
**C#:** **Handled the BusyIndicator visibility based on the IsInAnimation model property**
70+
71+
Update the **IsInAnimation** property in the execute method of the [LoadOnDemandCommand](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.TreeView.SfTreeView.html#Syncfusion_XForms_TreeView_SfTreeView_LoadOnDemandCommand).
72+
73+
``` c#
74+
namespace TreeViewXamarin
75+
{
76+
public class MusicInfoRepository
77+
{
78+
public ICommand TreeViewOnDemandCommand{ get; set; }
79+
80+
public MusicInfoRepository()
81+
{
82+
TreeViewOnDemandCommand = new Command(ExecuteOnDemandLoading, CanExecuteOnDemandLoading);
83+
}
84+
85+
private bool CanExecuteOnDemandLoading(object sender)
86+
{
87+
var hasChildNodes = ((sender as TreeViewNode).Content as MusicInfo).HasChildNodes;
88+
if (hasChildNodes)
89+
return true;
90+
else
91+
return false;
92+
}
93+
94+
private void ExecuteOnDemandLoading(object obj)
95+
{
96+
var node = obj as TreeViewNode;
97+
98+
// Skip the repeated population of child items when every time the node expands.
99+
if (node.ChildNodes.Count > 0)
100+
{
101+
node.IsExpanded = true;
102+
return;
103+
}
104+
105+
MusicInfo musicInfo = node.Content as MusicInfo;
106+
musicInfo.IsInAnimation = true;
107+
108+
Device.BeginInvokeOnMainThread(async () =>
109+
{
110+
await Task.Delay(500);
111+
var items = GetSubMenu(musicInfo.ID);
112+
// Populating child items for the node in on-demand
113+
node.PopulateChildNodes(items);
114+
if (items.Count() > 0)
115+
node.IsExpanded = true;
116+
117+
musicInfo.IsInAnimation = false;
118+
});
119+
}
120+
}
121+
}
122+
```
123+
124+
**C#**
125+
126+
The expander icon visibility handled based on the [HasChildNodes](https://help.syncfusion.com/cr/xamarin/Syncfusion.TreeView.Engine.TreeViewNode.html#Syncfusion_TreeView_Engine_TreeViewNode_HasChildNodes).
127+
128+
``` c#
129+
namespace TreeViewXamarin
130+
{
131+
public class ExpanderIconVisibilityConverter : IValueConverter
132+
{
133+
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
134+
{
135+
return (!(bool)value) ? false : true;
136+
}
137+
138+
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
139+
{
140+
throw new NotImplementedException();
141+
}
142+
}
143+
}
144+
```
145+
**C#: Load indicator color customization**
146+
147+
Converter to customize the load indicator color based on the [TreeViewNode.Level](https://help.syncfusion.com/cr/xamarin/Syncfusion.TreeView.Engine.TreeViewNode.html#Syncfusion_TreeView_Engine_TreeViewNode_Level) property.
148+
149+
``` c#
150+
namespace TreeViewXamarin
151+
{
152+
public class IndicatorColorConverter : IValueConverter
153+
{
154+
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
155+
{
156+
return (int)value == 0 ? Color.Red : Color.Green;
157+
}
158+
}
159+
}
160+
```
161+
**Output**
162+
163+
![CustomExpanderTreeView](https://github.com/SyncfusionExamples/treeview-expander-view-customization-on-demand-load-xamarin/blob/master/ScreenShot/CustomExpanderTreeView.gif)

0 commit comments

Comments
 (0)