Payment UI Design using xamarin form

 

Payment UI Design using xamarin form
Payment UI Design using xamarin form

Add following code in App.xaml in Resource Dictionary tag

get fontawesome code from here

Watch video to understand code

      <Color x:Key="Primary">#3AC3D6</Color>

            <Color x:Key="Secondary">#FFFFFF</Color>

            <Color x:Key="TextColorGray">#333333</Color>

            <Color x:Key="SeparatorColor">#E8E8E9</Color>

            <Color x:Key="BGColor">#FFFCF7</Color>

            <Style TargetType="Label" x:Key="PoppinsBoldLabel">

                <Setter Property="FontFamily" Value="Helvetica"></Setter>

                <Setter Property="FontAttributes" Value="Bold"></Setter>

                <Setter Property="TextColor" Value="{x:DynamicResource TextColorGray}"></Setter>

            </Style>

            <Style TargetType="Label" x:Key="PoppinsLabel">

                <Setter Property="FontFamily" Value="Helvetica"></Setter>

                <Setter Property="TextColor" Value="{x:DynamicResource TextColorGray}"></Setter>

            </Style>

Create Classess

CurrentPlanViewModel.xaml

    public class CurrentPlanViewModel
    {
        public string Name { get; set; }
        public string Place { get; set; }
        public string Price { get; set; }
        public string DateTime { get; set; }
    }

    public class CurrentPlanModel
    {
        public List<CurrentPlanViewModel> Get()
        {
            List<CurrentPlanViewModel> list = new List<CurrentPlanViewModel>();
            list.Add(new CurrentPlanViewModel { Name = "Get 50% off", DateTime = "Jan 20, 2022", Price = "$25", Place = "India" });
            list.Add(new CurrentPlanViewModel { Name = "Buy 1 Get 1 Free", DateTime = "Jan 20, 2022", Price = "$25", Place = "India" });
            return list;
        }
    }

CurrentTransactionViewModel.xaml

    public class CurrentTransactionViewModel
    {
        public string Description { get; set; }
        public string Price { get; set; }
        public string Symbol { get; set; }
        public Color TextClr { get; set; }
        public string DateTime { get; set; }
        public string Balance { get; set; }
    }

    public class CurrentTransactionModel
    {
        public List<CurrentTransactionViewModel> Get()
        {
            List<CurrentTransactionViewModel> list = new List<CurrentTransactionViewModel>();
            list.Add(new CurrentTransactionViewModel { Description = "Paid for Saree", Price = "-$30", Balance = "Bal: $0", DateTime = "Jan 8,2022 10:00 am", Symbol = Solid.Folder_Minus, TextClr = Color.Red });
            list.Add(new CurrentTransactionViewModel { Description = "Money Added to Wallet", Price = "+$60", Balance = "Bal: $60", DateTime = "Jan 8,2022 10:00 am", Symbol = Solid.Folder_Plus, TextClr = Color.Green });
            return list;
        }
    }

PaymentViewModel.xaml

    public class PaymentViewModel
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }

    public class PaymentModel
    {
        public List<PaymentViewModel> Get()
        {
            List<PaymentViewModel> list = new List<PaymentViewModel>();
            list.Add(new PaymentViewModel { Name = "Recharge", Value = "$25" });
            list.Add(new PaymentViewModel { Name = "Payment", Value = "$25" });
            return list;
        }
    }

Lets Create Template

