TreeView - The images are not showed correctly

[lperezj]

I created a TreeView with this Template

<DataTemplate>
    <HorizontalStackLayout Spacing="5">
        <Border VerticalOptions="Fill"
                WidthRequest="50"
                HeightRequest="50"
                StrokeThickness="0"
                Padding="0">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="14" />
            </Border.StrokeShape>
            <Image Grid.Row="0"
                   Source="{Binding Image}"
                   Aspect="AspectFill"
                   VerticalOptions="Fill"
                   HorizontalOptions="Fill" />
        </Border>
        <Label Text="{Binding Name}"
               FontAttributes="Bold" />
        <Label Text="{Binding Children.Count, StringFormat='({0})'}" />
    </HorizontalStackLayout>
</DataTemplate>

but when the View is showed, the image is cropped

Sometime, when i change the XAML in Running mode, the XAML is refreshed and showed correctly

but the second level is cropped again

[enisn]

It might be related to MAUI layout calculations, can you set a HeightRequest to Image or the container (which is StackLayout in your case)

By default, the line height is probably calculated as equal to the Expander arrow icon, I'm not sure, I'll take a look at it

[lperezj]

No, I,m sorry the issue continues. I try to remove the Border and put a HeightRequest in Image and StackLoyout

<material:TreeView ItemsSource="{Binding Nodes}">
    <material:TreeView.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout Spacing="5"
                                   **HeightRequest="50"
                                   Padding="0"**>
                <Image Grid.Row="0"
                       Source="{Binding Image}"
                       **HeightRequest="50"
                       WidthRequest="50"**
                       Aspect="AspectFill" />
                <Label Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Text="{Binding Children.Count, StringFormat='({0})'}" />
            </HorizontalStackLayout>
        </DataTemplate>
    </material:TreeView.ItemTemplate>
</material:TreeView>

but the problem is the same

[lperezj]

This issue only happen on Windows. I´m testing on Android device and the images are displayed correctly. For me, the drowback is that only expand the menu if i click in the arrow, if i click in the image or text the menu is not expanded.

[enisn]

ok, thanks for the detailed information, I'll investigate the problem on windows. It's a strange behaviour 🤔

[lperezj]

You are welcome. In Android the problem is the second or third level, the image is intended to be a small image and if it is larger (as in my case) the images are overlaped.

I´m going to test if is possible to add a margin dinamicaly in levels n+1

[lperezj]

The rendering is the problem. Every time I maximize or minimize the screen the elements are displayed correctly. Obviously I can't fix it because I don't have the sources :-) I upload a video in a ZIP file, because the MKV is not supported

2023-10-04 15-39-03.zip