How to use Nito.MVVM in Xamarin.Forms Treeview (SfTreeView)?
You can use Nito.MVVM to asynchronously populate child nodes in the Xamarin.Forms TreeView. Refer to the steps below to work with Nito.MVVM,
STEP 1: Install the Nito.MVVM.Async Nuget package in the shared code project.
STEP 2: Define CustomAsyncCommand to populate the child nodes on demand in the ViewModel. The CanExecuteOnDemandLoading returns whether or not the node has a child. Based on the return value of CanExecuteOnDemandLoading, the ExecuteOnDemandLoading will be called.
namespace TreeViewXamarin
{
public class MusicInfoRepository
{
public IAsyncCommand TreeViewOnDemandCommand { get; set; }
public MusicInfoRepository()
{
TreeViewOnDemandCommand = new CustomAsyncCommand(ExecuteOnDemandLoading, CanExecuteOnDemandLoading);
}
private bool CanExecuteOnDemandLoading(object sender)
{
var hasChildNodes = ((sender as TreeViewNode).Content as MusicInfo).HasChildNodes;
if (hasChildNodes)
return true;
else
return false;
}
private async Task ExecuteOnDemandLoading(object obj)
{
...
}
}
}
STEP 3: In the command execution method, invoke the PopulateChildAsync method in the NotifyTask.Create method that executes the PopulateChildAsync action asynchronously. You can get the populated data from the NotifyTask.Result. The NotifyTask.TaskCompleted gets a task that has been successfully completed. If the child nodes are populated successfully, expand the parent node to view the child.
namespace TreeViewXamarin
{
public class MusicInfoRepository
{
...
private bool CanExecuteOnDemandLoading(object sender)
{
...
}
private async Task ExecuteOnDemandLoading(object obj)
{
var notifyTask = NotifyTask.Create(PopulateChildAsync(obj));
await notifyTask.TaskCompleted;
if (notifyTask.IsCompleted)
{
var items = notifyTask.Result as IEnumerable<MusicInfo>;
if (items.Count() > 0)
//Expand the node after child items are added.
(obj as TreeViewNode).IsExpanded = true;
}
}
private async Task<IEnumerable<MusicInfo>> PopulateChildAsync(object obj)
{
var node = obj as TreeViewNode;
// Skip the repeated population of child items when every time the node expands.
if (node.ChildNodes.Count > 0)
{
node.IsExpanded = true;
return null;
}
//Animation starts for expander to show progressing of load on demand
node.ShowExpanderAnimation = true;
MusicInfo musicInfo = node.Content as MusicInfo;
await Task.Delay(2000);
//Fetching child items to add
var items = GetSubMenu(musicInfo.ID);
// Populating child items for the node in on-demand
node.PopulateChildNodes(items);
//Stop the animation after load on demand is executed, if animation not stopped, it remains still after execution of load on demand.
node.ShowExpanderAnimation = false;
return items;
}
}
}
STEP 4: Bind the ViewModel collection to the SfTreeView.ItemTemplate. Bind the ViewModel command to the LoadOnDemandCommand property to populate the child at run time.
<StackLayout>
<sfTreeView:SfTreeView x:Name="treeView" Indentation="15" ExpanderWidth="40" LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}" ItemsSource="{Binding Menu}">
<sfTreeView:SfTreeView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" RowSpacing="0" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label LineBreakMode="NoWrap" Text="{Binding ItemName}" Padding="1,0,0,0" VerticalOptions="Center" VerticalTextAlignment="Center" />
<StackLayout Grid.Row="1" HeightRequest="1"/>
</Grid>
</DataTemplate>
</sfTreeView:SfTreeView.ItemTemplate>
</sfTreeView:SfTreeView>
</StackLayout>
Conclusion
I hope you enjoyed learning about how to use Nito.MVVM in Xamarin.Forms Treeview.
You can refer to our Xamarin.Forms TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
