[BUG][8.0.x] Label is not displayed properly when adding TouchBehavior

[tranb3r]

Is there an existing issue for this?

• [X] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [X] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When adding a TouchBehavior to a simple Grid layout, a Label inside the Grid is sometimes not displayed properly. See screenshots, with or without TouchBehavior.

Here is the xaml code for the ItemView:

<ContentView
    x:Class="MauiAppMctTouchBehaviorLabelTruncation.ItemView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mauiAppMctTouchBehaviorLabelTruncation="clr-namespace:MauiAppMctTouchBehaviorLabelTruncation"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Name="ItemViewRef"
    x:DataType="mauiAppMctTouchBehaviorLabelTruncation:ItemViewModel">

    <Border
        Margin="10"
        Padding="10"
        BackgroundColor="LightCyan"
        Stroke="Black">

        <Border.Behaviors>
            <mct:TouchBehavior BindingContext="{Binding BindingContext, Source={x:Reference ItemViewRef}}" Command="{Binding TapCommand}" />
        </Border.Behaviors>

        <Grid ColumnDefinitions="*,Auto">
            <ContentView Grid.Column="2">
                <Label
                    BackgroundColor="LightGoldenrodYellow"
                    Text="{Binding Title}"
                    TextColor="Black" />
            </ContentView>
        </Grid>

    </Border>

</ContentView>

Expected Behavior

The Label should be displayed the same, with or without the TouchBehavior.

Steps To Reproduce

1. Open the repro.
2. When there is a TouchBehavior, some Items are not displayed properly.
3. Remove the TouchBehavior, everything is back to normal.

Link to public reproduction project repository

https://github.com/tranb3r/Issues/tree/main/MauiAppMctTouchBehaviorLabelTruncation

Environment

- .NET MAUI CommunityToolkit:8.0.x
- OS:Android
- .NET MAUI:8.0.14

[raver99]

I can confirm this, I have a similar issue, did you find any workaround?

[tranb3r]

I can confirm this, I have a similar issue, did you find any workaround?

no :(

[raver99]

@tranb3r good news, i managed to find a workaround for my project, but also for your sample. The idea is to add an empty container that does not affect the layout of the item, on top of the visible view. You have to add the touch behavior to this container and not the one that does the layout of the visible items.

So for your case i tested it and had to do this modifications to make it work:

  <Border
    Margin="10"
    Padding="10"
    BackgroundColor="LightCyan"
    Stroke="Black">
    <Grid>
        <Grid HorizontalOptions="Fill"
              VerticalOptions="Fill">
            <Grid.Behaviors>
                <mct:TouchBehavior BindingContext="{Binding BindingContext, Source={x:Reference ItemViewRef}}" Command="{Binding TapCommand}" />
            </Grid.Behaviors>

        </Grid>

        <Grid ColumnDefinitions="*,Auto">
            <Label
                Grid.Column="1"
                BackgroundColor="LightGoldenrodYellow"
                Text="{Binding Title}"
                MaxLines="0"
                LineBreakMode="NoWrap"
                HorizontalTextAlignment="End"
                TextColor="Black" />
        </Grid>
    </Grid>
</Border>

hope this helps

[tranb3r]

@raver99 Indeed your workaround works, both for my sample and for my app. Thanks!

[tranb3r]

This issue has been fixed in Maui 9.0.40