CurrentPlanTemplate.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EShoppingUIDesigns.Views.Ecommerce.Template.CurrentPlanTemplate"
              xmlns:fontawesome="clr-namespace:EShoppingUIDesigns" >
  <ContentView.Content>
      <StackLayout>
            <StackLayout Padding="1,1,1,10">
                <Frame HasShadow="True" CornerRadius="20">
                    <Grid RowDefinitions="Auto,Auto,40" Margin="-20" ColumnDefinitions="80,Auto,Auto,Auto,*,100" ColumnSpacing="8" RowSpacing="0">
                        <Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuFP6EWVsgMAzFFLbjGftWiUqlLhe9lwZO5Q" Aspect="Fill"></Image>
                        <Label Grid.Row="0" Grid.Column="1" Margin="0,10,0,0" Grid.ColumnSpan="5" FontSize="16" Text="{Binding Name}" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                        <Label Grid.Row="0" Grid.Column="5" Text="$25" Margin="0,10,10,0" VerticalOptions="End" FontSize="16" HorizontalOptions="End" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>

                        <Label Grid.Row="1" Grid.Column="1" Text="{x:Static fontawesome:Solid.Map}" TextColor="{x:DynamicResource Primary}" VerticalOptions="Center" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                        <Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" VerticalOptions="Center" Text="{Binding Place}" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>

                        <Label Grid.Row="2" Grid.Column="1" Text="{x:Static fontawesome:Solid.Stopwatch}" TextColor="{x:DynamicResource Primary}" VerticalOptions="Start" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                        <Label Grid.Row="2" Grid.Column="2" Text="45 min" VerticalOptions="Start" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>
                        <Label Grid.Row="2" Grid.Column="3" Text="{x:Static fontawesome:Solid.Share_Alt}" TextColor="{x:DynamicResource Primary}" VerticalOptions="Start" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                        <Label Grid.Row="2" Grid.Column="4" Text="{x:Static fontawesome:Solid.Heart}" TextColor="{x:DynamicResource Primary}" VerticalOptions="Start" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                        <Button Grid.Row="2" Grid.Column="5"  HeightRequest="40" BackgroundColor="{x:DynamicResource Primary}"
                            Text="Book Now" VerticalOptions="End" FontSize="14" TextColor="{x:DynamicResource Secondary}"></Button>
                        <!--<Frame Grid.Row="2" HorizontalOptions="End" IsVisible="{Binding IsVisible}" Grid.Column="5" CornerRadius="10" HeightRequest="100" BackgroundColor="{x:DynamicResource Primary}">
                            <Label Text="Cancel" Margin="-20" HorizontalOptions="Center" VerticalOptions="Center" Style="{x:DynamicResource PoppinsLabel}" TextColor="{x:DynamicResource Secondary}"></Label>
                        </Frame>-->
                    </Grid>
                </Frame>
            </StackLayout>
        </StackLayout>
  </ContentView.Content>
</ContentView>

CurrentTransactionTemplate.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EShoppingUIDesigns.Views.Ecommerce.Template.CurrentTransactionTemplate"
              xmlns:fontawesome="clr-namespace:EShoppingUIDesigns" 
             xmlns:vm="clr-namespace:EShoppingUIDesigns.ViewModels.Ecommerce">
  <ContentView.Content>
        <StackLayout Padding="1,1,1,10">
            <Frame CornerRadius="10" HasShadow="True">
                <Grid x:DataType="vm:CurrentTransactionViewModel" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="-10">
                    <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" FontSize="30" Text="{x:Static fontawesome:Solid.Folder_Plus}" TextColor="{x:DynamicResource Primary}" VerticalOptions="Center" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding Description}" Style="{x:DynamicResource PoppinsBoldLabel}"  TextColor="{Binding TextClr}"  FontSize="16"></Label>
                    <Label Grid.Row="0" Grid.Column="2" Text="{Binding Price}" HorizontalOptions="End" TextColor="{Binding TextClr}" Style="{x:DynamicResource PoppinsBoldLabel}"   FontSize="16"></Label>
                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding DateTime}" Style="{x:DynamicResource PoppinsLabel}" FontSize="14"></Label>
                    <Label Grid.Row="1" Grid.Column="2" Text="{Binding Balance}" Style="{x:DynamicResource PoppinsLabel}" FontSize="14"></Label>
                </Grid>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

PaymentTemplate.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EShoppingUIDesigns.Views.Ecommerce.Template.PaymentTemplate">
  <ContentView.Content>
        <Grid ColumnDefinitions="*,Auto" RowSpacing="0" HeightRequest="30">
            <Label Grid.Column="0" Text="{Binding Name}" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
            <Label Grid.Column="1" Text="{Binding Value}" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
        </Grid>
    </ContentView.Content>
