If you're looking for highly
customizable popups in your .NET MAUI app, then look no further. In this video
we're going to look at Mopups, which is a plugin that does just that.
Let's go check it out. If you have been developing apps with
Xamarin.Forms already, then you probably know the Rg.Plugins.Popups name, which
has been a very popular library for showing
popups in your Xamarin.Forms application. It has highly customizable popups. I
have another video on it as well. If you need it for Xamarin.Forms,
it should pop up on your screen right now. But for .NET MAUI,
it wasn't really announced that there was going to be support for this
library for .NET MAUI. So our wonderful community, after poking the
author for a lot of times, because we don't want to
fragment the ecosystem, right? But after that, the wonderful,
wonderful community has taken up the task to now create a .NET MAUI
compatible version which is called Mopups. And in this video, I'm going
to show you what it is exactly and how to get started in your .NET
MAUI application. I've booted up my Visual Studio 2022 and I created
a File, New .NET MAUI application. So here we are. I
didn't change anything. I called it MauiMopupsSample. So
the first thing we want to do is install this library on our .NET
MAUI application. So go to your Solution Explorer, right-click on
the project and do Manage NuGet packages. And then under the
Browse blade right here, you're going to search for Mopups.
You can see I already did that. So Mopups and at the time of
recording we have version 1.1.0. So just install that. I have been
creating this .NET MAUI app for .NET 7. I'm
not sure if there is a .NET 6 compatible version. I would assume
so. But this one works also on .NET 7 already and now it's
installed. And what you want to do, which is kind of typical for plugins
that work with .NET MAUI, is go to your MauiProgram.cs and add it to our
generic host builder. So here after UseMauiApp, I'm just
going to say Configure Mopups and that should be enough. You
can see it brings in the right using automatically. If it
doesn't do that, do it manually using Mopups.Hosting. And then you can use
this extension method with ConfigureMopups and that should
set you up to use these Mopups inside of your application. So that's great.
There's nothing more that we need to do here. Well, unless you want to use it
with dependency injection, right? So with MVVM stuff, hang around until the end
of this video. To learn how to do that, I'm going to show you
first how to use it like the plain old way with a
static instance of the Mop up service. So similar to the .NET MAUI Community Toolkit Popups, you
will have to create a special kind of popup page to use with this. I
also have a video on the .NET MAUI Community Toolkit popups. It
should popup in your screen right now or find it down below in the links
where you find all the links for this video, including the sample code
GitHub of this video. So here we are back here. I'm
going to add a new page that will serve as our popup
page. I'm going to go to our Solution Explorer once more. I'm going
to right-click on my project and do Add, New Item. And here I'm
going to go to the .NET MAUI category and I'm
going to get the .NET MAUI Content Page. Don't mistake this
for the Xamarin.Forms content page that's in here as well. Don't do
that one because then things will blow up. You want to have the
.NET MAUI content page and I'm going to use XAML one.
You can do it in code if that's what you want. Also you can see
here that all the templates are duplicated here for my machine. For
some reason, probably because it's a development machine, right,
stuff happens. So I'm going to call this MyPopupPage. Here we go. And let's add that and we're going to
get a very simple content page, right? So the thing that we want
to do is add an XML namespace here. So xmlns and I'm going to
call that Mopups and... I'm going to search
for Mopups and I'm going to get the Mopups.Pages. So
this will import this namespace and I can now
with this shorthand notation reference the Mopups and I'm going to
do this here on the content page. So I'm going to replace this with the
Mopups, and I'm going to make this a PopupPage, right? So
this is now a PopupPage that I can use with the Popups to
show popups. Do you still follow? And the PopupPage is
just an inheritance from the actual ContentPage. So
everything that you can do with a ContentPage, you can also do with a PopupPage.
But we have a couple of things more that we can do now. For instance,
if we go here to our XAML, you can see something with background.
So we have an Android Talkback accessibility workaround. So
check out the documentation on the repository. This has something
to do with Android Accessibility, a workaround that you can enable or
disable with this. But other things are BackgroundClicked. So you can create
popups that have like this dimmed background and you can get an
event whenever that background is clicked. We also have a command if
you want to use it with MVVM. But you also can set a property
CloseWhenBackgroundIsClicked yes or no. So should it do the light
dismiss. That's also known as light dismiss. If you tap outside of
the pop up, should the pop up close yes or no. So those are all things
that you can influence with this pop up page, which is really cool. Now,
okay, we got this my pop up page. So let's
keep it at that. And actually I'm going to trigger
this. So we have this main page that's just the waving net bot. With the
button I'm going to go to the code behind. And for this button I'm going
to remove everything here. We don't need the counter and that kind of
stuff. And what you want to do is here the mop up service. You can see
it here already instance. So this is a static instance
that you can use. And then we have a couple of navigation pages and
also again a couple of events. So we have popping, we probably have
also popped and popping and pushed. So we have a couple of
events that you can hook into to see whenever a pop up has been
pushed or popped. So you have those, but also of
course the methods to push something or pop something or
pop them all or remove a page from the stack. So there's all
stuff that you can do here. I'm just going to focus on the push and pop
right now. So you can do PushAsync. And here I have to provide a
new PopupPage. So, I'm just going to say new MyPopupPage() and that should be it. You can also have this
boolean to say if it's animated yes or no. So you can skip
the animation and just boom, put it on the screen right there. It's
giving me a little build error right here, which is probably because I
forgot to do one thing in my my pop up page. So we have this
MyPopupPage.xaml, which I changed the root, right. So I
created this with mopups, the PopupPage. And what I
didn't do here in the code behind is also change
the inheritance from here. And there's a
little trick. You don't even need to have this here because we already
specified what the base class is for this. I'm just going to remove
this here so I don't have to update that all the time. And now I think our
MainPage is going to be happy as well. And we should have
everything. So I'm just going to run this on Android. We should have everything
to actually show our first popup page in .NET MAUI. Little trigger
warning: this is going to be very ugly. It's not going to be very nice
looking. You have to do a couple of things to actually make it show nice
and like an actual popup. But we're just going to see what this does from
scratch. Okay, here we go. Our application is being
deployed to the Android emulator. So it should be here
momentarily. We will see the net bot just waving at us. And now when we
click the button, it's not going to be incremented but it's going to
show our little pop up, which is now let's go to our little My Mopups page.
It's going to be just a vertical stack layout with one label. Welcome
to .NET MAUI. Right? So it's not going to be really impressive but
we'll see. We'll make something nice out of it. So here we are. And
whenever I do click me, you have to look real close because
here at the top you'll have this Welcome to .NET MAUI label. And it kind of like
slides up, right? So that's pretty cool. But this is our pop up. Now this is
not really a pop up that you probably want to have in your
application but it is a popup and it's probably because we have this
simple label and vertical stack layout. Now a little at the time of recording, it
doesn't really work well with XAML Hot Reload. So that's why I'm stopping and
restarting a couple of times here. But we will make it work. So here this
VerticalStack Layout. Let's just give that a little
bit of more body right here. So what you
probably want to do here is give that a little WidthRequest and
HeightRequest. So Width Request let's make that, I don't know,
250 the HeightRequest, let's make that 300 so
that we have a nice little box, right, and it will show up
probably in the middle of our screen. Well, actually to do that we're just
going to specify the vertical options and we're going to say CenterAndExpand.
So it's going to be at the center and let's give it a little
background color of, well, let's just make it white right now.
Actually, let's make it something more, let's make it yellow so that it looks,
you can at least see it. It's not still really pretty but at
least you can see what's going on. White is the other page with white as
well. So now I got a couple of more options here. I'm
redeploying my app and we should see now that our Mopups page is at least a
little box that's going to show up in the middle of our page. It's going
to have a yellow background and it looks more like a pop up already. So
let's see if that's actually true. Click me and boom, here
we are. We have this little yellow box which is now in the middle.
You can actually see our welcome to .NET MAUI label as well. So now we
have this pop up in our application. Okay, let's
take it a step further, right? So I'm going to copy and paste a lot
of example in here. So don't be scared. I'll give
you the important bits right here. So let me just copy in this
thing and paste it in here. So what I just
pasted in here is a scroll view so that whenever the
page is somehow long enough, or maybe I should say the
other way around, whenever your device is small enough that it can show the full
page, it's going to scroll a little bit, right, so that it doesn't go out
of view. And inside of that we have a stack layout. I should probably
make this a VerticalStack Layout to make it more .NET MAUI I
copied this code from a Xamarin Forms sample. So now we have that and
we have an entry with a username, an entry with a password and a button
to actually log in, right? So we have that. We'll see how
that looks in a little bit. What I also want to do is have that
dimmed background because just now we saw that yellow box but it
wasn't really clear that it was a pop up, right? Apart from there was a
yellow box. So what we can do is give the full page a background.
And now I can say, okay, I want to make this
background color and I can specify a hexadecimal value,
right? So I could say 80 and then just 6 zeroes something like that. And this first two is kind of like our
transparency thing, right? So you can see here in the little preview as
well that it's black but it's a little bit transparent. So now
we get that dimmed background. And just to show you, I can also now
set the close. When background is clicked, I'll set
that to false. I think the default is true. So whenever we click outside of the
pop up, it's not going to close, right? Because we want to make this a
modal kind of pop up thing. So now we have that. And the one other
thing that I want to do here is this button clicked. I need to
implement this so that you actually do the login logic,
right? So I'm not going to do that. But what I can do is actually close
the pop up here. So since we're using this static thing, I can just do
MopupService Instance.PopAsync(). So now I can just pop this page and I can again say
if it should be animated, yes or no. There's by
default a little animation. And whenever I do this, I think I got everything in
place. We're now going to see a little bit more Extensive popup. So we're going to
have a couple of entries that you can use. You can do everything here
inside of your popup page with data binding, with MVVM, if that's what you
want, your login logic. You can request the user for some
input and then you can tap that button, validate all the
input and close the pop up if you are happy with it, right? So let's
click it. Let's see what it looks like you can see that background dims
a little bit, right? That's that background color that I set on the
MyPopupPage. So let's go up here. That's here this
background color. And then you can set this border background color, which was previously
known as a frame in Xamarin.Forms, which is white. So we have this white
background right here and then we have the
entries. It still needs a little bit more styling here. I'm totally aware. But
at least we have something, right? I'll leave the styling to you.
You're probably much better at that than I am. And now whenever I click the login
button, it's going to pop, right? It's going to go away. So if
you've looked closely then you could see that
there is a little default animation. I think it kind of like zooms from the
middle to the middle of the screen. There you
go. And whenever it goes away it becomes smaller. But you can create your own
animations as well. So again, I'm not going to type all
the things here for you. So let's bring in a little animation. You can
do that with the Mopups:PopupPage.Animation. Now it doesn't recognize this because
the animations live in a different namespace. So I'm going
to do here xmlns and I named it mopupsanim from animations. And then here you
search for animations... Mopups.Animations. Put that in there.
And then now it starts recognizing all these things.
And here you can specify in the animation. So this is the
animation property. You can do a scale animation and you can say like, hey, the
duration for the animation coming in is going to be 700 milliseconds. We
have the easing scale in, scale out. So we have all
these properties that you can set. You can write your own animations if
that's what you want. So we should see a little different animation. Now
before I'm going to show you this, let's put in another thing
as well. Maybe you want to have this crazy kind of like pop up, right? And
because we're using a border and all the elements that are inside of
.NET MAUI that will allow you to create wonderful layouts, I can just play
with the border right here. So what I can do is do border stroke shape. So I can set the shape
of this stroke, which is like the stroke
is like kind of like the outer layer, right? So we have this thing and now I
can say round, you have all kinds of things, right?
But I'm going to use the round rectangle which is kind of like the easiest to
create rounded corners. And I can say corner radius. And then
I can specify the four corners, right? So I can just say, I don't
know, 20. So it will round 20 on each corner. Or I can do something
crazy like 40, 0, 0, 40 And now we will have two corners that
have a rounded corner and the other ones will
be square. So it will kind of like look designy hopefully
maybe, right? So let's see what this does and then
I'll show you how to use all of this with dependency injection and
more in the MVVM way. So we have these two things. We have the new animation and we have a
rounded corner here for our pop up as well. So here the application is
coming back up and whenever I click this, you have to look closely. I think it
bounces a little bit, right? So whenever I click outside, I can't click outside
because I disabled that. So I need to click here. So it kind of like bounces
up, right? You can see that that's our custom animation. And you can also
see that I have this rounded corner right here on the top left and also on the
bottom right. So you can create all these kinds of shapes and
crazy pop ups for whatever you want with all kinds of events and commands
that you can hook into. So very customizable pop ups here. Now, the
last thing, if you want to use this with dependency injection and that kind of
stuff, which is more real world, you should do that inside
of your applications. Let's go back to our Solution Explorer and to my
MauiProgram. And what you want to do is register
basically that MopupService as a dependency, right? It is an
interface, it's the IPopupNavigation interface. So I
should do builder.Services Add() and I can register this as a
singleton. So let's do this IPopupNavigation. There we go. But it doesn't have a
default implementation, right? So I'm going to have to specify
the MopupService Instance, which is an instance of the
IPopupNavigation. So I've registered this. Now I want to
do another one for my page so I can actually
resolve this, right? So Services.AddTransient. Your pages
are probably the best off when they are transient. Main
Page and whenever I do this, I'm now ready to consume this
IPopupNavigation from the constructor in my
MainPage. So let's go back to my MainPage.xaml.cs I can now
here say, hey, I want to request a IPopupNavigation which is called
popupNavigation. Let's make this a field. IPopupNavigation as well, which is also called pop up
navigation, which is not maybe the best naming
convention, but oh well, this is sample code. So here I need to say
this.popupNavigation so that it knows that it has to
reference that field and is popupNavigation the one that's coming in
here. And what I can say now is not use this MopupService.Instance,
but I can say popupNavigation.PushAsync, right? So I
can now use this service that is injected and I can do the same. Of
course set it up for MyPopupPage as well so that it uses
that same service and I can use it with dependency injection at
MVVM and that's how you can get started with Mopups in your .NET
MAUI application. So that is pretty cool right? You have all the
power of .NET MAUI layouts at your fingertips with borders and stack
layouts and grids and you can do all kinds of crazy
stuff. Your pop up page is just a content page so you can
design it however you want. You can make it full screen if that's what you
want. You can make it only a portion off the screen. I cannot wait
to see what you come up with with all kinds of crazy design
and use cases for this. So please let me know down in the comments if I
skipped over something that you want to know more about. Also please let me
know in the comments and I will make something follow up or I will
just respond to you in the comments as well. I hope you enjoyed this video.
Please if you did, please click that like button so that it will spread
throughout the YouTubes to more people. To enjoy this content, subscribe to my
channel. And if you want to learn more about the maybe .NET MAUI
Community Toolkit popup so that you can make a comparison,
which one is better for you, check out this video right here. Or check out
the full .NET MAUI playlist, which is right here. And I'll be
seeing you on the other side for the next video.
