.NET MAUI - Create Apps for Android, iOS, Mac and Windows

Set up your development environment for .NET MAUI by installing Visual Studio 2022 with MAUI and ASP.NET tools, and use Figma and Postman for prototyping and API testing.

Install and enable the Xaml Styler extension in Visual Studio, then automatically format a Xaml document on save to streamline .NET MAUI screen development.

Enable Windows developer mode to run your apps on your own computer via the start menu, developer settings, and enabling developer mode; Visual Studio may prompt this during first use.

Enable developer mode on your Android phone by tapping the build number eight times in software information, then enable USB debugging for development in Visual Studio.

Import prototypes into Figma by dragging the dot fig file from the materials folder, then save locally or in the cloud to share and continue prototyping.

Discover your first .NET MAUI app by exploring the splash screen, a simple lucky number generator for Mega Sena, and cross-platform setup shown in Figma.

Create a net maui project in Visual Studio using templates, set a single cross‑platform project, organize folders, and run a basic hello world app.

Explore the Maui execution flow from native platform classes through the Maui program to the app, app shell, and main page, including Xaml and code-behind structures and initialization.

Learn to configure the app name, id, and version in .NET MAUI, using a central configuration that propagates to Android, iOS, macOS, and Windows, with platform-specific tweaks.

Understand how pixels and pixel density determine screen images, from RGB color intensities 0 to 255 and resolutions like 1920x1080 and 4096x2160, revealing more detail across millions of pixels.

Explore how pixel density drives image quality across devices, from 144-line to 1080p screens, and learn how Android, iOS, and Windows handle density folders and scaling.

Learn to customize and generate Windows icons for .NET MAUI, using SVGs, multiple sizes, and resource replacements to align app icons across Windows and stores.

Configure Android icons in dotnet maui and learn the net seven to net eight changes, including handling Android-specific icon generation and using a foreground scale of 0.4.

Adapt a Maui app icon for Android by testing on a two-phone setup, handling Android densities, and configuring Android-specific foreground and background in Maui icons.

Create a Maui splash screen for Android and iOS by replacing the image with a square SVG, setting a green background, and understanding build action properties for cross-platform behavior.

Set up a .NET MAUI project and build the first screen as a content page with XAML and code-behind, then enable navigation and XAML hot reload.

Identify the three MAUI component groups—pages, layout components, and elements—and learn how margins and the pending distance shape the screen, layout, and label.

Create the home screen in .NET MAUI by adding a logo image on a white background, a green lucky-number button, and center the layout using existing styles.

Create and customize the home screen in a two-screen workflow by hiding elements, using horizontal stack layouts, margins, spacing, and a scroll view to ensure accessibility.

Add borders around six number labels with a border component, adjust stroke color, padding, and rounded corners, then fine-tune spacing for the layout.

Control screen transitions in .NET MAUI by toggling is visible on labels and containers with x:Name in XAML, and wire changes in code-behind; prepare for MVVM patterns.

Create a six-number Megacina lottery generator in .NET MAUI with non-repeating random numbers, a sorted set, and two-digit formatting, plus hot restart.

Run a .NET MAUI app on Windows and Android, adjust the Android status bar colors, fix a layout cut-off by removing a redundant option, and view the lucky number generator.

Showcases running a .NET MAUI app on macOS and iOS via Mac Catalyst, using native UI and shared code across Android, Windows, iOS, and macOS.

Explore the XAML syntax for Maui, including tags, attributes, and namespaces, and understand how components map to classes and properties to build UI layouts.

Explore the four essential .NET MAUI pages—content, navigation, flyout, and tabbed pages—and learn how they form a flexible structure to build and navigate your app layouts.

Create a simple .NET MAUI content page using XML and code-behind, explore namespaces and xmlns attributes, and replace the app shell with the main page to preview the UI.

Learn how the Maui navigation page organizes three content pages, providing a title bar and back navigation through a stacking mechanism and navigation to subsequent pages.

Learn to navigate between pages in .NET MAUI with push async and pop async, manage the navigation stack, and explore modal navigation to present and close content.

Introduces the MAUI flyout page as a side menu in a MAUI app, builds three content pages plus a menu, and configures the flyout using XML attributes.

Configure the flyout menu to collapse or expand on large screens, switch between split and popover layouts, and navigate content by clicking buttons that swap the detail page.

