Popups are a nice and easy way to
overlay your current page and maybe get some information from your
user by using some inputs. Or maybe show your user a little bit of information
with a loading dialog or you name it. In this video we're going to learn
how to implement popups in your application with the .NET MAUI
Community Toolkit. If you've been with this channel long
enough, and you know you should so click that subscribe button
already, then you might have seen me post already a video about the Xamarin
Community Toolkit Popups. Now the Xamarin Community Toolkit already had these
same pop ups. We changed some things here and there, but it had the
implementation for pop ups already there. In fact, it's one of my most popular
videos. So it's about time that I redid the video and update it
for and now show you how to implement pop ups in
your .NET MAUI application. So here in Visual Studio 2022, I just
created a File, New, .NET MAUI application. What I did
do is I already installed the .NET MAUI
Community Toolkit. So to do that, right click on your project, do Manage NuGet
Packages. Then in the browse tab you will go to CommunityToolkit.Maui and that will load a couple of
packages. You can just have the CommunityToolkit. Maui package at the time of recording
version 1.0.0. If there is a newer one there, please
install that and you should be ready to go. It will pop
up a little README file with how to initialize the .NET MAUI Community
Toolkit. It's very easy. Just go to your MauiProgram, add this
little UsesMauiCommunityToolkit() line to your generic host
builder and you should be good to go. Now that we have that in place, we can
create a new page and that page we are going to use as a
pop up. And basically any page that inherits from a Popup
object can be used as a pop up. So it's easy as that. Let's
right click again on our project and I'm going to do Add, New Item. And
now I'm just going to choose in the category a .NET MAUI ContentPage XAML page. You can
also do a C# page. It works in code if that's what you
prefer, you can totally do that. And I'm going to name this the popup
page XAML. That will add a new page but it will
be a content page and we wanted a pop up. So what we need to do
here is change this content page to pop up.
It's not going to recognize it automatically.
So what you want to do here is add a new XMLnamespace with MCT MAUI Community Toolkit is and I think
this is in the view. So I'm going to search for Maui
Community Toolkit and it's not in the Core I think. I'm not sure why it doesn't recommend
me. This the right one in this IntelliSense thing. Here but this
is it. And now I can say MCT pop up and there we have it. So this
doesn't have a title anymore. So make sure
that your IntelliSense is very happy so title can be gone. We don't have
that for the pop up but the rest can stay exactly the
same. A little pro tip right here, the PopupPage.xaml go to
the code behind because you need to change this inheritance here
as well. This still says ContentPage and I think pro tip that you can just
remove this one. You don't even need it. You just have to specify that
inheritance in one place. I'm just going to do it anyway but I
think you cannot do that. So if you want to be safe do this pop
up and you will have to add the right using here again. So
I'm just going to use intelligence using community toolkit Maui Views and it
will add it here automatically. Also note at the time of recording,
Visual Studio has a little bug. If you add new pages it's going to be
in the namespace Maui app one which doesn't match the
rest of our application. So I'm just going to rename this real
quick to Maui Toolkit pop up sample because that's the right one
and I think I need to do that in XAML right as well. So
if you encounter this if you can't find your type then
this is likely the bug. I hope this is fixed by the time
that you see this but this might be it. Okay so now we're ready
to go. Basically this is our pop up and you can do anything with the
layout right here. So you can just have this vertical stack layout. We're
going to add a little other element in here as well and you can do all these
things but the pop up itself also has some nice APIs and
properties. So for instance we also have the candysmist by tapping
outside of pop up. It's a mouthful but it's very
handy. So by default if you have this pop up
actually let's just implement showing it first and I'll tell you all about
this little property right here. So what we're going to do how are we
going to show this pop up, right? So let's go back to our main
page which is just the defaultwaving netball. So I'm going to go to my code
behind and I'm going to replace this code for this counter button with
this show pop up. IntelliSense is going to help us here already. So show
popup and show pop up async you can do both. And with this we can just
say new pop up page and we can show this pop
up. So you can do this from this page which is really
nice. And in fact if I run this on Windows then you will
see that we get now this pop up that we've just shown it has this
little label which is probably stuck to the top so the layout could be
improved. And there are other things that you can do here, but at least we know
how our pop up is going to look like and how to show our pop
up. So let's wait for that to happen. While we do.
Let's go back to actually our pop up page. And let
me tell you about the APIs that I was going to tell you about earlier
here because what we have here is this can be dismissed by tapping outside of pop up, right? So
what we're going to see is whenever the app loads is that we can show the pop
up, but you can tap outside of it. There are space outside of it,
right, depending on the size that you set, like the width and height, you
can set that. If it spans like the whole page, you can't really tap on
the edges. But if you can, then it's going to be dismissed, it's going to
be gone. But maybe you want to have this modal pop up, right? So let's
focus on the app here. First click me, we see this pop up.
It's gray with the little label that we have here and whenever I tap on it,
it's fine, but whenever I tap outside of it, it's going to be
gone. Maybe you want to have this modal pop up that's going to show
a loading indicator or that's going to show some required information from
your user. So let's do this and let's set that
property can be dismissed by tapping outside of pop up to false. So
you can see by default it's true, but you can also set it to
false. It also has a couple of events, right? I think it has closed
and opened so that you can detect whenever the
pop up is opened and closed and it has a couple of other things. But now
we can't dismiss it by tapping outside. So what
we want to do is maybe also add this little button to
actually close the pop up right now. And we're going to say
text is close and a click event handler. Let's hook
that up and then close this little button tag
right here. So there's that. Maybe you want to give this
vertical stack layout a background color of I don't know what's a nice
color, let's just make it white. And there we
have it, right? So we have this thing in place and now in my
pop up code behind, I can say close. I think this is a method on
the pop up. So we have close and we can actually
provide an object as a result in here. So you can also
pass data back and forth between your pop ups. If anything, this is
just the overview and getting started. If you see
anything that you would like to know more about, please let me know down in the
comments below and I'll be sure to follow up on that. So here we can just say
close. And this is going to close the pop up because we can't tap
outside of it anymore. So now we have that and I think we
have all the things in place. So let's run this again. And what we
should see now is this pop up with a label, but now also a button.
And we can't close it by tapping outside of it, but we can
close it by putting that button, by tapping that button in there. So
that is basically how you can get started
with pop ups. And what is really cool is that you can create all these
amazing, crazy layouts. Actually, there's one more thing that
I want to show you which has to do with the sizing, because right now, if
you don't specify a size, it's just going to make itself like size
according to the controls that are in there, I
think. So let's see here we have the pop up still. The styling
is I'm not a designer, you should know that
by now. We can click outside of it. Nothing happens, right? But whenever I
close the button, it's now going to close. So that's now how this works. I
also deployed this to Android just to show you that.
Of course, it's done in Maui, so it works on other platforms as
well. So here we have the exact same app running on Android. And I can do
this. Click here, I can also click outside. It doesn't do anything.
And I can close here and it will close. Also a question that I
got asked since Xamarin.Forms times here, you can see
that it dims a little bit. And this is just the way that the
platform kind of like shows pop ups, right? This is how pop ups would be
implemented in this platform. So here the page
dims a little bit. On iOS, that doesn't really
happen. I think iOS is more close to Windows. Right here we have this
little shadow around the pop up. As far as I know, there's not really a
way to influence that right now, but I should definitely double check.
Let me know in the comments if that's something that you're interested in.
Maybe open an issue on the .NET MAUI Community toolkit repo so that we can
look into it. Okay. Also working on Android,
that is amazing. Now the thing about size, you can also
specify a size on the pop up. So we can say size is and then you can specify, I don't know, 1000 times
500. Let's do something crazy. You should of course make sure
that this is something that is actually available inside of
your viewport. And also you can set this dynamically
inside of your code, right? So you could check like the device
resolution, make it half the size of that so that it's always
nice and centered. I don't know, stuff like that. You can do all kinds
of crazy things here. I'm just showing you that. You can also set the size of
this to give you a little bit of a basic example of how
to work with these pop ups here. The application is coming up
again and you will see that the size is now way bigger than it was before. So
you can do all these crazy kinds of things here. So that's how
you can get started with pop ups in .NET MAUI applications. There
are all kinds of other things to explore here. You can anchor a pop up to a
certain point or element. You can maybe do something with
transparent pop ups. I don't know. The sky's the limit, right? So these
pop ups are really amazing. As I already said. Let me know down in
the comments below if there is something that you want me to explore
with these pop ups or something else in the dungeon. And marry community
toolkit. If you've liked this video, please click that like button so it will
spread to more people in the amazing .NET MAUI community and more people
will benefit from that. Thank you so much. Please subscribe to my
channel if you haven't done so already. And maybe if you want to know more about
the .NET MAUI Community Toolkit, check out this playlist right here.
Check out this special video. It's recommended just for your taste.
And check out this button to see if you're
actually subscribed. See you for the next one.
