Customizing community toolkit popup

salilsingh-9961 321 Reputation points
2023-11-02T14:58:00.04+00:00

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

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,161 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 24,666 Reputation points Microsoft Vendor
    2023-11-06T06:33:47.9633333+00:00

    Hello,

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

    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.