Dates, Times, and Drop-Down Lists (10 of 18) Building Apps with XAML and .NET MAUI

today we're going to continue building
out the UI of our app and we're going to
look at dates and times and drop-down
[Music]
lists hi welcome to visual studio
toolbox I'm your host Robert Green and
I'm your presenter Paul sheriff and we
are continuing on in our 18p part series
on building apps with zaml and Maui and
as you may have noticed lesie is not
with us she's unable to make the second
half of the recordings so it will just
be me and Paul but since Paul's the
guest we promise it'll be just as
exciting so previously uh we looked at
switches and radio buttons and today
we're going to continue building out the
UI of our app and we're going to look at
dates and times and drop-down lists
that's right very cool stuff should be
pretty fun so so what we'll do is we'll
switch over to the screen here and we're
on our user information screen we're
going to keep adding to this screen here
I'm going to add one more additional row
and then we're going to go down here to
the bottom like we've been doing we're
just going to insert some areas here so
I'm going to
change these two rows here so we're
going scoo those down and then we're
going to add another
label and we're going to add what's
called a date picker so the date picker
as you kind of expect is one that looks
like just a regular calendar that will
pop up on the screen now this is on
windows so if you you know bring this up
on your Android or your iPhone it's
probably going to look a little
different right it might have those
little things just scroll through to
figure out date and then the uh you know
the day the date and then the year so it
might look a little bit different
depending on the operating system that
you're running on yeah because we kind
of didn't we didn't talk about the
architecture of how all this works but
basically you
write s just as you write HTML and it is
nothing more than the instructions on
the renderer some rendering engine on
how to draw a page zaml is essentially
the same thing and when you build the
application um behind the scenes Visual
Studio is building a native Windows app
a native Android app a native iOS or Mac
OS app so you're going to get the native
control so there will be differences you
just write the ex once and then
sometimes you got to wait and see what
it looks like on the actual platforms
and then you may have to adjust as
needed right so basically they're just
taking that zaml translating it to
whatever the real code is that will
actually run on iOS or Android or
whatever yeah y so all right but this is
kind of nice you know we have a little
uh date picker here so you can choose a
date and then you know of course it
updates the screen and then in a little
bit here we're going to talk about Act
doing The Binding back to a an
object all right so there's a date
picker let's now go up and add yet
another row so all I'm doing is just
changing those row that row definitions
attribute and I'm just adding on an
additional row and most of them are
going to be Auto all right if you have a
list which we'll talk about later in
this uh series we'll probably start
using the asteris to say take up the
most room for that particular list but
for now we're just going to stick with
the
auto so by adding another one that means
down here I'm going to be able to insert
right after the birth date here A Time
picker and then of course I'm going to
increase these rows here by one and now
this actually does look very similar to
what you might see on iOS or
Android this little time guy here right
so you can choose from the different
columns here you can move up up and down
and you can choose AM and PM and you can
just choose whatever time that you want
you click on the little uh check mark
there and that says accept it otherwise
if you'd made changes and everything you
canel it it just stays where it
was all right so time picker we have
date picker and then I'm sure a lot of
you have been doing development for
quite a while and so we always have some
sort of drop- down list where we want
the user to be able to choose
values so we going to give them a list
of values and they're going to choose
one so again I'm going to go back up
here go to
auto and once again we're just going to
increase everything down
here we change this one to 11 this one
to
12 like I said I really hope in the next
version they're going to give us a
little more help on that
so all right so what I'm doing in this
one is I'm adding label as you can see
here on lines 103 and
104 and then I'm using the flex layout
again so I wanted to be aity to have an
entry area and then a picker right so
now the Picker you'll notice that I'm
getting these squigglies here and the
reason why is when you add a picker and
it's got this hardcoded array you must
stop and restart in order for that to
take so if that ever happens to you
you're going to if you see those little
squigglies you just got to restart so
that squiggly is just a hot reload thing
it's nothing wrong with your code you
got it got it yeah so if you're you're
dynamically adding things you're getting
squiggles and you know that that code is
correct it probably just means you got
to do a you know the hot reload isn't
gonna be able to reload that guy so
you're gonna have to restart and then a
few episodes ago you would talked about
the difference between just writing the
straight zaml and using the property
windows so is this a perfect example of
when instead of doing picker. item
Source xarray type equal and then
wrapping all the values in strings that
you could do that more easily with the
properties
window you know I haven't tried that one
that's a really good question let's
actually go here let's bring up the
properties's window I always just write
the actually I never write hardcoded
stuff like
this um I mean but if you doing a
prototype or something you might want do
something like this right so what you're
asking really is could you come in here
and actually go into the items and add
something so I'm I'm sure you can uh
let's see if we do an ad here no see it
doesn't work on the items okay
interesting might on the item Source
let's see okay so let's see
here well I've not seen any direct way
to do it here it's just giv me an object
and the object itself isn't really going
to work for us because we need this for
okay yeah good good question though and
that that would be normally something
that I think you could do um I typically
used it like in WPF when I was building
uh menu items and things like that I
found it pretty helpful um but tell you
the truth I don't really use it a
lot pretty much stick in the zaml which
is I think what you do too sure but
that's how we grew up uh doing that's
right did we ever grow up Robert come on
no that's what we have SP our career is
doing let's put there we go that's
that's a better good
point all right so let's go back here
and so what I wanted was I wanted this
ability to have an entry screen entry
area here and so I can type in a phone
number for
instance and then I wanted to drop down
so the user could choose hey what kind
of you know phone number is this right
so is it mobile is it home is it other
and you see those values here now being
represented here in this picker or drop
down
list right yeah so and the reason I use
a flex layout is I didn't want to use I
didn't want to have to have the grid
three columns I think I mentioned this
before I find it better if you stick
with just two columns for entry screens
if you have more than you know two
things that you need go to this Flex
layout because then if if for some
reason it needs to you know wrap and I
don't think I actually put the wrap in
here on this one so we do Wrap like
so okay and then let's see direction
would be
row and that way it could push this
underneath I think that's another one of
those I got to restart but you get the
idea okay okay so anytime you have more
than one thing in that second column use
the flex layout and that's going to give
you the most flexibility and so so
basically if you narrow the
screen then instead of being off the
screen and not visible that picker would
just flip down below that phone number
okay just like these check boxes did up
here if you remember those were also
wrapped within the flex layout you can
see here yeah so I think the wrap and
the direction I think that has to be a
restart on that or could even just be a
hot reload uh I think it's a a restart
type of
situation so you just want to you know
make sure you're always putting that in
if if that's something that you need I
personally like I said never go beyond
two so I I do use this Flex layout quite
a bit
so all right let's try this out this
should actually give us what we're
looking for here oops there we go let
see mobile
one that oh oh you know what it can only
go so far see look at this it's on the
same here okay so which means that it's
determining that the minimum width is
you're fine basically because that I
mean there's no way a phone's going to
be less than about like that okay right
so so in this particular case it didn't
need it which is great but you could see
let's say if we added a little bit more
room to this right I did a minimum
request here you know if I if I move
this out a little bit maybe it will
cause it to
wrap and for some reason boy it's just
not wanting to is
it so well I I you know I think it's
just one of those things where it's
termining that hey you know what we're
fine but y we'd again have to check with
that and well main thing you try it on
your Android or your iOS and make sure
right cool all right great so there we
go date Pickers time Pickers and those
uh uh drop- down lists which is just
simply called a
picker excellent and then of course
there they come with all kinds of
properties so you can set default values
and you can that's correct absolutely so
you can see on the time I did re I did
set the default time here to 6: am y you
know you can do the same thing on the
date picker you can set the date
property and then maximum date minimum
date Etc oh yeah so if you're doing a
some type of thing where you can only
enter a date that's a week from today
you can set the minimum date to today
plus s Etc you got it and again let's
say you wanted to do something a little
more than Dynamic you don't want a
hardcoded datee in here or hardcoded
minimum and maximum date right that's
one of those times when you would name
this control yep you know the date or
whatever yes yeah because then in the
back you know in your code behind you
can actually use C to say the date. DAT
equals date time. now for instance right
you know and minimum date could be you
know today's date and maximum date could
be plus you know 30 days or something
sure so cool yeah so anytime that you
need to find yourself going to write
some code to dynamically set things like
maybe you want the time you don't want
to default it to 6: am you want it to
whatever the time is right now or the
nearest hour to that right again give it
a name and then in the code behind which
we're going to talk about little bit
more code behind here coming up that's
where you would then be able to set
those particular
values excellent y all right so what's
in our next episode so coming up next
we're gonna actually start talking about
data binding which will be great um
we're gonna kind of got a couple of uh
versions of data binding we're gonna
look at the first one is actually going
to be just kind of binding controls to
controls so like on the screen you want
this control to affect how this control
works we'll talk about that and then
we're going to talk about creating C
objects and binding those
to our UI cool can't wait all right all
right so thanks for watching and we will
see you next time on Visual Studio
[Music]
toolbox