MAUI How to get header item value from a control within of a CollectionView

I have a CollectionView where I show a gruped list words. Per each word I have a ImagenButton if in the Data Base has a sound for this word. I can get the Clicked event from the ImagenButton but I do not know how to get the word that represent the item.

enter image description here

The above sample shows that "face mask" has sound in the database but not "face-saving".
When I clik over the ImagenButton I’d like to know the word, for example "face mask" and find it out into the database.

The next is my code.

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

And here I create te data:

WordsGroups = new List<WordsGroup>();
            List<Words> list = new List<Words>();
            // First, Group the worold to add to the CollectionView
            var dict = words.GroupBy(o => o.Word).ToDictionary(g => g.Key, g => g.ToList());
            // Get the the word to find the sound pronuntation into the Data Base.
            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();

And WordsGroup is:

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

I’d like to know how to get the word when the user clik over a ImagenButton:

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

>Solution :

you can get the values from the BindingContext

private void imgbUk1_Clicked(object sender, EventArgs e)
{
   var btn = (ImageButton)sender;
   var group = (WordsGroup)btn.BindingContext;
   var name = group.Name;
}

Leave a Reply