.Net Maui click on list view item and populate popup for crud operations using .Net Community Toolkit

Question

Hi Friends,

I am using .Net Maui for windows and was wondering if I have a button in a listview and click on it can that action populate a popup for edit operations on the item I clicked. I would like to use any tools in the .Net Community Toolkit to help me to achieve this. TIA !!!

Answer 1

Hello,

I have a button in a listview and click on it can that action populate another listview

Firstly, you need to binding command in the button and get the items in the command of viewModel.

<ListView
  ItemsSource="{Binding Dates}"
  x:Name="listDates" >
 <ListView.ItemTemplate>
    <DataTemplate>
       <ViewCell  >
         <Button
           Text="edit"
           Command="{Binding Path=BindingContext.TabCommand, Source={x:Reference listDates}}"
           CommandParameter="{Binding .}"
           />			
 		</ViewCell>         
    </DataTemplate>
  </ListView.ItemTemplate>
 </ListView>

When you click the button, TabCommand will be executed in your ViewModel to popup a page. You need to transfer this selected item to the popup page. When this popup page closed, you can get the return value, if this value is true, you can clear the ObservableCollection and get the data from the DB again, ListView could show the latest data from DB.

public class MyViewModel
{
    public ObservableCollection<DateItem> Dates { get; set; }
    public ICommand TabCommand { get; set; }
    public MyViewModel()
    {
        TabCommand = new Command(async (e) =>
        {
            DateItem obj = e as DateItem;
            var popup = new SimplePopup(obj);       
            var res= await Application.Current.MainPage.ShowPopupAsync(popup);
            if (res is bool boolresult)
            {
                if (boolresult)
                {
                    Dates.Clear();
                    //get all items from the DB again
                    Dates=
                }
            }
        });
        //get all items from the DB
        Dates = new ObservableCollection<DateItem>();
    }
}

populate another listview for edit operations on the item I clicked.

You can use Popup - .NET MAUI Community Toolkit to appear items, you do not need Listview to show item properties. You can use ScrollView and Entrys to Bind the property of selected Items like following layout.

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp4.SimplePopup"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             >
    <ScrollView>
        <VerticalStackLayout>
           <Entry
                Text="{Binding dateItem.Year}"
                VerticalOptions="Center"
                HorizontalOptions="Center" />
            <Entry
                Text="{Binding dateItem.Month}"
                VerticalOptions="Center"
                HorizontalOptions="Center" />
            <Button Text="save" Clicked="Button_Clicked"></Button>
       </VerticalStackLayout>
    </ScrollView>
</toolkit:Popup>

Here is layout's background code, you can set bindingContext to this page, then you binding the properties of dateItem and get the edited editedDateItem to save the DB

public partial class SimplePopup : Popup
{
    public DateItem dateItem { get; set; }
   public SimplePopup(DateItem dateItem)
    {
        InitializeComponent();
        this.dateItem = dateItem;    
        BindingContext = this;
    }
   private void Button_Clicked(object sender, EventArgs e)
    {
        DateItem editedDateItem = dateItem;
        //save your items to database;
        Close(true);
    }
}

As Note: if you want to make your Model update at the runtime, please implement INotifyPropertyChanged interface like this document:Interactive MVVM.

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.