Wsrtjtyk

I want to fulfill this UI in Xamarin Forms. This is the screenshot of my UI.

So I have no clue how to do this UI in xamarin forms. I'm confused is it cardview or just a view in which I have to add all this images and labels. I need some suggestions for implementing this UI.

I assume that you will have several restaurants as some kind of search result and presumably the view will have to be scrollable if there are many results?

I would implement that with a ListView:

<ListView ItemsSource="{Binding Restaurants} HasUnevenRows="True">

    <ListView.ItemTemplate>

        <DataTemplate>

            <ViewCell Height="100">

                <Grid>

                     <Grid.RowDefinitions>

                         <RowDefinition Height="*">

                         <RowDefinition Height="*">

                         <RowDefinition Height="*">

                         <RowDefinition Height="*">

                     </Grid.RowDefinitions>

                     <Grid.ColumnDefinitions>

                         <ColumnDefinition Width="100"/>

                         <ColumnDefinition Width="*"/>

                         <ColumnDefinition Width="*"/>

                         <ColumnDefinition Width="*"/>

                     </Grid.ColumnDefinitions>

                     <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" .... />

                     <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Title}" ... />

                     <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" ... />     

                     <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" ... />    

                     <!-- Add implementations for Rating, Like-Button and other labels in according rows and columns -->                  

                </Grid>

            </ViewCell>

        </DataTemplate>

    </ListView.ItemTemplate>

</ListView>

You would also need a Model class for your restaurant item which will contain all Data as I have sketched out within the {Binding XXX} tags. In your codebehind you have to create a List (or better an ObservableCollection ) and set that as the ListView's Itemssource.

Also you will probably need to add some effects or custom renderers for the visual touch-ups such as drop shadows, etc.

You can create a "CardView" using the “Frame” layout available in Xamarin.Forms.

The code is as follows:

CardViewTemplate.xml:

<?xml version="1.0" encoding="UTF-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="App68.CardViewTemplate">

    <ContentView.Content>

        <Frame IsClippedToBounds="True"  

           HasShadow="True"  

           Margin="30"

           BorderColor="White"

           BackgroundColor="White" >

            <Frame.OutlineColor>

                <OnPlatform x:TypeArguments="Color"  

                    Android="Gray"  

                    iOS="Gray"/>

            </Frame.OutlineColor>

            <Frame.Margin>

                <OnPlatform x:TypeArguments="Thickness"  

                     Android="10"   

                     iOS="10"/>

            </Frame.Margin>

            <StackLayout Orientation="Horizontal">



                <Grid VerticalOptions="CenterAndExpand"  

                 Padding="0"  

                 HorizontalOptions="FillAndExpand"  

                 BackgroundColor="Transparent">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="25" />

                        <RowDefinition Height="25" />

                        <RowDefinition Height="25" />

                        <RowDefinition Height="25" />

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="100"/>

                        <ColumnDefinition Width="*"/>

                        <ColumnDefinition Width="*"/>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" />

                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding RestaurantName}" />

                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}"  />

                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" />

                    <Label Grid.Row="3" Grid.Column="1" Text="{Binding Rating}" />

                    <Label Grid.Row="3" Grid.Column="2" Text="{Binding Time}" />

                    <Label Grid.Row="3" Grid.Column="3" Text="{Binding Distance}" />

                   </Grid>

            </StackLayout>

        </Frame>

    </ContentView.Content>

</ContentView>

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App68"

             x:Class="App68.MainPage">



    <StackLayout Orientation="Vertical">

        <Label Text="CardView Demo in Xamarin Forms"  

               FontAttributes="Bold"  

               FontSize="Medium"  

               VerticalOptions="Start"  

               HorizontalTextAlignment="Center"  

               VerticalTextAlignment="Center"  

               BackgroundColor="Transparent"  

               HorizontalOptions="CenterAndExpand" />

        <ListView x:Name="listView"   

                  SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"   

                  HasUnevenRows="True"  

                  ItemsSource="{Binding lstRestaurants}" >

            <ListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <local:CardViewTemplate/>

                    </ViewCell>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </StackLayout>



</ContentPage>

Restaurant.cs

using System;

using System.Collections.Generic;

using System.Text;

using Xamarin.Forms;



namespace App68

{

    class Restaurant

    {

        public String PreviewImage { get; set; }

        public string RestaurantName { get; set; }

        public bool IsFavorite { get; set; }

        public string Address { get; set; }

        public string FoodTypes { get; set; }

        public Image RatingIcon { get; set; }

        public double Rating { get; set; }

        public Image TimeIcon { get; set; }

        public double Time { get; set; }

        public Image DistanceIcon { get; set; }

        public double Distance { get; set; }

    }

}

RestaurantViewModel.cs

using System;

using System.Collections.Generic;

using System.Text;

using Xamarin.Forms;



namespace App68

{

    class RestaurantViewModel

    {

        public IList<Restaurant> lstRestaurants { get; set; }

        public object SelectedItem { get; set; }

        public RestaurantViewModel()

        {

            lstRestaurants = new List<Restaurant>();

            GenerateCardModel();

        }



        private void GenerateCardModel()

        {

            var restaurant1 = new Restaurant()

            {

                PreviewImage = "Restaurant_1.jpg",

                RestaurantName = "Premera restaurant",

                IsFavorite = true,

                Address = "Avenue Road 256",

                FoodTypes = "India Italy Chinese kitchen",

                Rating = 4.3,

                Time = 150,

                Distance = 3

            };



            lstRestaurants.Add(restaurant1);



            var restaurant2 = new Restaurant()

            {

                PreviewImage = "Restaurant_2.jpg",

                RestaurantName = "Premera restaurant",

                IsFavorite = true,

                Address = "Avenue Road 256",

                FoodTypes = "India Italy Chinese kitchen",

                Rating = 4.3,

                Time = 150,

                Distance = 3

            };



            lstRestaurants.Add(restaurant2);

        }

    }

}

The effect is as the follows:

I used XFXCardview for this UI. And it seems to work pretty well. This is the GitHub link. So these are the changes I did in my code -

 <xfx:XfxCardView 

                        BackgroundColor="White"

                        CornerRadius="30" 

                    Elevation="20"

                 HeightRequest="150" IsClippedToBounds="True">

                    <Grid RowSpacing="0" >

                        <Grid ColumnSpacing="0">

                            <Grid.RowDefinitions >

                                <RowDefinition Height="2*"></RowDefinition>

                                <RowDefinition Height="*"></RowDefinition>



                                <RowDefinition Height="Auto"></RowDefinition>

                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>



                                <ColumnDefinition Width="*"/>

                                <ColumnDefinition Width="Auto"/>

                            </Grid.ColumnDefinitions>

                            <Frame Margin="10,10,10,-20" Padding="-30" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">

                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />

                            </Frame>

                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>

                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>

                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>

                            <Label Grid.Row="2" Grid.Column="1" Margin="0,-40,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>



                            <Image Grid.Row="3" Grid.Column="1" Margin="0,-20,30,0" Source="whitestaricon1.png" WidthRequest="10" HeightRequest="10" BackgroundColor="Blue"/>

                            <Label Grid.Row="3" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Center" Text="4,3"/>

                        </Grid>

                    </Grid>

                </xfx:XfxCardView>