</ContentView>
PaymentDashboard.xaml

Payment UI Design using xamarin form
Payment UI Design using Xamarin form
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:control="clr-namespace:EShoppingUIDesigns.Controls"
             x:Class="EShoppingUIDesigns.Views.Ecommerce.PaymentDashboard"
             xmlns:fontawesome="clr-namespace:EShoppingUIDesigns" 
             xmlns:template="clr-namespace:EShoppingUIDesigns.Views.Ecommerce.Template"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <Grid RowDefinitions="Auto,*" >
            <control:TopNavBar Grid.Row="0" ></control:TopNavBar>
            <ScrollView Grid.Row="1">
                <Grid  RowDefinitions="Auto,Auto,25,Auto,Auto,Auto"  RowSpacing="10" Padding="10">
                    <Label Grid.Row="0" Text="Plan Details" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="18"></Label>
                    <Frame Grid.Row="1" BackgroundColor="{x:DynamicResource Secondary}" CornerRadius="10" HasShadow="True">
                        <Grid RowDefinitions="Auto,Auto,11,Auto,Auto" RowSpacing="3" Margin="-10,0" ColumnDefinitions="Auto,*,Auto">
                            <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" FontSize="30"  Text="{x:Static fontawesome:Solid.Money_Bill}" TextColor="{x:DynamicResource Primary}" VerticalOptions="CenterAndExpand" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                            <Label Grid.Row="0" Grid.Column="1" Text="Your Current Plan" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>
                            <Label Grid.Row="1" Grid.Column="1" Text="XYZ Plan" FontSize="16" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                            <Button Grid.Row="0" HeightRequest="40" Grid.RowSpan="2" Grid.Column="2" Text="Renew" HorizontalOptions="End" Margin="0,0,0,15" CornerRadius="10" TextColor="{x:DynamicResource Secondary}" BackgroundColor="{x:DynamicResource Primary}"></Button>

                            <BoxView Grid.Row="2" Margin="0,0,0,10" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="{x:DynamicResource SeparatorColor}"></BoxView>

                            <Label Grid.Row="3" Grid.RowSpan="2" Grid.Column="0" FontSize="30"  Text="{x:Static fontawesome:Solid.Money_Bill}" TextColor="{x:DynamicResource Primary}" VerticalOptions="Center" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                            <Label Grid.Row="3" Grid.Column="1" Text="Payment Due on 18.12.2022" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>
                            <Label Grid.Row="4" Grid.Column="1" Text="$500" FontSize="16" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                            <Button x:Name="btnPay" Grid.Row="3" Grid.RowSpan="2" HeightRequest="40" Grid.Column="2" Text="Pay" HorizontalOptions="End" CornerRadius="10" Margin="0,0,0,10"  TextColor="{x:DynamicResource Secondary}" BackgroundColor="{x:DynamicResource Primary}" Clicked="btnPay_Clicked"></Button>
                        </Grid>
                    </Frame>
                    <Label Grid.Row="2" Text="Current Plan" VerticalOptions="Center" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="18"></Label>

                    <ListView Grid.Row="3" VerticalOptions="Start" x:Name="listView" HasUnevenRows="True" ItemSelected="listView_ItemSelected">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <template:CurrentPlanTemplate></template:CurrentPlanTemplate>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                    <Label Grid.Row="4" Text="Current Transaction" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="18"></Label>
                    <ListView Grid.Row="5" x:Name="listView1" HasUnevenRows="True" ItemSelected="listView_ItemSelected">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <template:CurrentTransactionTemplate></template:CurrentTransactionTemplate>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Payment.Xaml

