2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
You can show header for SfTreeView in Xamarin.Forms by customizing the parent grid with label and SfTreeView. XAML Define Grid with Label as header for TreeView in first row and TreeView in second row. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TreeViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms" x:Class="TreeViewXamarin.MainPage"> <ContentPage.BindingContext> <local:FileManagerViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid> <Label Margin="5" TextColor="Teal" FontAttributes="Bold" FontSize="Medium" HorizontalTextAlignment="Start" VerticalTextAlignment="Center"> <Label.FormattedText> <FormattedString> <Span Text="Nodes Count: " TextColor="DarkOrange" /> <Span Text="{Binding NodeCount}" TextColor="Green"/> </FormattedString> </Label.FormattedText> </Label> </Grid> <syncfusion:SfTreeView x:Name="treeView" ItemHeight="40" Grid.Row="1" Indentation="15" ExpanderWidth="40" ChildPropertyName="SubFiles" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded"> <syncfusion:SfTreeView.ItemTemplate> <DataTemplate> … </DataTemplate> </syncfusion:SfTreeView.ItemTemplate> </syncfusion:SfTreeView> </Grid> </ContentPage> C# In ViewModel, header label is updated with node count. namespace TreeViewXamarin { public class FileManagerViewModel { public FileManagerViewModel() { ... } public int NodeCount { get => ImageNodeInfo.Count(); } ... } } Output |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.