.NET MAUI: Advanced UI and Custom Control Techniques

Begin a .NET MAUI app that uses a markup extension to capture a photo, display it in a frame, and apply filters to the image, illustrating mobile photo workflow.

Create a Maui Filters app by structuring views and importing a placeholder image. Overlay a gradient on the photo and design a bottom area with gradient buttons to apply filters.

Build a gradient buttons section in a MAUI app with a three-by-three grid, rounded rectangles, and gradient brushes, using regions.xaml and colors.txt to drive each gradient.

Bind a tap on an image in XAML to a take photo command in a Maui view model, using the community toolkit MVVM and media picker with proper permissions.

Bind a loaded image from file to the image control using image source in the view model, starting with placeholder.jpg and updating after taking a photo.

Apply a gradient to a photo by adding a tap gesture recognizer to each control, obtain the current and target gradients as linear gradient brushes, and animate the transition.

Develop a gradient markup extension for .NET MAUI to replace inline gradients, returning a linear gradient brush by parsing hex colors and computing stops with a configurable direction.

Discover how bindable properties extend functionality in dotnet Maui by enabling data bindings, styles, templates, and value propagation. Learn how they provide default values, validations, and change monitoring.

Demonstrates building a custom .NET MAUI control using bindable properties, XAML layout, and a progress bar to visualize download progress.

Create reusable maui content views by extracting controls, expose properties to customize text and progress, and bind to a view model using the mvvm toolkit, addressing bindable property challenges.

discover how bindable properties power .NET MAUI controls by reading and setting values with GetValue and SetValue, and how BindableObject enables data binding across visual elements.

Create and configure a bindable property in a MAUI control, declaring titleProperty, defaulting to 0%, wiring GetValue/SetValue, and implementing a property changed callback to update the UI.

Create and bindable subtitle and progress properties in a .NET MAUI component, binding them to XAML and the view model, and simulate a download with progress updates.

Explore bindable properties by recreating a file upload app with a reusable component, customizable header and Lottie animation, a flow from selecting files to sharing or re-uploading, plus file details.

Build a .NET MAUI dashboard page user interface with a two-row grid, header and subheader, and a center-aligned Lottie animation, then overlay a progress screen with an uploading file indicator.

Create a file details page in a .NET MAUI app, using a grid layout, header, image, and formatted labels to display file properties, with share and upload actions.

Enable tap-to-upload file selection in .NET MAUI by binding an upload file command on a dashboard view model to a Lottie control, and configuring Android and iOS platforms.

learn to build a file upload service in net maui using file.io, with multipart form data, an asynchronous post, and json deserialization into a file model.

Register and inject a file upload service in the Maui app, then call its upload file method from the dashboard view model to test uploading and verify file metadata.

Navigate from the main page to the details page in a .NET MAUI app using Shell navigation, a details view model, and binding file name, max downloads, and expiry data.

Implement shared URI command and upload command in the file details view by binding to the view model, and control the activity indicator to display upload progress.

Refactor the dashboard content into a reusable upload view inside a custom content view, enabling bindable properties and default values. Remove direct bindings to make the control portable across implementations.

Learn to build a reusable file upload control in .NET MAUI using bindable properties for title, subtitle, colors, Lottie animation, overlay, and an upload command.

Learn how attached properties enable a grid to assign row and row span values to controls that don’t define them, enabling layout decisions even without a grid container.

Create an attached property for a control shadow using a Shadow Helper in a .NET MAUI project. Implement create attached, and get and set methods with a default no-shadow value.

Apply shadows with an attached property in a .NET MAUI app by defining a prefix and marking controls in XAML with Shadow Helper, then processing in code-behind to render shadows.

Understand attached behaviors and how they attach to controls via an attached property. Use property changed to adjust a label's font size when the value toggles, with Visual Studio example.

Define and use an attached property with a property-changed callback to automatically apply or remove a shadow on a control in MAUI, converting bindable objects to views as needed.

Learn to build a dashboard in DotNet Maui by creating an attached property that shows or hides UI elements based on the logged-in user's role.

Create a .NET MAUI dashboard view using a grid layout, borders, and a collection view to display sales statistics, recent orders, and product details, with sample data.

Install the Micro Charts NuGet package and Skiasharp Usemodwiki controls, replace frame with a Micro Charts column chart view in Maui. Set height 250 and label sizes 30 and 35.

