無法捕獲 Xamarin ListView GroupHeader 點擊事件

Question

我想在 ListView 中獲取 GroupHeaderTemplate 的選定項目。 這當前位於 Master-Detail 設置的 MasterPage 中。 如何在 Xamarin Forms 中捕獲 ListView GroupHeader 點擊事件？

在這里，我有一個StackLayout x:Name=GroupHeader ，我在其上添加了GestureRecognizers並向其添加了一個Command 。 這已綁定到我的 ViewModel，以下是我的代碼：

<?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>

我的 ViewModel 具有以下內容：

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*/
}

這是在 MasterPage 內的 Master-Detail 頁面設置中。 請幫忙。 如果您需要更多信息，請告訴我。

謝謝！

Answer 1

您的 GroupViewModel 中是否定義了ShowDetailCommand ？

如果是，則需要通過Command="{Binding ShowDetailCommand"

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

更新：

你可以嘗試這樣改變：

在 page.cs 中設置BindingContext ：

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

然后在您的 xaml 中將ItemSource綁定到列表視圖：

<?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>

你可以刪除MyAppPageRef.SetListViewData(ExpandedSections); 在您的視圖模型中