Customizing community toolkit popup

Question

Hi Team,

I am working on a .Net MAUI app (in Visual Studio 2022), Android emulator used is Pixel 5 API 33.

I need to create a community toolkit popup, it has to be custom in the sense that it would get called from a no of view models (for different view screens) and on click of a popup button I need to perform different functionalities of different view model files. Can you reply to below -

1. Once a pop up is opened using a view model, once a button of the pop up is clicked (in the event handler of the pop up), how to identify that the button is clicked using a particular view model. Is it possible to pass different strings (as per different view models) to the click event handler of pop up button.
2. Could this click event handler be defined in the View model class of a different screen (OR is it possible to define this click event handler in view model file of the pop up, not sure if community tool kit pop up could have a view model file associated with it).

Asking 2 questions in a single thread as they are related and would help in better understanding. Please let me know if I need to create them separately.

Please let me know if I need provide more information.

Thanks,

Salil

Answer 1

Hello,

For a custom popup using MVVM with data binding, please refer to the following official documentation and examples.

• Model-View-ViewModel (MVVM)
• Data binding

In this example, it demonstrates how to bind the text in the Label and the button click event to the ViewModel, and pass the Text property in the Label as a parameter to the ViewModel.

In xaml:

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:vm="clr-namespace:MauiApp1"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiApp1.NewPage1">
    <toolkit:Popup.BindingContext>
        <vm:TestViewModel/>
    </toolkit:Popup.BindingContext>
    <StackLayout WidthRequest="1000" HeightRequest="500">
        <Label x:Name="test_label" Text="{Binding Test}"/>
        <Button Text="test" Command="{Binding TestCommand}" CommandParameter="{Binding Source={x:Reference test_label}, Path=Text}"/>
    </StackLayout>
</toolkit:Popup>

In ViewModel:

class TestViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string test;
    public string Test
    {
        get { return test; }
        set
        {
            if (test != value)
            {
                test = value;
                OnPropertyChanged(); 
            }
        }
    }

    public ICommand TestCommand { get; private set; }
    public TestViewModel()
    {
        Test = "Label Text";
        TestCommand = new Command<string>(x => WriteLabel(x));
    }
    public void OnPropertyChanged([CallerMemberName] string name = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    private void WriteLabel(object str)
    {
        if (str != null)
        {
            var s = str.ToString();
            Console.WriteLine(s);
        }
    }
}

You could get a comprehensive understanding of how MVVM works in MAUI by referring to the above documents and examples. Then, you could create your own custom MVVM pop-ups.

Best Regards,

Alec Liu.

---

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.