Don't you just wish sometimes that you
can draw on your screen with pencils and okay, maybe not with pencils and
crayons, but now with .NET MAUI DrawingView that's inside of the .NET MAUI
Community Toolkit can totally draw anything you want on your screen. Let's go check
out how to work with it. So why a DrawingView? Well, .NET MAUI
DrawingView can do a lot of things. The first thing that comes to mind of
course, is drawing. So you could create your own little paint application
inside of a mobile app that runs on Windows, macOS,
Android, iOS, all the things. But of course you
can also use it for other things. If you go way back, like me,
in the Xamarin days, then you used to have a component that's called
SignaturePad. So maybe you're making more like an enterprise application.
Maybe you're creating an application where you deliver packages, or at least you
have to collect the signature of someone that you're doing something
for. And now they can sign off on your screen. You can capture that
signature, you can save it as an image, you can put it in a PDF. You can do all kinds
of crazy things with that. So it's much more than just making
drawings. You can also capture user input with gestures and those kinds of
things. I'm sure you can come up with all kinds of things
that will be useful inside of your app. But let's go check out how to
actually implement it inside of your app with the .NET MAUI Community Toolkit are in Visual Studio 2022. I just
whipped up a file new .NET MAUI application. You can see
it right here, the template in XAML. I did change one thing. I installed
the .NET MAUI Community Toolkit. That
right. Click on the csproj or the solution you can do Manage
NuGet packages. And then I went to browse search for CommunityToolkit.Maui. At the time of recording, the newest
version is 1.2.0. It will install, it will pop up a little README and
read that carefully because you need to do a little initialization line to
make sure that you've init... Inita.. Initialized. That's a hard word! Initialize the
.NET MAUI Community Toolkit the right way. So go
over to your MauiProgram.cs And here in your Application Builder you have to add like the UseMauiCommunityToolkit(). There is
something really cool by the way, we added an analyzer to
remind you of this. So whenever we see that you're trying to use the .NET
MAUI Community Toolkit and you haven't added this initialization
line, then it will automatically give you a build error to remind you that you
actually need to add here. Because who is reading
documentation anyway? Not me. So we give you this little
reminder, which is really cool. Of course you
need to add the Using CommunityToolkit.Maui here at the top as well to make
this work. Now with that in place that's all that we need to do.
So we can go over to our main page or whatever page you're
going to implement this and we want to add this little extra XML namespace,
right? So let's do xmlns. I'm going to call this
Mct, MAUI CommunityToolkit and then I'm going to search for
CommunityToolkit.Maui. Now there's a little funny thing
in here because I want to have the views but not the
core dot views. So I'm not sure why that isn't popping up here in the
IntelliSense but let's do this core views because it's
the closest thing and then I'm just going to remove this core thing from here
and also from here. And now we're all good to go. See the squigglies are
going away and now let's keep the image in place for now. I'm
going to replace this label and actually let's keep the button maybe I don't
know what I'm good to you. So let's transform this label into the
MCT and you can see we have the AvatarView
also exciting and the DrawingView. If you want to learn
more about the avatar view or more about the DrawingView and all the stuff that
maybe some more advanced stuff that I'm showing today, let me know down in
the comments and I'll be looking into if I can make some content about
that. So we're going to see .NET MAUI DrawingView here today and it
doesn't have a text so we can remove that, it doesn't have a
font size and let's remove the semantic properties for now but what I can do
is search for maybe four lines because we're going to do something
with lines, right? So we got a couple of suggestions here. We have drawing line
complete and there's more events that you can do with this and also we have
the command so that you can do it with MVVM as well. But we also
have like is multi line mode enabled what that will
see that in a little bit line color lines, line width. So we'll look into
that but what we first want to do is maybe make this
show up. So let's make the background color light gray so that we
can see where our drawing view actually is.
And I think you also need to specify width and height request so that it
actually gets a little bit of body here. So let's make this 200 and the
height I don't know also 200. Let's make it
like that. And I can actually start running the application right now. So
let's just run this on the Android emulator and you can see this gray box
showing up and we can play with the rest because it will just pick up
with XAML hot reload and we can see all of our changes
being reloaded on the emulator straight away. Also works from your
physical device also for iOS and Windows and all those kinds of things. So our
application is coming up here and when it does, we should now see
still our Netbot but we should also have the gray box. Here
we are. It's a little bit small but I'll do my best. So here we can
draw, start drawing lines. Now I'm doing it
with my mouse right now, right? Because I dotnet have any touch input here on
the emulator. But of course this definitely also works whenever you do it with
touch on your actual device. The thing you'll notice is that whenever I start
DrawingView a new line, the old one is getting replaced. It's getting
removed. Now that can definitely have its use for your scenario. But if
you want to do a signature for instance, it's not really great,
right? Because my signature, I don't know, I lift my fingers sometimes or my pen
or whatever and now the lines go away,
right? So that's not something that we want. So let's
go in here and let's set that multi line mode enable to true and whenever
I set that to true and I go back to the emulator now
suddenly I can draw more lines. See that? So I can just remove,
I can detach my finger and whenever I press again it
will just stay here intact. So that's really cool. Now we can do
more things. I said talking about the line color, right? So we can
set that to red and let's also look at the line width so you can
specify how thick or narrow the line has to be. So let's
set this to, I don't know, 20. Let's make it something crazy. And
whenever I go back now, I get a really thick red line, you see? So
this is I'm setting it in code right now.
But you can totally set this at runtime. So imagine that we dotnet
have that signature scenario anymore. But now we want to have this paint
application. Do you remember? Draw Something. It was a popular game
a few years back. Well, more than a few years back, I'm
getting old where one person on one end of the line was
drawing something and the other person on the other end of
the line had to guess what it was, right? So it was kind of like
pictionary but now across the world and you can do something
with that. You can have a color picker here, you can have a line width
picker right here and you can specify these things at
Runtime and suddenly you have some kind of draw application or a paint
application or whatever you want. So I can set this now to green green and I can set this to, I don't know, one
to make it really narrow. And when I do it now I will get this
little green line, right? But whenever there is of course a
clear method that you can call on the DrawingView
whenever you have a button, maybe that to clear the whole thing. But I can
also set now very easily to overcome the XAML Hot Reload
stuff here. Just do the multi mine mode to false. And now whenever I
start to draw something it's gone, right? You can also notice that
whenever you start drawing something it smoothens the line here. It has this
empty aliasing thing going on. You can enable that disabled that. You can do
all the things. So that's a lot of the options
definitely not all, but a lot of the options that the
DrawingView has. But I promise you could also take this image and you could put it
in a PDF, right? You could save it to disk, whatever. So let's see if
we can implement that. I think that I
need to stop right here. I don't think the .NET Hot Reload works pretty
well in the Android stuff. So let's give this little image a
name. I'm going to name this image view right here and just remove
the source for now. We don't need that. Whenever I do
that now and I can say here maybe let's use this event
right here. So what was it? Line completed.
Something DrawingLineCompleted. I'm doing it in code behind right now.
Of course if you're doing this at home, you probably want to do it with
the MVVM way. So here we have this drawing line complete and
what I can say now is ImageView source. And then I can say did I give DrawingView a name yet?
I don't think so. Did I? Okay, I'm going to give this a name to
x:name="DrawView". And now I can get the DrawView GetImageStream. So you can just get the
image stream for the whole DrawingView and you can use
that to put it into an image. Or you can take that and
save it as an actual image on the disk or send it to an email or put
it in a PDF if it's a signature. And we can do
ImageSourceFrom Stream. Right? So we have this thing
and now we are getting this as a stream. And
is it happy? Doesn't take zero
parameters. What does it take? The width and the height. Interesting.
So that was 200 and 200. And now hopefully is this async? What
does it do? I think it is async. So let's make it
async and await it then. And now we should be
all good, is it not? Still not. Oh, we need to this is a value task. Oh my gosh. What do I
need to do? Do I just make this async? Does it work
then? Was it happy back then? All right, I'm net really sure what is going on
here. It's a ValueTask... await. Maybe I'll do it differently. Maybe I'll just make this
an async method. I'll put this in a thing
first. var stream = await and get the stream. This way if you're smarter than me. Let me know
down in the comments what I should have been doing differently because I can't figure it out while I'm also recording
this for you. So let's make this a stream. And now I
think this will work. There we go. So whenever I run this again, now
what happens is whenever the drawing view draw line
complete so whenever I draw a line that's kind of what I expect.
Then it should now take that image that we have in our DrawingView and
it will put it inside of an image that is right at the top,
right? So we should basically see the same drawing that we are making, but
now as an image right on top of it. And in this example it's
like not really that useful. But whenever you're going to do this
in real life then what you want to do is you can take this and put
this as a signature in that PDF or the
things that I've mentioned. So I think there are some options I
need to play with. And also it sizes a little bit differently because
of course now it's just going to take the boundaries of
this line and stretch that to 200 and 200. So that's probably not what you want
to do, but this gives you a nice example of what you can do
with this. So if I actually go along the lines here, then it's
actually like the 200, 200, then it should look more similar
to each other. So there we are. You can see that you
can do all these kinds of crazy stuff. Now the other thing like
what I also can do from code is here, take that DrawView and you can also inspect like the Lines
here, right? So the lines is just another collection of drawing lines I think.
So with that drawing line you can also save that as coordinates.
Maybe, again, if you have the signature or another painting, maybe you want to
kind of like save your drawing like something that you can edit later
like a PSD file in Photoshop. Now you can save all the
coordinates, all these lines and you can just load that back into the
DrawingView to later edit that again. Like I said, if you want to see more
advanced stuff, please let me know down in the comments and you can of
course do lines clear. I think the draw view has a clear in
itself as well which should clear automatically with all
the things so that you have this nice blank canvas
again. But that's basically how to get started with .NET MAUI
DrawingView. Here I show it on Android, but this also works for
Android, iOS, Windows, macOS, all the platforms that are
supported by .NET MAUI. Now I would be curious to know what
you are creating with .NET MAUI DrawingView. Please let me know
down in the comments or reach out to me on Twitter to show me what you are
creating with this nice, wonderful drawing view.
Thank you so much for watching again one of my videos. Please click the
like button so that it spreads throughout YouTube and more people get to enjoy
my content. And I can hear you. You want more content for .NET
MAUI right now, so checkout this playlist with more .NET MAUI videos.
Check out this playlist for more .NET MAUI Community Toolkit videos.
And click this button to see if you're subscribed to my channel and
then I'll be seeing you automatically for the next one.
