Food Delivery App - Filter Page

 

Food Delivery App - Filter Page
Food Delivery App - Filter Page

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

watch video to understand code.

Create Model for filter
ProductFilterViewModel.cs

    public class ProductFilterViewModel : BaseViewModel
    {
        public Command LoadProductCommand { get; set; }
        private ObservableCollection<MenuModel> menuVM;
        private string filterText;
        private bool _isVisible = false;
        private bool _recentSearchIsVisible = true;
        private MenuModel _selectedItem;
        public Command ItemSelectedCommand { get; set; }
        public ProductFilterViewModel()
        {
            ItemSelectedCommand = new Command<MenuModel>(OnItemSelected);
        }
        public ObservableCollection<MenuModel> vm
        {
            get
            {
                return menuVM;
            }
            set
            {
                SetProperty(ref menuVM, value);
            }
        }

        public bool IsVisible
        {
            get
            {
                return _isVisible;
            }
            set
            {
                SetProperty(ref _isVisible, value);
            }
        }

        public bool RecentSearchIsVisible
        {
            get
            {
                return _recentSearchIsVisible;
            }
            set
            {
                SetProperty(ref _recentSearchIsVisible, value);
            }
        }


        public string FilterText
        {
            get { return filterText; }
            set
            {
                if (filterText != value)
                {
                    SetProperty(ref filterText, value);
                    GetMenu(value);
                }
            }
        }

        public MenuModel SelectedItem
        {
            get { return _selectedItem; }
            set
            {
                SetProperty(ref _selectedItem, value);
            }
        }


        private async void OnItemSelected(MenuModel item)
        {
            await Shell.Current.GoToAsync("ProductList");
        }


        private void GetMenu(string filterText)
        {
            ObservableCollection<MenuModel> menus = new ObservableCollection<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" });
            if (string.IsNullOrEmpty(filterText))
            {
                vm = new ObservableCollection<MenuModel>();
                IsVisible = false;
                RecentSearchIsVisible = true;
            }
            else
            {
                vm = new ObservableCollection<MenuModel>(menus.Where(a => a.Name.ToLower().Contains(filterText.ToLower())).ToList());
                IsVisible = vm.Count > 0;
                RecentSearchIsVisible = (vm.Count == 0);
            }

        }
        public void OnAppearing()
        {
            IsBusy = true;
        }

    }

Create Control
BackControl.xaml

   <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Controls.BackControl"
             xmlns:fontAwesome="clr-namespace:FoodDeliveryApp.Utilities">
    <Grid ColumnDefinitions="Auto,*" ColumnSpacing="20">
        <Label Grid.Column="0" Text="{x:Static fontAwesome:FontAwesomeSolid.Arrow_Left}" 
               FontFamily="FontAwesome" TextColor="{x:StaticResource Gray}">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>
        <Label Grid.Column="1" x:Name="lbl" TextColor="{x:StaticResource Gray}"></Label>
    </Grid>
</ContentView>

BackControl.Xaml.cs

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

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

    private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        await Shell.Current.GoToAsync("..");
    }
}

RoundLabelWithIcon.xaml

 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Controls.RoundLabelWithIcon"
             xmlns:fontAwesome="clr-namespace:FoodDeliveryApp.Utilities">
    <StackLayout>
        <Frame Padding="10" CornerRadius="20">
            <Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="10">
                <Label Grid.Column="0" x:Name="icon"  FontFamily="FontAwesome" TextColor="Gray"></Label>
                <Label Grid.Column="1" x:Name="lbl" TextColor="{x:StaticResource Gray}"></Label>
            </Grid>
        </Frame> 
    </StackLayout>
</ContentView>

RoundLabelWithIcon.xaml.cs

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

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

}

