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

  • @jfversluis
    @jfversluis Жыл бұрын

    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

  • @Homeworkingprofessional
    @Homeworkingprofessional Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thanks Jason 🥰

  • @ithenckel
    @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

    @jfversluis

    Жыл бұрын

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

  • @yvanbrunel9734
    @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

    @jfversluis

    Жыл бұрын

    Great to hear! Thank you!

  • @josedonizeteoliveirajunior1744
    @josedonizeteoliveirajunior1744 Жыл бұрын

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

  • @jfversluis

    @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

    @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.

  • @kratichauhan3451
    @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

  • @mpgsystem
    @mpgsystem5 ай бұрын

    Great video!

  • @NapoleoneLiparoti
    @NapoleoneLiparoti4 ай бұрын

    Many thanks!

  • @YaSiRaRaFaTdoTNet
    @YaSiRaRaFaTdoTNet Жыл бұрын

    Thanks, Gerald!

  • @jfversluis

    @jfversluis

    Жыл бұрын

    You're very welcome!

  • @josepvg
    @josepvg Жыл бұрын

    Thanks, i might use this :)

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @asMmmaok
    @asMmmaok3 ай бұрын

    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
    @abhijeetboral233411 ай бұрын

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

  • @Bumbar14526

    @Bumbar14526

    2 ай бұрын

    Did you manage to make it work?

  • @DeepWorksStudios
    @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 !

  • @lucasjimenez5802
    @lucasjimenez5802 Жыл бұрын

    So usefull, thanks a lot

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Glad you think so! Thanks for watching!

  • @saoudiwalid
    @saoudiwalid11 ай бұрын

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

  • @octagoncow
    @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

    @geraldlewis8221

    Жыл бұрын

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

  • @jean-baptistedioli1692
    @jean-baptistedioli16923 ай бұрын

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

  • @user-ln7nf9qt9n
    @user-ln7nf9qt9n11 ай бұрын

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

  • @ebonnailsupply2375
    @ebonnailsupply23752 ай бұрын

    Thanks!

  • @jfversluis

    @jfversluis

    2 ай бұрын

    Oh no my friend, thank you for the support!

  • @saschaingenohl3005
    @saschaingenohl3005 Жыл бұрын

    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?

  • @habib13500101
    @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

    @brandon-butler

    9 ай бұрын

    The MAUI CommunityToolkit popups control can be used for that.

  • @denisgudiel5574
    @denisgudiel55744 ай бұрын

    Wow, it has good performance :0

  • @thetruq4857
    @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

    @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.

  • @nicolarigoni1062
    @nicolarigoni106211 ай бұрын

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

  • @askariyaw

    @askariyaw

    3 ай бұрын

    Did you ever find an answer to this?

  • @paragshedbale
    @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

    @jfversluis

    Жыл бұрын

    I guess you could follow a same pattern like described here: kzread.info/dash/bejne/lmaHp7GjYNKbmpc.html

  • @clarke9791
    @clarke97912 ай бұрын

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

  • @jcruzti7313
    @jcruzti7313 Жыл бұрын

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

  • @madraven37
    @madraven372 ай бұрын

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

  • @BarriDuty
    @BarriDuty Жыл бұрын

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

  • @jfversluis

    @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

  • @sebastianszafran5221
    @sebastianszafran52213 ай бұрын

    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?

  • @VictoriaRedenbaugh
    @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

    @jfversluis

    Жыл бұрын

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

  • @DanijelJames
    @DanijelJames Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @MrElTee13
    @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

    @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

    @MrElTee13

    Жыл бұрын

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

  • @ramarajthangapandi3424

    @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

  • @josedonizeteoliveirajunior1744
    @josedonizeteoliveirajunior1744 Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Check the repository for any issues!

  • @chezchezchezchez
    @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!

  • @user-lf6qd5fi5i
    @user-lf6qd5fi5i Жыл бұрын

    Thanks

  • @jfversluis

    @jfversluis

    Жыл бұрын

    You're welcome!

  • @mapanjwani
    @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

    @mapanjwani

    Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Glad you figured it out!

  • @igorpinheiro9357
    @igorpinheiro9357 Жыл бұрын

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

  • @chezchezchezchez

    @chezchezchezchez

    Жыл бұрын

    you find out?

  • @Adam-vp5ur

    @Adam-vp5ur

    Жыл бұрын

    @@chezchezchezchez you find out yet?

  • @chezchezchezchez

    @chezchezchezchez

    Жыл бұрын

    @@Adam-vp5ur no!

  • @FOTACON
    @FOTACON7 ай бұрын

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

  • @jfversluis

    @jfversluis

    7 ай бұрын

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

  • @luisjjjj
    @luisjjjj Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @luisjjjj

    @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

    @maxborrmann5663

    Жыл бұрын

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

  • @chezchezchezchez

    @chezchezchezchez

    Жыл бұрын

    @@luisjjjj Max's tip work for you?

  • @luisjjjj

    @luisjjjj

    Жыл бұрын

    @@chezchezchezchez yes

  • @wiaanduvenhage9630
    @wiaanduvenhage963010 ай бұрын

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

  • @jfversluis

    @jfversluis

    10 ай бұрын

    Should work on both!

  • @222branko
    @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

  • @cissemy
    @cissemy Жыл бұрын

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

  • @lordscourge-jp8ch

    @lordscourge-jp8ch

    8 ай бұрын

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

  • @jaspervandenbergh4570
    @jaspervandenbergh4570 Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @jaspervandenbergh4570

    @jaspervandenbergh4570

    Жыл бұрын

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

  • @seunghoonlee1859
    @seunghoonlee1859 Жыл бұрын

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

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @pratham_dev
    @pratham_dev Жыл бұрын

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

  • @schwiftybits

    @schwiftybits

    Жыл бұрын

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

  • @ashazmi4423
    @ashazmi4423 Жыл бұрын

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

  • @ashazmi4423

    @ashazmi4423

    Жыл бұрын

    For now, it works if you downgrade to V 1.1.0

  • @jfversluis

    @jfversluis

    Жыл бұрын

    Thanks for sharing!

  • @adrianhurst5201

    @adrianhurst5201

    Жыл бұрын

    Thank you!!! I was going crazy

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @prasadcp423
    @prasadcp423 Жыл бұрын

    CloseWhenBackgroundIsClicked="True" this not working.

  • @jfversluis

    @jfversluis

    Жыл бұрын

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

  • @tanakamawere
    @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

    @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 🤷‍♂️

  • @moti8876
    @moti887610 ай бұрын

    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

    @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?

  • @user-vx9cu2gt5x
    @user-vx9cu2gt5x8 ай бұрын

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

  • @tysonhooker3924
    @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

    @jfversluis

    Жыл бұрын

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

  • @geraldlewis8221

    @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
    @santaclaus2066 Жыл бұрын

    Thanks

  • @jfversluis

    @jfversluis

    Жыл бұрын

    You’re welcome!

  • @Miles7000
    @Miles7000 Жыл бұрын

    Thanks

  • @jfversluis

    @jfversluis

    Жыл бұрын

    You bet my friend!

Келесі