Create Reusable UI (7 of 18) Building Apps with XAML and .NET MAUI

[Music]
hey everyone welcome to another episode
of Visual Studio toolbox part of our
ongoing miniseries all about getting
started withn net Maui and zaml
applications I'm your host Leslie
Richardson and I'm your ho your co-host
Robert Green and I'm your presenter Paul
Sheriff yep we're gonna have that whole
Spiel memorized we are by the
end
so this is episode seven seven of our
multi-art yeah of our multi part Series
in the last episode we talked about how
easy it is to route from one page to the
next in your application and this time
around we're going to talk about some
good old reusability practices when it
comes to creating UI so Paul hand in the
rins to you let's dive in so you know a
lot of times we need to have like a
header across multiple Pages or maybe we
have
address and we need addresses on
customers employees things like that so
the way we can do that we can create
reusable content and I'm going to create
another folder here so let's add a new
folder I'm going to call it uh partial
views wait a minut I create it views
partial that way everything kind of
sorts the way I want it and then we're
going to go ahead and add another new
item but instead of doing a content page
I'm going to do a Content view content
views are made to be reused and placed
on content Pages I'm going to call this
one header View and we'll go ahead and
add this and then we'll just add a grid
where this vertical stack layout is and
if we take a look at this grid this
might look kind of familiar to you if
you remember our user detail these were
the first like three lines that we built
it has the title it then has you know a
kind of a description and then that box
view if you remember that box view that
we have so all that stuff looks pretty
much the same I have the grid I have the
road definitions I have the label I have
the box view where he's still using the
grid. rows and column spans and all of
that but I got a little extra little
thing now we haven't talked about data
binding yet but what I want to do is I
want to able to pass in from the main
content page the title and the
description that I want to display on
this reusable header so I'm going to
create a binding down here to what's
called The View Title and the view
description now I put the path equals in
there just because a lot of WPF
programmers are used to that in Maui we
don't use that very often okay so you
don't really need to use that so the
question then is how do I get a View
Title and a view description on this
page that I can bind to well the answer
is with what's called bindable
properties and we do this in the code
behind so I'm going to come here and I'm
going to add a little bit of
code so let's kind of expand this out a
little bit so I'm adding a public string
View Title it's got a typical get a set
so that part looks familiar but then we
have this thing down here public static
readon bindable property and then it's
View Title property equals bindable
property. create sorry did not mean to
double click on that and then View Title
so type of string this is going to be a
string value so I change that we're on
this header view so we're using that
type and then I give it a default value
which is string.empty I could of course
give it whatever I want but this creates
what's called a bindable property and
then since it's on this particular uh
class right here I can then use it and
bind to it here in the zaml once I've
done a couple of things okay well
actually one thing I have to do is set
The Binding context equal to this class
that's the main thing that we have to do
there now if I want to give it some
default values I could actually
initialize those here
like
so there we go so now I've initialized
the properties and I have bound those
properties by doing this binding context
equal to this so that means this has it
contains View Title and view description
we're going to be covering more about
data binding later on but I wanted to
show you this because it's kind of
important for these reusable uis where
you're going to want to be able to p
pass things in so let's now go back to
our user detail view because this is the
one where I had the label the two labels
that have kind of the title and then the
description and the Box view now what I
want to do is I want to get rid of this
right so I'm going to get rid of these
three put one back so now I only need to
remove two of these Autos I know need to
remove two rows now what I want to is I
want to use that header view right here
you'll notice it doesn't show up Okay
the reason why is because it's actually
underneath as views partial so that
means it's in a different name space
right so you can see the name space here
so that means I need to reference that
namespace so I have to come up here and
do an XML
namespace okay and I'm going to call it
partial and I'm going to do Adventure
Works views ui. views partial there we
go and now I can do partial there it is
look at that header view so if I hit
tap okay now I can do grid. row is equal
to
zero and grid. column span is
two and then look at
this there they are there's those two
properties because I Define them in the
code right it gives them to me as
properties so can set the View Title to
user
information and I can set the view
description equal to use
this screen to modify user information
so whatever kind of description of this
I want okay and then we'll close that
tag and there we go so now the only
thing I have to do is I actually have to
since this is grid row zero I now need
to rumber these unfortunately I haven't
found a way
to renumber these all right in uh WPF it
was really easy to do it through the
editor here inet Maui at least so far I
haven't found a way to do it I'm hoping
they're going to add
this um in uh sure no that should have
been five sorry uh hopefully they're
going to add it in the next version
where they'll have some mechanism for us
to do this all right so now I should
have 0 1 two 3 4 five for all of these 0
1 two 3 four five six is that right yeah
six there we go all right so if I've
done everything correctly right should
be able to run it and we should still
see everything like it did before and
maybe it's a little might look a little
different just because I think I changed
a couple of things there but this is one
way that we now have a reusable piece
that I can now take and I can put it on
the other Pages as well right so if we
go here to the users and we navigate to
that detail there it is now I've
centered it okay the box view is going
across that way so it looks a little
different but it's still the same
information so now all I got to do is do
the same thing over here on each of
these others right so if I go to the
product detail view I'd have to do the
same thing XML Nam space partial and now
it's not going to give me the
intelligence because I gotta
stop I always got to stop stop stop and
but obviously it makes sense right I
mean we can't do everything so all right
let's go ahead and do this one so I'm
going to add a lot more stuff though
into the product detail
here take all this out and look at this
I'm going to give us a nice big lots of
labels and entries and then there is our
reusable header view again but I changed
the View Title and the view
description okay so that's kind of nice
let's do one more let's do our login
view so again I would do the XML name
space
partial
works. Muse uh M partial that's the one
great make sure you get the right one
there are a lot of name spaces that will
come up there all right and then let's
go ahead and change this guy here as
well so it looks more like a login page
but again using our reusable code and
we'll build more a couple more of these
as we go throughout this series here
let's go ahead and try this out and make
sure they're all working up to this
point
but you can see the power of this right
there's
reusability so there's our product
information screen and now you can see
I've got a lot more here I didn't do
anything on customers I did login so
there's our login
screen and of course our detail screen
so we're reusing that code instead of
duplicating
it very
nice now like I said I mean there's a
lot of things that I think you'll find
that you can do with this um like I said
like you you'll have addresses for
everybody right customers employees
whatever so that might be a great
reusable thing I think we're going to
build that one coming up as well I think
you're going to find a whole series of
things that you do with this um use it
for help for instance that might be
another thing you do put a help little
help button on every page and that help
button and all the all the code behind
can be Consolidated into that one place
too right so yeah you can do your own
cancel your save cancel you can do small
things you can do large things
absolutely yeah yeah so a really good
use I think um is to keep trying to use
these reusable uh you know widgets if
you want to call them and again the key
here I like keeping them separated into
a separate folder uh that may be just me
I don't know but I personally like them
so I know which ones are the reusable
ones which ones aren't um so I'm really
big on keeping my folder structure big
uh nice and separated okay and when
you're doing the ad new item make sure
you're using the content view zaml all
right as opposed to the content page the
content page is for a whole new page
that you want to develop content views
are the ones that you wish to reuse over
and over again cool so this kind of like
um if you're familiar with blazer
applications having different components
that you can Define and then reuse
across
whatever Pages you you're interested in
in the web context absolutely and you
know in U you know in uh what is it MBC
you'd have like you know the little
partial guys that you bring in it's a
partial tag and in WPF it's a user
control right and we had those in
Windows forms too if you remember back
then so yep so we've always had this
concept of reusability you know you just
have to take advantage of it and make
sure you're really thinking ahead to
can I use this again don't go overboard
with them but you know really think
about and you know you might start
building a couple of pages and realize
oh wait a minute those things I just if
you're copy and pasting from one place
to another stop yourself right and
refactor just like you would do a c or
any you know VB doesn't matter what
you're writing if you find yourself
copying and pasting stop and refactor
put it into something that's reusable so
it's the same thing with UI I think
right what's up next well next we're
going to start looking at some borders
and frames and we're going to use that
in a couple of places plus we're going
to build that reusable address uh
control right cool all right so tune in
and then till then Happy
[Music]
coding