Today, I'm going to talk about shell in awesome shell of your application for
.NET MAUI and Xamarin forms specifically going to break down, what is it, why
I love it so much.
So in.
Hi everyone.
I'm James and a bag of this time talking about shell and really important concept
of both .NET MAUI and Xamarin forms.
It's a shell, it's a shell of your application, but let's actually go
back in time here and talk about where shell came from and why I think
you should use it in most of your applications and maybe not all of them.
Well, when Xamarin.Forms first started, the concept was simple.
You had an.
And you add a page and that was kind of it.
You could have different types of pages, like a simple content page, tabs page,
or a fly out page either sort of rig them all together and sort of combine them up.
Now when you navigated, you had a navigation stack and you would push pages
onto the stack or pop things modally or push things modally and you would pass
objects around, but as applications got more complex, instead of the operating
system, there needed to be a way of adding a structure, sort of an opinionated
way of structuring applications.
What the team did.
Is they created shell in opinionated way of creating a shell structure of
your app that enabled you to do all sorts of things, such as fly out tabs
on the bottom tabs on the top, and also do your Al based navigation and
also respond to query sort of schema schemas to open your application.
And this was really nice because if you want it to navigate 10 pages
deep, you could basically say.
Navigate to and go to this URL.
And then your application would respond because shell knew how to
navigate based on the URL, just like a browser does like the internet
does it's based on a URL of the thing instead of just creating new sets.
So really your application could be stateless in a way,
which is really, really cool.
She means if you're deep linking into your application, it's really benefited.
It also meant that fundamentally if fly outs changed or iOS or under a windows
created a new way of doing fly outs or tabs, the Xamarin.Forms and .NET MAUI
shell could adopt to that user interface and be really highly customizable.
So let's take a look and what this looks like in.
So I created a brand new .NET MAUI application.
And as of today in preview 11, that I have here, when you create
it, it just creates an app.
So standard app over here, we have our namespaces I've done in
Maui and our XAML namespaces here.
And what we'll see is that in our app class, it just
creates a main page equal to.
Main page.
Oh, this is a standard .NET MAUI app and Xamarin forms app
both have an application class.
The only difference is the program startup here.
So here, for example, it creates this class and sure
enough, it's using that app.
Now let's take a look at what a shell application would look like, and I'm going
to be using specifically the, my coffee app that I use to build out an entire
Donna Maui and Xamarin forms, a one-on-one series on right here on this channel.
So make sure you go find those videos.
I'll put links to them up there, over there and down in the show notes as well.
So here is what my app shell looks like.
It is a shell.
So it's not a content page.
It's not a tabs page.
It is a shell.
And specifically here, we're using the Xamarin forms namespace.
But if I changed this to the .NET MAUI namespace and put it in and done in my
project, it would be exactly the same because it's the same functionality there.
Now, this shell.
Is used a little bit differently.
So for example, in our code behind our main page is no longer main page.
It is the app shell.
And why is that important?
Well, that's important because the app shell defines the structure and
the theme of your entire application.
It's quite beautiful.
So the first thing I want to point out here, It automatically is able to
react to themes that are changing here.
So for example, here's the fly-out background color.
I can enable a fly out, disable a fly out.
I can do whatever I want, but I'm going to use basic dark and light theme.
In our resources, we style every single page of our application and
our tabs and our fly out items here.
What I'm doing is I'm adjusting the background, color, foreground
color, the title, the tab bar background, the selected in the
D selected colors automatically using app theme bindings here.
And I apply that to the tab bar and to the fly-out item, which is quite.
If we take a look at this application, I can see that it's
actually relatively complex.
It has two tabs here on my main layout.
I have coffee and I have espresso.
I have a top tabs for light, medium and dark roast over here, which is quite cool.
I also have a fly out with all the different sections of my
application, such as the, my coffee application, that loads my coffee.
I can click an, add a new coffee and it'll pre-populate with some items here.
I can also have it adjust to light and dark themes all automatically,
including those top and bottom, bottom tabs, which is really quite nice.
If I go back over here to the light beam, look at how the application response, if
you're interested in how all of this is built, check out the one-on-one series.
Okay.
So let's take a look at it a little bit more in depth of why I love this thing.
Well, one is everything is over rideable.
So for example, right here, every fly-out item, I have a visual state
manager describing what the selected and deselected states will look like.
So you can customize that, look and feel right here inside of your application.
Then the cool part here is that you get to define what your fly out items
look like all inside of your code.
So for example, here, what I'm saying is that in this first fly out, use equipment
and use a font image source for the icon.
Then I'm going to have a tab of coffee here, which has.
Three pieces of content in it.
So here's the coffee with the coffee cup.
And then I have three pages, light, medium, and dark down over here.
I have a suppressor, which is just a tab with one item in it.
And automatically you can see that when it has multiple.
Pages in a tab, it puts the tabs on top.
So this tab has tabs inside of it inside this fly out,
which is really, really cool.
So this fire on them has two tabs and this one has three pages and this one has.
The other pages are very simple.
They're just simple fly-out items with a single shell piece of content, which is
the lazy loaded on demand when I click on it, which is really, really cool.
So this means I can easily add all of my pages or dynamically, add all
my pages here, and I don't have to do any of the navigation at all.
In fact, if I show you the code behind for the app shell, there's nothing there.
The shell itself handles all of the navigation for the main flyouts and tabs
automatically for me previously, if you were using the built-in tabs pages with
a flat you'd have to do all sorts of different work to handle a lot of this.
And it gets really, really complicated.
It's just built in, there's even fly out headers as well and
footers, and you can do a bunch of customization inside of the shell.
I just have this sort of default here, but you can set that all
up, which is really, really new.
Now, let me show you something else that I love about shell.
Which is navigation.
I talked about it earlier, specifically stateless applications.
I think it's really where mobile applications need to go, because
you should be able to launch any page, inflate the content.
Now previously you would just pass data objects around, but really
that's really not the best way of creating a stateless applications.
Very stateful, because.
Opens your application later, it's going to kind of start at the beginning.
If they close it out, you could re-inflate and stave the state of your application
using shell, which is really cool.
So let's specifically look at how to navigate using this thing.
So I showed a little bit earlier here when I hit add it actually
opened this page up, right.
If I go in and I click on a coffee, notice that that pushed it onto
the stack with a back button.
All right.
So as I go through, there's two different ways of opening this.
So let's first look at our coffee view model over.
And the first one is ad.
Now this is really cool.
What I'm doing is I'm creating a query based route where I can pass
a different items into the page or the view model attached with it.
So instead of pushing entire new page, I've registered a
route called add coffee page.
And I do that right over here.
In my app shell.
So here's the ad copy page, the name of ad coffee page and the type of ad
coffee page and a lazy load that for me automatically, but notice that
I'm passing in a query parameter of name, which is really, really cool.
So when I go to this ad coffee page over here, what I'm going to do
is have a query property that will automatically read that value for me
and set the name property automatic.
That's really, really cool.
So I've said it to MOTS.
So it automatically sets that name right there.
I don't have to do anything to set anything up to D serialize, anything.
It's all there for me automatically.
But what about when I click on a coffee?
That's a really cool one too.
So over here, what I'm doing is I'm going to the, my coffee details page
and I'm passing it, the coffee I D.
Which is really cool.
All right.
So if I open up that my coffee details page, I can also set the
query parameter on the page itself.
And note here, what I'm going to do is I'm going to grab the identifier.
I'm going to go to my database and get that coffee and set up the UI.
So now let's go ahead and check that out.
So here, what I'm going to do is I'm going to come in and let's create coffee
to, for example, I'm going to hit.
Let's pull the refresh here and now I have my coffee too.
I'm going to tap on it.
And I navigate into this page right there automatically and
bind that information up now.
Here's what's really cool too.
Is back navigation.
If you look at this, it's sort of like a terminal or command prompt.
I can say, go to async.dot, and then I can go back here and
it automatically will do that.
Now the difference here between modal and not motor.
Is really, really cool because if I come in specifically to the add coffee
page, you can control that with shell properties, such as presentation mode.
So not only can I navigate via these properties here, I can also set if
it's modal, if it animates, if it doesn't animate automatically, which
I think is really, really neat.
Now, the other thing I'll say here, I've been navigating just one time deep.
What I could do is I could say, Hey.
Not only go to my coffee page, but go and create another coffee page.
And what this would do is it would work just like a URL where it would
create a, my coffee page, create another my coffee page and then pass
the attribute down to that second page.
So again, deep linking deep into the application over and over and
over again, which I think is a real.
Cool.
As I think about how I structure my application using.
Now to me, I love that this gives my application structure.
It gives me guidance.
It gives me an easy way of theming from start to finish all of my tabs, all my
fly out, everything from start to finish.
I think what's really nice that you can build very complex applications
using very minimal code all with shell.
That's it.
Now shell does add a little bit of sort of structured.
And some different things of sort of thinking about how
you organize your application.
Like, what happens if you have a log-in page, do you start with the shell?
Where do you put that?
I have an entire video talking about log-in using shell and with our shell
too, but I think the benefits outweigh any additional complications that may come
from a standard new page navigate a page.
Cause I think shell just really simplifies things.
So.
Now, that's not to say that I always use shell all the time when
I'm quickly hacking on code and I want to get stuff up and running.
I go in, I create a new blank application.
I just start creating pages.
And sometimes I find, you know what?
I don't have fly outs.
I don't have tabs.
I'm gonna just have like a few pages in this application and you know
what that's going to work great for.
And I do want to pass around those things cause it's a very, you
know, simple or medium application.
But as my application grows, shell gives you that structure to
grow, create advanced sort of UI and navigation and, and add that
complexity by providing simplicity.
And that's what I think is really cool about it.
So there's.
From start to finish why it exists, why I think you should care about it and why?
I love it.
I've used it in a bunch of my applications like island tracker, which
is an app for, um, animal crossing from my recent snow park application.
I actually took the coffee application, cloned it and built
an application in just a few days with a beautiful sort of navigation.
That's all built in here.
And if you want to see a really cool example of.
.NET MAUI and shell together.
Take a look@the.net podcast application.
Let me pull that up right over here.
Really quick.
I got to do is go to github.com/microsoft/dotnet-podcasts.
And it's a full application.
100% built with .NET MAUI and shell all in one.
If you take a look at this, what I love about it, when you go into the
mobile part of it here, you can see.
Inside of the views.
Oops.
Inside of the sorry, pages, the, uh, mobile shell that's right here.
And we have tab bars and tab pages and there's icons and there's titles and
shell content and all sorts of good things inside of here, including setting
things if they're visible or not.
So if you had an admin page or not admin page, you could hide or show
different pages of your application, but as a great example of how to build.
Complex applications such as this podcast application, all using .NET
MAUI shell, or if you using Xamarin forms still, like I am in some of
my projects all still right there.
I hope that you liked this video.
I like to break down this thing as far as why you should be using it.
You did like it, give it a thumbs up.
I'd love your feedback.
Are you using shell?
And you're done and Maui and Xamari.Forms, applications.
Let me know.
What do you think of it?
What should the team be prioritizing?
I'm sure they love your feedback too.
Um, I also recommend, and I'll put some links on to some really
awesome videos from Shane.
Um, the dynamic Maui team.
Who's done all sorts of crazy, real deep dives into shell.
I simply love it.
I really like the real tweaking under the hood.
So definitely check those out.
I'll put those in the show notes below some different things
from build and indifferent Xamarin conferences of the past.
Anyways, I hope that you liked the video.
Like I said, give it a thumbs up, subscribe to the channel.
Of course I would love that.
Of course, we have a membership here.
Thanks to all of our members are going to put all their names are right here.
So they're forever in this video.
I really, really appreciate it.
Um, helps the channel go and make all these videos in my spare time.
It's so much fun to talk about these different topics.
Hope to hear back from all of you in the comments below for a great discussion.
And thanks for watching.