Learn to implement flyout navigation with a navigation page in .NET MAUI, configure a top navigation bar, and ensure the menu persists across page switches on Android and iOS.

Explore configuring a tabbed page in .NET MAUI by creating three pages, wiring them to a tab page menu, and initializing the app with tab navigation.

Explore how .net maui tabbed page color customization works across Windows and Android, including bar background, bar background color, selected and unselected colors, text color, and brush and gradient options.

Learn to create a Maui Gallery app, export and configure icons and splash screens, and set up a Maui project with XML configuration and Android-specific icon adjustments.

Organize a MAUI project by creating a flyout menu structure within a views folder, with main page and separate menu, and configure a flyout that presents a pop-over side menu.

Build a Maui gallery app with a side menu, categories and components, using models for category and component, a repository to supply data, and detail pages to showcase each component.

Replace static labels with dynamic labels from categories via category repository, building the UI in code-behind of a Maui app and populating a vertical stack with title and description labels.

Program the side menu in a .NET MAUI app by adjusting fonts (open sans), margins, and spacing to match the category, component title, and description structure.

Make any MAUI component clickable by adding a tap gesture recognizer in XAML and handling it in C#. Open the detail page and collapse the flyout.

Identify and fix a performance bottleneck by replacing eager page instantiation with lazy type-based instantiation using Activator.CreateInstance, plus caching and a navigation bar for home navigation.

Learn to add a scroll view to the menu in .NET MAUI, wrapping items before the stack layout to access menu options when space is limited.

Explore the four Maui layout types—stack, grid, absolute, and flex—for positioning and sizing UI elements, with emphasis on vertical and horizontal stacks and sizing in percentages in grid.

Master the stack layout in .NET MAUI, learning how a content page hosts a single element and how vertical and horizontal layouts use start, center, end, and fill.

This lecture demonstrates vertical stack layout and horizontal stack layout in .NET MAUI, showing how spacing, margin, and padding control distances between elements and improve performance.

Explore grid layout in .NET MAUI, defining four columns and three rows with fixed, automatic, and star sizing, place elements in cells, and understand layering order for overlapping views.

Position and merge elements in a four-by-three grid, using zero-based indices, grid column/row, and column/row spans; control sizing with automatic, fixed, or asterisk-based percentages.

Learn to simplify grid layout in .NET MAUI with column definitions, proportional and fixed columns, and row and column spacing to precisely position elements.

Learn to use absolute layout in .NET MAUI to position and size elements freely with layout bounds, x, y, w, h properties, and proportional percentages for centering and overlapping.

Explore flex layout, a flexible, highly customizable layout inspired by CSS flexbox, where the direction property arranges elements in row or column, with reverse options for ordering.

Explore flex layout alignment with line items, using align items and align self to position elements at start, center, end, or stretch in row and column directions.

Examine how justify content in the MAUI flex layout governs the opposite axis from align items, using column or row directions and spaces such as around, between, and evenly.

Master flex layout concepts like order, basis, grow, shrink, and align self to arrange items in column or row. Use fixed or percentage bases to control size and space distribution.

Explore how FlexLayout uses wrap and align content to manage multi-line layouts, prevent overlap, and control spacing with space around and space between.

Discover the view class in .NET MAUI, the central root for pages and layouts, and how its properties enable color, size, gestures, and animation across components.

Explore Visual Studio tools for .NET MAUI, including XML hot load, hot restart, dynamic reload, the dynamic visual tree, and the properties panel and toolbox for XAML UI.

Explore the box view component in maui, learning how to set height, width, color, and corner radius to create lines, squares, rectangles, and circles across platforms.

Explore the label component in .NET MAUI, customizing text with color options (hex, rgb, argb), applying decorations (underline, strikethrough), and transforming text (uppercase, lowercase).

Explore how the text type property in .NET MAUI labels renders HTML, including CDATA and escaping characters, and learn to display formatted web content from databases.

Explore text alignment in .NET MAUI labels using horizontal options, vertical options, and horizontal text align to center, begin, or end the text.

Explore the .NET MAUI button component: its styling, border and corner radius, and key events such as pressed, released, and click, plus basic MVVM concepts and logging interactions.

Learn to create a button with text and an image in .NET MAUI, using image source, adjustable positioning (left or right), and a distance to fine-tune layout and click area.

Build a hangman game in .NET MAUI using image and button components, seven hangman images, a self-built keyboard, a splash screen, hints, letter count, and green/red feedback for seven mistakes.

