More UI changes related with Cart in mobile apps

src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml

@@ -98,11 +98,13 @@
                 WinPhone="48"/>
             
             <!-- CONVERTERS -->
-            <converters:ToUpperConverter x:Key="ToUpperConverter" />
+            <converters:CountToBoolConverter x:Key="CountToBoolConverter" />
             <converters:DatetimeConverter x:Key="DatetimeConverter" />
             <converters:ImageConverter x:Key="ImageConverter" />
             <converters:ItemTappedEventArgsConverter x:Key="ItemTappedEventArgsConverter" />
-
+            <converters:InverseCountToBoolConverter x:Key="InverseCountToBoolConverter" />
+            <converters:ToUpperConverter x:Key="ToUpperConverter" />
+            
             <!-- STYLES -->
             <Style x:Key="EntryStyle"
                    TargetType="{x:Type Entry}">

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Converters/CountToBoolConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Globalization;
+using Xamarin.Forms;
+
+namespace eShopOnContainers.Core.Converters
+{
+    public class CountToBoolConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is int)
+            {
+                int count = System.Convert.ToInt32(value);
+
+                return count > 0;
+            }
+
+            return value;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Converters/InverseCountToBoolConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Globalization;
+using Xamarin.Forms;
+
+namespace eShopOnContainers.Core.Converters
+{
+    public class InverseCountToBoolConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is int)
+            {
+                int count = System.Convert.ToInt32(value);
+
+                return count == 0;
+            }
+
+            return value;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/CartView.xaml

@@ -16,52 +16,117 @@
                 <Setter Property="HorizontalOptions" 
                         Value="End" />
             </Style>
-            
+
+            <Style x:Key="CheckoutButtonStyle" 
+               TargetType="{x:Type Label}">
+                <Setter Property="FontFamily"
+                        Value="{StaticResource MontserratRegular}" />
+                <Setter Property="TextColor"
+                        Value="{StaticResource WhiteColor}" />
+                <Setter Property="HorizontalOptions"
+                        Value="Center" />
+                <Setter Property="VerticalOptions"
+                        Value="Center" />
+            </Style>
+
+            <Style x:Key="ShoppingCartStyle" 
+                   TargetType="{x:Type Label}">
+                <Setter Property="FontFamily"
+                        Value="{StaticResource MontserratRegular}" />
+                <Setter Property="FontSize"
+                        Value="{StaticResource MediumSize}" />
+                <Setter Property="TextColor"
+                        Value="Black" />
+                <Setter Property="HorizontalOptions"
+                        Value="Center" />
+                <Setter Property="Margin"
+                        Value="0, 12" />
+            </Style>
+
         </ResourceDictionary>
     </ContentPage.Resources>
-    <ScrollView>
+    <Grid 
-        <Grid
+        BackgroundColor="{StaticResource BackgroundColor}">
-            BackgroundColor="{StaticResource BackgroundColor}">
+        <!-- SHOPPING CART -->
+        <Grid       
+            IsVisible="{Binding OrderItems.Count, Converter={StaticResource CountToBoolConverter}}">
             <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
-                <RowDefinition Height="Auto" />
+                <RowDefinition Height="60" />
             </Grid.RowDefinitions>
             <!-- CART ITEMS -->
-            <Grid            
+            <ScrollView
                 Grid.Row="0">
