Product list and view page for ecommerce App Please, support my blog by clicking on our sponsors ad! Let's create template for product list and view product For fontawesome refer this link Please watch this video to understand the code BackNavigation.xaml <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Ecommerce.UI.Template.CustomControls.BackNavigation" xmlns:fontawesome="clr-namespace:Ecommerce.UI.Template.Models"> <StackLayout Spacing="20" Grid.Row="0" Orientation="Horizontal"> <Label Text="{x:Static fontawesome:Solid.Arrow_Left}" FontSize="20" VerticalOptions="Center" FontFamily="FontAwesomeFreeSolid" TextColor="Gray"> <Label.GestureRecognizers> <TapGestur

  Category List Page for Ecommerce App In MAUI Please, support my blog by clicking on our sponsors ad! You can also see other ecommerce page : Authentication Page , Dashboard Please refer  Authentication Page  for resource. This code is explain in below video, please like share and subscribe   First we create categorymodel and categoryviewmodel public class CategoryViewModel { public ImageSource Img { get; set; } public string Title { get; set; } public string Description { get; set; } = "All Stock available"; } public class CategoryModel { public List<CategoryViewModel> GetCategory() { List<CategoryViewModel> list = new List<CategoryViewModel>(); list.Add(new CategoryViewModel { Img = "https://i.gadgets360cdn.com/products/large/redmi-note-11t-5g-824x800-1638256477.jpg", Title = "Mobiles" }); list.Add(new CategoryViewModel { Img

In Previous Blog , we created Authentication page for Ecommerce APP, now let's continue with Home Page, It will open when user click on login button of login page. To understand briefly watch this video: To create Home UI Page we will create Template and Class Templates BrandTemplate CardCircleImage FeatureProduct LargeImage Classes ViewModel classes are for property and model Classes for  Get List. ProductViewModel  ProductModel  BrandViewModel BrandModel Please, support my blog by clicking on our sponsors ad! Let's start by creating Template one by one. BrandTemplate <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Ecommerce.UI.Template.CustomControls.BrandTemplate"> <StackLayout Padding="10"> <Image Source="{Binding Img}" HeightRequest="120" WidthRequest="

Building User Authentication Interfaces in .NET MAUI: Login, Register, OTP Verification, and Forgot Password  In this blog post, we will explore how to create user authentication interfaces using .NET MAUI (Multi-platform App UI), a framework for building cross-platform applications. We will focus on four essential screens: Login, Register, OTP Verification, and Forgot Password. By the end of this tutorial, you will have a solid foundation for creating secure and user-friendly authentication flows in your .NET MAUI applications. Prerequisites: To follow along with this tutorial, you should have a basic understanding of .NET MAUI and C#. You will also need the .NET MAUI development environment set up on your machine. Before starting with the UI first install nugget "CommunityToolkit.Maui" in your MAUI project. Then initialize in MauiProgram.cs file public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMau

Popup in .net Maui Please, support my blog by clicking on our sponsors ad! Popups are an integral part of user interface design, allowing developers to convey information and interact with users in a more engaging manner. In .NET MAUI, there are three main types of popups available: DisplayAlert, DisplayPrompt, and Plugin.Maui.Popup. In this blog post, we will dive into each of these popup types, explore their functionalities, and provide code examples to demonstrate their usage. DisplayAlert: Simple and Informative Popups DisplayAlert is a built-in feature in .NET MAUI that provides a straightforward way to display alert popups to users. These popups typically present important messages, notifications, or warnings that require user acknowledgement. Here's an example of how to use DisplayAlert in your .NET MAUI application: DisplayAlert("Display Alert", "Welcome to DotNet Maui", "OK","Cancel",FlowDirection.RightToLeft); In the co

 Animation will add more good looking UI of the mobile application. Let's see how to add animation using lottie file. Lottie is a mobile library for andriod and IOS that prases Adobe After Effects animations exported as JSON. Lottie Animation in .NetMaui You can go through the lottie website. This lottie provide pently of cool animation and also you can create own animation. Please, support my blog by clicking on our sponsors ad! Let's get started First add install "SkiaSharp.Extended.UI.MAUI" in your project using nugget manager. This nugget is prerelease so please check "Include Prerelease". Lottie animation in .net Maui Next step is to Bootstrap Skiasharp plugin in MAUIProgram file and add UseSkiaSharp() to the app builder.  Below is the code: public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder

 XAML stands for E x tensible A pplication M arkup L anguage. When project is created you can see the maui project structure In this project, there are xaml file(App.xaml,AppShell.xaml,MainPage.xaml) each of this page support xaml language and when you expand it, each will have associated cs file.      In each contentpage of Maui Project, you observe some code at starting of the page xmlns is used for binding namespace. "http://schemas.microsoft.com/dotnet/2021/maui" is an namespace which is version identifier which contain certain information If you remove this line then it will throw error. blue lines says that there is an error. this is because namespace has been removed  The xmlns:x attribute indicates an additional XAML namespace, which maps the XAML language namespace.It define some xaml element. Using x we can use some element like x:class,x:name etc. x:class define the name of the class the use in code behind. Hope this is helpful to you. please share your fee