Articles in this section
Category / Section

How to show header for Xamarin.Forms TreeView (SfTreeView)

1 min read

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

TreeView Header

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied