MAUI中如何获取CollectionView组头控件对应的单词值

我在MAUI中使用CollectionView展示分组单词列表，当单词在数据库中有对应发音时，组头会显示ImageButton。目前能捕获ImageButton的Clicked事件，但无法获取该按钮对应的单词（如示例中的“face mask”），无法后续在数据库中查询相关发音。

XAML代码 #

<CollectionView  x:Name="lvWords" Grid.Row="3"   Grid.Column="0" ZIndex="6" Grid.ColumnSpan="8"  Background="Transparent" ItemsSource="{Binding WordsGroups}" IsGrouped="True" SelectionChanged="lvWords_SelectionChanged" SelectionMode="Single" >
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate>
                <StackLayout Orientation="Horizontal" Margin="5,0,0,0" >
                    <Label Text="{Binding Name}" TextColor="{StaticResource Text_Color}" VerticalOptions="CenterAndExpand" BackgroundColor="Transparent" FontSize="24"  FontAttributes="Bold"  />
                    <Label Text="W"  TextColor="{StaticResource Back_Color}"                BackgroundColor="Transparent" FontSize="14" VerticalTextAlignment="Start" HorizontalTextAlignment="End"      VerticalOptions="Start" HorizontalOptions="End"/>
                    <Label Text="{Binding Ipauk}" TextColor="{StaticResource Label_Color}"   VerticalOptions="CenterAndExpand" BackgroundColor="Transparent" FontSize="18" FontAttributes="Italic"  />
                    <Label Text="W"  TextColor="{StaticResource Back_Color}"                BackgroundColor="Transparent" FontSize="14" VerticalTextAlignment="Start" HorizontalTextAlignment="End"      VerticalOptions="Start" HorizontalOptions="End"/>
                    <ImageButton x:Name="imgbUk1"       ZIndex="4"     IsVisible="{Binding Ipaukb}" Margin="5,0,0,0"  BackgroundColor="Transparent" CornerRadius="0" Source="uk_sound.png" HeightRequest="48" WidthRequest="48" Clicked="imgbUk1_Clicked"/>
                    <ImageButton x:Name="imgbUs1"       ZIndex="5"     IsVisible="{Binding Ipausb}"  Margin="5,0,0,0"  BackgroundColor="Transparent" CornerRadius="0" Source="us_sound.png"  HeightRequest="48" WidthRequest="48" Clicked="imgbUs1_Clicked"/>
                </StackLayout>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width = "*" />
                        <ColumnDefinition Width = "*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height = "*" />
                        <RowDefinition Height = "*"/>
                        <RowDefinition Height = "10"/>
                    </Grid.RowDefinitions>
                    <StackLayout Orientation="Horizontal"  Grid.Row="0" Grid.Column="0" Margin="20,0,0,0">
                        <!-- Label Text="(" TextColor="{StaticResource EnglishLabel_Color}"            BackgroundColor="Transparent" FontSize="14" VerticalTextAlignment="End" HorizontalTextAlignment="Start"   VerticalOptions="End" HorizontalOptions="Start"/-->
                        <Label Text="{Binding Level}" TextColor="{StaticResource EnglishLabel_Color}"    BackgroundColor="Transparent" FontSize="16" VerticalTextAlignment="End" HorizontalTextAlignment="Center"  VerticalOptions="End" HorizontalOptions="Center"/>
                        <!--Label Text=")"  TextColor="{StaticResource EnglishLabel_Color}"             BackgroundColor="Transparent" FontSize="14" VerticalTextAlignment="End" HorizontalTextAlignment="End"      VerticalOptions="End" HorizontalOptions="End"/-->
                        <Label Text="{Binding Translation}" TextColor="{StaticResource Traslation_Color}" Margin="20,0,0,0" BackgroundColor="Transparent" FontSize="18" VerticalTextAlignment="End" HorizontalTextAlignment="Center"  VerticalOptions="End" HorizontalOptions="Center"/>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal"   Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="20,0,0,0">
                        <!--Label Text="("                TextColor="{StaticResource EnglishLabel_Color}"  BackgroundColor="Transparent" FontSize="18" HorizontalTextAlignment="Start" VerticalOptions="Start" HorizontalOptions="Start"/-->
                        <Label Text="{Binding Type}"  TextColor="{StaticResource EnglishLabel_Color}"  BackgroundColor="Transparent" FontSize="14" HorizontalTextAlignment="Center" VerticalOptions="Start" HorizontalOptions="Center"/>
                        <!--Label Text=")"                TextColor="{StaticResource EnglishLabel_Color}"  BackgroundColor="Transparent" FontSize="18" HorizontalTextAlignment="End" VerticalOptions="Start" HorizontalOptions="End"/-->
                        <Label Text="{Binding Mainmeaning}"  Margin="10,0,0,0" TextColor="{StaticResource Meaning_Color}" BackgroundColor="Transparent" FontSize="18" HorizontalTextAlignment="Start" VerticalOptions="Start" HorizontalOptions="Start"/>
                    </StackLayout>
                    
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

