Create Your First Application (2 of 18) Building Apps with XAML and .NET MAUI

this time we're gonna get started
writing an actual application I'm super
[Music]
excited hey everyone welcome to another
episode of Visual Studio toolbox I'm
your host Leslie Richardson I'm your
co-host Robert
Green and welcome to part two of our
series on getting started with zaml and
Maui super exciting in the last episode
um we're joined once again I should say
by Paul Sheriff hey Paul hey yeah in the
last episode we gave a brief overview
about what uh Maui and zamel are and why
they're worth your time and this time
we're going to get started writing an
actual application I'm super
excited yeah that's right we're
basically going to kind of delete the
default template that Microsoft gets us
in preparation for building our business
application we're going to learn a
little bit about content page and the
shell and that'll be kind of what we
dive in on this particular episode cool
Sweet let's do it all
right so the default template that they
give us as we saw was that little robot
and we're going to go ahead and just
basically kill all of that code in there
and then all I'm going to do is put
in a
label now when you're building these
things you can just type and you see we
get really great intellisense
here and they have different attri that
you can add to each one of these
elements here so we can set the font
size now I really like this instead of
actually specifying a font size like 22
points or 24 points or whatever they
gave us some really nice demonics here
for different sizes so that to me is
really cool now if you've used any other
version of zaml you probably Ed some
things like you know Center left and
right vertical and horizontal alignment
well now we use what are called vertical
options and we can use centering or we
can do left or fill or sorry sorry
centering ending or starting or filling
and by the way you see this Center end
fill and start you see the center and
expand end and expand those are actually
obsolete those will be going away so try
not to use those at this
point all right and there we go so now I
have created a label that's going to be
centered Within the content page and
that's that main page that we're on
right
now now this isn't going to work because
there was a little bit of code behind if
you remember I clicked on the button and
the button then incremented that code is
in the code behind back here so just
like most things with Microsoft you
double click on there and you can
actually get back there if you're on
this here you can actually hit F7 if
you're using the default keyboard you
haven't changed it because obviously we
can change everything in visual studio
and I'm going to delete delete the
counter and I'm going to delete this
little click event here and again if
you've done any sort of programming with
Microsoft in the past you're familiar
with all these click events and things
like that but I'm going to we're going
to cover a little bit more about those
later for now let's just go ahead and
get rid of that so now what I've done is
I've just simply created a label on this
page that's going to be centered and I'm
just changing it so we can get started
building our application so this is what
called the content page this main page.
zaml okay this is a Content page type
and all it does is allows us to host
other controls so you can see I've now
eliminated all the stuff that's on the
template and I simply have a label now
that's in a large font and centered
horizontally and
vertically pretty
simple now notice up there you see the
home right here right okay so some of
the things that we can do is we can
actually add a
title like so and if I then just go back
here and come back you see the title has
indeed changed okay so what's neat is if
you kind of
just you know get your screen a little
bit here let me just go a and take that
away for now if we can if we start
changing things
okay and then as soon as you move off of
it you can see how it changed actually
don't need to move off of it it just
pause for a second and you can see it
changing over here on the live screen so
this is what's called that hot zaml
reload and this is really nice in Maui
because in WPF we actually have a
designer window where you can see things
but here we don't okay
yeah yeah and it's nice because I think
it makes it easier to experiment with
different layouts and stuff especially
if you're not necessarily as well versed
in web design so yeah gives you the the
space to try new new things without
having to wait for every you don't have
to stop the app start it go back to
where you were you can just be on that
page even if you're 10 screens deep into
the
application exactly yeah it's awesome so
that works on the emulators too doesn't
it correct it does so you know if you're
doing one the Android if you're really
targeting Android you want to use one of
those emulators that we talked about
before it sure it still works just as
well there might be a couple things like
if you're designing a list and you're
doing a collection view or something
sometimes those you might have to
restart but for the most part it should
work pretty well yeah for Pure UI it
works great correct now you can type
directly into the zaml here you can also
bring up your properties window and when
you you
know click Within one of these controls
it'll tell you the type that it is up
here and then you come down you could
actually find the
title and once you hit enter it will
actually put it into the zaml for you so
you do have a couple of different ways
that you can go about doing this other
things we could do we could change the
background right we could maybe make it
a gray color so you can see it's gray
now right so all we're doing is change
in things about this main content
page now what about this little part up
here right so this is the typical
Windows stuff that we're used to right
the title bar we have the minimize the
maximize and the close this is what's
called the shell now you're not going to
get this on an iOS or an Android right
but the shell is actually controlled by
the app shell. zaml file that we see
right here if we bring this one up okay
so we could add a title on this guy as
well all right come on fingers work and
now you can see the title up here on the
Windows title bar has changed okay now
it's not like you have to do this you
know you don't it depends on kind of
what you're targeting and what you want
um and but what's nice is you have the
differences here where you can
actually the title on the shell and the
title on the content page can be
different okay you know if you don't
want the background cool that's easy all
right um on the
shell there's a couple of ways you'll
see that you can do this you could
actually set the title like we did you
can also do
shell. title color you could set that to
Blue okay so now you can see the uh blue
here okay or you could do black I make
it show up a little better all right so
the shell also controls certain
things
okay about the shell and or that content
page so here you can see I've now
changed that background color on the
shell to gray okay so lots of different
things you can do here I don't really
want those right here I just kind of
wanted to show you some of the things
that you can do okay
all right and again once again if you
bring up you do the uh what is it view
properties I don't know where it is
anymore name everything moves all the
time properties window there we go so
again when we're here in the Shell okay
we can bring up these property wind you
know this property window and we can
change things within here too sometimes
it is actually easier to do things in
the in the properties window I don't
know if you guys find that but sometimes
it just is so I find that I
never use that but every time I see it I
think I should use it more I'm kind of
the same way but you know you and I kind
of got weaned on zaml back when we were
using visual
notepad exactly but it's a great way to
see all the properties in one place so I
think that's helpful if you're trying to
learn more about what the things you can
do absolutely I I really like that that
that to me is kind of fun but you will
find sometimes when now you know items
aren't really applicable here but if you
are adding some items okay and we we'll
talk more about this later but some of
these are actually pretty easy to do as
opposed to having to remember how you're
supposed to do it in the zaml right so I
do like some of these you know um these
various designers that they did build in
so when you're doing some of the items
and for this one and this will change
based on which control you're using here
it's it used you can see there's a shell
content okay and if you drop down this
you'll see that there's a shell item
okay but there are some other types
depending on if you've maybe loaded in
some thirdparty uh software that you
know maybe gives you some different
widgets that you could add in so that's
one thing I really like about using the
properties window sometime is some of
these different designers yeah so yeah
all right cool
so another thing that I kind of wanted
to to show you really quickly here and a
couple of different things actually so
you can see there's a couple of
different uh there's a zaml live preview
window okay there's a live property
explore that you can see here okay so
when you're when you're on this Explorer
now let's go back to the main page
here okay and why is this not refreshing
here did it
not and I thought it was
refreshing it is no name come
on all right now it might be hold on
okay there's a couple things I wanted to
show you this one may only work when I
turn on another options this is one of
the options I did want to kind of point
out here too so when you're working in
here if you go to debugging on tools
options and you go to debugging there's
the zamel hot reload
lots of options you can turn off and on
within here so I wanted to show you this
so again if you want tools options
choose debugging hot zaml reload one of
the things you can do is you can enable
just my zaml in the live visual tree so
you'll just see your stuff you won't see
any of the things that come from
Microsoft you can also enable the inapp
toolbar so let me click okay on that and
look what happens above your right below
your title bar here you get all these
different things so you can go to to the
live visual tree and you can scroll down
and you can actually see how things are
running this is cool it's like one of
the newer additions right to the Maui
space toi yes yeah so cool just like
makes it a lot easier to explore
relationships it really does it really
does um you know I like the live preview
that's kind of cool you can do some
things with that that but I use the
inapp toolbar a lot because especially
to kind of drill down if I go into this
live visual tree you know you can look
at different things here which I think
is really slick um so once you do this
if you then um let's see bring back up
that
uh live preview oh did I close it I
closed it I apologize where is
it it's so hard to find everything
sometimes isn't
it oh my God so the live property
Explorer
so let's open this guy
so this guy is this the one that does
this I thought this was the one that
updated here am I thinking of the wrong
I think I'm thinking of the wrong thing
I apologize there are so many
windows as you can see so but if you
focus on this little area right here
okay we have the live visual tree which
we're seeing over here on the left hand
side that live property when you click
on something it's supposed to show you
all the different uh things and what
their values are we have the zaml live
preview which we've seen okay and then
there's also the zamel binding failures
this is I love this we didn't have this
years ago we used to have to just pick
the uh select from the output window and
you could see which bindings were bad
and we're going to talk about binding a
little later on in this session but if
you've ever worked with zaml and you've
tried to find out your binding this
window is Wonder wonderful for finding
those so these are kind of the windows
you use a lot for uh your zaml and
that's Works in you know all of them
right Maui WPF all
those so you can select an element from
here which is really kind of neat okay
once you select an element it'll show
you it'll actually update over here you
can see it move to the app shell okay so
when you're selecting an item see how
it's moved down here to the list label
right it takes you right to it that is
invaluable a lot of times as well so so
selecting an element there's display
your layout adorners if you had any we
don't have any on this particular one
yet um we can track which one is the
focused element so if let's say we have
a form and you have many data entry uh
things as you're moving from one to the
other it'll keep track of which one's
focused and it'll update your live
visual tree for you um I don't have any
binding failures because I don't have
any bindings at this point so even the
scan for accessibility issues now have
either one of you tried that I've never
tried that one I've seen it been uh
demoed before and I I think it's pretty
it's pretty nice especially when you're
working with uh frontend experience like
this and um yeah just being able to get
that double check to see if you're what
you're doing is still accessible it's
really nice to have we need that on the
web don't we yeah
okay so anyway I wanted to point out a
few of those windows because those are
really neat I mean a lot of these are
kind of newer uh to Maui some of them
been around though for a while in you
know WPF some of them are even newer for
WPF or they've been updated which has
been really nice so now I wanted to show
you one thing let's go ahead and stop
the application again and I'm going to
run this one more
time and when this comes comes out now
it does you know again it kind of does
take a little longer for this thing to
kind of come up you'll notice that with
Maui apps it's it gets better as as time
goes on as it loads it a few more times
but you'll notice how the window does
not come up full
screen now if you're in WPF or anything
you know like that you know that you can
usually just set a window maximized
property that's not the case here but I
wanted to show you how you can actually
get it full screen now full screen
really only applies on Windows though
doesn't it because if you're on iOS or
or you know uh Android there's no such
thing it's the full screen always all
right so what we typically have to do is
down here in our Maui program what we
would do is we would do a hash if
windows and inside of here we would have
to do a using statement on the
microsoft. Maui . life cycle
events and you want to wrap it into hash
if Windows because we only want to have
it compiled when we're running on
Windows obviously okay because we only
want to bring that in that Microsoft
name space when we're on
Windows then what we can do is I'm going
to bring in a whole set of code here
let's go ahead and scroll down I'm going
to go ahead and bring this up a little
more full
screen all right I've wrapped now
another hash if here around this set
window options okay so this is a method
that I wrote that is just some code you
can find this readily on U the web
you'll find how to set these handlers
they're called these Maui handlers what
we're going to do is we're going to pass
in the Builder okay what's the Builder
well you can see right up here we use
this Maui app. create Builder to
return a Maui app builder to us and this
is how everything bootstraps right this
is and they do this on MVC now they do
this on the minimal web API most things
now work with these Builders this is the
first program the the first class that
runs this Maui program and then it runs
this create Maui app method and it
builds a builder and then what I want to
do is pass that Builder down to this set
window options and I'm going to now
configure sorry about that I'm now going
to conf figure some life cycle events
and the way that this works you don't
have to understand everything that's
going on in here what's important is
that we're going to get past a handle to
the window okay the main window and
there's only one at this point the main
page.
zaml and what we're going to do is we're
going to get some native window handles
so we're actually making what is this
this is like Windows API calls here
aren't they right so we're dealing with
handles all right so then it's you know
even a window 32 Windows ID look at that
oh my gosh we're going way back okay so
PE buddy just uh turned on the Wayback
machine Robert gets that Lesley's like
what no I've used the Wayback machine
before did you get that okay all right
cool all right I like
that around too okay all right so as you
can see what I've done is what I'm what
I'm getting here is this variable P okay
and this P allows me to do things like
maximize I can set whether the window is
resizable or not I can set whether it is
is maximiz or not and is minimiz so this
is code that is only going to get
compiled in if we're running
Windows and then we simply need to call
this from up here so somewhere after
you've created the Builder so after
you've created this Builder go ahead and
again wrap it within a Hashi Windows
call your set window options p passing
the Builder it runs through this sets
the maximize so that now when we
run the wind the main window is now
going to come up full screen so it
depends on whether you want this or not
but this is customizable by you just by
doing what these these little uh handle
handlers are so there we go
voila that's little trick it's kind of
nice and you know you'll find that for
other environments like if I hashif iOS
or hash if Android things like that
there's some other things that you would
do like there's some what they're called
on platform uh uh attributes that you
can add to certain to things like Styles
and things like that so that you can set
a style just for Maui just for iOS just
for Windows so there are ways to
customize this for the different
environments that you're going to be
running
in cool I like it yeah kind of
neat so that was a pretty good start to
our application so what's up next Paul
yeah so just a couple more things though
that I'm gonna talk about right here
before we then move on to our next
section but uh just wanted to kind of
talk a little bit about you know this is
our project the project has in what are
called properties these are our launch
settings but there's really not much in
here that's configurable you're not
going to do too much in here right now
the platforms I wanted to talk about you
know these are the different resources
for things like colors on the Android so
they have given us defaults Microsoft
gives us these defaults that will work
on Android on iOS okay whether you're
running on the Mac Catalyst okay and
windows of course right so all these
things are just built in which is nice
and then for our our Windows here right
we've got app icons we've got some fonts
we've got images there's that little net
bot guy that we saw um and then Styles
and we're going to talk about Styles a
little bit later as well and then the
last file here that we haven't talked
about is app.
zaml and this is where we're going to
actually create resource dictionaries
and put some Styles and again we'll be
covering that in a later section but at
least now you know kind of what's in
this uh this project to
start
great well I'm excited to see more
right so in our next section what we'll
start doing then is we're going to start
building a little user detail screen and
we'll add that on and and then we're
going to add some styles to make it look
good um we're talk about you know using
some very elastic controls so remember
we talked about how we want to keep
things flow layout so it's hardcoded as
far as top left right and all that so
that's the kind of things that we're
going to just start going little by
little and building up here great cool
yeah so tune in for part three of this
uh very cool series on getting started
with Maui and zaml and until next time
happy hoding
y'all