CommunityToolkit
[BUG] Buttons or any view not firing inside Layout that has a TouchBehavior
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
The touch behavior in the parent view overrides the event on the nested view.
<VerticalStackLayout
Padding="30,0"
Spacing="25">
<VerticalStackLayout.Behaviors>
<mct:TouchBehavior PressedOpacity="0.5"/>
</VerticalStackLayout.Behaviors>
<Image
Source="dotnet_bot.png"
HeightRequest="185"
Aspect="AspectFit"
SemanticProperties.Description="dot net bot in a hovercraft number nine" />
<Label
Text="Hello, World!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />
<Label
Text="Welcome to .NET Multi-platform App UI"
Style="{StaticResource SubHeadline}"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I" />
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Fill" />
</VerticalStackLayout>
Expected Behavior
Click on the button should work when a touch behavior is set on the parent view.
Steps To Reproduce
- Download the repo and run it.
- Click on the button doesn't work while it should work.
Link to public reproduction project repository
https://github.com/arahmancsd/MauiTouchBehavior.git
Environment
- .NET MAUI CommunityToolkit: 10.0.0
- OS: iOS, Android
- .NET MAUI: 9.0.21
Anything else?
A close issue #2385 shows it is resolved, but it isn't.
I reported the same issue (#2385), but it's meant to be fixed now after the .NET 9 support #2215.
Edit
I confirm the issue is still there on 10.0
I am facing this exact same issue. I have a border control with a long press command touch behavior and inside is a mct:Expander with a button in the Expander header. I have the button.clicked set to an event in the code behind which never fires
As of today's date, I have the latest communitytoolkit.Maui nuget package. Below is my xaml in case it helps paint the picture
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:LoanShark.ViewModels"
xmlns:models="clr-namespace:LoanShark.Models"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:custom="clr-namespace:LoanShark.Behaviors"
x:Class="LoanShark.Views.LoanPage"
x:Name="Loans"
x:DataType="vm:LoanViewModel"
Title="Loans">
<Grid>
<!-- Main Content -->
<!-- Show message when Loans is empty -->
<Label Text="No loans found."
IsVisible="{Binding Loans.Count, Converter={StaticResource IsZeroConverter}}"
HorizontalOptions="Center"
VerticalOptions="Center" />
<!-- Loan List -->
<CollectionView x:Name="loansCollectionView"
ItemsSource="{Binding Loans}"
VerticalOptions="FillAndExpand"
InputTransparent="False"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Loan">
<Border x:Name="LoanBorder">
<Border.Behaviors>
<toolkit:TouchBehavior BindingContext="{Binding Path=BindingContext, Source={x:Reference LoanBorder}, x:DataType=Border}"
LongPressCommand="{Binding Source={x:Reference Loans}, Path=BindingContext.ShowContextMenuCommand, x:DataType=ContentPage}"
LongPressCommandParameter="{Binding .}"/>
</Border.Behaviors>
<VerticalStackLayout>
<!-- Default View -->
<Label Text="{Binding Borrower.FullName}"
Style="{DynamicResource SubHeaderLabelStyle}"
FontSize="16" />
<!-- Collapsible Details -->
<toolkit:Expander ExpandedChanged="OnExpandButtonClicked">
<toolkit:Expander.Header>
<Grid ColumnDefinitions="*, Auto" VerticalOptions="CenterAndExpand">
<Label Text="{Binding Name}"
Style="{DynamicResource RegularLabelStyle}"
FontSize="14"
Grid.Column="0" />
<Button Text="+"
FontSize="14"
TextColor="White"
WidthRequest="20"
HeightRequest="20"
MinimumWidthRequest="20"
MinimumHeightRequest="20"
CornerRadius="20"
Padding="0"
HorizontalOptions="End"
Grid.Column="1"
Clicked="OnExpandButtonClicked" />
</Grid>
</toolkit:Expander.Header>
<toolkit:Expander.Content>
<Grid RowDefinitions="Auto, Auto, Auto, Auto" ColumnDefinitions="*, Auto">
<!-- Original Loan Amount -->
<Label Text="Original:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="0" Grid.Column="0" />
<Label Text="{Binding OriginalLoanAmount, StringFormat='{0:C}'}"
Style="{DynamicResource RegularLabelStyle}" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" />
<!-- Remaining Loan Amount -->
<Label Text="Remaining:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="1" Grid.Column="0" />
<Label Text="{Binding RemainingLoanAmount, StringFormat='{0:C}'}"
Style="{DynamicResource RegularLabelStyle}" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" />
<!-- Interest Rate -->
<Label Text="Interest Rate:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="2" Grid.Column="0" />
<Label Text="{Binding Interest, StringFormat='{0:P}'}"
Style="{DynamicResource RegularLabelStyle}" Grid.Row="2" Grid.Column="1" HorizontalOptions="End" />
<!-- Loan End Date -->
<Label Text="End Date:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="3" Grid.Column="0" />
<Label Text="{Binding LoanEndDate, StringFormat='{0:MM/dd/yyyy}'}"
Style="{DynamicResource RegularLabelStyle}" Grid.Row="3" Grid.Column="1" HorizontalOptions="End" />
</Grid>
</toolkit:Expander.Content>
</toolkit:Expander>
</VerticalStackLayout>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<!-- Floating Add Button -->
<Button Text="+"
Command="{Binding NavigateToNewLoanCommand}"
HorizontalOptions="End"
VerticalOptions="End"
Style="{DynamicResource FloatingActionButtonStyle}" />
</Grid>
</ContentPage>
I encountered a similar situation where I needed to manage nested touch behaviors. For example:
In my case, I wanted to tap on the box to focus it while still allowing the dropdown to be used for selecting options.
Initially, I applied touch behaviors to both the parent and child elements, as you might expect. However, I found that the parent’s touch behavior interfered with the child’s. To resolve this, I implemented a workaround where the parent’s touch behavior is temporarily disabled whenever the child’s touch behavior is triggered:
private void PickerTouchBehavior_CurrentTouchStatusChanged( object sender, CommunityToolkit.Maui.Core.TouchStatusChangedEventArgs e )
{
if ( e.Status == CommunityToolkit.Maui.Core.TouchStatus.Started )
{
_primaryTouchBehavior.IsEnabled = false;
}
else
{
_primaryTouchBehavior.IsEnabled = true;
}
}
While your setup might differ, this approach could still be applicable and help ensure smooth interactions in nested touch scenarios.
