>> Tune into this week's On .NET, where I have two of my best
friends in the entire world on talking about how to
be more productive and build apps faster with .NET MAUI and the .NET Community
Toolkit. Tune in. [MUSIC] Welcome back, everyone
to another On .NET. I'm your host, James Montemagno. Today, I'm super excited
because I have two of the contributors to the .NET
MAUI Community Toolkit, which is an open source
project from the community supported by Microsoft to help developers build apps
faster for .NET MAUI. Really excited my best
friends in the entire world, Vlad and Pedro are here.
How's it going, guys? >> Hello. We're fine. How are you? >> I'm doing amazing. I'm super excited that you
guys were both able to join. Now, this is really
interesting because you both are contributors to
the community toolkit. Vlad, how about we start
with you and I would love to know a little bit about
your background so people know, but also what got you interested in contributing
to the community toolkit. >> For everyone again, my name is Vlad, I am a Software Engineer from
Ukraine despite their mostly work with ASP.NET Applications, but I'm absolutely love
mobile development and it came from Xamarin Forms
and now with the .NET MAUI. >> Awesome. How about you, Pedro? >> Hello. Yeah, I am Pedro. I am a Software Developer. I have been doing Xamarin
applications since forever, since my start of journey career. I started to contribute towards the Open Source Swift
Xamarin Project. I believe my first
PR was on Essentials and after that you to go to forums and now I am on the
community toolkit. >> Yeah, I was going to say so. People that have been active in the
Xamarin and .NET MAUI community like myself probably have seen the two of you popped
up all over the place. Like I think at some
point probably every other day it was like something new from Pedro that is pretty sure, especially at Essentials, which
has been super fun to see. How about we start off with this, which is many people watching
probably have no idea what the .NET MAUI Community Toolkit is or the entire Community
Toolkit project. Vlad, you maybe want to give a
pitch of exactly what it is. >> Absolutely. Let
me share my screen. .NET MAUI Community
Toolkit was created by the community and
it's a library which extends .NET MAUI framework
with additional controls, with additional converters, any other stuff like behaviors. You can find it on GitHub
Community Toolkit Repository. Also, we have a great
documentation where you can find all style which
we actually develop like alerts which are extension for existing other set of .NET
MAUI like snackbar and toast, we have a lot of behaviors, converters and much more. >> Very cool. It's a toolkit. It's like a bunch of
stuff that isn't in the official .NET MAUI project, but it's things that the
community wants,the community has needed and people can just add it to the community
toolkit, basically, right? >> Yeah exactly. It may go to the .NET MAUI after it's become stable in the .NET MAUI community toolkit
and it become cooler, why not? It's just point for all who would like to experiment
with some feature and they really need it and who knows maybe one day this feature will become a
part of the .NET MAUI Framework. >> That's really cool. It's a place where things can, I guess, incubate. It's like I have this
really cool idea, I'm just going to go do it. I'm going to contribute it. Then you're saying that
at some point they may actually go into
.NET MAUI itself. >> Yeah. See if I can
add something here, we have like the week event
manager that was added by Brandon Dominik and it's
already on the .NET MAUI. We package it from the
Xamarin community toolkit and is on the .NET MAUI, a core project itself. Everyone's commits to MAUI itself that when you
use that framework, you can't take advantage of that. Also we have another
feature that we are talking to maybe put
on .NET MAUI there is the status bar color so you have the ability
to change the stats bar color for Android and iOS and
let's see if that goes in. >> That's super cool. I'm
seeing you browse here, Vlad. I've all of these
behaviors and converters, so this is super nice because this is like the super common
functionality that developers may be wanting to do and they can just grab this
package and go basically. >> Exactly. They just need
to install this package, make some additional one line
of code for initial setup in MAUI program and build this to
initialize our community toolkit. That's pretty much it. >> Cool. Do you want to
show it off a little bit? What's new and what's like getting ready for
developers on this one. >> Yeah. Let's go to Visual Studio. What is just unique. I will show it on my
sample application. This is the .NET MAUI
application latest version. First of all you need to install this Community Toolkit MAUI package and you need to initialize it by
calling this method for builder. It's pretty much it here. Now you can use all controls, all stuff which we have
in our community toolkit. >> How cool. >> Yeah. >> Super simple. >> Exactly. For example one control which was
recently added like drawing view which actually support
the new handler architecture. You need to import some namespace from the
toolkit and now you can use all controls which we have there like
uniform items layout. You can use some of the
control like DrawingView. We have popup for all other converters which
we have in our toolkit, can be used in your application. >> Very cool. So you said DrawingView as something
that was more recently added. What is that? >> DrawingView is the control, which allows you to draw some lines. If you remember the
signature pad of Xamarin. If the next version of it, which was migrated to Xamarin
Community Toolkit and now it's a part of .NET MAUI Community
Toolkit and how it works, let's see in this application. You can draw any lines here and
you can make some background. You can specify the
line width, line color. Do whatever you want. Just draw some lines. For example, I prepared
the small image. >> Cool. >> Know this guy? Yeah. You can draw it so you can create any drawing
application, whatever you want. It can be a drawing. It
can be a signature pad. It can be like this one, just like a paint application. You can use any lines for example or some gestures which user can associate with some
actions. Whatever you want. >> Well, it's super cool. I'm also seeing that the
uniform items layout, I'm assuming those like colors
over there that's making sure that each item inside of there is the
same exact size. Is that correct? >> Yeah. Uniform items, the [inaudible]
calculates is simply out. It's similar to greet and
it calculates the first. It means that the size of each item here is the
same as the first one. All items here have the same size. It's automatically
layout all content here. >> That's really cool. I mean, obviously the drawing of you being able to just have a view, have a canvas that you
can draw on is amazing, but I'm amazed by
the uniform layout. I feel like that's something that back in Android days where
I would write Android XML, I'd have to do that for Android, and it was always a pain to do that. It's really cool
there's just a layout now that's like here we are, done. >> Yeah. It's also supports
some additional fields like marks rows and marks columns. You can even specify how
many. It's similar to grid. >> Yeah. >> It automatically moves
your items to the next line. You do not need to care about
building the grid and put some item in the specific row so
it will automatically layout all items
which you have here. >> This is amazing. I honestly
had no idea that existed, and this is like blowing my mind. I'm going to use that
in all my applications than doing all this manual work, but it's just a layout. That's so cool. Oh my goodness. I think that's so neat.
Obviously the drawing is absolutely mind boggling. Is this a sample on
the GitHub repo or is this something that you
just built on your GitHub? >> Yeah, you can find this on
MAUI's sample on my GitHub and here I go all samples and one board probably someone who is interested
in some stuff with the SQLite, some notification stuff
and so much more. >> Awesome. >> Interesting, yeah. >> Yeah. I'll grab the links and
I'll put them in the show notes. If people are looking to
just get started somewhere, this is cool because I think a
lot of times people are looking to get started and they
don't know where to go. Like they have this idea of creating a drawing application or something like this and you basically
built an entire MS Paint, which is amazing, so cool. It didn't look like that much code. You just set up some
buttons. Vlad, one question I have for you really quick
is on the DrawingView, while I have you here, how
does the interactions work? Did you actually have to draw stuff
or how does that actually work behind the scenes or
is it just doing it automatically with touch events? >> We use .NET MAUI Graphics as a background where you
can subscribe on mouse and touch [inaudible] all that
when we save some points. We support multi-line
mode which like here, you see that's from
multiple lines allowed. If we said just one line the next
time we should start drawing, it will be just removed and
redrawn with the new one. Also we have some drawing action, so which gives you access
to the Canvas like here where you can just draw
whatever you want on canvas. We also have some command events, so you can find more
details on documentation. But as you mentioned,
in the background we just use .NET MAUI Graphics. >> Very cool. I also
love that you're using the MVVM Community Toolkit as well. Part of the .NET we had
Sergio on recently. I did a video, I love it. It's so good. It's in my
workshops, it's in everything. I think it's just like the
coolest part there too. I'll make sure I put a link to the video for that as well in
case people are missing on that. >> Actually, I found this
stuff from your video, so thank you very much. >> It's cool. Because
there's a bunch of different community toolkits and a lot of them can be used
together. Super cool. I'm glad of the video
have. That's awesome. Pedro, I know you have some other stuff too you wanted to show off. Do you want to? What
do you got for us? >> Sure. I have to show up
the popup control and is a control deliver
it for us by Andrew on the Xamarin Community Toolkit. This is something that
I want to point out as well because like if
you have a plugin, if you have a control, if you have something amazing on
your project that you can't open source it but you don't have the
time anymore to maintain that, talk to us and you
will still go back to just see if you can add these feature to the
community to keep you, maintain it and deliver
that to the world. The case of popup was exactly that. Andrew have been using each since forever on his
application in production. He mentioned, okay, I
talked to my company, to my veteran and he
said that I can open source it and I want you to bring
it to the community toolkit. Say, oh, yes, of
course, we want that. I just moved that to .NET
MAUI community toolkit to use their handwriting stuffs and to let me share my screen
real quickly here. This is our simple application that you can find on our repo here. We had the samples and inside the samples we have our MAUI application. I'm
just re-running that. If you want to check it, just clone or download the
report and you are good to go. Here we use the native
popup for each platform. For Windows is the Flyout, for Android is a dialog and iOS is a view controller that
we draw out the popup. Here is showing that we can show
the popup inquiry in your view. Like the popup is just
a black circle here and is related to this X label. I can move this label in the
popup view handler above that. This is just great for you
have a form, your screen, and you want to show a
little tip for the user, when you press some question mark, this is the way to go. Also, we can control, for example, the positioning of the
popup so we can present on the top of the screen and
the middle of the screen, on the top right of the screen, in any place that you
want to just show that and to have a lot
in a lot of stuff. We can change the size of
the popup in real time. After you present your popup, you can change that because
everything's bindable. We have popup with buttons
that we can return some value, if the user press okay, if it is a little form
for login or sign up, you can grab out that information and a tree to that when
the popup is dismissed. Also the popup is dismissed
when we click outside the area so we can also avoid that. If you have a popup that
you don't want your user to close this popup tapping outside, you can do that. You
can control that. The popup will be
[inaudible] dismissed when the user do
whatever you want to do. We have also a transparent
popup like this so we can just show some icons here. It's very simple but it's
a very powerful feature. They don't have too
much to show here, but it's on our sample. Looking through the code here like you can see is just
a normal XAML and our popup works similar to the navigation view
because to trigger that out, you just need to call the show popup methods and the show popup method
is tied to a page. It is a control page. You
need to have a page and using that page you can show up a popup
wherever page that you want. If you want to anchor a popup, just pass the view and
set the view on the pop up here and the popup will
calculate that for you. That's pretty much it. >> That is super cool. When I think about popups, I do think a little bit
of different sizes. But I think what was really
cool is that you were showing that you can move it. If you wanted to do a tutorial
for your application, you can highlight and
walk them through it. Those popups are interactive
like you show, too. It's just a view in a different
thing. You can put anything there. >> Type of view. Anything
that you want to put inside the
vertical stack layout, control, whatever,
you're good to go see. Of course [inaudible] as well, if you want to coding,
your [inaudible] in C#. >> That's awesome. I love it. Again, all of this stuff, I knew that some of the
stuff was in there, but, seeing it, is just so cool. One question for you two
before we wrap it up is, let's say you are someone
that wants to contribute. Both of you are from the community. Neither of you work at Microsoft. How was it working on
this project and actually contributing from the
outside on this thing? >> You are asking how we came to the team or how we
start to contribute? >> Just like how is it working
on an open source project of this size and working with the members from Microsoft
and things like that? >> It's amazing because
like for my background, I never paid for a C#
course, a Xamarin course. I learned everything from
the community for free. I want to give back to
the community what I grabbed and I start
contributing to open source. But actually I was having more more thing back to me because
having like amazing engineers, that's the Microsoft
team reviewing my code to teach me how to
code is just amazing. Is very, very good to work in a project like this size
because I can say to everyone, hey your made this app
using Xamarin or MAUI or you're using the
community tool kit. You have my code on
your application. It's pretty fun.
It's pretty amazing. >> How about you Vlad? >> I also agree with Pedro and
it's awesome to be a part of Community Toolkit and contribute
there because you can promote, control which you need for your
application and develop it first. You communicate with
the Microsoft team and you get their feedback. You get their answer for your
questions if you have any. You learn much faster, you actually develop some
preview stuff. That's amazing. >> That's so cool. Well,
thank you both for really coming on and showing
off awesome features and congratulations on each of the
releases as they get out there. It's been really fun
to see it evolve. Thank you both for coming
on. I really appreciate it. >> Thank you for having us here. >> Thank you. >> Awesome. We'll put
links to everything that we showed here today. That's going to do it
for this week's On .NET. Of course, you can find this video
and all of the other ones on the .NET YouTube or
docs.Microsoft.com. There's a shows page you can
find on .NET right there. Boom. We're here every single week. Of course, we have tons of
live streams @live.dotNET, which is really cool
and on the YouTube. If you made it this
far in the video and you're on YouTube,
give it a thumbs up. [inaudible] the video. Of course, don't forget to
subscribe wherever you're at so you get notified every
single time there's a new video. Well, I'm James
Montemagno and this been another On .NET, and
thanks for watching. [MUSIC]
