Xamarin - pass data from CollectionView in one page to another page

Issue

I want to know how do I pass data from one CollectionView which is in my MainPage.xaml to another page called DetailsPage when user clicks on a frame that is inside a CollectionView, I hope you know what I meant.

This is my MainPage.xaml:

<CollectionView x:Name="CVSubjects" Margin="0,-50,0,0" ItemsLayout="HorizontalList">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout Margin="20,0,0,0">
                            <Frame BackgroundColor="{Binding BackgroundColor}" WidthRequest="250" HeightRequest="180" HorizontalOptions="Center" CornerRadius="30">
                                <Frame.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                </Frame.GestureRecognizers>
                                <StackLayout>
                                    <Frame BackgroundColor="white" HasShadow="False" WidthRequest="30" HorizontalOptions="Start" CornerRadius="50" HeightRequest="10">
                                        <StackLayout Orientation="Horizontal" HeightRequest="10">
                                            <Image Source="redstaricon.png" WidthRequest="14" Margin="-10,-2,0,0"></Image>
                                            <Label Text="{Binding Rating}" VerticalOptions="Center" Margin="0,-5,0,0" FontAttributes="Bold" TextColor="Black"></Label>
                                        </StackLayout>
                                    </Frame>
                                    <Label Text="{Binding Name}" FontSize="21" TextColor="White" FontAttributes="Bold" Padding="0,10,0,0" WidthRequest="250"></Label>
                                    <StackLayout Orientation="Horizontal">
                                        <Frame CornerRadius="100" 
                                       HeightRequest="55"
                                       WidthRequest="60"
                                       HorizontalOptions="Center"
                                       Padding="0"
                                       IsClippedToBounds="True"
                                           Margin="0,20,0,0"
                                         >
                                            <Image Source="{Binding ImageUrl}" 
                                        HorizontalOptions="Center"
                                        VerticalOptions="Center"
                                               Aspect="Fill"></Image>
                                        </Frame>
                                        <Label Text="Teacher" TextColor="White" WidthRequest="100" Margin="0,25,0,0">
                                        </Label>
                                        <Label Text="{Binding Teacher}" VerticalOptions="Center" TextColor="White" WidthRequest="200" FontAttributes="Bold" Margin="-100,45,0,0" FontSize="17">
                                        </Label>
                                    </StackLayout>
                                </StackLayout>
                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

and this is MainPage.xaml.cs:

 public partial class MainPage : ContentPage
    {
        
        ObservableCollection<Subjects> subjects;
        public MainPage()
        {
            InitializeComponent();
            subjects = new ObservableCollection<Subjects>() { new Subjects { Id = 1, Name = "UX - UI Design", Teacher = "Gustavo Kenter", Rating = "4.9", BackgroundColor = "#FE2E47", ImageUrl="teacher1.png", TeacherTitle="Designer" },
            new Subjects{Id = 2, Name = "Animation in After Effects", Teacher = "Tiana Mango", Rating = "4.3", BackgroundColor = "#FDB2C0", ImageUrl="teacher2.png", TeacherTitle="Animator" },
            new Subjects{Id = 3, Name = "Mobile App Design", Teacher = "Dulce Bator", Rating = "4.1", BackgroundColor = "#D0BCD0", ImageUrl="teacher3.png", TeacherTitle="Designer" },
            new Subjects {Id = 4, Name = "3D Design", Teacher = "Lincoln Bator", Rating = "4.6", BackgroundColor = "#88B5FC", ImageUrl="teacher4.png", TeacherTitle="3D Designer" }, 
            new Subjects{ Id = 5, Name = "Mobile App Development", Teacher = "Livia Lubin", Rating = "4.7", BackgroundColor = "#FDB2C0", ImageUrl="teacher5.png", TeacherTitle="Developer" } };
            GetSubjects();
        }

        private void GetSubjects()
        {
            CVSubjects.ItemsSource = subjects;
            CVGridSubjects.ItemsSource = subjects;
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        { 
           Navigation.PushModalAsync(new DetailsPage());
        }
    }

How do I know pass the data from my CollectionView, I have tried to pass the data through parameters but for some reason when I add a name to for example a lable that contains the name of the subject, I cannot access it inisde c# code, anyone knows how to fix this?

Solution

CollectionView has built in events for handling selection, it is not neccesary to use a GestureRecognizer

<CollectionView SelectionMode="Single" 
                SelectionChanged="OnCollectionViewSelectionChanged" ... >

then you can pass the selected item to the next page via it's constructor

void OnCollectionViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var current = (e.CurrentSelection.FirstOrDefault() as Subjects);
    Navigation.PushModalAsync(new DetailsPage(current));
}

Answered By - Jason