Highly Customizable Popups for .NET MAUI with Mopups

For Xamarin.Forms we had Rg.Plugins.Popups which was amazing! The spiritual successor is Mopups. With Mopups you can create highly customizable popups inside of your .NET MAUI apps. Let's have a look at how to get started and add things like animations and a dimmed background!
💝 Join this channel to get access to perks:
kzbin.info/door/ral...
🛑 Don't forget to subscribe to my channel for more cool content: kzbin.info...
🔗 Links
Sample code repository: github.com/jfversluis/MauiMop...
Mopups Repository: github.com/LuckyDucko/Mopups
.NET MAUI Docs: docs.microsoft.com/dotnet/maui
⏱ Timestamps
0:00 - .NET MAUI Popups with Mopups
0:14 - Mopups: Successor or Rg.Plugins.Popups
0:57 - Install & Configure Mopups Plugin
2:25 - Create Popup Page
5:03 - Popup Page Navigation
7:50 - Customizing the Popup Page
12:25 - Animating the Popup
13:30 - Going Crazy with Popup Customization
15:18 - Using Mopups with Dependency Injection
17:13 - Mopups of .NET MAUI Community Toolkit Popups?
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋‍♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#maui #popups #mopups #plugin #dotnet #dotnetmaui

[@jfversluis]

Wondering how it compares to the .NET MAUI Community Toolkit popups? That video is ready for you here: kzbin.info/www/bejne/r36aoKOOodpgg7c Or maybe, you want to just learn .NET MAUI altogether? Check out this 101 playlist with all the fundamentals: kzbin.info/www/bejne/iHLYiGuEq7d3pNU

[@Homeworkingprofessional]

Thanks for spending the time creating these videos. Very much appreciated 👍

[@jfversluis]

Thanks Jason 🥰

[@yvanbrunel9734]

I already learned about CTK pop-ups from you, and I use it in my project. Great to see that there's something more that can be an option and it has dependency injection too!! Thanks for the clear explanation!

[@jfversluis]

Great to hear! Thank you!

[@ithenckel]

I am migration a larger xamarin based Solution to Maui and this Popup is one of the mayor puzzlepieces I needed to find. 😊 Thank you To you and the community team.

[@jfversluis]

Perfect! What other things do you need to figure out still?

[@josedonizeteoliveirajunior1744]

very good! thanks. yet another popup option with full customization possibilities. I will definitely be using it.

[@jfversluis]

Thank you! Yeah this is a pretty cool one as well, just a bit more options than the .NET MAUI Community Toolkit one. Let me know which you like better!

[@josedonizeteoliveirajunior1744]

@@jfversluis Oh, my opinion is certainly not the most accurate, but I really like the .NET MAUI Community Toolkit, I use the anchoring feature a lot. But I will certainly use Mopups too.

[@YaSiRaRaFaTdoTNet]

Thanks, Gerald!

[@jfversluis]

You're very welcome!

[@mpgsystem]

Great video!

[@NapoleoneLiparoti]

Many thanks!

[@kratichauhan3451]

Thanks for MAUI videos, much helpful for learners like me. Can you share a video on how can we print a view or hemlock from MAUI

[@josepvg]

Thanks, i might use this :)

[@jfversluis]

You’re welcome! Let me know what you think of it!

[@lucasjimenez5802]

So usefull, thanks a lot

[@jfversluis]

Glad you think so! Thanks for watching!

[@DeepWorksStudios]

Thanks for your dedicated content :) But ! I'm puzzled as Maui is still under development. I encountered several bugs. I have reported most of these but unfortunately most of them have not been fixed over a period of 6 months which is quite disappointing. I know your a dedicated developer and wanted to ask if you could look into bug fixing some of the major bugs. In anyway thanks Gerald for you dedication !

[@ebonnailsupply2375]

Thanks!

[@jfversluis]

Oh no my friend, thank you for the support!

[@asMmmaok]

Thanks for the video. Is there a way to show the popup in an mvvm friendly way. I mean with the viewmodel not having to know the type of the PopupPage in order to be able to show it, kinda like the registering a "connection" using the AddTransientPopup() from the maui community toolkit?

[@abhijeetboral2334]

Can you please demonstrate how to pass data in Mopups with FreshMvvm.Maui or MVVM

[@Bumbar14526]

Did you manage to make it work?

[@saoudiwalid]

Does this support auto sizing or we need to manage the size ourselves like with the toolkit popups?

[@jean-baptistedioli1692]

Hello Beautiful video as usual :) What about passing an object to the popup and getting an object from the "Light Dismiss" popup?

[@denisgudiel5574]

Wow, it has good performance :0

[@thetruq4857]

