Command in GroupHeader Only Fires When There's One Group

martinwhitman1 326 Reputation points
2021-07-08T22:02:28.927+00:00

I have a collectionview that I am grouping. The Command on a tapgesturerecognizer in the group header works fine when I have one group. But the command doesn't fire on any group header including the first when there are multiple groups in the collectionview. The groups and their submembers are identical, and the binding works because the group name appears. I'm getting frustrated because I have tried seemingly every suggestion and I don't really know how to properly debug this.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,287 questions
0 comments No comments
{count} votes

Accepted answer
  1. martinwhitman1 326 Reputation points
    2021-07-12T17:29:28.9+00:00

    So apparently my binding was correct, but my collectionview which I was dynamically setting the height of, was smaller than its contents, even though they rendered visually fine, and thus the tapgesturerecognizer was ignored. So setting the height request much larger than I need, due to CollectionView having all that stupid extra space at the bottom that is a multi year ongoing bug from Microsoft, makes the commands work on the group headers. Ridiculous

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 25,586 Reputation points Microsoft Vendor
    2021-07-09T09:22:53.787+00:00

    Hello,
    Welcome to our Microsoft Q&A platform!
    I 'm not clear about how you bind tapGestureRecognize commnd in your own project. I have a try with this demo and add tap gesture in multiple groups( VerticalListGroupingPage ).
    Wish it works for you.

    VerticalListGroupingPage

    <CollectionView.GroupHeaderTemplate>  
                    <DataTemplate>  
                        <Label Text="{Binding Name}"  
                               BackgroundColor="Red"  
                               FontSize="Large"  
                               FontAttributes="Bold" >  
                            <Label.GestureRecognizers>  
                                <TapGestureRecognizer  
                                    Command="{Binding TapCommand}"  
                                    CommandParameter="Image1" />  
                            </Label.GestureRecognizers>  
                            </Label>  
                    </DataTemplate>  
     </CollectionView.GroupHeaderTemplate>  
    

    Bind GroupedAnimalsViewModel

    public partial class VerticalListGroupingPage : ContentPage  
        {  
            public VerticalListGroupingPage()  
            {  
                InitializeComponent();  
                BindingContext = new GroupedAnimalsViewModel();  
            }  
        }  
    

    AnimalGroup

    using System.Collections.Generic;  
    using System.Diagnostics;  
    using System.Windows.Input;  
    using Xamarin.Forms;  
      
    namespace CollectionViewDemos.Models  
    {  
        public class AnimalGroup : List<Animal>  
        {  
            int taps = 0;  
            public string Name { get; private set; }  
            public ICommand TapCommand { get; set; }//test  
      
            public AnimalGroup(string name, List<Animal> animals) : base(animals)  
            {  
                Name = name;  
                TapCommand = new Command(OnTapped);  
            }  
      
            public override string ToString()  
            {  
                return Name;  
            }  
            void OnTapped(object s)  
            {  
                taps++;  
                Debug.WriteLine("parameter: " + taps);  
            }  
        }  
    }  
    

    For more informaton, you can refer to:
    https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/tap
    https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping

    Best Regards,
    Wenyan Zhang


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. martinwhitman1 326 Reputation points
    2021-07-12T14:12:52.11+00:00

    Here's the binding. Am I missing something obvious? When the collection size is 1, the group header commands work fine. When the collection is larger, they don't. The commands within the groups work regardless.

    <views:NoScrollCollectionView HeightRequest="{Binding HeightRequest}" VerticalOptions="Start" SelectionMode="Single" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" IsGrouped="True" ItemsSource="{Binding GroupedList}" x:Name="thisView">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <SwipeView>
                                            <SwipeView.RightItems>
                                                <SwipeItem Text="Delete"                                                   
                                                           BackgroundColor="Red" 
                                                           Command="{Binding BindingContext.DeleteItem, Source={x:Reference thisView}}"
                                                           CommandParameter="{Binding .}"/>
                                            </SwipeView.RightItems>
                                            <StackLayout>
                                                <StackLayout x:DataType="model:MItem" HorizontalOptions="FillAndExpand" Orientation="Horizontal" Padding="15,0,0,0">
                                                <Label FontFamily="Montserrat-Regular" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" FontSize="Small" Text="{Binding itemCategory}"></Label>
                                                <Label FontFamily="Montserrat-Regular" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" FontSize="Small" HorizontalTextAlignment="End" Text="{Binding state}" TextColor="{Binding stateColor}"></Label>
                                                </StackLayout>
                                                <BoxView Color="Black" HeightRequest="1"></BoxView>
                                            </StackLayout>
                                        </SwipeView>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                                <CollectionView.GroupHeaderTemplate>
                                    <DataTemplate>
                                        <SwipeView>
                                            <SwipeView.RightItems>
                                                <SwipeItem Text="Delete"                                                   
                                                           BackgroundColor="Red" 
                                                           Command="{Binding BindingContext.DeleteGroup, Source={x:Reference thisView}}"
                                                           CommandParameter="{Binding .}"/>
                                            </SwipeView.RightItems>
                                            <StackLayout x:DataType="model:MPageGroup">
                                                <StackLayout.GestureRecognizers>
                                                    <TapGestureRecognizer NumberOfTapsRequired="1" 
                                                                      Command="{Binding BindingContext.GroupTapped, Source={x:Reference thisView}}" CommandParameter="{Binding .}"
                                                    />
                                                </StackLayout.GestureRecognizers>
                                                <Label FontFamily="Montserrat-Bold" TextColor="Black" Text="{Binding name}"/>
    
                                            </StackLayout>
                                        </SwipeView>              
                                    </DataTemplate>
                                </CollectionView.GroupHeaderTemplate>
                            </views:NoScrollCollectionView>
    
    0 comments No comments