If you're like me, when you're laying down your content and your.NET MAUI
applications, you want a really good looking card view, something that
will really make your application pop.
And today I'm gonna do a bunch of live coding.
On demand live coding.
If you will, cuz from scratch, we're gonna build a full.NET MAUI carve
view with all brand new controls, borders, shapes, shadows, and all that.
Goodness in.NET MAUI in just a few lines of code.
So tune in.
Hey everyone.
I'm James and on a recent live stream right here on my YouTube channel.
Y'all taught me something really amazing, which is how to do a bunch of custom
drawing with brand new.NET MAUI controls.
Now in the past with Amin forms, when I wanted a card view, I would use a frame.
And a frame was a nice control cause I had borders.
I had little shadows on it, but it wasn't really super consistent across
the different operating systems.
And in many of my source code examples, you'll still see frames everywhere.
Can't get rid of them.
However, y'all taught me that there are brand new controls, including
border and shapes, geometry and shadows that I could use to really
make a beautiful custom frame card.
Automatically with no frame control involved.
And the reason that we don't wanna use a frame is cuz they're not as
performant as some of the new controls.
So let's jump into visual studio and start coding.
All right here we are inside of visual studio, 2022.
Now I just did file new project.
I called it Maui card view.
That's what we want to create.
Uh, and we're gonna create it.
All I did was hit debug and I have my Sammo live preview right there.
It, my running applications right here, but it's cool to get it side
by side so I could just start coding.
All right.
So what do we wanna do?
Well, we don't wanna use a frame, like I said earlier, but we wanna
create a card view and I'm gonna go in and I'm gonna create a border.
Now the border is going to be our card for all intents and purposes.
And what I wanna do is give it a with request of 300 and I wanna
give it a height request of 100 and let's just see what happens here.
When I hit.
Well, right over here, we can see my little borders popped up.
If I hover over it, it's very thin.
Uh, we can see it's 300 by 100 and it's gray.
Just the default color.
Well, we can change that color if I just say, uh, stroke.
And I say orange, for example, and hit save.
Now we can see that it's orange.
When I hover over it, we could also give it a stroke thickness and let's say four.
Now we can really start to see this thing, you know, inside of our XAMLlive preview.
So that gives us, you know, it's not really a card at this point.
Right.
You know, you might wanna give it a, a background color.
So we could say a background color of pink over here.
Now we could put some content in there and a border just takes any piece of content.
So you could put, uh, stack layout in there or images, anything like that.
And we'll do that here in a few minutes, just to kind of get it in there.
Now, though, we can do other stuff with it.
If we come in to our.
Into our, uh, border.
We actually have a stroke shape property here.
Now the stroke shape takes in a bunch of different geometry.
So if I scroll down here, we have all sorts of it.
Lips, geometry, path, geometry, uh, round rectangle, a bunch
of different things like this.
So you can create rectangles round rectangles, all this
other stuff directly in here.
So you can create.
inside of this extended property, but I actually just like to use, um, uh,
the inline, uh, property right here.
So you can say stroke shape and this works really good with hot reload.
And I can say round rectangle.
Okay.
Now when I do that, nothing is gonna change because I
didn't set any corner radius.
So if I set something like, uh, 10 hit save, we can now see
that we have this nice little.
Corner radius right here.
You can see it right there, cuz you can see that it does it there.
So if I, if I was to do 40, for example, now it's giving us
corner radius on 40, on each side.
I could specify for example, 10 space 40 and now we're getting 10 40, 10 40.
I could of course do like 30 and then one and I can get all sorts
of different, you know, basically corner radiuss inside of this thing.
So that's, you know, top left top right bottom right bottom
left inside of here or no.
Let's let's do this.
Let me just ly check here.
10 that's 100.
Okay.
So top left top right.
Bottom left.
Bottom, right?
Ah, tricky.
So there we go.
So now we can do round rectangle.
Now that's looking.
Halfway at this point right now at this point, I might say, okay, well,
let me just do a round rectangle.
And I just basically created a card view, but then you're probably saying,
well, that's pretty cool, James, what else could you do with it?
Well, if I wanted to, there's all sorts of other geometry.
So if I wanted to, I don't know, cut out some crazy polygon.
I could.
Could do like a polygon right now.
I have this crazy polygon with these different shapes and
different things inside of here.
And I could start drawing tons of crazy things.
Right.
I'm just like literally cutting out stuff inside of it.
Well, we don't want that.
We want around rectangle.
Right.
And that's how we're gonna go ahead and draw over and over again.
Now we're getting closer to what we actually want.
Um, inside here, we probably want some sort of, I don't
know, shadow, for example.
So inside of here, we can actually use the brand new shadow property over here.
So I'm gonna go in, I'm gonna say border dot shadow.
I'm gonna give it a shadow.
Now, all I need to do is give it a brush and let's just say black, for example,
and then I can give it an offset.
And we'll just say one, one.
I don't know.
That's probably good.
And then I'll give it an opacity of 0.8 and just like that we now have.
A little tiny look at that.
You zoom in here, look at that.
It was little tiny shadow that we have control over.
Right.
We really wanted to offset this by like 10, 10 hit save or
actually gonna get thicker one.
Right?
So this is the X Y offset here.
So you are really in this fine grain control of what you want.
If you want that to be, you know, red, for example, you can make it red, right?
So you're in real control.
The other nice thing is that this is gonna work with things like app theme bindings.
So for example, if on your stroke, you wanted to say, well, I want this, for
example, to be an app theme binding on light theme, make that, um, blue and
on dark theme, make it, um, uh, black.
You can do that right now.
We have blue cause I'm over on my light theme and you can do the
same now in your background color.
Right?
So this is also cool.
You can say app theme, binding light.
Let's do, um, um, orange.
It's gonna be crazy cause I have all these colors and I'll say dark, let's make it.
Um, Let's make it pink over here.
Now I save it.
I get orange right now.
What's great.
Is that you can also use those predefined resource styles colors over here.
So you can use these grays and these brushes.
You can do all this stuff here.
Now you have your card view.
That's all set up.
Now, beyond that you may wanna put in some content.
So I think the cool part is we've created a card.
We could put pieces of content in here.
So if we wanted to put this hello world in here, we could just
put this hello world in here.
Now we have hello world and it's inside of the card.
Right now beyond that we could take this, this border.
We could then put it into a custom control view.
And then what we can do is go ahead and create like a control template
and I'll link to docs, how to do that.
But it's very similar to like a component inside of blazer.
So you can actually reuse this border and put content everywhere, but I wanna
show you one other thing that you might wanna do besides creating a card view.
You might wanna create a circle.
Image for example.
So let's say we had a image of a monkey, for example.
So instead of this label here, we have a image of a monkey and we have our monkey.
That's pretty cool.
So what we could do is we could go in and we could say,
well, let's make this 100, 100.
All right.
And then what we could do is we could say, let's make this 50 for
the round rectangle, just like that.
Now we've done is we've cut that circle out.
Now we can see our shadow is a little bit funky right here.
So in this regard, I'm just gonna have to restart the application for
that shadow to take advantage of that new custom drawing that's going on.
So if you don't see some of that stuff update just hot reload, you can only do
some of the, some of the things in there.
Let's go ahead and pull this over.
And now that we can see on our exam live preview, but to zoom in here, there we go.
We now have our monkey.
And then if we go in and we say, I know I just want this to be one one.
Now it's gonna be really close.
We want it to be like ten one.
You know, you kind of have that fine grain control over your circle, images
and card views with M Maui there you.
We're using all brand new APIs and only create a card view,
but also a circle image all with the border control and.NET MAUI.
There's tons of stuff that you can do.
I'm gonna put links to the documentation below.
I just love it.
I'm so glad that y'all actually.
Told me and convinced me to use it.
When I was doing the live stream, I was against it.
I was like, I'm using a frame, but this is way more efficient.
It gives you more fine grain control, really over making those really
elegant, um, you know, card views and image views, and things like this.
So when you're applying light theme, dark theme, you wanna do different stuff.
You can go ahead and use this.
Anyways.
Like I said, I will put links to not only this source code, but put links over into
the documentation and documentations on creating those content provider templates
that I've talked about in the past.
And so as Gerald, the bunch of other people, so you can then take that
and make it a reusable component.
Hopefully you found this video, helpful tips and tricks as I'm learning.
Hopefully you're learning with me and learning some of these
really new, cool APIs in Donna.
Well, it's gonna do it for this video.
Leave your comments below on any questions you may have.
And of course, don't forget to like this video, if you did enjoy it and go
ahead and jam that subscribe button.
If you wanna subscribe to videos that I put outta your every
single week on my YouTube.
All right, let's gonna do for this video.
So until next time, thanks for watching.