Skip to content

Commit e631701

Browse files
author
Javier Suárez Ruiz
committed
More UI changes related with Cart in mobile apps
1 parent eb9aa84 commit e631701

5 files changed

Lines changed: 162 additions & 41 deletions

File tree

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,13 @@
9898
WinPhone="48"/>
9999

100100
<!-- CONVERTERS -->
101-
<converters:ToUpperConverter x:Key="ToUpperConverter" />
101+
<converters:CountToBoolConverter x:Key="CountToBoolConverter" />
102102
<converters:DatetimeConverter x:Key="DatetimeConverter" />
103103
<converters:ImageConverter x:Key="ImageConverter" />
104104
<converters:ItemTappedEventArgsConverter x:Key="ItemTappedEventArgsConverter" />
105-
105+
<converters:InverseCountToBoolConverter x:Key="InverseCountToBoolConverter" />
106+
<converters:ToUpperConverter x:Key="ToUpperConverter" />
107+
106108
<!-- STYLES -->
107109
<Style x:Key="EntryStyle"
108110
TargetType="{x:Type Entry}">
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using System;
2+
using System.Globalization;
3+
using Xamarin.Forms;
4+
5+
namespace eShopOnContainers.Core.Converters
6+
{
7+
public class CountToBoolConverter : IValueConverter
8+
{
9+
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
10+
{
11+
if (value is int)
12+
{
13+
int count = System.Convert.ToInt32(value);
14+
15+
return count > 0;
16+
}
17+
18+
return value;
19+
}
20+
21+
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
22+
{
23+
throw new NotImplementedException();
24+
}
25+
}
26+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using System;
2+
using System.Globalization;
3+
using Xamarin.Forms;
4+
5+
namespace eShopOnContainers.Core.Converters
6+
{
7+
public class InverseCountToBoolConverter : IValueConverter
8+
{
9+
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
10+
{
11+
if (value is int)
12+
{
13+
int count = System.Convert.ToInt32(value);
14+
15+
return count == 0;
16+
}
17+
18+
return value;
19+
}
20+
21+
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
22+
{
23+
throw new NotImplementedException();
24+
}
25+
}
26+
}

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

Lines changed: 104 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,52 +16,117 @@
1616
<Setter Property="HorizontalOptions"
1717
Value="End" />
1818
</Style>
19-
19+
20+
<Style x:Key="CheckoutButtonStyle"
21+
TargetType="{x:Type Label}">
22+
<Setter Property="FontFamily"
23+
Value="{StaticResource MontserratRegular}" />
24+
<Setter Property="TextColor"
25+
Value="{StaticResource WhiteColor}" />
26+
<Setter Property="HorizontalOptions"
27+
Value="Center" />
28+
<Setter Property="VerticalOptions"
29+
Value="Center" />
30+
</Style>
31+
32+
<Style x:Key="ShoppingCartStyle"
33+
TargetType="{x:Type Label}">
34+
<Setter Property="FontFamily"
35+
Value="{StaticResource MontserratRegular}" />
36+
<Setter Property="FontSize"
37+
Value="{StaticResource MediumSize}" />
38+
<Setter Property="TextColor"
39+
Value="Black" />
40+
<Setter Property="HorizontalOptions"
41+
Value="Center" />
42+
<Setter Property="Margin"
43+
Value="0, 12" />
44+
</Style>
45+
2046
</ResourceDictionary>
2147
</ContentPage.Resources>
22-
<ScrollView>
23-
<Grid
24-
BackgroundColor="{StaticResource BackgroundColor}">
48+
<Grid
49+
BackgroundColor="{StaticResource BackgroundColor}">
50+
<!-- SHOPPING CART -->
51+
<Grid
52+
IsVisible="{Binding OrderItems.Count, Converter={StaticResource CountToBoolConverter}}">
2553
<Grid.RowDefinitions>
2654
<RowDefinition Height="*" />
27-
<RowDefinition Height="Auto" />
55+
<RowDefinition Height="60" />
2856
</Grid.RowDefinitions>
2957
<!-- CART ITEMS -->
30-
<Grid
58+
<ScrollView
3159
Grid.Row="0">
32-
<Grid.RowDefinitions>
33-
<RowDefinition Height="*" />
34-
<RowDefinition Height="Auto" />
35-
</Grid.RowDefinitions>
36-
<ListView
37-
ItemsSource="{Binding OrderItems}"
38-
HasUnevenRows="True"
39-
SeparatorVisibility="None"
40-
VerticalOptions="FillAndExpand"
41-
CachingStrategy="RecycleElement">
42-
<ListView.ItemTemplate>
43-
<DataTemplate>
44-
<ViewCell>
45-
<templates:OrderItemTemplate />
46-
</ViewCell>
47-
</DataTemplate>
48-
</ListView.ItemTemplate>
49-
</ListView>
50-
<StackLayout
51-
Grid.Row="1"
52-
Margin="0,0,0,24">
53-
<Label
54-
Grid.Row="0"
55-
Text="TOTAL"
56-
TextColor="{StaticResource BlackColor}"
57-
Style="{StaticResource CartTotalStyle}"/>
58-
<Label
59-
Grid.Row="1"
60-
Text="{Binding Total, StringFormat='${0:N}'}"
61-
TextColor="{StaticResource GreenColor}"
62-
Style="{StaticResource CartTotalStyle}"/>
63-
</StackLayout>
60+
<Grid>
61+
<Grid.RowDefinitions>
62+
<RowDefinition Height="Auto" />
63+
<RowDefinition Height="*" />
64+
<RowDefinition Height="Auto" />
65+
</Grid.RowDefinitions>
66+
<!-- HEADER -->
67+
<Grid
68+
Grid.Row="0">
69+
<Label
70+
Text="SHOPPING CART"
71+
Style="{StaticResource ShoppingCartStyle}"/>
72+
</Grid>
73+
<!-- ITEMS -->
74+
<ListView
75+
Grid.Row="1"
76+
ItemsSource="{Binding OrderItems}"
77+
HasUnevenRows="True"
78+
SeparatorVisibility="None"
79+
VerticalOptions="FillAndExpand"
80+
CachingStrategy="RecycleElement">
81+
<ListView.ItemTemplate>
82+
<DataTemplate>
83+
<ViewCell>
84+
<templates:OrderItemTemplate />
85+
</ViewCell>
86+
</DataTemplate>
87+
</ListView.ItemTemplate>
88+
</ListView>
89+
<!-- TOTAL -->
90+
<StackLayout
91+
Grid.Row="2"
92+
Margin="0,0,0,24">
93+
<Label
94+
Grid.Row="0"
95+
Text="TOTAL"
96+
TextColor="{StaticResource BlackColor}"
97+
Style="{StaticResource CartTotalStyle}"/>
98+
<Label
99+
Grid.Row="1"
100+
Text="{Binding Total, StringFormat='${0:N}'}"
101+
TextColor="{StaticResource GreenColor}"
102+
Style="{StaticResource CartTotalStyle}"/>
103+
</StackLayout>
104+
</Grid>
105+
</ScrollView>
106+
<!-- CHECKOUT -->
107+
<Grid
108+
Grid.Row="1"
109+
BackgroundColor="{StaticResource LightGreenColor}"
110+
Padding="0"
111+
ColumnSpacing="0"
112+
RowSpacing="0">
113+
<Label
114+
Text="[ CHECKOUT ]"
115+
Style="{StaticResource CheckoutButtonStyle}"/>
116+
<Grid.GestureRecognizers>
117+
<TapGestureRecognizer
118+
Command="{Binding CheckoutCommand}"
119+
NumberOfTapsRequired="1" />
120+
</Grid.GestureRecognizers>
64121
</Grid>
65122
</Grid>
66-
</ScrollView>
123+
<!-- EMPTY SHOPPING CART -->
124+
<Grid
125+
IsVisible="{Binding OrderItems.Count, Converter={StaticResource InverseCountToBoolConverter}}">
126+
<Label
127+
Text="EMPTY SHOPPING CART"
128+
HorizontalOptions="Center"
129+
VerticalOptions="Center"/>
130+
</Grid>
131+
</Grid>
67132
</ContentPage>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,10 @@
4646
<Compile Include="Behaviors\EventToCommandBehavior.cs" />
4747
<Compile Include="Controls\BindablePicker.cs" />
4848
<Compile Include="Controls\CustomTabbedPage.cs" />
49+
<Compile Include="Converters\CountToBoolConverter.cs" />
4950
<Compile Include="Converters\DatetimeConverter.cs" />
5051
<Compile Include="Converters\ImageConverter.cs" />
52+
<Compile Include="Converters\InverseCountToBoolConverter.cs" />
5153
<Compile Include="Converters\ItemTappedConverter.cs" />
5254
<Compile Include="Converters\ToUpperConverter.cs" />
5355
<Compile Include="Effects\LineColorEffect.cs" />

0 commit comments

Comments
 (0)