One of the controls that is very
popular on mobile devices, in mobile apps, iOS, the bottom sheet. And in this
video we're going to see a amazing bottom sheet that you can use in your down at
Maui application. So the bottom sheet is that little
well, it's not really a dialog, but it comes up from, like, the bottom of
your screen and usually you can drag it, like to be full screen or or at least
it takes up like half of your screen and you can drag it around
a little bit and you can slide it to dismiss it. That's all kind of
fun stuff that you can do. Strangely enough, there iOS not a lot
of options for this pre built, at least for done in Maui. But
now there is this amazing plugin that does that. To be fair.
There are a couple of blog posts that also describe how to implement a
bottom sheet and I will post those down below. But this is a plugin. It's
currently an alpha stage, but you can just plug
that into your application and you can start using that bottom sheet
without any further ado. Let's just go check it out first. Let's quickly give
credits where credits are due. This is the GitHub repository.
Everything is open source, as with a lot of stuff these days. And this is
really amazing because you can also learn from how the code works in here. And
it's called D. Net net, net net. Maui bottom sheet
49 refers to the company name of the
author of this library, who is Paul Varachi. I hope I
pronounce it correctly. Paul, thank you so much for doing
this. I see sponsorship is not enabled, at least not for this
repository. So see if you can sponsor Paul in any way for his work, or at the
very least here. Click the Star button and start this repository to
show you support for Paul's amazing work. Now here iOS
everything you need to get started. The sample
app, I'll show you that in a minute as well. And for the rest, of course,
the source code for this wonderful plugin. And you can see here already a little
spoiler alert for this android and iOS screenshots right here. So I
think that's the only platforms that are supported right
now, but that kind of makes sense as well, right? I think this is
a control that iOS, one of those that are very specific to
mobile devices. So Android and iOS. And you can see it looks pretty
similar and it looks as you would expect from a bottom sheet, right? So
that's pretty cool. Now here's the setup. I'm not going to go into this in much
detail because I'm just going to show you the setup, how to initialize
it, how to use it in Xaml. And then there iOS, some description
of the APIs that are here and some things that are good to know.
I think there are some differences here between iOS doesn't support something
just because it's not there on the platform. And there is a couple of
things that are good to know. So definitely go check that out. Now
with that in mind, let's go to Visual Studio. I'm
running here on Windows, as you might have already
seen, and I hooked it up to a Mac on my network. And I can then show
the iOS simulator. I'm going to show you
Android in a little bit as well. And we'll get to that. Why I chose
this setup for today. This is just a file New.net Maui app
application. So nothing fancy. You can see it here. The net bot. I can do the
clickme and you can see it all works, right? And now I'm going
to add that bottom sheet. So let me stop running the application
for a little bit and go to my Solution Explorer. I'm going to right
click on the project and do manage nuget packages as we usually do. And
I'm going to search for D 49. Although the name iOS a little bit
odd, it makes it very easy to find. And you can see it has a couple of
other plugins as well, right? So definitely go check that out. If
there's something you want to know more about the other ones, please let me
know down in the comments. But we're interested in this. The net dotnet.
Maui. Themauibottomsheet. It's a pre release. It's actually labeled alpha.
So it's a very early version. So please keep that in
mind if you're going to use this. Also report any issues on the
repository that we've just seen that you might encounter. I'm going to click install
it's, going to install it on our project. Of course we're going to view the
license. We know that it's probably MIT, right? And the terms of usage. So
we're going to accept that and boom, it's installed. Okay, now let's
go over here. The first thing you want to do is go
to your Solution Explorer and go to your Maui program. And this iOS
something that's very typical. Now in Done at Maui plugins, we need to do a
little initialization line in the App Builder. So let's just do use bottom sheet and it doesn't add the using automatically. So I'm going to
hoover over here until the light bulb comes. And I'm going to do using the
net net .NET MAUI bottomsheet. It's going to add that here at the
top. And now we're ready to use this bottom sheet. So let's do that.
We're going to close this Maui program. And what I'm going to do, I'm
going to add a new page again. I'm going to go to my Solution
Explorer, the project right click it, do add new item. And I'm going to
choose a Done in Maui content page. Now ignore that. I have all
duplicates in here. There's no difference. I don't know
why that is probably my developer weird kind of setup. I did something at some
point and I'm going to call this My Bottom Sheet, right?
So my bottom sheet, I'm going to make an
example. You can do the same thing in code if that's what you want, but I'm
going to do it in example. So I have this page and what you want
to do. This needs to inherit from a special type of page so that it
can be used with the Bottom sheet plugin. So what you want
to do is first add that XML namespace. That's something that
we do a lot as well, right? Whenever we're using Xaml at
least. And Paul has this fancy URL set up as well. So
I'm going to call this D 49. He also uses that
in the sample so you can see what's going on. And I'm going to search for the 49 again. In
the Intellisense you can find schemas D 49. Com net 2023 Maui. So he has the same kind of fancy URLs
that Net Maui has itself. If you want to know more about how this works, let me know down in
the comments. I'm not going to go into that right now. So we have this
one and this makes it possible to use this instead of like the full
namespace that you otherwise would have to use. So D 49 and I'm going to do
bottom sheet. And now we have this, this Bottom Sheet page. The
title is not something that we can use which is in
the default template. So I'm going to remove that. And now
something that would typically happen if you're going to change this
page type here, is it's going to complain in the code behind that
we're inheriting from two different things, right? So if we go to the
Solution explorer net, net, net, net Maui, bottom Sheet inherits
from a content page and we can't do that. Now here's a little pro tip for you
right here. You could just remove this one, you don't have to do it in two
places. I don't know why that's in the templates. We should get rid of
that. You can just do it like this and you will never have that
build error again. All right. My bottom sheet. So we got
that all. Now two things that I learned while
looking into this is that you probably want to add a padding. It's actually one thing, I don't know
why I said I learned two things, a padding of 16 and 32. That means it's going to be 16 left
and right and 32 from the top and the bottom. That's because else
your content will be all the way on the top, on your sheet.
It doesn't really look that pretty. And also if you do it full screen, it
swipes off the whole screen. So that's something that you don't
want to do. So we got that and I want to set a little background. So if
you're a better designer than me, and you probably are, it's not
that hard. You can create a beautiful design here, right?
But I'm just going to do this very simple design with a little label here. And
I'm going to say I don't know, what should it say here? Did you like and subscribe yet? Thank you. Maybe that's something that you want
to do just off the top of my head. So like and subscribe. Thank you. All
right, so we've got that. Let's make the font size a little bit bigger.
Maybe font size is I don't know. Let's make it 32 iOS. That
big enough. I don't know how that's going to be, but we'll see. So now
I've got that in place, but now I want to show it,
right? So let's go over to our main page and I'm just going to reuse
that counter button that we saw. I'm going to remove all the things
here. We don't need that. And what I'm going to do is do VAR page is new my bottom sheet and I'm going to
create it like this. And then I can say page
show. And you have to specify the window. And the window is
a property on each page basically. So you can just say
window. And this is actually like this window, right? So this is the
window property associated to this main page. So you can just
access that very easily. If you want to find your window reference net
Maui's multi window. Now please do and just put it in here
and it will work. You can do some other things which you
can also do from Xaml, but you can also do it like in here. If you
want to do something in code, maybe add some logic to it. You can do
page show handle. So show that little gray thing on the
top. Actually, let's set it to choose so I can show
you. You can do page dismiss as well. So you can dismiss it
programmatically or you have this event where it's dismissed and you can act on it
being dismissed. You can set modal. I know the is
modal. There is a note in the repository for that. So go check
it out. I think it's not supported on iOS. So if it's modal yes or no. And
the other big one is is cancelable,
cancelable, cancelable. I don't know how to say
that. Is. Oh, that's not is. Oh, it's cancellable. Just not really
consistent naming here. And that means if you can cancel it
yes or no by swiping down. So basically this enables or disables
the swiping down of the sheet. But I'm just going to
keep it at the show handle right here. I'm going to do page show and
it's going to actually show. So let's run this on the iOS simulator and see
what iOS going to happen. We should see the default net
Maui file new template, waving net bot and everything. And on
this button, you can now have this bottom sheet that is
going to show from the bottom. And that's what we're going to see. Okay, the
application is built. It's being deployed to the simulator. So we should see it
pop up on the right, right here. Here's our
beautiful splash screen. And I should get myself out of the way
here. So let me just do that for a little bit. And then here
we have our application. So nothing changes just yet. But when I do the
click me here, you can see this bottom sheet. Oh, look at that
beautiful font. You can see that little handle. So that's the
little bit darker, gray thing, the little handle. It's a really
visual indicator. So you can just take it there and do
it a little bit up and down. If I slide it down, it's going
to be dismissed. That is cancelable. If I set that to false, that cannot
happen. But this is how it works. Now, one other cool thing that I kind
of like skipped over. So if I'm going to stop this a little bit again,
iOS, the I have to look up what the actual term was
detents. I think detents. And detents is the term for like, the
anchors where your bottom sheet can kind of stop. So
let's do that in example actually just to show you that this is possible
in example as well. And let's do the 49 bottom sheet detents. I can specify them here. I can also
specify them in code. And here, if you look at the Intellisense, I
have these detents, and you can set the anchor detent, the
content detent, the full screen, the height, the
ratio. So you have a couple of different options how to specify these
things. Go check out the documentation. I'm going to do the full screen one.
And you can have this iOS like a collection. So I think I can do more
right here. I can specify more. And you will have
different anchor points where you can bring your bottom
sheet up to if you just do one, the full screen one,
you can see that it will go to full screen and to the regular
anchor that we just saw, basically, or just all the
way dismiss it. So if I run this again, we should now be
able to see that I can take net, net Maui bottom sheet, show it
all the way to full screen, and I can also do it back to the
original position or dis miss it all together. All right, the
application is coming up again. You can now see that whenever I click the button,
we're going to see it in the default position. But I can now also pull it up to be
all the way full screen. And you can see this is built into
iOS. So the background kind of like goes to the back more to the
background, even it looks like really page sheets. And I can do
it back to this position. I can scroll it all the way back up here,
and I can dismiss it all the way down. So that iOS a very cool
option, if you ask me. Now, the reason why I did all of
this on iOS and not Android is because if I run this
same thing on Android, so if I just switch over here to the
Android emulator and the pixel one, because that's the power of .NET MAUI,
I can just switch over and I will have the same application. But
now, running on Android, you will see that there iOS. Something weird going
on with the styling. And I am definitely doing something wrong
because this app that you just saw before mine came up, iOS, the sample
app from the repository there, it looks beautiful. But if you
look at my simple app right here, you can see that there's no
background on Android. The handle is not showing. I can do it
all the way up here. So the full screen kind of seems to
work, and you can do it back and I can dismiss it. But whenever I
do, you will see this weird gap here at the top. So something is going
wrong here. And probably I'm doing something wrong because you can see in
the other sample app that I will switch to in a minute, that it can all work.
Or there might be some bugs here, but you can
definitely make it work because if we go to the sample app, which is this one
that's in the repository, you can see all these options, right? And here, it
works beautifully. So if I scroll up, we have this non modal sheet. So
that's kind of like my scenario right here. And I can actually slide it down and
it will close again. If I do the modal sheet, you can see
the screen even dims so that you can't get really out of here by
sliding. Well, it does slide, so I'm not really
sure what the modal does here. But you can also click the dismiss
right so that's the programmatically dismissed. The no sliding away is the
is cancelable. So now I can't really slide it. Does it work if I tap
outside of it now? So that seems like the more modal option than to me.
You really have to click this dismiss thing right here with the
handle. And you can see that the handle also shows on Android. So I'm just
definitely doing something wrong, right? So go check out this more
complete sample for the Android one. Also, the background
color just works here. And listen to that dismissed event. So
I have all the stuff right here. This is
really cool. You should definitely go check this out. I think this plugin
definitely counts for Gerald's. Amazing plugin alerts. So there's that. And I really
love this. Keep in mind it's still Alpha. It's
still work in progress. Please make sure to report anything that you find.
I'm not really sure what I did wrong on Android. It seems to work fine on
iOS. So that's the little differences in platform development. Welcome to cross
platform development. But this is wonderful work already.
Other than that, it works pretty stable. So really cool. Please check out my
other videos on net Maui. Plugins on this playlist. There
is a lot more cool stuff in Dunn in Maui. Or check all the Danden Maui
videos. Don't forget to like and subscribe and I'll see you on the other side.
