Pass Data to a Details Page in Xamarin Forms and ListView

This is how I pass data from a parent page to a details page using Xamarin Forms and a ListView

  1. On my MainPage.xaml file I have a ListView control populated with an list of data with an ItemTapped event.
    <StackLayout>
    <ListView x:Name="lstPoop" ItemTapped="lstPoop_ItemTapped" HasUnevenRows="true" BackgroundColor="SandyBrown"
    HorizontalOptions="FillAndExpand"> 
    <ListView.ItemTemplate>
    <DataTemplate>
    <ViewCell>
    <StackLayout VerticalOptions="FillAndExpand" HeightRequest="75" Orientation="Horizontal" Spacing="15">
    <Label HorizontalOptions="Start" Text="{Binding Title}" TextColor="Black" VerticalTextAlignment="Center" 
    FontSize="Header" Font="Bold, Medium" />
    </StackLayout>
    </ViewCell>
    </DataTemplate>
    </ListView.ItemTemplate>
    </ListView>
    </StackLayout>
  2. the ListView ItemsSource is set in the MainPage.xaml.cs file
    protected async override void OnAppearing()
    {
    base.OnAppearing();
    if (App.PoopListEnum.Count == 0) {
    PoopEnum = await PoopModel.GetData();
    if (PoopEnum == null || PoopEnum.Count == 0)
    {
    await DisplayAlert("Error", "Error loading Poop", "Ok");
    }
    else
    {
    App.PoopListEnum = PoopEnum;
    }
    }
    PoopEnum = App.PoopListEnum;
    lstMain.ItemsSource = PoopEnum.OrderBy(x => x.Title);
    
    }
  3. My App.PoopListEnum list is instantiated in the App.xaml.cs file
    public partial class App : Application
    {
    
    public static List<Models.Poop> PoopListEnum = new List<Models.Poop>();
    
    public App()
    {
    InitializeComponent();
    
    MainPage = new MainPage();
    }
    
    protected override void OnStart()
    {
    PoopListEnum = new List<Models.Poop>();
    }
    
    protected override void OnSleep()
    {
    //PoopListEnum = null;
    }
    
    protected override void OnResume()
    {
    }
    
    private async void btnBackToilet_Clicked(object sender, EventArgs e)
    {
    await this.MainPage.Navigation.PopModalAsync(true);
    }
    }
  4. I navigate to the Details page as a modal, passing the data details as an object when the ItemTapped event is called when you tap on a row in the ListView. Notice how I de-select the ListView row by setting the SelectedItem to null.
    private async void lstPoop_ItemTapped(object sender, ItemTappedEventArgs e)
    {
    if (lstPoop.SelectedItem == null)
    return;
    
    Models.Poop p = e.Item as Models.Poop;
    await Navigation.PushModalAsync(new Details(p), true);
    
    ((ListView)sender).SelectedItem = null; // de-select the row
    }
  5. In the Details.xaml.cs file, I retrieve the object data in the Details constructor and set the Title and Description properties to their corresponding labels.
    public partial class Details : ContentPage
    
    {
    
    Models.Poop PoopDetails { get; set; }
    
    public Details(Models.Poop poop)
    
    {
    
    InitializeComponent();
    
    PoopDetails = poop as Models.Poop;
    
    }
    
    protected override void OnAppearing()
    
    {
    
    base.OnAppearing();
    
    lblDesc.Text = PoopDetails.Description;
    
    lblTitle.Text = PoopDetails.Title;
    
    }
    
    }
  6. The Details.xaml has 2 Labels a StackLayout all within a ScrollView
    <ScrollView>
    
    <StackLayout Orientation="Vertical">
    
    <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" Padding="20">
    
    <Label Text="{Binding Title}" x:Name="lblTitle" FontSize="Large" FontAttributes="Bold" VerticalOptions="Start" HorizontalOptions="StartAndExpand" />
    
    <Label Text="{Binding Description}" Margin="0,20" x:Name="lblDesc" FontSize="Medium" VerticalOptions="Start" HorizontalOptions="StartAndExpand" />
    
    </StackLayout>
    
    </StackLayout> 
    
    </ScrollView>

 

17270cookie-checkPass Data to a Details Page in Xamarin Forms and ListView