book

.NET MAUI Cross-Platform Application Development - Second Edition

by Roger Ye

March 2024

Intermediate to advanced

496 pages

10h 45m

English

Packt Publishing

Read now

Unlock full access

Who this book is forWhat this book coversTo get the most out of this bookGet in touch
Overview of cross-platform and full stack technologiesNative applicationWeb applicationBackend servicesManaging development complexityFull stack developmentCross-platform technologiesApache CordovaIonicReact NativeFlutter.NET MAUIAnalysis of cross-platform full stack solutionsComparison of .NET and JavaScriptExploring the .NET landscape.NET FrameworkMono.NET Core.NET Standard and Portable Class LibrariesUsing Xamarin for cross-platform developmentXamarin.FormsXamarin.EssentialsComparing user interface design on different platformsMoving to .NET MAUI.NET MAUI Blazor appsDeveloping native apps using .NETWhat’s new in .NET 8 for .NET MAUI?Native AOT support for iOS-like platforms.NET MAUI extension of Visual Studio CodeDevelopment environment setupUsing Visual StudioInstalling .NET MAUI on WindowsInstalling .NET MAUI on macOSVisual Studio Code with the .NET MAUI extensionSummaryFurther reading
Technical requirementsManaging the source code in this bookDownload the source code in a compressed fileClone the source code per chapterClone the source code from the main branchSetting up a new .NET MAUI projectCreating a new project using Visual StudioCreating a new project using the dotnet commandApp startup and lifecycleLifecycle managementSubscribing to the Window lifecycle eventsConsuming the lifecycle override methodsConfiguring the resourcesApp iconSplash screenSetting custom font iconsCustom font setupDisplaying font iconsBuilding and debuggingWindowsAndroidiOS and macOSBuilding and testing the iOS targetBuilding and testing the macOS targetMigrating from XamarinMigrating and reusing the Shell template from Xamarin.FormsVisual Studio project templateSummary
Technical requirementsCreating a XAML pageXAML syntaxXML declarationElementAttributeXML and XAML namespacesCreating a new page using XAMLCreating the same new page using C#XAML markup extensionsBuilding a user interfaceLayoutsStackLayoutGridFlexLayoutAbsoluteLayoutViewsLabelImageEditorEntryListViewMaster-detail UI designSide-by-sideStackedNavigation in the master-detail UI designItemDetailPageItemsPageSupporting multiple languages – localizationCreating a .resx fileLocalizing textSummaryFurther reading
Technical requirementsUnderstanding MVVM and MVCMVVM in PassXYZ.VaultData bindingBinding objectBinding targetBinding sourceProperties of a Binding objectSourceBinding modeChanging notifications in ViewModels.NET Community ToolkitHow to use the MVVM ToolkitImproving the data model and serviceKPCLibAbstraction of PwGroup and PwEntryPassXYZLibUpdating the modelUpdating the serviceBinding to collectionsUsing custom viewsSummaryFurther reading
Technical requirementsImplementing navigationINavigation interface and NavigationPageUsing the navigation stackManipulating the navigation stackInserting a pageRemoving a pageUsing ShellFlyoutFlyout itemsMenu itemsTabsShell navigationRegistering absolute routesRegistering relative routesPassing data to pagesImproving our appUnderstanding the improved designRegistering absolute routes and relative routesModel and servicesImplementation of IUserServiceImproving the login processLogin view modelLogin UISummary
Technical requirementsA brief overview of design principlesExploring types of design principlesDon’t Repeat Yourself (DRY)Keep It Simple, Stupid (KISS)You Aren’t Gonna Need It (YAGNI)SOLID design principlesUsing design principlesImplementing DILifetime managementConfiguring DI in .NET MAUIConstructor injectionMethod injectionProperty injectionReplacing the mock data storeInitializing the databasePerforming CRUD operationsAdding an itemEditing or deleting an itemSummaryFurther reading
Technical requirementsImplementing platform-specific codeConditional compilationInterfaces, partial class, and methods.NET MAUI/Xamarin pluginsThe evolution of .NET MAUI/Xamarin pluginsThe introduction of Plugin.FingerprintSupporting fingerprint functionality using Plugin.FingerprintFingerprint settingsLogin using a fingerprintCustomizing controlsOverview of handlersUsing HybridWebViewImplementing MarkdownViewSummaryFurther reading

