Reputation: 1
Below is my xaml page. You will see that I have a Border control which I added a Touch Behavior to. This works...but the button inside the border control has a button click event which never triggers. The touch behavior is wired up in the view model and the button click event is wired up in the code behind as it handles expanding and collapsing the cards Am I missing something? Or is this a bug? If it is a bug, is there any work around that works on Android and iOS?
<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>
Upvotes: 0
Views: 55
Reputation: 25871
For your use case, I don't think you need Touch Behavior. I think two Button will suffice. In the snippet below I demonstrate that by putting a Button and a border in a Grid, that button will catch mouse clicks sent to the Border.
The Padding I added to the Border will ensure that there is a clickable region outside the VerticalStackLayout that is guaranteed to be received by the top level Button.
The inner Button can also be pressed.
<Grid>
<Button Opacity="0" />
<Border Padding="20">
<VerticalStackLayout>
<!-- .. -->
<Button />
<!-- .. -->
</VerticalStackLayout>
</Border>
</Grid>
Upvotes: 0