MVVM MAUI Ecommerce APP Address Entry Form

 

Create a Address Entry Form in xamarin

Please, support my blog by clicking on our sponsors ad!

Watch video to understand code.

For fontawesome refer this link

Lets create all Controls

ImageLabel.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.ImageLabel">
    <Grid RowDefinitions="Auto,Auto">
        <Label x:Name="lblIcon" FontFamily="{x:DynamicResource FontAwesomeFamily}" HorizontalOptions="Center" TextColor="Gray"
               Grid.Column="0" Grid.Row="0"></Label>
        <Label x:Name="lbl"  Grid.Column="0" Grid.Row="1" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" 
               TextColor="Gray"></Label>
    </Grid>
</ContentView>

ImageLabel.xaml.cs

public partial class ImageLabel : ContentView
{
	public ImageLabel()
	{
		InitializeComponent();
	}

	public string Icon
	{
		get => lblIcon.Text; 
		set => lblIcon.Text = value;
	}

	public string Text
	{
		get => lbl.Text; 
		set => lbl.Text = value;
	}

	public Color TextColor
	{
		set
		{
			lbl.TextColor = value;
			lblIcon.TextColor = value;
		}
	}
}

TextboxWithIcon.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.TextboxWithIcon">
    <Grid HorizontalOptions="FillAndExpand" ColumnSpacing="10" VerticalOptions="FillAndExpand" ColumnDefinitions="Auto,*" 
          HeightRequest="40">
        <Label Grid.Column="0" x:Name="lbl" Margin="0,10,0,0" FontFamily="{x:DynamicResource FontAwesomeFamily}" 
               FontSize="20" TextColor="{x:DynamicResource Primary}"></Label>
        <Entry x:Name="txt" Grid.Column="1"   HorizontalOptions="FillAndExpand" PlaceholderColor="Gray" 
               TextColor="{x:StaticResource Primary}" FontSize="15" />
    </Grid>
</ContentView>

TextboxWithIcon.xaml.cs

public partial class TextboxWithIcon : ContentView
{
	public TextboxWithIcon()
	{
		InitializeComponent();
	}

	public string Icon
	{
		get => lbl.Text; 
		set => lbl.Text = value;
	}

	public string Placeholder
	{
		get => txt.Placeholder; 
		set => txt.Placeholder = value;
	}
}

Now we will create main form
Address.Xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Ecommerce.UI.Template.Pages.Account.Address"
             xmlns:control="clr-namespace:Ecommerce.UI.Template.CustomControls"
             xmlns:fontawesome="clr-namespace:Ecommerce.UI.Template.Models"
             Title="Address">
    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" 
              Padding="20">

        <Label Grid.Row="0" Text="Type" FontAttributes="Bold" FontSize="15" Margin="0,0,0,10" 
                   TextColor="{StaticResource Primary}"></Label>
        <Frame Grid.Row="1" CornerRadius="5" Padding="5,15" BorderColor="LightGray">
            <Grid ColumnDefinitions="*,*,*" ColumnSpacing="0">
                <control:ImageLabel x:Name ="imglblHome" TextColor="#0D1C2E"  ClassId ="imglblHome"  
                                        Grid.Column="0" HorizontalOptions="Center" Icon="{x:Static fontawesome:Solid.Home}" 
                                        Text="Home">
                    <control:ImageLabel.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </control:ImageLabel.GestureRecognizers>
                </control:ImageLabel>
                <control:ImageLabel x:Name="imglblBuilding" ClassId="imglblBuilding" Grid.Column="1" 
                                        HorizontalOptions="Center" Icon="{x:Static fontawesome:Solid.Building}" Text="Office">
                    <control:ImageLabel.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </control:ImageLabel.GestureRecognizers>
                </control:ImageLabel>
                <control:ImageLabel x:Name="imglblOther" ClassId="imglblOther" Grid.Column="2"  
                                        HorizontalOptions="Center" Icon="{x:Static fontawesome:Solid.Th}" Text="Other">
                    <control:ImageLabel.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </control:ImageLabel.GestureRecognizers>
                </control:ImageLabel>
            </Grid>
        </Frame>

        <Label Grid.Row="2" Text="Name" Margin="0,20,0,10" FontAttributes="Bold" FontSize="15" 
                   TextColor="{StaticResource Primary}"></Label>
        <Frame Grid.Row="3" CornerRadius="5" Padding="20" BorderColor="LightGray">
            <VerticalStackLayout Spacing="10">
                <control:TextboxWithIcon Margin="0,0" Icon="{x:Static fontawesome:Solid.User}" Placeholder="FirstName">

                </control:TextboxWithIcon>
                <Line BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" HeightRequest="1"></Line>
                <control:TextboxWithIcon Icon="{x:Static fontawesome:Solid.User}" Placeholder="LastName"/>
            </VerticalStackLayout>
        </Frame>

        <Label Grid.Row="4" Text="Contact" Margin="0,20,0,10" FontAttributes="Bold" FontSize="15" TextColor="{StaticResource Primary}"></Label>
        <Frame Grid.Row="5" CornerRadius="5" Padding="20" BorderColor="LightGray">
            <VerticalStackLayout Spacing="10">
                <control:TextboxWithIcon Icon="{x:Static fontawesome:Solid.Phone}" Placeholder="Phone Number"></control:TextboxWithIcon>
                <Line BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" HeightRequest="1"></Line>
                <control:TextboxWithIcon Icon="{x:Static fontawesome:Solid.Home}" Placeholder="Address"></control:TextboxWithIcon>
                <Line BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" HeightRequest="1"></Line>
                <control:TextboxWithIcon  Icon="{x:Static fontawesome:Solid.Building}" Placeholder="State"></control:TextboxWithIcon>
                <Line BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" HeightRequest="1"></Line>
                <control:TextboxWithIcon Icon="{x:Static fontawesome:Solid.Edit}" Placeholder="PinCode"></control:TextboxWithIcon>

            </VerticalStackLayout>
        </Frame>
    </Grid>
</ContentPage>

Address.xaml.cs

public partial class Address : ContentPage
{
    List<ImageLabel> controls = new List<ImageLabel>();

    public Address()
    {
        InitializeComponent();
        controls.Clear();
        controls.Add(imglblBuilding);
        controls.Add(imglblHome);
        controls.Add(imglblOther);
    }

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        ImageLabel ctrl = (ImageLabel)sender;
        foreach (var img in controls)
        {
            if (ctrl.ClassId == img.ClassId)
                img.TextColor = Color.FromHex("#0D1C2E");
            else
                img.TextColor = Color.FromHex("#A9A9A9");
        }
    }
}

Hope this is helpful to you. Share your feedback in comment section.