Technical requirementsWhat is Blazor?Hosting modelsBlazor ServerBlazor WasmBlazor HybridBlazor BindingsWhat’s new in .NET 8 Blazor hosting modelsProject templates of .NET MAUI and Blazor appsBlazor apps.NET MAUI appsCreating a new .NET MAUI Blazor projectGenerating a .NET MAUI Blazor project with the dotnet command lineCreating a .NET MAUI Blazor Hybrid App using Visual Studio on WindowsRunning the new projectThe startup code of the .NET MAUI Blazor Hybrid AppMigrating to a .NET MAUI Blazor Hybrid AppUnderstanding Razor syntaxCode blocks in RazorImplicit Razor expressionsExplicit Razor expressionsExpression encodingDirectivesDirective attributesCreating a Razor componentRedesigning the login page using a Razor componentThe Model-View-ViewModel (MVVM) pattern in BlazorDependency injection in BlazorCSS isolationSummaryFurther reading
Technical requirementsUnderstanding client-side routingSetting up BlazorWebViewSetting up the Router componentDefining routesPassing data using route parametersNavigating with NavigationManagerUsing Blazor layout componentsApplying a layout to a componentNesting layoutsImplementing navigation elementsImplementing a list viewAdding a new item and navigating backSummary
Technical requirementsUnderstanding Razor componentsInheritanceCreating a Razor class libraryUsing static assets in the Razor class libraryCreating reusable Razor componentsCreating a base modal dialog componentData bindingComponent parametersNested componentsChild content renderingTwo-way data bindingBinding with component parametersCommunicating with cascading values and parametersUnderstanding the Razor component lifecycleSetParametersAsyncOnInitialized and OnInitializedAsyncOnParametersSet and OnParametersSetAsyncShouldRenderOnAfterRender and OnAfterRenderAsyncImplementing CRUD operationsCRUD operations of itemsAdding a new itemEditing or deleting an itemCRUD operations of fieldsRefactoring Razor componentsCreating the Navbar componentCreating a Dropdown component for the context menuUsing templated componentsCreating a ListView componentUsing the ListView componentAccessing a native API from Blazor Hybrid appsSummary
Technical requirementsUnit testing in .NETSetting up the unit test projectDeveloping test cases for the modelSharing context between testsSharing using a constructorSharing using class fixturesSharing using collection fixturesMock .NET MAUI componentsRazor component testing using bUnitChanging the project configuration for bUnitCreating a bUnit test caseCreating test cases in Razor filesUsing the RenderFragment delegateTesting Razor pagesSummaryFurther reading
Technical requirementsPreparing application packages for publishingPreparing for publishingPublishing to Microsoft StorePublishing to Google Play StorePublishing to Apple’s App StoreGitHub ActionsUnderstanding GitHub ActionsWorkflowsEventsJobsRunnersStepsSummaryFurther reading

Content preview from .NET MAUI Cross-Platform Application Development - Second Edition

9 Understanding Blazor Routing and Layout

In the previous chapter, we explored the process of designing a login page using Blazor. Although the app layout and navigation hierarchy remain XAML-based, our app utilizes a hybrid UI implementation that combines both Blazor and XAML. Blazor offers an alternative approach to UI design for .NET MAUI apps. In this second part of the book, we will reconstruct the entire UI using Blazor exclusively. Since the initial step of UI design typically involves the implementation of layout and navigation, this chapter will introduce the concepts of layout and routing within Blazor.

We will cover the following topics in this chapter: