Create Objects and Bind to Your UI (12 of 18) Building Apps with XAML and .NET MAUI

[Music]
hi welcome to visual studio toolbox I'm
your host Robert Green and I'm your
presenter Paul sheriff and we are
continuing our miniseries on building
apps with zaml andet Maui and in the
previous episode we saw how to bind
controls to other controls today we're
going to go a little step further than
that right Paul what are we going to do
yeah we're going to take a look at now
creating things in C uh which is you
know what most have we have a bunch of
classes and stuff and we want to bind
those classes up because that's what's
going to fill in the data for our
screens right yeah all right before we
do that however I did want to kind of
because a lot of people ask they say you
know having this hardcoded down here if
I wanted to have that same picker and
use it on a few other screens I had to
copy all of that man that's not
something we generally want to do so
let's go ahead and cut it out of here
let's go over to our app doz example
right so if you remember this is where
we're able to put in things like in our
app Styles right we did all of that so
what I want to do is I going to add this
as a resource here now to be a good
resource we need to make sure it's has a
key to it I'm going to call it phone
types so this is just another resource
just like in that app Styles if you
remember the app styles that we
created app style sorry there we go we
created like a string resource and a
double resource all we're doing now is
creating an array that is now a resource
so that means down here what I can do is
I can eliminate the item Source part
here I can then set the item Source
property to that static resource called
phone types
nice so that you know does a couple of
things number one it kind of simplifies
the code here but it also makes it so
that's a reusable ible array of strings
that you could use on other places
throughout your application so if you're
just going to use it once in one place
you can just leave it in line but the
second you need to use it twice right
second you the second you copy and paste
it there you go tells you there's got to
be a better way absolutely absolutely
it's kind of just like in C right I mean
if you're refactoring code you know you
know you're GNA use something you want
to just make a little tweak to it then
you you basically cut it out and you put
it in a new class or something right
that's all we're doing cool all right so
now let's go ahead and start really
start building this up I'm going to add
a new project now into our solution this
will be a class
library and I'm going to call it
adventureworks do entity
layer and I'll make sure we're using Net
7 or if net 8 is out feel free to use
that none of this should be changing
okay I'm going to go ahead and delete
this class one
I'm going to add a new folder called
entity classes here and then into this
I'm going to add a
class so we're kind of classy people
over here so we like to use classes well
I am I don't know about
Robert J's been out on that for a
while all
right so I'm going to create this user
class here all right and it's just got a
simple little Constructor that just
initializes things and if we look at all
of these properties here what do those
look like those look like exactly what
we're seeing on that user details screen
that we've been creating right y okay
yep so now if we go over here and I've
got this in this entity classes over
here make sure it builds of course so
hopefully everything will build and once
it's built you can now come over here
and right Mouse click on the
dependencies and add a project reference
over to that entity layer so that we're
then able to use any of the classes
within that
project then we're going to go to our
user detail view now I want to do some
binding up so if I need to get over to
there what do I have to do you got to
add another Nam space that's right so
now I'm gonna just simply call this one
okay this one's actually going to be my
view model so even right click add
namespace here don't you think pardon
there should be a rightclick add name
space little dialogue that comes up yeah
yeah need put somebody needs to put that
in
uh in
um that's the word I'm looking for where
do you go to to make featur one of our
yeah put that in GitHub so they can add
that there as a little say hey here's a
new feature we'd like feature
request so all right so I've added this
XML namespace and I'm calling it View
model then here's what we're going to do
we're going to add an xon data type here
and I'm going to type in user and you'll
see user and then in parentheses it
tells me the name space that's that that
class is within so if I just hit tab
there it puts it into the right format
what this is doing is this is
identifying to this content page the
overall class that you're going to be
using to bind here and why we do that so
we can get intell sense within visual
studio all right now within this content
resources here's what I'm going to do
view model user and then I'm going to
give it a key name and I'm going to
Simply call it view model and then look
at
this all of our properties now show up
here isn't this cool M all right so all
we have to do is start filling in the
data and I've already got it here so we
don't want to have to watch me type all
of that so there we go I have now
created an instance of the user class
this right here when this runs it
creates an instance of the user class
and assigns the properties to these
values so if I have a real instance of
something I can now start binding these
properties to each of those entry
controls but here's the thing this
border is the kind of the parent now
right of all the other
controls so what I can do is I can set
the binding context one time
here right so I'll do the static
resource Q model OKAY by doing this it
means that I don't have to do The
Binding context on each individual entry
control all right so now what I can do
is for the text I can now do a binding
and look at that it gives me my list
here so this is the login ID okay if I
didn't do the binding context up here I
would actually have to put this on every
single entry control but Microsoft said
well you shouldn't have to do that that
would be just silly so they say if you
put it at the parent level so and all
these other children underneath it hey
we'll go ahead and assume that you're
you're good do you do it at the can you
do it at the content page level at the
highest highest level or does it have to
be at the first okay contain question is
can we put it up here right can you do
this binding context up here so again if
we come down here and we take a
look Okay cool so really it's fine even
though you know you kind of think that
well this is coming before where we're
actually defining it but it does seem to
actually because it all just getting
compiled down right right so yeah now
Community was the words that were
escaping me by the way ah yes
oh so you could make that feature
request there we go developer Community
all
right I digress now you digress so but
personally I do like putting it here at
my kind of my parent level because
that's the place that I'm looking most
often but that's that's just me I mean
you know again there's absolutely
nothing wrong with putting it up there
either so right so what we would do is
we would simply go through and we do the
bindings on each one of these like so
right I mean it's really simp simp
Le try to do these as quick as I can
here by finding
email right so then we get down here we
got the check boxes now the check boxes
obviously are not on a text property
they're on the is checked property okay
so this one is the is enrolled in
401k and then this next one is checked
would be a buy name to the is enrolled
in Flex time so we just keep doing this
little by little we just build this
up is enrolled in
healthcare and then our last one here on
the radio buttons is is enrolled in
HSA all right the switch right so we do
actually have you know switch control as
well this one is is toggled so it's not
a you know checked or anything it's
actually a toggled and I actually have
an isactive property in there that we
can use for that so that's at still
employed
okay now down here we start getting into
the radio buttons so again it's on the
is check isn't it so it's The Binding is
fulltime and then on the radio button
here this is checked okay let's set this
one here is
checked this one is a binding
on uh ouch sorry just hit my thing I'm
still going to bind on the is fulltime
because I don't have an is part-time
but what am I going to use my converter
yeah if you remember I had that nice
little inverted Boolean converter that
nice so beautiful that's a really good
example of using a converter like that
where you've got a single value but you
got two radio buttons that's where
you're probably going to use this most
often so on the date picker we're going
to bind to the date property there and
we're going to bind the birth date and
here in the time picker we're going to
bind up to the uh what is it the uh
start time yep remember what my names
are
there now okay on this one let's see so
is this
one right so this one we're not going to
do our binding context here anymore okay
uh because we want our binding context
actually go to The Binding context of
the parent so we're going to change this
to back to what it really should be
so instead of actually binding to the is
check we're going to actually still bind
it to the is full time right so if we're
not full time I'm converting it then
this will become enabled right and also
that start time will be set right so
I've got two different kind of bindings
there all right now the Picker so we're
down here on the Picker and we've got
the items Source but what about what
about the selected item okay well the
selected item would be a binding to oops
sorry Dean there it is to the phone type
so in that user class there is a phone
type and that's Home Mobile right or
other so does the entry need to be bound
to something the phone
number uh oh yes thank you forgot about
that one good eye so that would be a
text again right MH and then that would
just simply go to the phone okay thank
you I would have missed that all right
well so let's go ahead and run
this and let's make sure everything is
working as we'd expect so and then I
guess we'll talk about the address view
in a
bit um actually I'm not going to even
worry about the address at this point
that's a little bit more to add on so
okay really feel like doing that at this
point okay okay but there you go look at
that there's all our data now being
bound
from awesome this instance right here
so so if I start changing this you'll
notice that it's not changing over here
okay and you also notice right here that
this uh part-time and full time is not
toggling the is enabled on the start oh
yeah boy what's wrong with that
huh well actually I'm not going to talk
about that quite yet okay that'll be
actually be in the next section we're
going to talk about why these things are
not updating okay obviously if I make
the changes here uh maybe I change
another one here to false then we stop
and restart those values will now be
reflected but changing them on the fly
like this doesn't work because we're not
informing the UI through any mechanism
and that's what we're going to have to
do and that's what're okay okay but you
can see that things did change here you
see the values here did change okay so
we will talk about that in the next
section but one thing is I've created
this instance of this user class here
right is there any way that I can get at
it from the code behind right so if I
wanted to get access to that created
component can I do that yeah actually we
can I would need to do a using on the
adventure works and layer right that's
the first step then I can
create a property here that's of the
type user that's the one that we created
I'll call it user object here and then
here's how we can access it in the key
the Constructor here after you've done
the initialized component I can go after
the
resources right these are the resources
and I can look for the key called view
model and I can convert that to uh user
class and there we go it'll Now set that
okay so to prove that out what we can do
is we can come all the way back down
here and we can to add a clicked event
here I'll call it save
buttonclicked I'll hit F12 to have it
create this down here and I'll just
simply do this I'll do a
system. Diagnostics debugger. break like
so let's go ahead and run on this all
right so when this comes
up we'll come in here I'm going to
change a lot of this here let's call
Paul Sheriff 234 Paul
sheriff sheriff psa.com
all right I'm gonna go ahead and hit
save
now okay and if I look at this user
object and I hover over this okay sorry
hover over it there is look at that okay
so the values are going one way they're
going from the UI back to the object but
we saw earlier that when I made the
changes in the xamel to the object it
wasn't going back to the UI right so
obviously we need to do something to do
that and that's what we're going to
cover in the next section but there we
go we've got a little bit start of
binding up objects to our
zaml excellent okay so we're stopping
here with the application a little bit
broken y but we'll fix it in the next
episode so stick around and we will see
you next time on Visual Studio
[Music]
toolbox