One thing that can be very annoying
for your users is if the keyboard is overlapping or the keyboard is not
showing up in your .NET MAUI application. Now in the .NET MAIO Community Toolkit,
we have the keyboard extensions which will help you manage your soft
keyboard a little bit better. Let's go check it out. The onscreen keyboard is one of those
things that should just work, right? It can be very annoying
though, if it doesn't behave as you kind of like expect, especially for your
end users. Whenever you tap an entry and the keyboard doesn't come up or it
overlaps the entry and you cannot see what you type. So there is some issues
around that. Although the keyboard should just work, right? It's one of
those things that you would expect to just work, but there's a lot of different
scenarios and ways that you can go about this keyboard. So I
think the thing that I'm going to show you in this video is
coming to .NET MAUI directly. It will be in the .NET
MAUI box in .NET 8. At the time of recording. The first previews
of .NET 8 are out. So if you're brave enough, you might want to check
that out. But the official stable .NET 8 release will be in November
2023. At this time it's a few months away. So that will
be maybe too long for people. So to overcome that problem, we took
in the functionality right now for the .NET MAUI Community
Toolkit. So in this video, I'm going to show you how to use this
functionality in the .NET MAUI Community Toolkit, how to have more control over your on
screen keyboard. But this should come to .NET MAUI
directly. So that's something that you should know. Let's just hop over to my
screen share and let's see how to get started with this inside of your
own application. It's pretty easy, so that's a good
thing. Right here in Visual Studio. I created a new .NET MAUI
project. You can see it running right here. On the left, you can see the
XAML, which is not that important for this video. On the
right, you can see it running on my Android emulator right here. So
this is just not doing anything fancy. Just clicking,
counting, doing the things a new .NET MAUI project does.
And what I already did is install the .NET MAUI Community
Toolkit package because you have been subscribed to my channel, right?
So you've already seen me do that a ton of times. If you're new to this
channel, welcome. Please don't forget to subscribe and I will go over it
very, very quickly. You probably know how to install a NuGet package, but just
to be sure and everyone is on the same page, so you want to right
click on your project and do Manage NuGet packages, which is
grayed out right now because the project is running. So let's change that. I'm
going to go to my Solution Explorer, right click again and do manage NuGet
packages. And you want to look for the CommunityToolkit.Maui. I
already got it in here and there is a couple of
packages. So we also have other cool stuff. I have videos about that
as well. So go check it out on my channel. You probably want the
CommunityToolkit.Maui which has everything. But I think this specific
functionality, if you're after that, it's in the core
package. So you just have to have that core package with
the core functionality. You can use that as well. But I would recommend just
doing CommunityToolkit.Maui because the chances are that you're going to
use more stuff from this amazing package. At the time of recording, the latest
version is 5.1.0. You will need that one as the least version for
these keyboard extensions as well. So make sure that you have 5.1.0. Okay? With that installed we can go
over to our MauiProgram because we need to initialize this and we need
to add this UseMauiCommunityToolkit. Make sure that you have this
using CommunityToolkit.Maui; here at the top so that this shows up
and then you're all ready to go. The Community Toolkit is
all bootstrapped. So let's go to our MainPage again and actually to
our MainPage code behind and remove all this counter clicked
code here. We don't need that because we're going to do something
else. What I'm going to show you right now is how to do a couple of things.
Detect if the keyboard is shown. So you can actually detect that in
your code. You can show it and you can hide it. Now we can do that all in
one thing. I can just show you here three lines of code
basically. So I will show you how to get started with that. So we can go to
the keyboard extensions and it already shows up
here in my IntelliSense and you can see it's in CommunityToolkit.
Maui.Core platform. So we can just do that. And you can
see it has these three things, right? Hide keyboard, show keyboard
async and is soft keyboard showing. So we have these
couple of things. So let's add this little check right here is
soft keyboard showing and if it is, I'm going to hide it. If it's not
showing, then I'm going to show it right? So that we have the full
example of all the things that you can do here. So if we check this, we have
to specify a itext input. So this works for every
input text field that is in .NET MAUI. The
most basic example is of course an entry or an
editor or a search bar or those kinds of things, right? So we
actually have to specify a text input so that it knows how to
rearrange the UI, how to tilt up, maybe the screen
to actually show and make sure that this text input is
still visible to the user, right? So that's why it needs this
thing. So let's quickly hop back to the example page because I
don't have an entry here. Let's take this hello world. Let's make this an entry.
And I'm going to give this a little name attribute
here so that we can actually reference it here. So let's make this my entry.
Something like that doesn't really matter. And I can now take this one and do
that here in this is soft keyboard showing so that it
knows like, hey, is this showing yes or no? And I can wrap an if around this
if it's showing yes or no. And then we want
the else, right? So if it's showing, we're going to hide it and if
it's not showing, then we're going to show it. That's what we're going to
do. So the next thing is keyboard extensions. It's showing, right? So we are going to hide it and it's
async. So you probably want to await it as well. I'm not going to
well, I can actually do that. Let's make this then async. There we go. And we can hide keyboard
async. So I can now await this. And also here you want
to specify that my entry, right? We can see that
here. We also have that target view that we want to put in here. And also
a cancellation token. So I'll talk about that in a little bit. Let's just
do this one, my entry first and let's kind of finish it off. We
don't really finish it because we need that other parameter for the show
keyboard because that's very similar as well. Show
keyboard async, that's kind of like the same thing. And you can see that same text
input, target view or a token. Now, there is
a couple of interesting things here. Let me finish this story
first. So this cancellation token, a
cancellation token is a way to programmatically cancel an
operation in Csharport net. So you can work with that
cancellation token and whatever in your
application, you decide like, hey, okay, you should stop hiding that
keyboard because it's not relevant anymore. You can have that cancellation token
and you can call the cancel on it basically. So you can have that
cancellation token token. I'm not sure if this actually is new
and we can pass that token in here. So if we do
that and I think then somewhere you can do token
cancel. Is cancel requested? Do something like
that? Well, no, not really. I think you have to do something. You
have to create a source. I think you have to create a cancellation
token source, right? That's the way to go about it.
Then you have this token and you can say cancel here. You can say
cancel after. I could think I can create a whole new video about the
cancellation token. So if that's something what you want, let me know down in the
comments and I will make a video on that so that you know how
to work with it. But here you can do that token and you can pass
in the token token. So in this case the naming is not really
great but that will give you the cancellation token. And now whenever you would do
token cancel it will cancel the operation for this
hide keyboard async, right? So you can do that. Now in this
case, there's probably a use case for us, else it would be implemented.
But what you can do if you don't want to work with this functionality,
you can just do comma default and it will pass in basically what I
did here like hey, new cancellation token. So instead of
this, you could also write new cancellation token. It will just pass
in that new value in here and you don't have a reference
to it because you're not planning on using it anyway, right? And to make
this a little bit easier, you can just do default here and we can work with
it that way. So don't worry about it for now, just do it like this.
Whoops. Now I'm messing up my code here. There
we are. And same thing for the Show keyboard async so
default. But what this also is if you've looked closely,
a little pop quiz here to the IntelliSense. Whenever I did this,
you can see that actually it was like that, right? Like if you
look at the IntelliSense, you could also see that this is like an
extension method. So there's also the MYEntry dot and you can also do Show keyboard
async on this. So you can also do it on the actual
control that you want to show it on. And now
you only have to specify that cancellation token, right? So you can
just do that token again that I just removed. So you can also call it on
the entry itself so you don't have to specify the entry. So there's a
couple of different ways how you can use this, which really makes this really
flexible as well. So we have all this and well we need
to trigger this. So what we want to do to
make sure that this is all visible, let's move that button to
above because else now the keyboard will
overlap our button, right? So let's do this and let's do Show hide keyboard. You can find all this code
on the GitHub repository that is attached to all of my videos. So
find it in the video description and I'm going to run it on the Android
emulator now. And what we should see is kind of like the same app that
we had. Now the button will be on top with
Show high code, which is not what I want to do. I wanted to do
Show high keyboard and then it will come up with the keyboard and
focus that entry and also hide it again, right? So now we
have a very flexible way of going about our
keyboard. So let's just fix this while we're here. And you can see that this
will update whenever we run the next time. And here you can
see this is now an entry, right? This hello, world one. And let
me get myself out of the way. Just so we're sure that you're seeing
this. If I click the button, it's now going to set the focus to this entry.
Make sure that the entry is in the view and it will actually show the
keyboard, right? So that you can start entering things. And if I do it
again, you can see that it will hide the keyboard again. Everything
will fall into line. It will still be focused in this case, but everything
will be here. You have that full control over
the keyboard and it actually detects like, hey, is the keyboard shown yes
or no? So you can use this in your application to make sure that the
entry is always accessible to your user, that there's no funny business
going on, and your user is not stuck entering entries in things that they
can see, right? So that's really amazing. Now, like I already
mentioned, the keyboard is something that should just work mostly also for the OS, the
operating system. So Android, iOS, it will mostly figure
out how it should actually work. But for the cases where that is not
the case, you can now have this full control over your
keyboard. This will be in .NET 8 in .NET MAUI directly. But now
to make it available to you already, it's in the .NET MAUI
Community Toolkit for you to use today. Everything that I showed to you
can be downloaded right now and implemented in your .NET MAIO app.
With that, please like and subscribe to the channel like this
video. And maybe check out the next video about the Community Toolkit
which is right here. And I'll be seeing you on the other side, our channel.
