question

Stesvis-5434 avatar image
0 Votes"
Stesvis-5434 asked Stesvis-5434 commented

Grouped CollectionView - get the selected group name

Hello, I have a CollectionView with IsGrouped="True".
I have the selected item, however I was wondering if there is a way to also get the group name that this item belongs to.

Thanks

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered Stesvis-5434 commented

Hello,


Welcome to our Microsoft Q&A platform!

Take page VerticalListGroupingPage of the official sample collectionviewdemos for example, we can use SelectionChanged method to get the curren selected item. Then we can loop which group contain this item, therefore the property of Group also will get.
1. add event SelectionChanged in VerticalListGroupingPage.xaml

    <CollectionView ItemsSource="{Binding Animals}" 
                     SelectionMode="Single"
                    SelectionChanged="CollectionView_SelectionChanged"
                     IsGrouped="true">
         <CollectionView.ItemTemplate  >
             <DataTemplate>
                 <Grid Padding="10">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto" />
                         <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
                     <Image Grid.RowSpan="2" 
                            Source="{Binding ImageUrl}" 
                            Aspect="AspectFill"
                            HeightRequest="60" 
                            WidthRequest="60" />
                     <Label Grid.Column="1" 
                            Text="{Binding Name}" 
                            FontAttributes="Bold" />
                     <Label Grid.Row="1"
                            Grid.Column="1" 
                            Text="{Binding Location}"
                            FontAttributes="Italic" 
                            VerticalOptions="End" />
                 </Grid>
             </DataTemplate>
         </CollectionView.ItemTemplate>
         <CollectionView.GroupHeaderTemplate>
             <DataTemplate>
                 <Label Text="{Binding Name}"
                        BackgroundColor="LightGray"
                        FontSize="Large"
                        FontAttributes="Bold" />
             </DataTemplate>
         </CollectionView.GroupHeaderTemplate>
         <CollectionView.GroupFooterTemplate>
             <DataTemplate>
                 <Label Text="{Binding Count, StringFormat='Total animals: {0:D}'}"
                        Margin="0,0,0,10" />
             </DataTemplate>
         </CollectionView.GroupFooterTemplate>
     </CollectionView>

2.In VerticalListGroupingPage.xaml.cs, we achieve function CollectionView_SelectionChanged as follows:

    public partial class VerticalListGroupingPage : ContentPage
     {
         GroupedAnimalsViewModel groupedAnimalsViewModel;
         public VerticalListGroupingPage()
         {
             InitializeComponent();
    
             groupedAnimalsViewModel = new GroupedAnimalsViewModel();
             BindingContext = groupedAnimalsViewModel;
         }
    
         private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
             Animal selectedAnimal = e.CurrentSelection[0] as Animal;
             foreach (var animals in groupedAnimalsViewModel.Animals)
             {
                 foreach (var animal in animals)
                 {
                     if (animal == selectedAnimal)
                     {
                         Console.WriteLine(animals.Name);
                         DisplayAlert("Group Name", animals.Name, "OK");
                     }
                 }
             }
         }
     }

The result is:
98740-image.png

Best Regards,


Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.



Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (61.5 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Stesvis-5434 ,I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·

Sorry @JessieZhang-2116 I've been off all weekend (back today), I will give it a try and let you know! Thank you

0 Votes 0 ·

Waitting for you good news.

0 Votes 0 ·
Show more comments