Payment UI Design using xamarin form
Payment UI Design using xamarin form

  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:control="clr-namespace:EShoppingUIDesigns.Controls" 
             xmlns:template="clr-namespace:EShoppingUIDesigns.Views.Ecommerce.Template"
             xmlns:fontawesome="clr-namespace:EShoppingUIDesigns" 
             x:Class="EShoppingUIDesigns.Views.Ecommerce.Payment"
             Shell.NavBarIsVisible="False">
    <ContentPage.Content>
        <Grid RowDefinitions="Auto,*">
            <control:TopNavBar Grid.Row="0" ></control:TopNavBar>
            <ScrollView  Grid.Row="1" >
                <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"  RowSpacing="10"  Padding="10">
                    <Label Grid.Row="1" Text="Booking Details" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="18"></Label>
                    <Frame Grid.Row="2" BackgroundColor="{x:DynamicResource Secondary}" CornerRadius="10" HasShadow="True">
                        <Grid RowDefinitions="Auto,Auto,1,Auto,Auto" RowSpacing="3" ColumnDefinitions="Auto,*,Auto,Auto">
                            <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" FontSize="30"  Text="{x:Static fontawesome:Solid.Calendar_Alt}" 
                                   TextColor="{x:DynamicResource Primary}" VerticalOptions="CenterAndExpand" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                            <Label Grid.Row="0" Grid.Column="1" Text="Date" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>
                            <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" FontSize="30"  Text="{x:Static fontawesome:Solid.Stopwatch}" 
                                   TextColor="{x:DynamicResource Primary}" VerticalOptions="CenterAndExpand" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                            <Label Grid.Row="0" Grid.Column="3" Text="Start Time" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>

                            <Label Grid.Row="1" Grid.Column="1" Text="January 08, 2023" FontSize="16" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                            <Label Grid.Row="1" Grid.Column="3" Text="10 am" FontSize="16" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>

                            <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" BackgroundColor="{x:DynamicResource SeparatorColor}"></BoxView>

                            <Label Grid.Row="3" Grid.RowSpan="2" Grid.Column="0" FontSize="30"  Text="{x:Static fontawesome:Solid.Stopwatch}" 
                                   TextColor="{x:DynamicResource Primary}" VerticalOptions="CenterAndExpand" FontFamily="{x:StaticResource FontAwesomeSolid}"></Label>
                            <Label Grid.Row="3" Grid.Column="1" Text="Duration" FontSize="14" Style="{x:DynamicResource PoppinsLabel}"></Label>
                            <Label Grid.Row="4" Grid.Column="1" Text="1:30 hours" FontSize="16" Style="{x:DynamicResource PoppinsBoldLabel}"></Label>
                        </Grid>
                    </Frame>
                    <Label Grid.Row="3" Text="Service" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="18"></Label>
                    <Frame Grid.Row="4" CornerRadius="10" HasShadow="True"  BackgroundColor="{x:DynamicResource Secondary}">
                        <Grid RowDefinitions="Auto,1,Auto,Auto,1,Auto,Auto" ColumnDefinitions="*,Auto">
                            <ListView x:Name="listview" ItemSelected="listview_ItemSelected" HasUnevenRows="True" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" SeparatorVisibility="None">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <template:PaymentTemplate></template:PaymentTemplate>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                            <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="{x:DynamicResource SeparatorColor}"></BoxView>

                            <Label Grid.Row="2" Grid.Column="0" Text="Sub Total" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
                            <Label Grid.Row="2" Grid.Column="1" Text="$50" HorizontalOptions="End" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />

                            <Label Grid.Row="3" Grid.Column="0" Text="Discount" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
                            <Label Grid.Row="3" Grid.Column="1" Text="-$10" HorizontalOptions="End" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />

                            <BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="{x:DynamicResource SeparatorColor}"></BoxView>

                            <Label Grid.Row="5" Grid.Column="0" Text="Total" Style="{x:DynamicResource PoppinsBoldLabel}" TextColor="{x:DynamicResource Primary}" FontSize="20" />
                            <Label Grid.Row="5" Grid.Column="1" Text="$40" HorizontalOptions="End" Style="{x:DynamicResource PoppinsBoldLabel}" TextColor="{x:DynamicResource Primary}" FontSize="20" />
                        </Grid>
                    </Frame>
                    <Frame Grid.Row="5" CornerRadius="10" HasShadow="True"  BackgroundColor="{x:DynamicResource Secondary}">
                        <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*"  RowSpacing="0">
                            <CheckBox Grid.Row="0" Grid.RowSpan="2" VerticalOptions="Center" IsChecked="True"></CheckBox>
                            <Label Grid.Row="0" Grid.Column="1" Text="Wallet" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
                            <Label Grid.Row="1" Grid.Column="1" Text="Your current balance is $20" Style="{x:DynamicResource PoppinsLabel}" FontSize="14" />
                        </Grid>
                    </Frame>
                    <Frame Grid.Row="6" CornerRadius="10" HasShadow="True"  BackgroundColor="{x:DynamicResource Secondary}">
                        <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*" RowSpacing="0">
                            <RadioButton Grid.Row="0" Grid.RowSpan="2" VerticalOptions="Center" IsChecked="False"></RadioButton>
                            <Label Grid.Row="0" Grid.Column="1" Text="Magpie" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
                            <Label Grid.Row="1" Grid.Column="1" Text="Instant payment via UPI/Debit/Credit card using any bank account" Style="{x:DynamicResource PoppinsLabel}" FontSize="14" />
                        </Grid>
                    </Frame>

                    <Frame Grid.Row="7" CornerRadius="10" HasShadow="True"  BackgroundColor="{x:DynamicResource Secondary}">
                        <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*"  RowSpacing="0">
                            <RadioButton Grid.Row="0" Grid.RowSpan="2" VerticalOptions="Center" IsChecked="False"></RadioButton>
                            <Label Grid.Row="0" Grid.Column="1" Text="Pay at Salon" Style="{x:DynamicResource PoppinsBoldLabel}" FontSize="16" />
                            <Label Grid.Row="1" Grid.Column="1" Text="You can pay your service bill at Salon on arrival" Style="{x:DynamicResource PoppinsLabel}" FontSize="14" />
                        </Grid>
                    </Frame>
                    <Button Grid.Row="8" CornerRadius="10" TextColor="{x:DynamicResource Secondary}" Text="You pay $20" BackgroundColor="{x:DynamicResource Primary}"></Button>

                </Grid>
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Hope this is helpful to you, Please share your feedback in comment section. Thanks for reading.