First, thank you Gerald for your videos. They are a true God-send for me and many others. Next, I can't seem to find anything that gives me an idea of how to refresh the calling page once a popup is closed or after a data operation has occurred on the popup page. Is this possible, and what is the best approach? Can it be done in MVVM? Thanks.

[@thetruq4857]

I have found the solution for this - use messaging service. I am very new to app development, so it is like pulling teeth in some areas that in my opinion should be simple. Thanks anyway.

[@saschaingenohl3005]

Thx for KZbin great maui Videos. I am struggeling to get a popUp with a populated ListView. In debug mode it is working in release mode it is empty and no error is shown. Has anybody similuar issues?

[@clarke9791]

Can i use this as bottomsheet? and btw do you know if the radio buttons are having any bugs?

[@octagoncow]

Great overview! I'm probably just overlooking this in the documentation, but is there any way to close a popup with a specified return result? It looks like PopAsync's return value is but I'm not sure how to use that information to know if the user closed a popup from an OK button VS a Cancel button.

[@geraldlewis8221]

You could use databinding and the popup page could have it's own view model to store it's results.

[@jcruzti7313]

In windows it brings an error saying application not supported, I hope they can fix it otherwise it is excellent

[@user-ln7nf9qt9n]

Can Mopups popups be created as modals? Or can you add animation to the community toolkit popups?

[@user-lf6qd5fi5i]

Thanks

[@jfversluis]

You're welcome!

[@madraven37]

Is this advisable to be used as a loading page? I wanna put on some skiasharp animation for the loading in the Mopups page.

[@sebastianszafran5221]

Just from curiosity - what would be a better name for IPopupNavigation field rather than just "_popupNavigation"? One more question, how could we use it with MVVM so that view models do not know about what PopupPage we would like to display?

[@josedonizeteoliveirajunior1744]

Gerrard, I went to test it today, on windows the message is appearing: Operation not supported on this platform 🤔

[@jfversluis]

Check the repository for any issues!

[@chezchezchezchez]

This worked great except why doesn't editor.Completed fire when inside the popup? Editor editor = new Editor { Placeholder = "Enter text", Height}; editor.Completed += OnEditorCompletedAsync; Thanks!

[@nicolarigoni1062]

Can you explain how is the better way to pass parameter to the popup with dependency injection and MVVM? thanks

[@askariyaw]

Did you ever find an answer to this?

[@222branko]

Thanks - super info. ps. Perhaps consider (to grow your channel even more) - instead - 5-sec intro - replace - with - 5 sec - final result - say for this one - start with Popups

[@habib13500101]

Great content! I was just wondering if that is possible to anchor this popup to a specified control like label, button, etc so popup content is displayed below that control? I had a bit of play with that but no luck. Could you elaborate on this please? This can be achieved in CTK by using Anchor property but AnchorX and AnchorY do not do the same in Mopups. Thanks!

[@brandon-butler]

The MAUI CommunityToolkit popups control can be used for that.

[@BarriDuty]

Is it possible to pass objects from the popup to the main page? Just like in the community toolkit one?

[@jfversluis]

Maybe not exactly like in the Community Toolkit, but you can of course create the popup page, push it and because it's async you can await the result and then afterwards maybe query the data you're after from the attached viewmodel or a property inside of that page. It's all just C# objects so you can access objects anyway you want basically. But I don't think it has a return value from the Pop call like the Community Toolkit has

[@paragshedbale]

Thanks Gerald. How do we send parameters from and to the mopups? For example, I send some info to a mopup from my page and PushAsync it. I want the mopup to send back an object to the calling Page.

[@jfversluis]

I guess you could follow a same pattern like described here: kzbin.info/www/bejne/mmO2doKgZdRooJY

[@VictoriaRedenbaugh]

Curious if you have seen any issues with CloseWhenBackgroundClicked or any background clicked events with Mopups in iOS and Mac? Windows and Android seems to work fine.

[@jfversluis]

No haven’t seen that but if you think something might be wrong, please open an issue on the repo

[@wiaanduvenhage9630]

Hi great video!! Does this work on windows or mac by any chance??

[@jfversluis]

Should work on both!

[@mapanjwani]

Frist of all, your videos have been of great help to me and this one is no exception. Secondly, I have come across a problem here. When the page background is set to gradient then mopups outside area is not transparent. Any idea how to resolve it?

[@mapanjwani]

Found the solution. I need to set the background of mopup instead of backgroundcolor.

[@jfversluis]

Glad you figured it out!

[@luisjjjj]

Thank you!, great video, how do you pass objects to the PopupPage?

[@jfversluis]

Add a constructor parameter or property to the page you use as a popup

[@luisjjjj]

@@jfversluis Thank you for the response, I am actually trying to do that, but when I use PushAsync(new PopupPage( )), it doesn´t recognize the constructor parameters setted in the viewmodel of the PopupPage.

[@maxborrmann5663]

