Navigate to the detail page of selected item in CollectionView - maui

Question

I am using .net MAUI . I want to navigate to a detail page of selected item in CollectionView. I have tried using selectionchanged but it opens blank page .My goal is to open a detail page of particular product that is selected. It was working in ListView but when I change it to collectionView it opens blank page. I'm attaching the relevant code , Please let me know If more information is required.
Xaml code(page 1)
<CollectionView SelectionMode="Single" x:Name="listview"
IsVisible="true" RemainingItemsThreshold="12" SelectionChanged= "listview_SelectionChanged"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="18">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<Image Source="splash_logo.png" Grid.RowSpan="1" Grid.Column="0" Grid.Row="0"/>
<Label Text="{Binding prod_name}" TextColor="Black" FontSize="Medium" FontAttributes="Bold" Grid.Column="0" Grid.Row="1" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
<HorizontalStackLayout Grid.Row="2" Grid.Column="0" >
<Label Text="Rs." TextColor="Black"/>
<Label Text="{Binding prod_price}" TextColor="Black" LineBreakMode="TailTruncation"/>
</HorizontalStackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
xaml.cs code
private async void listview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection != null)
{
await Navigation.PushAsync(new cataloguepage
{
BindingContext = e.CurrentSelection as csv
});
}
else
{
await DisplayAlert("Alert", "No Item Selected", "ok");
}
}
xaml code(Second page)
<ContentPage.Content>
<StackLayout Padding="15">
<Label Text="{Binding prod_name}" TextColor="Black" FontAttributes="Bold" FontSize="Large" Padding="10" HorizontalOptions="Center"/>
<Label Text="{Binding prod_img}" TextColor="#289" Padding="10" HorizontalTextAlignment="Center" FontAttributes="Bold" FontSize="Medium" HeightRequest="200" WidthRequest="100" VerticalTextAlignment="Center"/>
<Label Text="{Binding prod_price}" TextColor="Black" FontSize="Medium" HorizontalTextAlignment="Center"/>
<Label Text="{Binding prod_desc}" TextColor="Black"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Answer 1

Please try the following code:
private async void listview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection != null)
{
await Navigation.PushAsync(new cataloguepage
{
// modify code as follows
BindingContext = e.CurrentSelection.FirstOrDefault() as csv
});
}
else
{
await DisplayAlert("Alert", "No Item Selected", "ok");
}
}
Note:
The e.CurrentSelection is a IEmunerable<object> list,so we can not cast it to an object.

Answer 2

Maybe like this , but i don't see a Binding to the CollectionView ?
ItemsSource="{Binding csv}" ??????
private async void listview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection != null)
{
await Navigation.PushAsync(new cataloguepage
{
BindingContext = e.CurrentSelection as csv
});
}
else
{
await DisplayAlert("Alert", "No Item Selected", "ok");
}
}
in secondpage , then use selectedItem
public secondpage (csv selectedItem)
{
InitializeComponent();
BindingContext = selectedItem;
}