Components of a Shell application - .NET MAUI Tutorial

- [Instructor] In order to show you what a Shell application is, .NET MAUI, this is kind of the default paradigm we use for organizing our views and our interactions, I'm going to use an application created by Microsoft for these kinds of samples, it's called dotnet-podcasts. It's out here on github.com/microsoft/dotnet-podcasts. And if you go down and look, you can see they've written this for a number of different platforms. It goes way beyond .NET MAUI. You can see the architecture involves all sorts of pieces of Azure and the power platform and Blazer. We're really going to focus on the mobile apps in here this left side with Maui. So you can see we have iOS and Android, as well as Mac OS, and Windows. So I've cloned this repository. I've just run these applications. I haven't built all the backend pieces, so they're going to be kind of empty, but I just wanted to show you this concept of the Shell as a model for structuring our application. On the left, with the Android emulator, you'll see that we have tabs along the bottom. So if I click on listen or tap with my finger on my phone, or together, I get different pages of the application using this tabbed model at the bottom. Each page has its own UI. We design each one independently and we're going to have different view models and code behind for each of those items. On the right, the Windows application or the desktop application uses what's called a flyout. In this case, it's on the left hand side, which is the default. So instead of tabs along the bottom, we have flyout items along the left side. And again, we can tap or on a Windows device, if it's not a tablet, click on these different items and we get those same views or those same pages that we saw on the Android application. It's called to flyout because it can flyout from the side. In the case of the desktop application, because the screen is so large, it's locked open, so it's in an open position all the time. It doesn't collapse. If you use a flyout on the phone, you would see a hamburger menu, as we call it, the three lines, in order to pull out or have that menu fly out on top of your application, so you can interact with it. And we'll see that in our application as we start building it. These two pieces, the flyout on the left, and the tabs on the bottom are the primary model for navigating and structuring content in the application. You can mix and match these. So a given flyout item, for example, on the subscriptions, we might go in here, and then we could have tabs on the bottom for free subscriptions and paid subscriptions so that within a particular part of the application that we navigated from the flyout, we have tabs then that give us further navigation into different pieces of that application. So they're shown here separately as different models, but you can mix and match those things as well. As you can see in this Android application, the tabs themselves have text and icons that we can specify. Likewise, on the Flyout items, we have a particular icon and text for each item, and you can customize those, not only with your own icons, and obviously text, but you can control the layout of those particular items in the flyout as well. If you want the icon on the right or you want to stack them or however you'd like to see those flyout items appear. We can add additional items. Those are menu items that allow us to take some action in the application, but it's not necessarily related to routing or moving through the application structure like these flyout items are. And as you can see, you can control the header. Here, we see the .NETPodcasts logo at the top. We can control the themes and styles and everything else associated with this. So that's just a look at this organizational structure that is the Shell. It's not the only way you can build your application, but it is the default template that we'll get when we build a Maui application, because it implements those most common patterns. You don't have to use flyouts, you don't have to use the tabs, but both are available to you and both work across platforms. And as you can see here, you may choose to use a different model for desktop versus mobile.