@@luisjjjj pass your viewmodel in the constructor like you would also do with dependency injection: PushAsync(new PopupPage(viewmodel )),

[@chezchezchezchez]

@@luisjjjj Max's tip work for you?

[@luisjjjj]

@@chezchezchezchez yes

[@MrElTee13]

Maybe I need to look deeper into the docs and play around with it, but outside of the animations, I can't really see what sets this apart from the community toolkit popup. Also, do you know if there's a reason why awesome things like this aren't added to the toolkit version rather than creating a separate package for them?

[@jfversluis]

A healthy ecosystem has alternatives that do the same thing. People like different APIs and different features. That’s how it goes, we can’t have it all in one package :)

[@MrElTee13]

@@jfversluis That makes a lot of sense. Thanks for the explanation!

[@ramarajthangapandi3424]

Community kit popup didn't work for us for iOS. In iOS, we had to hardcode the height, otherwise the popups were shown in full screen. So we had to switch to Mopups

[@DanijelJames]

How do you get a pop up to close itself? There is no documentation on the GitHub repo.

[@jfversluis]

Add a timer and call the Close method. There is no built-in way.

[@cissemy]

How to pass data to myPopupPage and how to return data back to the mainPage ?

[@lordscourge-jp8ch]

Hi. Bit of a late reply but you can look at WeakReferenceMessenger. James Montemagno did a great video on it.

[@FOTACON]

can it parse data to and from like the communitytoolkit popup?

[@jfversluis]

There is nothing built-in for it, but sure you can make those exchange data for sure

[@igorpinheiro9357]

is it possible to wait for a result from this popup? Like return a string from a entry when the popup closes

[@chezchezchezchez]

you find out?

[@Adam-vp5ur]

@@chezchezchezchez you find out yet?

[@chezchezchezchez]

@@Adam-vp5ur no!

[@seunghoonlee1859]

Now, It's not working on iOS 16.3, Android 13 with Plugin.LocalNotification 10.1.3

[@jfversluis]

Open an issue on the repository if you have problems with this plugin

[@jaspervandenbergh4570]

Thanks! Btw, the sample code repository points to the wrong repo

[@jfversluis]

Ugh, copy/pasta error! Fixed, thank you!

[@jaspervandenbergh4570]

@@jfversluis Np! Also, how would I make the popup fill the entire screen? FillAndExpand doesnt seem to work

[@ashazmi4423]

Doesn't work on Windows!!! throws this exception "Operation is not supported on this platform"

[@ashazmi4423]

For now, it works if you downgrade to V 1.1.0

[@jfversluis]

Thanks for sharing!

[@adrianhurst5201]

Thank you!!! I was going crazy

[@jfversluis]

Make sure there is an issue for it on the repository?

[@pratham_dev]

Hi! Gerald, Can we have a video for Google and Facebook authentication in MAUI

[@schwiftybits]

Bruh I wish lol It looks like the authentication isn't supported due to the callback situation.

[@prasadcp423]

CloseWhenBackgroundIsClicked="True" this not working.

[@jfversluis]

If you think there is a bug, please report it on the repository

[@moti8876]

I don't recommend this library, it stopped updating a long time ago, and the latest version (1.1.1) has bugs that are not fixed for a long time. The current version (1.1.0) also has bugs with rendering on the IOS side, I assume the developer has given up on development.

[@jfversluis]

That is totally fair and sad that it happens, but these people are probably individuals that put in their own time so something can always happen. The .NET MAUI Community Toolkit also has Popups! Do you know of any other good alternatives?

[@tanakamawere]

Gerald is so bad with design (Rounded corners will look "designy")😂😂😂😂 But thanks. Question: Community Toolkit Popups vs these, which should I use and for what reasons?

[@jfversluis]

Haha I'm so bad at designing that it will look designy to me pretty easily... Which popups to use? They can do the same thing mostly, apart from the built-in animations I guess. So whichever one you prefer 🤷‍♂️

[@user-vx9cu2gt5x]

Hello, I have a little problem, for default the mopup covers all the page, when i do something like PopUpService.ShowPopUp(customPopUp)

[@tysonhooker3924]

Hey Gerald, Cheers for the shout out, I was wondering where the influx of traffic came from and my first thought was here! Are you okay with linking this video on the GitHub page? I have been looking for a way to spruce up the ReadMe and this seems a nice fit

[@jfversluis]

You bet! Thanks for bringing this to .NET MAUI! Feel free to add this anywhere you want :)

[@geraldlewis8221]

HI Tyson! Sorry to high-jack your thread, but can you update the Wiki with some documentation? The README points to what is essentially an empty Wiki. Thanks, Gary

[@santaclaus2066]

Thanks

[@jfversluis]

You’re welcome!

[@Miles7000]

Thanks

[@jfversluis]

You bet my friend!