数据构造代码 #

WordsGroups = new List<WordsGroup>();
            List<Words> list = new List<Words>();
            // 先将单词分组，用于CollectionView展示
            var dict = words.GroupBy(o => o.Word).ToDictionary(g => g.Key, g => g.ToList());
            // 获取单词列表，用于查询数据库中的发音
            List<string> _words_list = dict.Keys.ToList();
            sounds = await _iWord_SoundsRepository.GetGroupWords_Sound(_words_list);
            foreach (KeyValuePair<string, List<Words>> item in dict)
            {
                bool Ipab = true;
                var sound = sounds.Where(q=> q.Word.ToLower().Equals(item.Key)).ToList();
                if (sound.Count<=0)
                    Ipab = false;
                sound = sounds.Where(q => q.Word.ToLower().Equals(item.Key)).ToList();
                WordsGroups.Add(new WordsGroup(item.Key, new List<Words>(item.Value), "  /" + item.Value[0].IPAUK + "/ " + " /" + item.Value[0].IPAUS + "/", new List<Words>(item.Value), Ipab, Ipab));
            }
            lvWords.ItemsSource = WordsGroups;
            lblStatus.Text = "Found:" + dict.Count.ToString();

WordsGroup类代码 #

public class WordsGroup : List<Words>, INotifyPropertyChanged
{
    public string Name { get; set; } 
    public string Ipauk { get; set; }
    public bool ipaukb { get; set; }
    public bool Ipaukb
    {
        get
        {
            return ipaukb;
        }
        set
        {
            ipaukb = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Ipaukb)));
        }
    }
    public bool ipausb { get; set; }
    public bool Ipausb
    {
        get
        {
            return ipausb;
        }
        set
        {
            ipausb = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Ipausb)));
        }
    }

待实现的事件代码 #

private void imgbUk1_Clicked(object sender, EventArgs e)
{
    //????????
}

解决方案 #

GroupHeaderTemplate的绑定上下文是WordsGroup实例，因此点击的ImageButton的BindingContext就是当前组对应的WordsGroup对象，通过它可以直接获取到对应的单词（Name属性）。修改事件代码如下：

private void imgbUk1_Clicked(object sender, EventArgs e)
{
    var btn = sender as ImageButton;
    if (btn == null) return;
    
    var wordGroup = btn.BindingContext as WordsGroup;
    if (wordGroup == null) return;
    
    // 获取到对应的单词
    string targetWord = wordGroup.Name;
    
    // 这里执行数据库查询发音的逻辑，比如：
    // var sound = sounds.FirstOrDefault(s => s.Word.Equals(targetWord, StringComparison.OrdinalIgnoreCase));
    // 后续处理发音播放等操作
}

imgbUs1_Clicked事件可使用完全相同的逻辑获取单词。

内容的提问来源于stack exchange，提问作者Francisco Lopez