无法捕获 Xamarin ListView GroupHeader 单击事件

Posted 2023-04-13

【中文标题】无法捕获 Xamarin ListView GroupHeader 单击事件

【英文标题】：Unable to capture Xamarin ListView GroupHeader click event

【发布时间】：2020-11-10 01:24:42

【问题描述】：

我想在 ListView 中获取 GroupHeaderTemplate 的选定项。这当前位于 Master-Detail 设置的 MasterPage 中。如何在 Xamarin Forms 中捕获 ListView GroupHeader 点击事件？

这里我有一个StackLayoutx: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 页面设置中。请帮忙。如果您需要更多信息，请告诉我。

谢谢！

【问题讨论】：

做ShowDetailCommand = new Command<object>(ExpandHeader);有什么不同吗？

不，@Andrew 它没有任何区别

【参考方案1】：

ShowDetailCommand 是否在您的 GroupViewModel 中定义？

如果是，则需要通过Command="Binding ShowDetailCommand"绑定command

<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);

【讨论】：

是的@Leo Zhu，正如您在我的问题中看到的那样，我已经在我的 ViewModel 中声明了ShowDetailCommand。由于某种原因，Command 没有被解雇

@VKP 如果它不起作用，你能显示完整的 ViewModel 吗？

好的，这里是 ViewModel public class MyAppViewModel : BaseViewModel public ICommand ShowDetailCommand get; set; public MyAppViewModel() ShowDetailCommand = new Command<object>(ExpandHeader); public void ExpandHeader(object obj) /*Some Logic*/

@VKP 您应该将 ShowDetailCommand 写入视图模型，然后将 ObservableCollection 设置为 listview itemsource。

抱歉，cmets public ObservableCollection<SectionsGroup> ExpandedSections get; set; readonly MyAppPage MyAppPageRef; public ICommand ShowDetailCommand get; set; public MyAppViewModel(MyAppPage myAppPage) MyAppPageRef = myAppPage; UpdateListContent(); ShowDetailCommand = new Command<object>(ExpandHeader); public void UpdateListContent() //SomeLogic MyAppPageRef.SetListViewData(ExpandedSections); public void ExpandHeader(object obj) 有字数限制