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