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.
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
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.
Comments
Post a Comment