Home Page - Food Delivery App in Maui

 

Home Page - Food Delivery App in MAUI
Home Page - Food Delivery App in MAUI

Follow basic setup from here
You will get all page of this app from FoodDeliveryApp Menu on top.

Let's Create Model

MenuModel

    public class MenuModel
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Description { get; set; }
        public ImageSource Image { get; set; }
    }

RestaurantModel

   public class RestaurantModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Rating { get; set; }
        public ImageSource Image { get; set; }

        public List<MenuModel> Menus { get; set; } = new List<MenuModel>();

    }

BannerModel

   public class BannerModel 
    {
        public ImageSource Image { get; set; }
    }

BaseViewModel

    public class BaseViewModel : INotifyPropertyChanged
    {
        bool isBusy = false;
        public bool IsBusy
        {
            get { return isBusy; }
            set { SetProperty(ref isBusy, value); }
        }

        protected bool SetProperty<T>(ref T backingStore, T value,
            [CallerMemberName] string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

MainViewModel

    public class MainViewModel
    {
        public List<BannerModel> BannerModel { get; set; } = new List<BannerModel>();
        public List<RestaurantModel> Restaurants { get; set; } = new List<RestaurantModel>();
        public List<RestaurantModel> FirstSlotRestaurants { get; set; } = new List<RestaurantModel>();
        public List<RestaurantModel> SecondSlotRestaurants { get; set; } = new List<RestaurantModel>();
        public List<MenuModel> Menus { get; set; } = new List<MenuModel>();
    }

HomeViewModel

    public class HomeViewModel : BaseViewModel
    {

        public Command LoadBannerCommand { get; set; }
        private List<MainViewModel> bannerVM;
        public HomeViewModel()
        {
            LoadBannerCommand = new Command(async () => await ExecuteLoadBannerCommand());
        }

        public List<MainViewModel> vm
        {
            get
            {
                return bannerVM;
            }
            set
            {
                SetProperty(ref bannerVM, value);
            }
        }

        public async Task ExecuteLoadBannerCommand()
        {
            try
            {
                IsBusy = true;
                vm = new List<MainViewModel>();
                vm.Add(new MainViewModel { BannerModel = new List<BannerModel>() });
                List<BannerModel> list = new List<BannerModel>();
                list.Add(new BannerModel { Image = "https://cdn.grabon.in/gograbon/images/web-images/uploads/1658919135375/swiggy-coupons.jpg" });
                list.Add(new BannerModel { Image = "https://www.dealsshutter.com/uploads/social_images/stores/swiggy-coupons-social-image-final-1621831150.jpg" });
                list.Add(new BannerModel { Image = "https://www.couponmoto.com/boards/wp-content/uploads/2019/02/Swiggy-Banner.png" });
                list.Add(new BannerModel { Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8CF6zXRURcFjGNS4twbPJefG596hzaydN1d_oC4Xtx391t_BOIxqLXsfUgv4RlK0V2JY" });
                list.Add(new BannerModel { Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9-SipuwkwtNCQCBbr47cU0-tWqYfO4QJLJQ" });


                List<MenuModel> menus = new List<MenuModel>();
                menus.Add(new MenuModel { Name = "Locho", Description = "Locho", Price = 25, Image = "https://cdn-bkdna.nitrocdn.com/byIcNObNLXVFaYWLstICKAkCMytzVoyD/assets/static/optimized/rev-02ea418/wp-content/uploads/2021/03/LOCHO.jpg" });
                menus.Add(new MenuModel { Name = "Pani Puri", Description = "Locho", Price = 25, Image = "https://akm-img-a-in.tosshub.com/indiatoday/images/story/201708/dish-story_647_081417052301.jpg" });
                menus.Add(new MenuModel { Name = "Chole Bhature", Description = "Chole Bhature", Price = 25, Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXh5LCoOMSM_9pmgcOROJRd4If-6ciXX_bkw" });
                menus.Add(new MenuModel { Name = "Lithi Chokha", Description = "Locho", Price = 25, Image = "https://img.traveltriangle.com/blog/wp-content/uploads/2018/01/shutterstock_4148348021.jpg" });
                menus.Add(new MenuModel { Name = "Indian Food", Description = "Indian Food", Price = 25, Image = "https://t3.ftcdn.net/jpg/01/43/83/08/360_F_143830808_V7n31HxcS8duJIVr3opWzG4FCkDQZK4v.jpg" });


                List<RestaurantModel> restaurants = new List<RestaurantModel>();
                restaurants.Add(new RestaurantModel
                {
                    Name = "Table 101",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://hips.hearstapps.com/hmg-prod/images/img-6171-jpg-1516034404.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Foina",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://im1.dineout.co.in/images/uploads/restaurant/sharpen/4/l/h/p4185-164156150261d83d9ec6ca8.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Kabab and Kurries",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx0hX-qswrn0vA1ZGogh05cd6dbRiJqbG-ww",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Rasoi Kitchen",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTO5nlpGTbABZretJas2xH6RDnWIhTbiRoIOA",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Mabruk",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://threebestrated.in/images/MahalaxmiFastFoodandJuiceCorner-Surat-GJ.jpeg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Saptami",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://i0.wp.com/swadishta.de/wp-content/uploads/2021/01/Thali.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Yeda Republic",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://i0.wp.com/indiacurrents.com/wp-content/uploads/2022/09/pesarratu.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Peshawari",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCAOb9b2dUqUFuUbzbYlMWu4qLwrxjRs_2Dg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Solitare Restaurant",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://static.toiimg.com/thumb/56624568/308796_287027921321520_585680932_n.jpg",
                    Menus = menus
                });

                restaurants.Add(new RestaurantModel
                {
                    Name = "Gallery Cafe",
                    Description = "Good Option",
                    Rating = "4.0 (10k)",
                    Image = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsuxe-gEy1j2uKXJG9pUWdx-ZGalqtGCDStw",
                    Menus = menus
                });

                vm[0].BannerModel = list;
                bannerVM[0].Restaurants = restaurants;
                bannerVM[0].FirstSlotRestaurants = restaurants.Take(3).ToList();
                bannerVM[0].SecondSlotRestaurants = restaurants.Reverse<RestaurantModel>().Take(7).ToList();
                bannerVM[0].Menus = menus;
            }
            catch (Exception ex)
            {
                await App.Current.MainPage.DisplayAlert("", ex.Message, "OK");
            }
            IsBusy = false;
        }

        public void OnAppearing()
        {
            IsBusy = true;
        }


    }
Let's Create a Control

ProductHomeControl.xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Controls.ProductHomeControl"
             xmlns:fontAwesome="clr-namespace:FoodDeliveryApp.Utilities">
    <Grid ColumnDefinitions="Auto,Auto,*,Auto" RowDefinitions="Auto,Auto" ColumnSpacing="5" RowSpacing="5">
        <Label Grid.Column="0" Grid.Row="0" Text="{x:Static fontAwesome:FontAwesomeSolid.Shopping_Bag}" 
               FontSize="15"  TextColor="{x:StaticResource Primary}" FontFamily="FontAwesome" ></Label>
        <Label Grid.Column="1" Grid.Row="0" Text="Work" TextColor="{x:StaticResource Secondary}" 
               FontAttributes="Bold" ></Label>
        <Label Grid.Column="2" Grid.Row="0" Text="{x:Static fontAwesome:FontAwesomeSolid.Angle_Down}"
               VerticalOptions="End" FontSize="20" TextColor="{x:StaticResource Gray}" FontFamily="FontAwesome" >
            
        </Label>
        <Label Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Text="{x:Static fontAwesome:FontAwesomeSolid.User_Circle}" 
               FontSize="30" TextColor="{x:StaticResource Gray}" FontFamily="FontAwesome" ></Label>
        <Label Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Text="1600 Amphitheatre Parkway 
               Mountain View, CA 94043, USA." TextColor="{x:StaticResource Gray}"></Label>
    </Grid>
</ContentView>
RoundCornerImage.Xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Controls.RoundCornerImage">
    <Grid RowDefinitions="Auto,Auto" Padding="5">
        <Frame Grid.Row="0" Padding="0" CornerRadius="20">
            <Image x:Name="img" HeightRequest="80" Aspect="AspectFill"></Image>
        </Frame>
        <Label Grid.Row="1" x:Name="lbl" TextColor="{x:StaticResource Gray}" HorizontalOptions="Center" Margin="0,8,0,0"></Label>
    </Grid>
</ContentView>
RoundCornerImage.Xaml.cs
public partial class RoundCornerImage : ContentView
{
    public RoundCornerImage()
    {
        InitializeComponent();
    }

    public ImageSource Image { get => img.Source; set => img.Source = value; }
    public bool IsAnimation { get => img.IsAnimationPlaying; set => img.IsAnimationPlaying = value; }
    public string Title { get => lbl.Text; set => lbl.Text = value; }
}

Let's Create Template

BannerTemplate.Xaml

 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.Template.BannerTemplate"
             xmlns:model="clr-namespace:FoodDeliveryApp.Models">
    <StackLayout Padding="5">
        <Frame x:DataType="model:BannerModel" Padding="0" CornerRadius="10">
            <Image Source="{Binding Image}" HeightRequest="150" Aspect="AspectFill"></Image>
        </Frame>
    </StackLayout>
</ContentView>

ProductTemplate.xaml

  <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.Template.ProductTemplate">
    <Grid Padding="5" ColumnSpacing="10" RowDefinitions="Auto" RowSpacing="0" ColumnDefinitions="150,*">
        <Frame  Padding="0" CornerRadius="10" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4">
            <Image Source="{Binding Image}" HeightRequest="150" Aspect="AspectFill"></Image>
        </Frame>
        <StackLayout Grid.Row="0" Grid.Column="1" VerticalOptions="CenterAndExpand">
            <Label  Text="{Binding Name}" TextColor="{x:StaticResource Gray}" VerticalOptions="Start" FontAttributes="Bold"></Label>
            <Label Text="{Binding Rating}" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
            <Label Text="{Binding Description}" TextColor="{x:StaticResource Gray}" ></Label>
            <Label Text="Gopipura . 15km" TextColor="{x:StaticResource Gray}" ></Label>
        </StackLayout>
    </Grid>
</ContentView>

Let's Create Home Page

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.Home"
             xmlns:control="clr-namespace:FoodDeliveryApp.Controls"
             xmlns:fontAwesome="clr-namespace:FoodDeliveryApp.Utilities"
             xmlns:vm="clr-namespace:FoodDeliveryApp.ViewModels"
             xmlns:model="clr-namespace:FoodDeliveryApp.Models"
             xmlns:template="clr-namespace:FoodDeliveryApp.Pages.Products.Template"
             Title="Home"
             Shell.NavBarIsVisible="False">
    <RefreshView x:Name="refreshView" x:DataType="vm:HomeViewModel" Command="{Binding LoadBannerCommand}" 
                 IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
        <Grid RowDefinitions="Auto,Auto,*" Padding="10" RowSpacing="10" x:DataType="vm:HomeViewModel" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <control:ProductHomeControl Grid.Row="0"></control:ProductHomeControl>
            <Frame Padding="12" Grid.Row="1" BackgroundColor="#f8f8f8" BorderColor="#f8f8f8" HasShadow="True">
                <Grid ColumnDefinitions="*,Auto,Auto,Auto" ColumnSpacing="10">
                    <Label Grid.Column="0" Text="Search,Order,Enjoy,Repeat" TextColor="{x:StaticResource Gray}"></Label>
                    <Label Grid.Column="1" Text="{x:Static fontAwesome:FontAwesomeSolid.Search}" TextColor="{x:StaticResource Gray}" FontSize="20" FontFamily="FontAwesome"></Label>
                    <BoxView Grid.Column="2" BackgroundColor="{x:StaticResource Gray}" HeightRequest="20" WidthRequest="1"></BoxView>
                    <Label Grid.Column="3" Text="{x:Static fontAwesome:FontAwesomeSolid.Microphone}" FontSize="20" TextColor="{x:StaticResource Secondary}" FontFamily="FontAwesome">

                    </Label>
                </Grid>
            </Frame>

            <ListView x:DataType="vm:HomeViewModel" x:Name="listView" ItemsSource="{Binding vm}" Grid.Row="2" HasUnevenRows="True" SeparatorVisibility="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid x:DataType="vm:MainViewModel" RowSpacing="10" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto">

                                <Grid ColumnDefinitions="*,*,*" Grid.Row="0">
                                    <control:RoundCornerImage Grid.Column="0" x:Name="img1" Image="https://img95.lovepik.com/photo/40104/9102.gif_wh300.gif" IsAnimation="True" Title="Tasty"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Column="1" x:Name="img2" Image="https://i.pinimg.com/736x/a9/e7/b9/a9e7b9c4a3e6d2a260d68bd6fd019dc7.jpg"  Title="Ofer Zone"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Column="2" x:Name="img3" Image="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHpwbHdiMTFiaTBoY3kyZTNueTk4bXA4eGNjcWxzOGNmaTgzaDU4ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Yuy61Bd6K8STS/giphy.gif" IsAnimation="True" Title="Gourmet"></control:RoundCornerImage>
                                </Grid>
                                <StackLayout Grid.Row="1">
                                    <!-- Other content for the list item -->
                                    <CarouselView IndicatorView="indicatorView" Grid.Row="1"  ItemsSource="{Binding BannerModel}" PeekAreaInsets="15">
                                        <CarouselView.ItemsLayout>
                                            <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle"></LinearItemsLayout>
                                        </CarouselView.ItemsLayout>
                                        <CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <template:BannerTemplate></template:BannerTemplate>
                                            </DataTemplate>
                                        </CarouselView.ItemTemplate>
                                    </CarouselView>
                                    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
                                </StackLayout>


                                <Label Text="Your trusted picks" Grid.Row="2" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
                                <Frame CornerRadius="20" HorizontalOptions="Start" Padding="0" Grid.Row="3" BackgroundColor="{x:StaticResource Gray}">
                                    <Label Text="Reorder" TextColor="white" FontAttributes="Bold" Margin="10" ></Label>
                                </Frame>

                                <Grid Grid.Row="4" ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto">
                                    <control:RoundCornerImage Grid.Row="0" Grid.Column="0"  Image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsuxe-gEy1j2uKXJG9pUWdx-ZGalqtGCDStw" IsAnimation="True" Title="Thali"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="0" Grid.Column="1"  Image="https://static.toiimg.com/thumb/56624568/308796_287027921321520_585680932_n.jpg"  Title="Ofer Zone"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="0" Grid.Column="2"  Image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCAOb9b2dUqUFuUbzbYlMWu4qLwrxjRs_2Dg" IsAnimation="True" Title="South Indian"></control:RoundCornerImage>

                                    <control:RoundCornerImage Grid.Row="1" Grid.Column="0"  Image="https://i0.wp.com/indiacurrents.com/wp-content/uploads/2022/09/pesarratu.jpg" IsAnimation="True" Title="Roll"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="1" Grid.Column="1"  Image="https://i0.wp.com/swadishta.de/wp-content/uploads/2021/01/Thali.jpg"  Title="Full Thali"></control:RoundCornerImage>
                                    <control:RoundCornerImage Grid.Row="1" Grid.Column="2"  Image="https://threebestrated.in/images/MahalaxmiFastFoodandJuiceCorner-Surat-GJ.jpeg" IsAnimation="True" Title="Sandwich"></control:RoundCornerImage>
                                </Grid>

                                <Image Grid.Row="5" Source="https://media.tenor.com/K67T2j90c-cAAAAC/fruits-web-banner.gif" Aspect="AspectFill" IsAnimationPlaying="True"></Image>



                                <ListView HasUnevenRows="True" Grid.Row="6" ItemsSource="{Binding FirstSlotRestaurants}" SeparatorVisibility="None">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

                                <StackLayout BackgroundColor="{x:StaticResource LightGray}" Grid.Row="7" Spacing="10" Padding="10">
                                    <Label Text="Popular Restaurant" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
                                    <CarouselView    ItemsSource="{Binding Restaurants}" >
                                        <CarouselView.ItemsLayout>
                                            <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle"></LinearItemsLayout>
                                        </CarouselView.ItemsLayout>
                                        <CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </DataTemplate>
                                        </CarouselView.ItemTemplate>
                                    </CarouselView>
                                </StackLayout>

                                <ListView HasUnevenRows="True" Grid.Row="8" ItemsSource="{Binding SecondSlotRestaurants}" SeparatorVisibility="None">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

                                <StackLayout BackgroundColor="{x:StaticResource LightGray}" Grid.Row="9" Spacing="10" Padding="10">
                                    <Label Text="Popular Menu" TextColor="{x:StaticResource Gray}" FontAttributes="Bold"></Label>
                                    <CarouselView    ItemsSource="{Binding Menus}" >
                                        <CarouselView.ItemsLayout>
                                            <LinearItemsLayout ItemSpacing="0" Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="MandatorySingle"></LinearItemsLayout>
                                        </CarouselView.ItemsLayout>
                                        <CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <template:ProductTemplate></template:ProductTemplate>
                                            </DataTemplate>
                                        </CarouselView.ItemTemplate>
                                    </CarouselView>
                                </StackLayout>


                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </RefreshView>
</ContentPage>

HomePage.xaml.cs

public partial class Home : ContentPage
{
    HomeViewModel _viewModel;
	public Home()
	{
		InitializeComponent();
        BindingContext = _viewModel = new HomeViewModel();
	}

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        _viewModel.OnAppearing();
    }
}

Hope this is helpfull to you. please share your feedback in comment section.

-

Comments

Post a Comment

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. 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 ...
Read more

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

Image
Push Notification using Firebase in xamarin form (Android and IOS) 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 -> Click on property -> In left menu select "Androi...
Read more

School UI Design using xamarin form

Image
School UI Design using xamarin form All Part of School UI Design: https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_4.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-using-xamarin-form_10.html https://xamarinuidesigns.blogspot.com/2022/03/school-ui-design-fees-gallery-profile.html First add  Fontawesome  in your project. First image is for Dashboard, Second is for TimeTable and last is for Syllabus. Rest of the page will publish in next blog. You can also replace the calendar view with another calendar control as listed below: Calendar Control 1 Calendar Contorl 2 Code is explain in this video First we will change NavigationDrawercolor. In App.xaml add following code in Application.Resources Tag <Application.Resources> <ResourceDictionary> <OnPlatform x:TypeArguments="x:String" x:Key="FontAwesom...
Read more