Create a .NET MAUI project in Visual Studio, configure the app icon and splash screen with SVG assets from Figma, and set Android icons before running the Hangman game.

Delete the app shell and create the main content page; design a screen with an image, tip label, and a keyboard built from horizontal and vertical stacks with flex spacing.

Customize the Maui app's style by adjusting main colors and style.xaml, then align light and dark themes for buttons and text to improve the keyboard's aesthetics.

Create a word model with a hint and text, build a word repository to store words, and implement a random word selector for the game.

Draw a random word from the repository, show a hint, and display underscored letters spaced by five. Implement a private on button click handler wired in XAML to reveal guesses.

Explore programming a letters-guessing game in a .NET MAUI app by handling letter clicks, locating all letter positions, updating underscores via a string extension, tracking mistakes, and disabling clicked buttons.

Demonstrates updating the hangman image as mistakes accrue, from gallows1 to seven, triggers you lost, and offers a new game with a reset of screen and virtual keyboard.

Learn to style a .NET MAUI keyboard by creating success and failure button styles and applying them via resource dictionaries to show green for hits and red for misses.

Refactor a word game in a .NET MAUI app by extracting methods, implementing win and loss checks, and adding a restart button to reset the game and update the UI.

Learn to run a hangman game on Android with .NET MAUI, fix border and keyboard display issues, and tune padding, font size, and status bar color via Android settings.

Explore the frame component in .NET MAUI, a Xamarin Forms border container for aesthetics. It supports corner radius, border color, thickness, and optional shadow, but use the border component instead.

Explore how to implement borders in .NET MAUI, replacing frames with borders, and customize stroke using brush types, thickness, dash patterns, and stroke shapes across Android, iOS, and Windows.

Learn to apply the shadow component in .NET MAUI to any element, tune with radius, brush color, opacity, and offset, and create card-like structures with borders.

Explore creating forms in .NET MAUI using the entry text input field, including label, text, password options, with native components, fluent design cues, and clear button visibility.

Explore how entry fields in .NET MAUI handle cursor position, text selection, spell check, predictive typing, and keyboard customization, including max length, placeholders, and return actions.

Explore how the .NET MAUI entry component emits events, including text change with old and new text, completion on enter, and focus or unfocus, enabling reactive UI updates.

Explore the editor in MAUI, a multi-line text input with auto size, enabling typing, line breaks, and read-only or enabled modes, plus text events and limits.

Explore the check box component in .NET MAUI, toggling a boolean value with check and uncheck states, customizing color, and handling the check event to update a status label.

Learn how radio buttons enforce a single choice within a group, using the content and value properties, group naming, and layout techniques, with styling options like borders and fonts.

Handle the radio button's checked changed event in net maui to read the boolean value and retrieve the selected content via the sender, then verify results with a breakpoint.

Master the switch component in .NET MAUI, exploring its boolean toggle, color options, and MVVM integration for configuration tasks across Android, iOS, Mac, and Windows.

Explore the stepper component in .NET MAUI, learn to configure min, max, and increment, and track value changes with a valuechanged event to display old and new values.

Explore the slider component, configure minimum and maximum values as doubles, drag to adjust values, and apply color and handle image customization alongside drag events.

Explore the time picker component to capture hour and minute with 12- and 24-hour formats, customize text and default time, and read user selections via the time property.

Explore the native date picker in .NET MAUI for scheduling forms on Windows, Android, iOS. Configure the date property, format, and minimum and maximum limits, and handle date selection events.

Learn how the search bar, a specialized text input, powers searches across Android, iOS, Windows, and Mac with text properties, a search button, and platform-specific events and styling.

Learn to use the net maui picker to select an item from a bound list via an item source, such as an array, database, or API.

Learn how the text cell formats list items in .NET MAUI with a two-label layout (title and description), offering performance benefits and simple color customization within the table view.

Explore the image cell in .NET MAUI, showing an image with a title and description in a table view, with sources from project assets, URLs, embedded resources, or streams.

Learn to implement the switch cell, a label with a switch that toggles a boolean on or off. Place it in a configuration screen inside a table view.

Explore creating reusable form fields with entry cells inside a table view in a .NET MAUI app, duplicating rows to collect multiple names with labels, placeholders, and alignment options.

Demonstrates view cell in .NET MAUI, showing how to fully customize its layout with labels, images, and other views using grids and stacks. Emphasizes performance and flexibility for list items.