Mobile App Development with .NET MAUI : The Complete Guide

Open Visual Studio, search movie templates, select the dotnet maui app template to build a demo app, name the project, set location and solution, and choose dotnet seven or six.

Run a .NET MAUI app in the Android emulator and Windows, enable developer mode, create and register the first page, and leverage hot reload for XAML changes.

Explore XAML controls and layouts by using the stack layout to arrange labels on a page; compare vertical and horizontal orientations, and learn how orientation properties govern simple stack layouts.

Learn to build a centered .NET MAUI user card with a circular profile image from resources, plus username, job title, email, and phone.

Explore xaml controls inside stack layouts, including label, image, entry, password, check box, and login button; customize font size, color, placeholder, margins, and alignment to build a login page.

Explore how scrollview enables scrolling content by hosting a vertical stack layout as its single child, so all image and label controls become visible on mobile screens.

Explore flex layout in .NET MAUI to control orientation, alignment, and wrapping across screen sizes using Visual Studio, with labels and properties like justify content, align items, and wrap.

Explore grid layout by defining rows and columns with absolute, auto, and proportional heights, placing six buttons in two columns and three rows to show content and remaining space behavior.

Explore grid layout spacing and span properties, adjust row and column spacing for buttons, and apply column span and row span to occupy space, with corner radius set to zero.

Open Visual Studio, create a new Dotmobi project for a BMI calculator, and add assets to the images folder in resources to enhance design while implementing the underlying logic.

Design the bmi calculator page in a two-column grid, including a label, height and weight inputs, a calculate bmi button, and framed male and female options with icons and highlighting.

Explore implementing tap gestures in .NET MAUI by attaching tap gesture recognizers to frames representing male and female options, changing border colors to reflect selection, and updating the code-behind accordingly.

Design height and weight sliders for a .NET MAUI bmi calculator, with custom styles, live value binding, and configured ranges to prepare for code behind work in the next lesson.

Implement bmi code-behind functionality in a .NET MAUI app by wiring a calculate bmi button, parsing height and weight from labels, computing the BMI, and displaying it in an alert.

Navigate from the BMI calculator page to the BMI result page using push async, display the BMI value there, and hide the navigation bar on the calculator page.

Design a BMI result page in .NET MAUI using XAML, with a vertical stack layout, a centered summary label, and runtime BMI value and BMI message labels.

Pass the BMI value to the BMI result page by updating the constructor to accept a double, format it to one decimal, and show overweight, Normal, or under weight.

Learn how list view displays a list of items in a mobile app using the Dotnet model, showing how to handle many fruits in a fruits application.

Learn to implement a list view in .NET MAUI by defining a fruits list in code behind and binding it to a XAML list view using ItemsSource to display fruits.

Explore how to display both fruit image and name in a list view by using item templates and data templates, configuring view cells and stack layouts in XAML.

Create a fruit class with name, image name, and sentence, replace the string list with a data-bound list of fruits, and bind the list view to show names and images.

Learn to implement list view interactivity by handling the item selected event and navigating to a fruit detail page, passing the fruit name, image, and sentence for display.

Design a fruit detail page in .NET MAUI by consuming ListView selection data, displaying an image and two labels bound to name and sentence.

Fixes a list view selection issue in a .NET MAUI app by resetting the selected item to null after navigating to the detail page, allowing reselecting the same item.

Replace the list view with collection view to enable grid item layouts, set vertical orientation with a span for columns, and see data on the device.

Handle collection view selection changes in .NET MAUI by managing current and previous selections, supporting single or multiple modes, and navigating to the fruit detail page with proper highlight.

Refine collection view layout by configuring horizontal and vertical spacing to 20 units each, then apply color to visualize item gaps in the interface.

Create a darbuka app in dotnet maui, implement a control to display the instrument and play rhythms by tapping areas, using a NuGet audio package and prepared assets.

