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?
CodePudding user response:
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));
}