FilterPage.xaml

 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodDeliveryApp.Pages.Products.FilterPage"
             xmlns:controls="clr-namespace:FoodDeliveryApp.Controls"
             Shell.NavBarIsVisible="False"
             xmlns:fontAwesome ="clr-namespace:FoodDeliveryApp.Utilities"

    Title="FilterPage">
    <Grid RowDefinitions="Auto,Auto,Auto" Padding="20" RowSpacing="20">
        <controls:BackControl Grid.Row="0" Text="Search for dishes and restaurants"></controls:BackControl>
        <Frame Grid.Row="1" CornerRadius="20" Padding="5">
            <Grid ColumnDefinitions="*,Auto,Auto,Auto" HeightRequest="50" ColumnSpacing="10">
                <Entry x:Name="txtSearch" Margin="10,0,0,0" Placeholder="Try 'Cake" 
                       Text="{Binding FilterText, Mode=TwoWay}"></Entry>
                <Label Grid.Column="1" VerticalOptions="Center" 
                       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" VerticalOptions="Center" Text="{x:Static fontAwesome:FontAwesomeSolid.Microphone}"
                       FontSize="20" TextColor="{x:StaticResource Secondary}" FontFamily="FontAwesome">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                    </Label.GestureRecognizers>
                </Label>
            </Grid>
        </Frame>

        <Grid Grid.Row="2" IsVisible="{Binding RecentSearchIsVisible}" RowSpacing="10" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">


            <Label Grid.Row="0" Text="Recent Searches in Food" TextColor="{x:StaticResource Gray}" 
                   FontSize="15" FontAttributes="Bold"></Label>

            <Grid Grid.Row="1" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto" 
                  RowSpacing="10" ColumnSpacing="10">
                <controls:RoundLabelWithIcon Grid.Row="0" Grid.Column="0" Text="Maakhan Bhog" 
                                             Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
                <controls:RoundLabelWithIcon Grid.Row="0" Grid.Column="1"  Text="Bismillah" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
                <controls:RoundLabelWithIcon Grid.Row="1" Grid.Column="0"  Text="Madras Cafe" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
                <controls:RoundLabelWithIcon Grid.Row="1" Grid.Column="1"  Text="La Pinoz Pizza" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
            </Grid>

            <Frame Grid.Row="2" Padding="0" CornerRadius="20">
                <Image  Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9-SipuwkwtNCQCBbr47cU0-tWqYfO4QJLJQ"></Image>
            </Frame>

            <Label Grid.Row="3" Text="Recent Searches in Food" TextColor="{x:StaticResource Gray}" FontSize="15" FontAttributes="Bold"></Label>

            <Grid Grid.Row="4" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10">
                <controls:RoundLabelWithIcon Grid.Row="0" Grid.Column="0" Text="Radhe Dhokla" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
                <controls:RoundLabelWithIcon Grid.Row="0" Grid.Column="1"  Text="Madi Ni Khamni" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
                <controls:RoundLabelWithIcon Grid.Row="1" Grid.Column="0"  Text="Butter Locho" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
                <controls:RoundLabelWithIcon Grid.Row="1" Grid.Column="1"  Text="Jalebi" Icon="{x:Static fontAwesome:FontAwesomeSolid.Chart_Line}"></controls:RoundLabelWithIcon>
            </Grid>

            <Grid Grid.Row="5" RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*">
                <controls:RoundCornerImage Grid.Column="0" Grid.Row="0" Image="https://img95.lovepik.com/photo/40104/9102.gif_wh300.gif" IsAnimation="True" Title="Tasty"></controls:RoundCornerImage>
                <controls:RoundCornerImage Grid.Column="1" Grid.Row="0" Image="https://i.pinimg.com/736x/a9/e7/b9/a9e7b9c4a3e6d2a260d68bd6fd019dc7.jpg"  Title="Ofer Zone"></controls:RoundCornerImage>
                <controls:RoundCornerImage Grid.Column="2" Grid.Row="0" Image="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHpwbHdiMTFiaTBoY3kyZTNueTk4bXA4eGNjcWxzOGNmaTgzaDU4ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Yuy61Bd6K8STS/giphy.gif" IsAnimation="True" Title="Gourmet"></controls:RoundCornerImage>
                <controls:RoundCornerImage Grid.Column="0" Grid.Row="1" Image="https://img95.lovepik.com/photo/40104/9102.gif_wh300.gif" IsAnimation="True" Title="Tasty"></controls:RoundCornerImage>
                <controls:RoundCornerImage Grid.Column="1" Grid.Row="1" Image="https://i.pinimg.com/736x/a9/e7/b9/a9e7b9c4a3e6d2a260d68bd6fd019dc7.jpg"  Title="Ofer Zone"></controls:RoundCornerImage>
                <controls:RoundCornerImage Grid.Column="2" Grid.Row="1" Image="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHpwbHdiMTFiaTBoY3kyZTNueTk4bXA4eGNjcWxzOGNmaTgzaDU4ZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Yuy61Bd6K8STS/giphy.gif" IsAnimation="True" Title="Gourmet"></controls:RoundCornerImage>
            </Grid>
        </Grid>

        <ListView x:Name="listView" Grid.Row="2" IsVisible="{Binding IsVisible}" ItemSelected="listView_ItemSelected"
                      ItemsSource="{Binding vm, Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Label Text="{Binding Name}"></Label>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>

FilterPage.xaml.cs

   public partial class FilterPage : ContentPage
{
	string filterText = string.Empty;
	ViewModels.ProductFilterViewModel vm;
    public FilterPage()
	{
		InitializeComponent();
		filterText =(string) Utilities.Helper.ParameterValue;
        vm = new ViewModels.ProductFilterViewModel();
        BindingContext = vm;
        vm.FilterText = filterText;
    }

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {

    }

    private async void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        await Shell.Current.GoToAsync("ProductList");
    }
}

For RoundCornerImage follow this link

watch video to understand code.

Hope this is help full to you. share your feedback in comment section.

-

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