How to create popup window that display Product Details ?

Question

Hi friends!

I have a DataGrid that contains a list of product . when i click on a product i should open a popup windows that contains Product's details and i would modify the Price in it for example.

I implement a GlobalUsing.cs such :

global using System;

global using System.ComponentModel;

global using System.Collections.ObjectModel;

global using System.Diagnostics;

global using System.Text.Json;

global using Maui.DataGrid;

global using CommunityToolkit.Maui;

global using CommunityToolkit.Maui.Views;

global using MauiApp4.Views;

global using MauiApp4.Models;

global using MauiApp4.Services;

global using Microsoft.Maui.Controls;

namespace MauiApp4;

i write that code in the page ProductList.xaml

in the page productList.cs i wrote:

namespace MauiApp4.Views;

public partial class ProductList : ContentPage
{
	public ProductList()
	{
		InitializeComponent();

        // Initializing the BindingContext with Products

        BindingContext = new Models.AllProducts();

	}

    private void Button_Clicked(object sender, EventArgs e)
    {

    }

    async void DataGrid_ItemSelected(object sender, SelectionChangedEventArgs e)
    {
        if (e.CurrentSelection.Count != 0)
        {
            Product product = e.CurrentSelection.FirstOrDefault() as Product;
            var navigationParams = new Dictionary
            {
                { "product", product }
            };

             //Open popup window and pass the product selected

            var popup = new ProductDetails();
            Product  result= await Shell.Current.CurrentPage.ShowPopupAsync(popup) as Product; 
            
            productsCollection.SelectedItem = null;
        }
    }
    
}

In the page ProductDetails.xaml defined as a popup page:

-->

in the page ProductDetails.cs i wrote that code :

namespace MauiApp4.Views;

[QueryProperty(nameof(Product), "product")]
public partial class ProductDetails : Popup, IQueryAttributable, INotifyPropertyChanged
{
    public Product product { get; private set; }

    public void ApplyQueryAttributes(IDictionary query)
    {
        product = query["product"] as Product;
        OnPropertyChanged("product");
    }

    public ProductDetails()
    {
        InitializeComponent();
        BindingContext = this;
        Console.WriteLine("product inside details:" + product + "BINDINGCONTEXT::" + BindingContext);
    }

    
// that line provide an error
    private void Button_Clicked(object sender, EventArgs e) => Close( new ProductDetails() { Product.price = newprice.Text });

Accepted Answer

Hello,

When you select item in the dataGrid, you can transfer Product object directly with ProductDetails's constructor. After returning result, you need to set the price from returned product to the transferred product like following code.

async void DataGrid_ItemSelected(object sender, SelectionChangedEventArgs e)
  {
      if (e.CurrentSelection.Count != 0)
      {
          Product product = e.CurrentSelection.FirstOrDefault() as Product;

         var popup = new ProductDetails(product);
          Product result = await Shell.Current.CurrentPage.ShowPopupAsync(popup) as Product;
          if (result != null)
          {
              product.price = result.price;   
          }
          productsCollection.SelectedItem = null;
      }
  }

Then open your ProductDetails.xaml.cs, you can get the transferred product, then set it to the local product object. As note, you need to add OnPropertyChanged method in the set product method. You can return the local product object in the close method.

public partial class ProductDetails : Popup, INotifyPropertyChanged
{
    private Product _product;
   public Product product
    {
        get { return _product; }
        set { _product = value; OnPropertyChanged(); }
    }
    public ProductDetails(Product product)
    {
        InitializeComponent();
        this.product = product;
        BindingContext = this;
        Console.WriteLine("product inside details:" + product + "BINDINGCONTEXT::" + BindingContext);
    }

  private void Button_Clicked(object sender, EventArgs e) => Close(product);

By the way, if you want to Product's property changed at the runtime. You need to implement INotifyPropertyChanged as well in your Product, here is a simple property for price.

public class Product: INotifyPropertyChanged
  {

...

     private string _price;
     public string price
      {
          get { return _price; }
          set { _price = value; OnPropertyChanged(); }
      }

     public event PropertyChangedEventHandler PropertyChanged;

     public void OnPropertyChanged([CallerMemberName] string name = "") =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
  }

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

How to create popup window that display Product Details ?

0 additional answers