How can I see the details (of my listview) of a country, after selecting one country?

Question

I have a json file containing countries and details for cases and deaths caused from covid. I have my listview in MainPage where the countries are listed successfully. Now, I want the details of each country to be displayed after user clicks a country.

Here is the Region.cs

using System;
 using System.Collections.Generic;
 using System.Text;
    
 namespace just4jsonCLOSE.Models
 {
     // Root myDeserializedClass = JsonConvert.DeserializeObject<Root>(myJsonResponse); 
     public class RegionData
     {
         public string country { get; set; }
         public int totalCases { get; set; }
         public int newCases { get; set; }
         public int totalDeaths { get; set; }
         public int newDeaths { get; set; }
         public int totalRecovered { get; set; }
         public int activeCases { get; set; }
         public int seriousCritical { get; set; }
         public int casesPerMil { get; set; }
         public double deathsPerMil { get; set; }
         public int totalTests { get; set; }
         public int testsPerMil { get; set; }
         public int population { get; set; }
     }
    
     public class RegionList
     {
         public List<RegionData> regionData { get; set; }
     }
    
    
 }

My MainPage.xaml.cs

 namespace just4jsonCLOSE
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class MainPage : ContentPage
     {
         public MainPage()
         {
             InitializeComponent();
             GetJsonData();
         }
    
         void GetJsonData()
         {
             string jsonFileName = "region.json";
             RegionList ObjContactList = new RegionList();
             var assembly = typeof(MainPage).GetTypeInfo().Assembly;
             Stream stream = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.{jsonFileName}");
             using (var reader = new System.IO.StreamReader(stream))
             {
                 var jsonString = reader.ReadToEnd();
    
                 //Converting JSON Array Objects into generic list  
                 ObjContactList = JsonConvert.DeserializeObject<RegionList>(jsonString);
             }
             //Binding listview with json string   
             listviewRegions.ItemsSource = ObjContactList.regionData;
         }
     }
 }

My MainPage.xaml (I have commented all binding labels except the 1st :country)

<Grid>
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
             <Label Grid.Row="0" Margin="30" Text="Details per country about COVID" FontSize="25" />
             <ListView x:Name="listviewRegions" Grid.Row="1" HorizontalOptions="FillAndExpand" Footer="" HasUnevenRows="True">
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <ViewCell>
                             <Grid HorizontalOptions="FillAndExpand" Padding="10">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="Auto"/>
                                 </Grid.RowDefinitions>
                                 <Label Text="{Binding country}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Black"  FontAttributes="Bold" />
                        <!--         <Label Text="{Binding totalCases}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding newCases}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding totalDeaths}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding newDeaths}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding totalRecovered}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding activeCases}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding seriousCritical}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding casesPerMil}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding deathsPerMil}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding totalTests}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding testsPerMil}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding population}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/> -->
                                    
                                 <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
                             </Grid>
                         </ViewCell>
    
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
         </Grid>
     </Grid>

And finally me region.json file (small part)

 {
     "regionData": [
         {
             "country": "World",
             "totalCases": 157341642,
             "newCases": 651328,
             "totalDeaths": 3278509,
             "newDeaths": 9126,
             "totalRecovered": 135480211,
             "activeCases": 18582922,
             "seriousCritical": 108879,
             "casesPerMil": 20185,
             "deathsPerMil": 420.6,
             "totalTests": 0,
             "testsPerMil": 0,
             "population": 0
         },
         {
             "country": "Europe",
             "totalCases": 45325498,
             "newCases": 111518,
             "totalDeaths": 1031121,
             "newDeaths": 2579,
             "totalRecovered": 40490614,
             "activeCases": 3803763,
             "seriousCritical": 27087,
             "casesPerMil": 0,
             "deathsPerMil": 0,
             "totalTests": 0,
             "testsPerMil": 0,
             "population": 0
         },
         {
             "country": "Asia",
             "totalCases": 42985197,
             "newCases": 499649,
             "totalDeaths": 558151,
             "newDeaths": 5628,
             "totalRecovered": 36953518,
             "activeCases": 5473528,
             "seriousCritical": 33491,
             "casesPerMil": 0,
             "deathsPerMil": 0,
             "totalTests": 0,
             "testsPerMil": 0,
             "population": 0
         }
 ]
 }

Preview without details

Answer 1

first, add an ItemTapped handler to your ListView

<ListView x:Name="listviewRegions" ItemTapped="RegionTapped" ...

then in your code-behind

protected void RegionTapped(object sender, ItemTappedEventArgs e)
{
    // cast the tapped item to the correct type
    var region = (RegionData)e.Item;

    Navigation.PushAsync(new DetailPage(region));
}

for this to work, you must use a NavigtionPage when you assign your MainPage in App.xaml.cs

MainPage = new NavigationPage(new MainPage());

finally, you will need to create a new XAML page DetailPage that accepts RegionData as a parameter in the constructor. You can then use data binding to bind the UI in your XAML to the RegionData instance

public DetailPage(RegionData data) 
{
   InitializeComponent();
 
   this.BindingContext = data;
}