Unable to capture Xamarin ListView GroupHeader click event

Question

I want to get selected item for the GroupHeaderTemplate in ListView. This is Currently in a MasterPage from a Master-Detail setup. How to catch ListView GroupHeader click event in Xamarin Forms?

Here I have a StackLayout x:Name=GroupHeader on which I have added the GestureRecognizers and added a Commandto it. This has been bound to my ViewModel, following is my code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="MyApp.Views.MasterDetail.BaseMasterDetailPageMaster"
         Title="Master"
         x:Name="SlideMenuPage">
<StackLayout>
    <ListView x:Name="SectionsListView"
          SeparatorVisibility="None"
          HasUnevenRows="true"
          IsGroupingEnabled="true" x:FieldModifier="public">
        <ListView.Header>
            <Grid BackgroundColor="#03A9F4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="10"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="80"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="10"/>
                </Grid.RowDefinitions>
                <Label
          Grid.Column="1"
          Grid.Row="2"
          Text="AppName"
          Style="{DynamicResource SubtitleStyle}"/>
            </Grid>
        </ListView.Header>
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout x:Name="GroupHeader" Orientation="Horizontal" Padding="5" BackgroundColor="AliceBlue">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Path=BindingContext.ShowDetailCommand, Source={x:Reference SectionsListView}}" CommandParameter="{Binding .}"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="{Binding Title}" TextColor="{StaticResource NavyBlue}" BackgroundColor="Red" FontSize="20" FontFamily="Gotham-Medium" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                        <Button BackgroundColor="Transparent" Image="{Binding StateIcon}" HeightRequest="10" Clicked="HeaderTapped" CommandParameter="{Binding .}" WidthRequest="15" HorizontalOptions="End" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
                        <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding ItemName}" d:Text="{Binding .}" FontSize="20" FontFamily="Gotham-Book"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

My ViewModel has the following:

public ICommand ShowDetailCommand { get; set; }

//Constructor
public MyAppViewModel() {
 ShowDetailCommand = new Command(ExpandHeader);
 //ShowDetailCommand = new Command<MyAppViewModel>(ExpandHeader);//I have tried this, but didn't help.
}

public void ExpandHeader(object obj)
{
        /*Some Logic*/
}

This is within a Master-Detail page setup, within the MasterPage. Please help. Do let me know if you need more information.

Thanks!

Is there any difference doing ShowDetailCommand = new Command<object>(ExpandHeader);? — Andrew

Leo Zhu - MSFT Leo Zhu - MSFT · Accepted Answer · 2020-07-21T02:26:08

Is the ShowDetailCommand defined in your GroupViewModel ?

If yes ,you juse need to binding commond by Command="{Binding ShowDetailCommand"

<StackLayout x:Name="GroupHeader" Orientation="Horizontal" Padding="5" BackgroundColor="AliceBlue">
   <StackLayout.GestureRecognizers>
     <TapGestureRecognizer Command="{Binding ShowDetailCommand}" CommandParameter="{Binding .}"/>
   </StackLayout.GestureRecognizers>
  ...
</StackLayout>

Update:

You could try to change like this:

Setthe BindingContext in your page.cs:

MyAppViewModel viewModel = new MyAppViewModel(Navigation,this);
BindingContext = viewModel;

then in your xaml binding ItemSource to the listview:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:d="http://xamarin.com/schemas/2014/forms/design"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     x:Class="MyApp.Views.MasterDetail.BaseMasterDetailPageMaster"
     Title="Master"
     x:Name="SlideMenuPage">
  <StackLayout>
     <ListView x:Name="SectionsListView" ItemsSource="{Binding ExpandedSections}"
         SeparatorVisibility="None"
         HasUnevenRows="true"
         IsGroupingEnabled="true" x:FieldModifier="public">
       <ListView.Header>
         <Grid BackgroundColor="#03A9F4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="10"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="80"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="10"/>
            </Grid.RowDefinitions>
            <Label
      Grid.Column="1"
      Grid.Row="2"
      Text="AppName"
      Style="{DynamicResource SubtitleStyle}"/>
        </Grid>
    </ListView.Header>
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout x:Name="GroupHeader" Orientation="Horizontal" Padding="5" BackgroundColor="AliceBlue">
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Path=BindingContext.ShowDetailCommand, Source={x:Reference SlideMenuPage}}" CommandParameter="{Binding .}"/>
                    </StackLayout.GestureRecognizers>
                    <Label Text="{Binding Title}" TextColor="{StaticResource NavyBlue}" BackgroundColor="Red" FontSize="20" FontFamily="Gotham-Medium" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                    <Button BackgroundColor="Transparent" Image="{Binding StateIcon}" HeightRequest="10" Clicked="HeaderTapped" CommandParameter="{Binding .}" WidthRequest="15" HorizontalOptions="End" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
                    <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding ItemName}" d:Text="{Binding .}" FontSize="20" FontFamily="Gotham-Book"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>
</StackLayout>

you could remove MyAppPageRef.SetListViewData(ExpandedSections); in your viewmodel

Unable to capture Xamarin ListView GroupHeader click event

1 Answers