.NET MAUI Workshop Overview

Overview

This lecture is a comprehensive workshop on building native cross-platform desktop and mobile apps using .NET MAUI, covering setup, project structure, MVVM, navigation, platform APIs, collection views, and theming.

Introduction to .NET MAUI

• .NET MAUI enables building native apps for Android, iOS, Mac, and Windows using C# and .NET.
• The workshop takes you from initial setup to a complete app with data display, web requests, navigation, styling, and theming.
• Visual Studio (Windows/Mac) is recommended, with setup guides available on the official documentation.
• All source code and modules are available at aka.ms/mauiworkshop.

Project Structure

• A .NET MAUI app has a single project for all platforms with shared resources, code, and UI.
• The Resources folder stores fonts, images, and other assets, shared across platforms.
• The Platforms folder contains platform-specific initialization and code.
• The app is multi-targeted, supporting Android, iOS, Mac Catalyst, Windows, and optionally Tizen.

Building the First App & UI Basics

• The sample "Monkey Finder" app displays a list of monkeys with images and details.
• Use XAML to define UI layouts (StackLayout, Grid, etc.).
• CollectionView is used for displaying lists; supports templates for custom item layouts.
• Hot Reload enables real-time UI updates while coding.

MVVM & Data Binding

• MVVM (Model-View-ViewModel) separates UI, business logic, and data.
• Use ObservableCollection for lists and INotifyPropertyChanged for property updates.
• Data binding connects UI elements to ViewModel properties or commands.
• CommunityToolkit.MVVM simplifies property and command implementation using attributes and source generators.
• Commands are bound to UI actions (e.g., button clicks).

Navigation

• Shell provides URI-based navigation; register routes for pages.
• Navigate using Shell.Current.GoToAsync("RouteName").
• Pass parameters (including complex objects) between pages using query properties.
• Use gesture recognizers and command binding for item taps.

Accessing Platform APIs

• .NET MAUI provides cross-platform APIs for connectivity, geolocation, maps, etc.
• Register and inject services like IConnectivity, IGeolocation, and IMap for native features.
• Handle platform-specific code via platform folders or with conditional compilation.

Advanced CollectionView Features

• CollectionView supports vertical/horizontal lists and grids.
• Use RefreshView to enable pull-to-refresh.
• EmptyView displays content when the list is empty.
• ItemsLayout sets grid or list orientation and spans.

Styling & Theming

• Use ResourceDictionary for reusable colors, sizes, and styles.
• Apply styles globally via App.xaml.
• AppThemeBinding enables light/dark mode support by providing theme-aware resources.
• Styles can be made implicit (all controls) or explicit (named key).
• Dynamic resources update UI automatically on theme or value change.

Key Terms & Definitions

• .NET MAUI — Multi-platform App UI framework for building native apps using .NET.
• MVVM — Design pattern: Model-View-ViewModel for separating logic and UI.
• CollectionView — A control for flexible, performant list/grid data display.
• ObservableCollection — Collection that notifies UI of item changes.
• INotifyPropertyChanged — Interface for notifying the UI about property updates.
• Command — Encapsulates actions in MVVM, bound to UI elements.
• Shell — Provides app structure and navigation via URIs and routes.
• ResourceDictionary — Stores reusable resources (e.g., colors, styles) for UI.
• AppThemeBinding — Binds resource values based on the current theme (light/dark).

Action Items / Next Steps

• Review and explore code at aka.ms/mauiworkshop.
• Follow the workshop’s README and complete each module step-by-step.
• Practice MVVM data binding and command usage in your own sample.
• Experiment with theming and styling in App.xaml.
• Test your app on multiple platforms and with dark/light mode toggles.