Can I set the size of the Syncfusion SfTreeView to dynamic?

Question

I put the SfTreeView inside an SfExpander, and the TreeView takes up a lot of space under it.[enter image description here][1]

I tried to put in into a grid and set the height to Auto but didn't work. [1]: https://i.sstatic.net/kDP3l.png

<expander:SfExpander DynamicSizeMode="Content" IsExpanded="False">
    <expander:SfExpander.Header>
        <Label TextColor="#495F6E" Text="TreeView list" FontSize="16"
    </expander:SfExpander.Header>

    <expander:SfExpander.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>

            <treeview:SfTreeView x:Name="treeView2"
                ItemHeight="34"
                ItemsSource="{Binding ImageNodeInfo}">
                <treeview:SfTreeView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="grid" Padding="2,2,2,2" RowSpacing="0" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="1"/>
                            </Grid.RowDefinitions>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding Level, Converter={StaticResource IndentationConverter}}" />
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="60" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Image Grid.Column="1" Source="{Binding IsExpanded,Converter={StaticResource ExpanderIconConverter}}"
                                IsVisible="{Binding HasChildNodes,Converter={StaticResource ExpanderIconVisibilityConverter}}"
                                VerticalOptions="Center" 
                                HorizontalOptions="Center"
                                HeightRequest="15" 
                                WidthRequest="15"/>
                                <Image Grid.Column="2" Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Start" HeightRequest="16" WidthRequest="60"/>
                                <Grid Grid.Column="3" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center">
                                    <Label LineBreakMode="NoWrap" Text="{Binding Content.ItemName}" VerticalTextAlignment="Center" FontSize="Body" FontAttributes="Bold"/>
                                </Grid>
                            </Grid>
                            <BoxView HeightRequest="1" BackgroundColor="Gray" Grid.Row="1"/>
                        </Grid>
                    </DataTemplate>
                </treeview:SfTreeView.ItemTemplate>
            </treeview:SfTreeView>
        </Grid>
    </expander:SfExpander.Content>
</expander:SfExpander>

Answer 1

We have checked the reported query “How to set the dynamic height” from our end. We would like to inform you that TreeView will be loaded with the view size. If you want to customize the height of TreeView, you can set HeightRequest for TreeView based on the item size. Please refer the following code snippet to achieve your requirement,

Xaml: Use EventToCommand behavior for SfTreeView use command for QueryNodeSize event. Bind HeightRequest of TreeView to update the treeview height based on nodes.

<syncfusion:SfTreeView x:Name="treeView"  
                               ItemHeight="40" 
                               HeightRequest="{Binding TreeViewHeight}" 
                               ChildPropertyName="SubFiles" 
                               ItemTemplateContextType="Node" 
                               AutoExpandMode="AllNodesExpanded" 
                               ItemsSource="{Binding ImageNodeInfo}" 
                               BackgroundColor="Beige"> 
            <syncfusion:SfTreeView.Behaviors> 
                <local:EventToCommandBehavior EventName="QueryNodeSize" Command="{Binding Path=BindingContext.QueryNodeSizeCommand, Source={x:Reference treeView}}"/> 
            </syncfusion:SfTreeView.Behaviors> 
            … 
</syncfusion:SfTreeView> 
 
ViewModel: Create Command with QueryNodeSizeEventArgs. 
private double treeViewHeight = -1; 
 
//Property to set TreeView height. 
public double TreeViewHeight 
{ 
    get { return treeViewHeight; } 
    set 
    { 
        treeViewHeight = value; 
        this.RaisedOnPropertyChanged("TreeViewHeight"); 
    } 
} 
 
//Command for QueryNodeSize event. 
public Command<QueryNodeSizeEventArgs> QueryNodeSizeCommand { get; set; } 
 
public FileManagerViewModel() 
{ 
    //Initialize the command. 
    QueryNodeSizeCommand = new Command<QueryNodeSizeEventArgs>(QueryNodeSizeMethod); 
} 
 
/// <summary> 
/// Command method to calculate the TreeView height. 
/// </summary> 
/// <param name="args">Argument which holds the information of the node.</param> 
private void QueryNodeSizeMethod(QueryNodeSizeEventArgs args) 
{ 
    var item = args.Node.Content as FileManager; 
    if (!item.IsHandled) 
    { 
        this.TreeViewHeight += args.Height; 
        item.IsHandled = true; 
    } 
} 

We have attached the workable sample based on your requirement. You can find them from the following link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeViewXamarin-1814245514

Regards, SaiGanesh Sakthivel