Create a daily sales model and dashboard viewmodel, install the MVVM toolkit, populate chart entries from sales data, format labels, and bind the chart to the MAUI dashboard.

Format currency labels with a thousandth shortcut and color each bar using a calculated green shade based on daily sales, via private format value label and calculate color methods.

Create an attached property in role manager to control dashboard elements visibility by user role (user or admin) in .NET MAUI.

Use a custom attached property in .NET MAUI to hide dashboard sections based on user roles. Test with admin and user roles to reveal or hide titles and charts.

Explore transformations and animations in dotnet maui, including translation, scaling, and rotation, and learn to use extension methods, predefined and custom easing, and custom animations for dynamic UI.

Explore translation transformations in .NET MAUI by moving an image with translation X and translation Y, using sliders bound to the image and labels to display current values.

Scale transformation uses a scale slider bound to the image's scale property, shows two-decimal values on a label, and demonstrates center versus upper-left scaling via anchor X and Y.

Explore the rotation transformation in .NET MAUI by using a rotation slider (0–360 degrees) to rotate user interface controls, linking rotation to anchor x and y and observing origin differences.

Explore rotation x and rotation y in NET MAUI to skew and tilt an image, creating a 3D effect with sliders for advanced UI and custom controls.

Explore how to animate transformation properties in .NET MAUI, using translate, scale, rotate, and opacity on an image to create engaging UI.

Explore relative animations in dotnet maui by starting from an initial value and rotating to a target, such as 180 to 360 degrees in three seconds, using the rotate tool.

Explore compound animations in .NET MAUI by chaining sequential animations with the await operator. See translations, scaling, rotation, skew, blur, and opacity applied one after another in a button-driven sequence.

Explore composite and compound animations in Dot Net Maui by running rotate 360 degrees and translate to 250,250 in parallel. Avoid awaiting the first task to enable simultaneous execution.

learn how to run multiple animations concurrently in .NET MAUI using task-based methods like when any and when all, coordinating translate, rotate, and fade animations.

Cancel animations in net maui by calling the control's cancel animations method, or by using microsoft maui dot view extensions with a visual element, returning a boolean task.

Explore dotnet Maui easing functions by configuring async animations to control rate of change and smoothness, comparing linear, insane, sine, cubic, spring, and bounce presets for natural UI motion.

Test and apply async easing functions in .NET MAUI to animations, comparing linear, sign in/out, cubic in/out, bounce, and spring effects on translations of the user interface.

Learn three ways to implement custom async functions in net maui, a linear method, a func lambda, and an async class, and apply them to translate animations with step-like easing.

Master custom animations in .NET MAUI by building an animation object, configuring callbacks and values, and using commit to drive rotation and scale with finished and repeat options.

Learn how to use child animations in .NET MAUI, coordinating rotation, scaling, and opacity on an image control with a storyboard-like parent animation.

Practice building animated UI in .NET MAUI by recreating a pizza app with pulse effects, animated pizza transitions, dynamic price and name updates, size selection, and a flying cart animation.

Build a dynamic .NET MAUI interface using a grid with a title and shopping cart, and implement a size selector with bindable layouts, radio buttons, and material icons via NuGet.

Animate a pizza image in .NET MAUI by rotating by 90 degrees and scaling it based on radio button size selections (S, M, L), using a code-behind handler and transitions.

Create a pulse effect in a .NET MAUI app by animating two ellipses with XAML and code-behind. Implement start pulse and circle pulse animations, including growth, fading, and indefinite repetition.

Press the change pizza button to trigger a 1-second animation that moves the pizza image with radians-based sine and cosine, converting degrees to radians and using map function to 180–270.

Create an incoming pizza animation in .NET MAUI by duplicating the pizza image, positioning it at 200, -200, and animating its angle from 90 to 180 with x and y translation.

Learn to create a smooth fade transition between incoming and outgoing pizza images in a .NET MAUI app by managing alpha values and opacities.

Replace static data with a pizza model and a view model using MVVM toolkit; initialize a pizzas list, expose current pizza and new pizza, and bind them to the UI.

Animate text controls in a .NET MAUI app by fading and sliding the new price and new pizza name, coordinating bindings, translation, and opacity to refresh the user interface.

Implement an animation in .NET MAUI that makes the current pizza image fly toward the shopping cart when purchasing, duplicating the image and syncing translation, scale, and opacity.