Need help with TreeView

[ac-lap]

I am trying to use TreeView in my MAUI app and have been facing few challenges. Link to the sample app Doc followed

1. Created a basic tree view with data binding, but the text gets truncated in Android (API 33/Android 13). Issue happens in Windows also, but it's less prominent.

[Q1] How do I fix this?

To repro this issue in the sample app, comment out the <material:TreeView.ExpanderTemplate> section

2. Item "0.1.1.1 aaa .... " is not getting wrapped, even though I have put the label inside Grid and enabled LineBreakMode. Screenshot from # 1 shows it.

[Q2] How do I enable text wrapping?

<material:TreeView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnItemTapped" />
            </Grid.GestureRecognizers>
            <Rectangle Fill="Yellow" Opacity="0.5" VerticalOptions="Fill" HorizontalOptions="Fill" IsVisible="{Binding IsSelected}"/>
            <Label Text="{Binding ItemName}" FontSize="20" VerticalTextAlignment="Center" LineBreakMode="CharacterWrap" MaxLines="3"/>
        </Grid>
    </DataTemplate>
</material:TreeView.ItemTemplate>

3. The expand arrow is little small for my preference and also has a background color in dark theme, so I used ExpanderTemplate to create a custom arrow, but when I hide the expand button using IsLeaf, all the leaf node items gets hidden and not just the expand button. And somehow in this case the items are not truncated in Android.

[Q3] How to hide the expand button for leaf nodes without hiding the entire leaf node item. Is there an issue with my implementation?

You can see from the screenshot, "Test 1", "Test 2" are not showing up.

<material:TreeView.ExpanderTemplate>
    <DataTemplate>
        <Image IsVisible="{Binding IsLeaf, Converter={StaticResource negativeVisibilityConverter}}" HeightRequest="32" WidthRequest="32">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnItemExpandTapped" />
            </Image.GestureRecognizers>
            <Image.Source>
                <FontImageSource FontFamily="SegoeMDL2" Glyph="{Binding IsExpanded, Converter={StaticResource expandButtonConverter}}" Color="Green"/>
            </Image.Source>
        </Image>
    </DataTemplate>
</material:TreeView.ExpanderTemplate>

I have been struggling since last 2 days to get the TreeView working for my app, I really need your help to get unblocked.

[ac-lap]

[Q4] Also is there any way I can customize the margin of the expand button/margins at each level, currently there are too close.

[ac-lap]

Update: I was able to address [Q3] by instead of binding IsVisible, used multi binding and returned the image as null in case of leaf node.

Currently [Q2] is the main blocker for me.

[enisn]

Text Wrapping is the same issue with https://github.com/enisn/UraniumUI/issues/276

Also, the problem still open in dotnet maui: https://github.com/dotnet/maui/issues/8873#issuecomment-1287768160

[xamham]

Update: I was able to address [Q3] by instead of binding IsVisible, used multi binding and returned the image as null in case of leaf node.

Currently [Q2] is the main blocker for me.

Hi, can you please share this pace of code about using multi binding instead of binding IsVisible, because I'm new to MAUI and couldn't figure out how to do it.

Thanks in advance.