Design a 3x3 darbuka app UI in .NET MAUI using a styled grid of buttons, defined in XAML with an implicit style, wired from App.xaml.cs in Visual Studio.

Wrap button controls in a Darbouka frame using a grid with zero padding and add image button of 350 units, transparent background, and 175 unit corner radius from images folder.

Create a unified click handler for seven buttons to play darbuka sounds using command parameters and an audio plugin in the .NET MAUI app.

Animate image button in the Darbuka app by scaling it to 0.9 for 50 milliseconds with linear easing, then restore to 1 using XAML naming and an async click event.

Learn to build a kids learning app with dotnet maui in Visual Studio. Create a menu with a numbers option that plays a sound for each number, using assets.

Define a learning item model with name and image URL, and a learning data class with six lists: animals, letters, numbers, colors, fruits, and shapes, all initialized in a constructor.

Design the kids app main page using a four-row, two-column grid with spacing and margins, and place six bordered image button items labeled numbers, letters, shapes, colors, fruits, and animals.

Implement code-behind for the kids app main page using image button command parameters to navigate to a detail page and pass a category name; create the detail page.

Design a kids learning detail page in .NET MAUI by building a two-column grid collection view with image and labels, binding data to a learning item class, and switching categories.

Tap items in the collection view to trigger text-to-speech playback, using single selection and a selection changed event with speakAsync for the selected item's text, like numbers 1 and 2.

Build a dotnet maui app consuming restful APIs, with home, list, and detail pages, featuring a home page news collection and category filters plus a detail page for full stories.

Design the news home page using a grid layout in the XAML file, define three rows, and place a bold title label; the next lesson adds a categories collection view.

Create a horizontal categories collection view using a linear layout with 20 unit item spacing, and a data template featuring a bordered stack of an image and a category name.

Copy the categories collection view to create the news headlines view, configure a vertical grid with two rows, and adjust spacing, padding, and image height to 200 with fill.

Learn to fetch news headlines via a free news API, understand application programming interfaces, and practice building requests and parsing JSON in C#.

Convert json data into c# model classes by using an online json to c-sharp tool, switch to pascal case, add json property attributes, and deserialize for use in the app.

Create an api service class using an http client to call rest apis, with get, post, and put, deserializing json into the root class.

Consume breaking news from the API, populate an articles list, and bind each article’s title and image to the news collection view on the home page.

Populate category data in the categories collection view by creating a category class with name and image URL, wiring a categories list with News API categories and image assets.

Select a category in the collection view to navigate to the news list page, pass the category name, and display articles loaded by the Get news method.

Navigate from the news list to the detail page in a .NET MAUI app by selecting an article and pushing the detail page with the article data.

Design a three-row news detail page in .NET MAUI using a grid for image, title, and content, and bind article data to display the full details.

develop a sleek currency converter with dotnet maui, using real-time api data and blending design with the code behind to create a functional app.

Learn to fetch currency exchange rates with the exchange rate.io API, obtain a free key (250 requests per month), and generate C# classes from the JSON in Visual Studio.

Create a currency converter page with an amount entry, from and to pickers, and a convert button, then bind a currency list to the pickers to show names.

consume currency converter api via http client with an api key header, call get string async, deserialize json, and display result rounded to two decimals with currency symbols.

Create a shell-based .NET MAUI app, configure a flyout menu with routes and content templates, and add pages to navigate the flyout items.

Explore the tab bar in .NET MAUI's app shell, add multiple tabs with titles and icons, wire tab content, and disable the flyout for a clean navigation.

Explore shell based navigation in dotnet maui, register routes in app shell, and navigate between main page and home page using shell.current.goToAsync with a route name.

Learn to pass data between pages in .NET MAUI using shell based navigation, including query parameters and the query property attribute to receive values like a username.

Display the user name on the home page by adding a label control in XAML named username and using the code-behind to assign this username, with shell-based navigation passing data.