-                <Grid.RowDefinitions>
+                <Grid>
-                    <RowDefinition Height="*" />
+                    <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
-                <ListView 
+                        <RowDefinition Height="Auto" />
-                    ItemsSource="{Binding OrderItems}"     
+                    </Grid.RowDefinitions>
-                    HasUnevenRows="True"
+                    <!-- HEADER -->
-                    SeparatorVisibility="None"
+                    <Grid
-                    VerticalOptions="FillAndExpand"
+                        Grid.Row="0">
-                    CachingStrategy="RecycleElement">
+                        <Label
-                    <ListView.ItemTemplate>
+                            Text="SHOPPING CART"
-                        <DataTemplate>
+                            Style="{StaticResource ShoppingCartStyle}"/>
-                            <ViewCell>
+                    </Grid>
-                                <templates:OrderItemTemplate />
+                    <!-- ITEMS -->
-                            </ViewCell>
+                    <ListView 
-                        </DataTemplate>
+                        Grid.Row="1"
-                    </ListView.ItemTemplate>
+                        ItemsSource="{Binding OrderItems}"     
-                </ListView>
+                        HasUnevenRows="True"
-                <StackLayout
+                        SeparatorVisibility="None"
-                    Grid.Row="1"
+                        VerticalOptions="FillAndExpand"
-                    Margin="0,0,0,24">
+                        CachingStrategy="RecycleElement">
-                    <Label 
+                        <ListView.ItemTemplate>
-                        Grid.Row="0"
+                            <DataTemplate>
-                        Text="TOTAL"
+                                <ViewCell>
-                        TextColor="{StaticResource BlackColor}"
+                                    <templates:OrderItemTemplate />
-                        Style="{StaticResource CartTotalStyle}"/>
+                                </ViewCell>
-                    <Label 
+                            </DataTemplate>
-                        Grid.Row="1"                   
+                        </ListView.ItemTemplate>
-                        Text="{Binding Total, StringFormat='${0:N}'}"
+                    </ListView>
-                        TextColor="{StaticResource GreenColor}"
+                    <!-- TOTAL -->
-                        Style="{StaticResource CartTotalStyle}"/>
+                    <StackLayout
-                </StackLayout>
+                        Grid.Row="2"
+                        Margin="0,0,0,24">
+                        <Label 
+                            Grid.Row="0"
+                            Text="TOTAL"
+                            TextColor="{StaticResource BlackColor}"
+                            Style="{StaticResource CartTotalStyle}"/>
+                        <Label 
+                            Grid.Row="1"                   
+                            Text="{Binding Total, StringFormat='${0:N}'}"
+                            TextColor="{StaticResource GreenColor}"
+                            Style="{StaticResource CartTotalStyle}"/>
+                    </StackLayout>
+                </Grid>
+            </ScrollView>
+            <!-- CHECKOUT -->
+            <Grid
+                Grid.Row="1"           
+                BackgroundColor="{StaticResource LightGreenColor}"
+                Padding="0" 
+                ColumnSpacing="0" 
+                RowSpacing="0">
+                <Label       
+                    Text="[ CHECKOUT ]" 
+                    Style="{StaticResource CheckoutButtonStyle}"/>
+                <Grid.GestureRecognizers>
+                    <TapGestureRecognizer            
+                        Command="{Binding CheckoutCommand}"  
+                        NumberOfTapsRequired="1" />
+                </Grid.GestureRecognizers>
             </Grid>
         </Grid>
-    </ScrollView>
+        <!-- EMPTY SHOPPING CART -->
+        <Grid             
+            IsVisible="{Binding OrderItems.Count, Converter={StaticResource InverseCountToBoolConverter}}">
+            <Label 
+                Text="EMPTY SHOPPING CART"
+                HorizontalOptions="Center"
+                VerticalOptions="Center"/>
+        </Grid>
+    </Grid>
 </ContentPage>

src/Mobile/eShopOnContainers/eShopOnContainers.Core/eShopOnContainers.Core.csproj

@@ -46,8 +46,10 @@
     <Compile Include="Behaviors\EventToCommandBehavior.cs" />
     <Compile Include="Controls\BindablePicker.cs" />
     <Compile Include="Controls\CustomTabbedPage.cs" />
+    <Compile Include="Converters\CountToBoolConverter.cs" />
     <Compile Include="Converters\DatetimeConverter.cs" />
     <Compile Include="Converters\ImageConverter.cs" />
+    <Compile Include="Converters\InverseCountToBoolConverter.cs" />
     <Compile Include="Converters\ItemTappedConverter.cs" />
     <Compile Include="Converters\ToUpperConverter.cs" />
     <Compile Include="Effects\LineColorEffect.cs" />