Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

 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));
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading