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:
kzread.info/dron/ral.html...
🛑 Don't forget to subscribe to my channel for more cool content: kzread.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
Пікірлер: 105
Wondering how it compares to the .NET MAUI Community Toolkit popups? That video is ready for you here: kzread.info/dash/bejne/q4Fr0dKRnNiTfbg.html Or maybe, you want to just learn .NET MAUI altogether? Check out this 101 playlist with all the fundamentals: kzread.info/dash/bejne/hHWpuZqHprWqntY.html
Thanks for spending the time creating these videos. Very much appreciated 👍
@jfversluis
Жыл бұрын
Thanks Jason 🥰
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?
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!
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.
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
Great video!
Many thanks!
Thanks, Gerald!
@jfversluis
Жыл бұрын
You're very welcome!
Thanks, i might use this :)
@jfversluis
Жыл бұрын
You’re welcome! Let me know what you think of it!
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?
Can you please demonstrate how to pass data in Mopups with FreshMvvm.Maui or MVVM
@Bumbar14526
2 ай бұрын
Did you manage to make it work?
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 !
So usefull, thanks a lot
@jfversluis
Жыл бұрын
Glad you think so! Thanks for watching!
Does this support auto sizing or we need to manage the size ourselves like with the toolkit popups?
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.
Hello Beautiful video as usual :) What about passing an object to the popup and getting an object from the "Light Dismiss" popup?
Can Mopups popups be created as modals? Or can you add animation to the community toolkit popups?
Thanks!
@jfversluis
2 ай бұрын
Oh no my friend, thank you for the support!
Thx for KZread 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?
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
9 ай бұрын
The MAUI CommunityToolkit popups control can be used for that.
Wow, it has good performance :0
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.
Can you explain how is the better way to pass parameter to the popup with dependency injection and MVVM? thanks
@askariyaw
3 ай бұрын
Did you ever find an answer to this?
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: kzread.info/dash/bejne/lmaHp7GjYNKbmpc.html
Can i use this as bottomsheet? and btw do you know if the radio buttons are having any bugs?
In windows it brings an error saying application not supported, I hope they can fix it otherwise it is excellent
Is this advisable to be used as a loading page? I wanna put on some skiasharp animation for the loading in the Mopups page.
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
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?
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
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.
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
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!
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!
Thanks
@jfversluis
Жыл бұрын
You're welcome!
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!
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!
can it parse data to and from like the communitytoolkit popup?
@jfversluis
7 ай бұрын
There is nothing built-in for it, but sure you can make those exchange data for sure
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
Hi great video!! Does this work on windows or mac by any chance??
@jfversluis
10 ай бұрын
Should work on both!
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
How to pass data to myPopupPage and how to return data back to the mainPage ?
@lordscourge-jp8ch
8 ай бұрын
Hi. Bit of a late reply but you can look at WeakReferenceMessenger. James Montemagno did a great video on it.
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
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
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.
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?
CloseWhenBackgroundIsClicked="True" this not working.
@jfversluis
Жыл бұрын
If you think there is a bug, please report it on the repository
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 🤷♂️
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
10 ай бұрын
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?
Hello, I have a little problem, for default the mopup covers all the page, when i do something like PopUpService.ShowPopUp(customPopUp)
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
Thanks
@jfversluis
Жыл бұрын
You’re welcome!
Thanks
@jfversluis
Жыл бұрын
You bet my friend!