-

Comments

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Please, support my blog by clicking on our sponsors ad! IF you need this project DM me on whatsaap "9724784544" What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and iOS platforms. We'll start by setting up a Firebase account, configuring the necessary dependencies, and writing the required code for Android and iOS.  Setting Up a Firebase Account Go to Firebase Console: Navigate to the Firebase ...
Read more

Explore the UI libraries available for .NET MAUI at no cost.

Image
  In this article, we'll explore some of the free libraries available for .NET MAUI. Please, support my blog by clicking on our sponsors ad! In this article, we'll explore some of the free libraries available for .NET MAUI. I think many developers, when creating applications, seek free or open-source UI libraries that enhance the user experience, are compatible, or at least have support plans for .NET MAUI. That's why today, I want to share some options I found that you can explore and implement in your projects: MauiBlazor  Specifically crafted for .NET MAUI, this library provides Blazor UI components for cross-platform development. Repository: MauiBlazor on GitHub Built on Blazor, this library allows you to create cross-platform applications using C#, HTML, and JavaScript. Note: Ensure to review the documentation and updates to confirm compatibility with your .NET MAUI version. Comet  Initially designed for Xamarin.Forms, Comet is a UI framew...
Read more

Push Notification using Firebase in xamarin form (Android and IOS)

Image
Push Notification using Firebase in xamarin form (Android and IOS) Please, support my blog by clicking on our sponsors ad! Watch video to understand the code: https://youtu.be/1Ixc_B86mDk Follow steps to create push notification in both project. Create Project in  https://console.firebase.google.com/ Create Project for push notification After Creating Project add app for both IOS and Android Project. Create app in project For Both IOS and Android project add Package name. Package name should be same as your package name in Xamarin Android and IOS Project. Click on Register App Download Google Service json. If you are in android app then download google-services.json else if you are in ios app then download "GoogleService-Info.plist" file Click Next then click Next then Click Continue to console button. We have created project in firebase console now we will continue coding in xamarin. In Android Project add Internet Permission. Right click on android project -> ...
Read more