mauimaui-community-toolkitcommunity-toolkit-mvvm

Where to put Community Toolkit Long Press on MAUI CollectionView Item


I have a CollectionView of items. I want to long press on an item to cause navigation to call the LongPressCommand. The DataTemplate of the items is 3 labels.

    <CollectionView ItemsSource="{Binding FormattedEvents}" 
                    VerticalScrollBarVisibility="Always" 
                    EmptyView="No events recorded."
                    HeightRequest="500" 
                    SelectedItem="{Binding SelectedMatchEvent}"
                    SelectionMode="Single">

        <CollectionView.Behaviors>
            <!--THIS WILL WORK IF I LONG PRESS ON THE EMPTY LIST-->
            <toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}"/>
        </CollectionView.Behaviors>

        
        <CollectionView.ItemTemplate>

            <DataTemplate>
                <Grid Padding="10" HorizontalOptions="Center">
                    <Grid.Behaviors>
                        <!--DOESN'T WORK-->
                        <toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}"/>
                    </Grid.Behaviors>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="150" />
                    </Grid.ColumnDefinitions>
                    
                    <Label Grid.Row="0" Padding="5,0,5,0"
                                   Grid.Column="0" 
                                   TextColor="White"
                                   Text="{Binding HomeEventMessage}"
                                   FontSize="Medium">
                        <Label.Behaviors>
                            <!--DOESN'T WORK-->
                            <toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}"/>
                        </Label.Behaviors>
                    </Label>

                    <Label Padding="5,0,5,0"
                                       Grid.Column="1" 
                                       TextColor="White"
                                       Text="{Binding EventTime}"
                                       HorizontalOptions="Center"
                                       FontSize="Default"/>
                    
                    <Label Grid.Column="3"
                                   Text="{Binding AwayEventMessage}"
                                   TextColor="White"
                                   FontSize="Medium" >
                        <Label.Behaviors>
                            <!--DOESN'T WORK-->
                            <toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}"/>
                        </Label.Behaviors>
                    </Label>
                    
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

Solution

  • When using Bindings for a Behaviour, you may use a x:Reference Binding expression.

    Let's say you have a LongPressCommand in ViewModel which the ContentPage binds to. Then you may use x:reference Binding expression for the element like below,

    First, set the name of the page to "this",

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         ...
         x:Name="this">
    

    Use x:Reference to bind,

    <DataTemplate>
        ...
                    <Grid.Behaviors>
                        <!--DOESN'T WORK-->
                        <toolkit:TouchBehavior LongPressCommand="{Binding BindingContext.LongPressCommand,Source={x:Reference this}}"/>
                    </Grid.Behaviors>
    </DataTemplate>
    

    The same goes for the Label Control in DataTemplate.

    Please let me know if you have any question.