Category / Section
How to add nodes to bound mode TreeView in Xamarin.Forms (SfTreeView)
1 min read
You can add nodes at runtime to bound mode SfTreeView in Xamarin.Forms by updating the bound collection from ViewModel.
C#
ViewModel bound collection updated in OnAddItem handler.
public class FileManagerViewModel { public Command OnAddItem { get; set; } public FileManagerViewModel() { GenerateSource(); OnAddItem = new Command(OnAddItemMethod); } private void OnAddItemMethod(object obj) { Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly; var game = new FileManager() { ItemName = "Game", ImageIcon = ImageSource.FromResource("TreeViewXamarin.Icons.treeview_folder.png", assembly) }; var games = new FileManager() { ItemName = "Pubg.exe", ImageIcon = ImageSource.FromResource("TreeViewXamarin.Icons.treeview_exe.png", assembly) }; game.SubFiles = new ObservableCollection<FileManager> { games }; ImageNodeInfo.Add(game); } }
XAML
ViewModel command bound to view to add item.
<ContentPage.Content> <StackLayout Orientation="Vertical" Padding="5"> <Button Text="Add Items" x:Name="addItem" HorizontalOptions="Fill" BackgroundColor="Blue" Command="{Binding OnAddItem}" /> <syncfusion:SfTreeView x:Name="treeView" NotificationSubscriptionMode="CollectionChange,PropertyChange" ItemHeight="40" Indentation="15" ExpanderWidth="40" ChildPropertyName="SubFiles" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded"> <syncfusion:SfTreeView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="0" BackgroundColor="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid Padding="5,5,5,5"> <Image Source="{Binding ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35"/> </Grid> <Grid Grid.Column="1" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="Black" Text="{Binding ItemName}" VerticalTextAlignment="Center"> </Label> </Grid> </Grid> <StackLayout Grid.Row="1" HeightRequest="1"/> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </syncfusion:SfTreeView.ItemTemplate> </syncfusion:SfTreeView> </StackLayout> </ContentPage.Content>