Added loading image

Review mobile apps UI
Changes in Basket API integration

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

@@ -104,6 +104,7 @@
             <converters:ItemTappedEventArgsConverter x:Key="ItemTappedEventArgsConverter" />
             <converters:InverseCountToBoolConverter x:Key="InverseCountToBoolConverter" />
             <converters:InverseBoolConverter x:Key="InverseBoolConverter" />
+            <converters:ItemsToHeightConverter x:Key="ItemsToHeightConverter" />
             <converters:ToUpperConverter x:Key="ToUpperConverter" />
             
             <!-- STYLES -->

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

@@ -0,0 +1,26 @@
+using System;
+using System.Globalization;
+using Xamarin.Forms;
+
+namespace eShopOnContainers.Core.Converters
+{
+    public class ItemsToHeightConverter : IValueConverter
+    {
+        private const int ItemHeight = 144;
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if(value is int)
+            {
+                return System.Convert.ToInt32(value) * ItemHeight;
+            }
+
+            return 0;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return null;
+        }
+    }
+}

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

@@ -55,7 +55,7 @@
                 <RowDefinition Height="60" />
             </Grid.RowDefinitions>
             <!-- CART ITEMS -->
-            <ScrollView
+            <Grid
                 Grid.Row="0">
                 <Grid>
                     <Grid.RowDefinitions>
@@ -73,7 +73,8 @@
                     <!-- ITEMS -->
                     <ListView 
                         Grid.Row="1"
-                        ItemsSource="{Binding BasketItems}"     
+                        ItemsSource="{Binding BasketItems}"    
+                        HeightRequest="{Binding BasketItems.Count, Converter={StaticResource ItemsToHeightConverter}}"
                         HasUnevenRows="True"
                         SeparatorVisibility="None"
                         VerticalOptions="FillAndExpand"
@@ -102,7 +103,7 @@
                             Style="{StaticResource CartTotalStyle}"/>
                     </StackLayout>
                 </Grid>
-            </ScrollView>
+            </Grid>
             <!-- CHECKOUT -->
             <Grid
                 Grid.Row="1"           

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

@@ -69,6 +69,7 @@
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
+    <!-- BRAND -->
     <controls:BindablePicker
       Grid.Row="0"
       Title="BRAND" 
@@ -83,6 +84,7 @@
           WinPhone="36"/>
       </controls:BindablePicker.HeightRequest> 
     </controls:BindablePicker>
+    <!-- TYPE -->
     <controls:BindablePicker
       Grid.Row="1"
       Title="TYPE"

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

@@ -21,6 +21,7 @@
             </ToolbarItem.Icon>
         </ToolbarItem>
     </ContentPage.ToolbarItems>
+    <!-- CATALOG -->
     <views:CatalogView  
         x:Name="HomeView">
         <views:CatalogView.Icon>
@@ -31,6 +32,7 @@
                 WinPhone="Assets\menu_filter.png"/>
         </views:CatalogView.Icon>
     </views:CatalogView>
+    <!-- PROFILE -->
     <views:ProfileView
         x:Name="ProfileView">
         <views:ProfileView.Icon>
@@ -41,6 +43,7 @@
                 WinPhone="Assets\menu_profile.png"/>
         </views:ProfileView.Icon>
     </views:ProfileView>
+    <!-- BASKET -->
     <views:BasketView
         x:Name="BasketView"
         controls:CustomTabbedPage.BadgeText="{Binding BadgeCount}"

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

@@ -89,7 +89,7 @@
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         BackgroundColor="Gray"/>
-                    <StackLayout
+                    <StackLayout 
                         Grid.Column="0"                       
                         Grid.Row="1">
                         <Label 
@@ -100,7 +100,8 @@
                             Text="{Binding Description}"
                             Style="{StaticResource SettingsDescriptionStyle}"/>
                     </StackLayout>
-                    <controls:ToggleButton
+                    <!-- ON / OFF -->
+                    <controls:ToggleButton 
                         Grid.Column="1" 
                         Grid.Row="1" 
                         Animate="True"     
@@ -109,14 +110,14 @@
                         Style="{StaticResource SettingsToggleButtonStyle}">
                         <controls:ToggleButton.CheckedImage>
                             <OnPlatform x:TypeArguments="ImageSource"
-                              Android="switchOn"
-                              iOS="switchOn"
+                              Android="switch_on.png"
+                              iOS="switchOn.png"
                               WinPhone="Assets/switchOn.png"/>
                         </controls:ToggleButton.CheckedImage>
                         <controls:ToggleButton.UnCheckedImage>
                             <OnPlatform x:TypeArguments="ImageSource"
-                              Android="switchOff"
-                              iOS="switchOff"
+                              Android="switch_off.png"
+                              iOS="switchOff.png"
                               WinPhone="Assets/switchOff.png"/>
                         </controls:ToggleButton.UnCheckedImage>
                     </controls:ToggleButton>

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/BasketItemTemplate.xaml

@@ -56,8 +56,6 @@
 
             <Style x:Key="QuantityPickerStyle"  
              TargetType="{x:Type controls:BindablePicker}">
-                <Setter Property="WidthRequest"
-                        Value="36" />
                 <Setter Property="BackgroundColor"
                         Value="Transparent" />
                 <Setter Property="HorizontalOptions"
@@ -71,6 +69,13 @@
     <ContentView.Content>
         <Grid   
             BackgroundColor="{StaticResource BackgroundColor}">
+            <Grid.Padding>
+                <OnPlatform         
+                    x:TypeArguments="Thickness"
+                    Android="0"
+                    iOS="0"
+                    WinPhone="12, 0"/>
+            </Grid.Padding>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
@@ -79,6 +84,7 @@
                 <RowDefinition Height="*" />
                 <RowDefinition Height="1" />
             </Grid.RowDefinitions>
+            <!-- IMAGE -->
             <ffimageloading:CachedImage
                 Grid.Column="0"
                 Grid.Row="0"
@@ -91,6 +97,13 @@
                 Aspect="AspectFit"
                 VerticalOptions="Start"
                 Margin="12,0,0,0">
+                <ffimageloading:CachedImage.LoadingPlaceholder>
+                    <OnPlatform   
+                        x:TypeArguments="ImageSource"
+                        iOS="default_product"
+                        Android="default_product"
+                        WinPhone="Assets/default_product.png"/>
+                </ffimageloading:CachedImage.LoadingPlaceholder>
                 <ffimageloading:CachedImage.ErrorPlaceholder>
                     <OnPlatform   
                         x:TypeArguments="ImageSource"
@@ -108,6 +121,7 @@
                     <RowDefinition />
                     <RowDefinition />
                 </Grid.RowDefinitions>
+                <!-- NAME -->
                 <Label
                     Grid.Row="0"
                     Text="{Binding ProductName, Converter={StaticResource ToUpperConverter}}"/>
@@ -117,6 +131,7 @@
                         <ColumnDefinition />
                         <ColumnDefinition />
                     </Grid.ColumnDefinitions>
+                    <!-- PRICE -->
                     <Label 
                         Grid.Column="0"
                         Text="{Binding UnitPrice, StringFormat='${0:N}'}"
@@ -125,8 +140,17 @@
                         Grid.Column="1"
                         ItemsSource="{Binding Numbers}"
                         SelectedItem="{Binding Quantity, Mode=TwoWay}"
-                        Style="{StaticResource QuantityPickerStyle}"/>
+                        Style="{StaticResource QuantityPickerStyle}">
+                        <controls:BindablePicker.WidthRequest>
+                            <OnPlatform         
+                                x:TypeArguments="x:Double"
+                                Android="36"
+                                iOS="36"
+                                WinPhone="72"/>
+                        </controls:BindablePicker.WidthRequest>
+                    </controls:BindablePicker>
                 </Grid>
+                <!-- TOTAL -->
                 <Label
                     Grid.Row="2"
                     Text="{Binding Total, StringFormat='${0:N}'}"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/OrderItemTemplate.xaml

@@ -40,7 +40,7 @@
                 <Setter Property="HorizontalOptions" 
                         Value="End" />
             </Style>
-            
+
             <Style x:Key="OrderTotalStyle" 
                TargetType="{x:Type Label}">
                 <Setter Property="FontFamily"
@@ -67,6 +67,7 @@
                 <RowDefinition Height="*" />
                 <RowDefinition Height="1" />
             </Grid.RowDefinitions>
+            <!-- IMAGE -->
             <ffimageloading:CachedImage
                 Grid.Column="0"
                 Grid.Row="0"
@@ -79,6 +80,13 @@
                 Aspect="AspectFit"
                 VerticalOptions="Start"
                 Margin="12,0,0,0">
+                <ffimageloading:CachedImage.LoadingPlaceholder>
+                    <OnPlatform   
+                        x:TypeArguments="ImageSource"
+                        iOS="default_product"
+                        Android="default_product"
+                        WinPhone="Assets/default_product.png"/>
+                </ffimageloading:CachedImage.LoadingPlaceholder>
                 <ffimageloading:CachedImage.ErrorPlaceholder>
                     <OnPlatform   
                         x:TypeArguments="ImageSource"
@@ -96,6 +104,7 @@
                     <RowDefinition />
                     <RowDefinition />
                 </Grid.RowDefinitions>
+                <!-- NAME -->
                 <Label
                     Grid.Row="0"
                     Text="{Binding ProductName, Converter={StaticResource ToUpperConverter}}"/>
@@ -105,6 +114,7 @@
                         <ColumnDefinition />
                         <ColumnDefinition />
                     </Grid.ColumnDefinitions>
+                    <!-- PRICE -->
                     <Label 
                         Grid.Column="0"
                         Text="{Binding UnitPrice, StringFormat='${0:N}'}"
@@ -114,6 +124,7 @@
                         Text="{Binding Quantity}"
                         Style="{StaticResource OrderItemQuantityStyle}"/>
                 </Grid>
+                <!-- TOTAL -->
                 <Label
                     Grid.Row="2"
                     Text="{Binding Total, StringFormat='${0:N}'}"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/ProductTemplate.xaml

@@ -70,6 +70,7 @@
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
+            <!-- IMAGE -->
             <ffimageloading:CachedImage 
                 Grid.Row="0"
                 Source="{Binding PictureUri}"     
@@ -77,6 +78,13 @@
                 CacheType="Disk"             
                 DownsampleToViewSize="True"
                 Aspect="AspectFill">
+                <ffimageloading:CachedImage.LoadingPlaceholder>
+                    <OnPlatform   
+                        x:TypeArguments="ImageSource"
+                        iOS="default_product"
+                        Android="default_product"
+                        WinPhone="Assets/default_product.png"/>
+                </ffimageloading:CachedImage.LoadingPlaceholder>
                 <ffimageloading:CachedImage.ErrorPlaceholder>
                     <OnPlatform   
                         x:TypeArguments="ImageSource"
@@ -91,10 +99,12 @@
                 Style="{StaticResource AddButtonStyle}">
                 <controls:AddBasketButton />
             </Grid>
+            <!-- NAME -->
             <Label 
                 Grid.Row="1"
                 Text="{Binding Name, Converter={StaticResource ToUpperConverter}}"
                 Style="{StaticResource ProductNameStyle}"/>
+            <!-- PRICE -->
             <Label 
                 Grid.Row="2"
                 Text="{Binding Price, StringFormat='${0:N}'}"

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

@@ -55,6 +55,7 @@
     <Compile Include="Converters\ImageConverter.cs" />
     <Compile Include="Converters\InverseBoolConverter.cs" />
     <Compile Include="Converters\InverseCountToBoolConverter.cs" />
+    <Compile Include="Converters\ItemsToHeightConverter.cs" />
     <Compile Include="Converters\ItemTappedConverter.cs" />
     <Compile Include="Converters\ToUpperConverter.cs" />
     <Compile Include="Effects\LineColorEffect.cs" />

src/Mobile/eShopOnContainers/eShopOnContainers.Droid/Resources/Resource.Designer.cs

@@ -2027,316 +2027,319 @@ namespace eShopOnContainers.Droid
 			public const int background = 2130837580;
 			
 			// aapt resource value: 0x7f02004d
-			public const int design_fab_background = 2130837581;
+			public const int default_product = 2130837581;
 			
 			// aapt resource value: 0x7f02004e
-			public const int design_snackbar_background = 2130837582;
+			public const int design_fab_background = 2130837582;
 			
 			// aapt resource value: 0x7f02004f
-			public const int fake_product_01 = 2130837583;
+			public const int design_snackbar_background = 2130837583;
 			
 			// aapt resource value: 0x7f020050
-			public const int fake_product_02 = 2130837584;
+			public const int fake_product_01 = 2130837584;
 			
 			// aapt resource value: 0x7f020051
-			public const int fake_product_03 = 2130837585;
+			public const int fake_product_02 = 2130837585;
 			
 			// aapt resource value: 0x7f020052
-			public const int fake_product_04 = 2130837586;
+			public const int fake_product_03 = 2130837586;
 			
 			// aapt resource value: 0x7f020053
-			public const int fake_product_05 = 2130837587;
+			public const int fake_product_04 = 2130837587;
 			
 			// aapt resource value: 0x7f020054
-			public const int ic_audiotrack = 2130837588;
+			public const int fake_product_05 = 2130837588;
 			
 			// aapt resource value: 0x7f020055
-			public const int ic_audiotrack_light = 2130837589;
+			public const int ic_audiotrack = 2130837589;
 			
 			// aapt resource value: 0x7f020056
-			public const int ic_bluetooth_grey = 2130837590;
+			public const int ic_audiotrack_light = 2130837590;
 			
 			// aapt resource value: 0x7f020057
-			public const int ic_bluetooth_white = 2130837591;
+			public const int ic_bluetooth_grey = 2130837591;
 			
 			// aapt resource value: 0x7f020058
-			public const int ic_cast_dark = 2130837592;
+			public const int ic_bluetooth_white = 2130837592;
 			
 			// aapt resource value: 0x7f020059
-			public const int ic_cast_disabled_light = 2130837593;
+			public const int ic_cast_dark = 2130837593;
 			
 			// aapt resource value: 0x7f02005a
-			public const int ic_cast_grey = 2130837594;
+			public const int ic_cast_disabled_light = 2130837594;
 			
 			// aapt resource value: 0x7f02005b
-			public const int ic_cast_light = 2130837595;
+			public const int ic_cast_grey = 2130837595;
 			
 			// aapt resource value: 0x7f02005c
-			public const int ic_cast_off_light = 2130837596;
+			public const int ic_cast_light = 2130837596;
 			
 			// aapt resource value: 0x7f02005d
-			public const int ic_cast_on_0_light = 2130837597;
+			public const int ic_cast_off_light = 2130837597;
 			
 			// aapt resource value: 0x7f02005e
-			public const int ic_cast_on_1_light = 2130837598;
+			public const int ic_cast_on_0_light = 2130837598;
 			
 			// aapt resource value: 0x7f02005f
-			public const int ic_cast_on_2_light = 2130837599;
+			public const int ic_cast_on_1_light = 2130837599;
 			
 			// aapt resource value: 0x7f020060
-			public const int ic_cast_on_light = 2130837600;
+			public const int ic_cast_on_2_light = 2130837600;
 			
 			// aapt resource value: 0x7f020061
-			public const int ic_cast_white = 2130837601;
+			public const int ic_cast_on_light = 2130837601;
 			
 			// aapt resource value: 0x7f020062
-			public const int ic_close_dark = 2130837602;
+			public const int ic_cast_white = 2130837602;
 			
 			// aapt resource value: 0x7f020063
-			public const int ic_close_light = 2130837603;
+			public const int ic_close_dark = 2130837603;
 			
 			// aapt resource value: 0x7f020064
-			public const int ic_collapse = 2130837604;
+			public const int ic_close_light = 2130837604;
 			
 			// aapt resource value: 0x7f020065
-			public const int ic_collapse_00000 = 2130837605;
+			public const int ic_collapse = 2130837605;
 			
 			// aapt resource value: 0x7f020066
-			public const int ic_collapse_00001 = 2130837606;
+			public const int ic_collapse_00000 = 2130837606;
 			
 			// aapt resource value: 0x7f020067
-			public const int ic_collapse_00002 = 2130837607;
+			public const int ic_collapse_00001 = 2130837607;
 			
 			// aapt resource value: 0x7f020068
-			public const int ic_collapse_00003 = 2130837608;
+			public const int ic_collapse_00002 = 2130837608;
 			
 			// aapt resource value: 0x7f020069
-			public const int ic_collapse_00004 = 2130837609;
+			public const int ic_collapse_00003 = 2130837609;
 			
 			// aapt resource value: 0x7f02006a
-			public const int ic_collapse_00005 = 2130837610;
+			public const int ic_collapse_00004 = 2130837610;
 			
 			// aapt resource value: 0x7f02006b
-			public const int ic_collapse_00006 = 2130837611;
+			public const int ic_collapse_00005 = 2130837611;
 			
 			// aapt resource value: 0x7f02006c
-			public const int ic_collapse_00007 = 2130837612;
+			public const int ic_collapse_00006 = 2130837612;
 			
 			// aapt resource value: 0x7f02006d
-			public const int ic_collapse_00008 = 2130837613;
+			public const int ic_collapse_00007 = 2130837613;
 			
 			// aapt resource value: 0x7f02006e
-			public const int ic_collapse_00009 = 2130837614;
+			public const int ic_collapse_00008 = 2130837614;
 			
 			// aapt resource value: 0x7f02006f
-			public const int ic_collapse_00010 = 2130837615;
+			public const int ic_collapse_00009 = 2130837615;
 			
 			// aapt resource value: 0x7f020070
-			public const int ic_collapse_00011 = 2130837616;
+			public const int ic_collapse_00010 = 2130837616;
 			
 			// aapt resource value: 0x7f020071
-			public const int ic_collapse_00012 = 2130837617;
+			public const int ic_collapse_00011 = 2130837617;
 			
 			// aapt resource value: 0x7f020072
-			public const int ic_collapse_00013 = 2130837618;
+			public const int ic_collapse_00012 = 2130837618;
 			
 			// aapt resource value: 0x7f020073
-			public const int ic_collapse_00014 = 2130837619;
+			public const int ic_collapse_00013 = 2130837619;
 			
 			// aapt resource value: 0x7f020074
-			public const int ic_collapse_00015 = 2130837620;
+			public const int ic_collapse_00014 = 2130837620;
 			
 			// aapt resource value: 0x7f020075
-			public const int ic_errorstatus = 2130837621;
+			public const int ic_collapse_00015 = 2130837621;
 			
 			// aapt resource value: 0x7f020076
-			public const int ic_expand = 2130837622;
+			public const int ic_errorstatus = 2130837622;
 			
 			// aapt resource value: 0x7f020077
-			public const int ic_expand_00000 = 2130837623;
+			public const int ic_expand = 2130837623;
 			
 			// aapt resource value: 0x7f020078
-			public const int ic_expand_00001 = 2130837624;
+			public const int ic_expand_00000 = 2130837624;
 			
 			// aapt resource value: 0x7f020079
-			public const int ic_expand_00002 = 2130837625;
+			public const int ic_expand_00001 = 2130837625;
 			
 			// aapt resource value: 0x7f02007a
-			public const int ic_expand_00003 = 2130837626;
+			public const int ic_expand_00002 = 2130837626;
 			
 			// aapt resource value: 0x7f02007b
-			public const int ic_expand_00004 = 2130837627;
+			public const int ic_expand_00003 = 2130837627;
 			
 			// aapt resource value: 0x7f02007c
-			public const int ic_expand_00005 = 2130837628;
+			public const int ic_expand_00004 = 2130837628;
 			
 			// aapt resource value: 0x7f02007d
-			public const int ic_expand_00006 = 2130837629;
+			public const int ic_expand_00005 = 2130837629;
 			
 			// aapt resource value: 0x7f02007e
-			public const int ic_expand_00007 = 2130837630;
+			public const int ic_expand_00006 = 2130837630;
 			
 			// aapt resource value: 0x7f02007f
-			public const int ic_expand_00008 = 2130837631;
+			public const int ic_expand_00007 = 2130837631;
 			
 			// aapt resource value: 0x7f020080
-			public const int ic_expand_00009 = 2130837632;
+			public const int ic_expand_00008 = 2130837632;
 			
 			// aapt resource value: 0x7f020081
-			public const int ic_expand_00010 = 2130837633;
+			public const int ic_expand_00009 = 2130837633;
 			
 			// aapt resource value: 0x7f020082
-			public const int ic_expand_00011 = 2130837634;
+			public const int ic_expand_00010 = 2130837634;
 			
 			// aapt resource value: 0x7f020083
-			public const int ic_expand_00012 = 2130837635;
+			public const int ic_expand_00011 = 2130837635;
 			
 			// aapt resource value: 0x7f020084
-			public const int ic_expand_00013 = 2130837636;
+			public const int ic_expand_00012 = 2130837636;
 			
 			// aapt resource value: 0x7f020085
-			public const int ic_expand_00014 = 2130837637;
+			public const int ic_expand_00013 = 2130837637;
 			
 			// aapt resource value: 0x7f020086
-			public const int ic_expand_00015 = 2130837638;
+			public const int ic_expand_00014 = 2130837638;
 			
 			// aapt resource value: 0x7f020087
-			public const int ic_media_pause = 2130837639;
+			public const int ic_expand_00015 = 2130837639;
 			
 			// aapt resource value: 0x7f020088
-			public const int ic_media_play = 2130837640;
+			public const int ic_media_pause = 2130837640;
 			
 			// aapt resource value: 0x7f020089
-			public const int ic_media_route_disabled_mono_dark = 2130837641;
+			public const int ic_media_play = 2130837641;
 			
 			// aapt resource value: 0x7f02008a
-			public const int ic_media_route_off_mono_dark = 2130837642;
+			public const int ic_media_route_disabled_mono_dark = 2130837642;
 			
 			// aapt resource value: 0x7f02008b
-			public const int ic_media_route_on_0_mono_dark = 2130837643;
+			public const int ic_media_route_off_mono_dark = 2130837643;
 			
 			// aapt resource value: 0x7f02008c
-			public const int ic_media_route_on_1_mono_dark = 2130837644;
+			public const int ic_media_route_on_0_mono_dark = 2130837644;
 			
 			// aapt resource value: 0x7f02008d
-			public const int ic_media_route_on_2_mono_dark = 2130837645;
+			public const int ic_media_route_on_1_mono_dark = 2130837645;
 			
 			// aapt resource value: 0x7f02008e
-			public const int ic_media_route_on_mono_dark = 2130837646;
+			public const int ic_media_route_on_2_mono_dark = 2130837646;
 			
 			// aapt resource value: 0x7f02008f
-			public const int ic_pause_dark = 2130837647;
+			public const int ic_media_route_on_mono_dark = 2130837647;
 			
 			// aapt resource value: 0x7f020090
-			public const int ic_pause_light = 2130837648;
+			public const int ic_pause_dark = 2130837648;
 			
 			// aapt resource value: 0x7f020091
-			public const int ic_play_dark = 2130837649;
+			public const int ic_pause_light = 2130837649;
 			
 			// aapt resource value: 0x7f020092
-			public const int ic_play_light = 2130837650;
+			public const int ic_play_dark = 2130837650;
 			
 			// aapt resource value: 0x7f020093
-			public const int ic_speaker_dark = 2130837651;
+			public const int ic_play_light = 2130837651;
 			
 			// aapt resource value: 0x7f020094
-			public const int ic_speaker_group_dark = 2130837652;
+			public const int ic_speaker_dark = 2130837652;
 			
 			// aapt resource value: 0x7f020095
-			public const int ic_speaker_group_light = 2130837653;
+			public const int ic_speaker_group_dark = 2130837653;
 			
 			// aapt resource value: 0x7f020096
-			public const int ic_speaker_light = 2130837654;
+			public const int ic_speaker_group_light = 2130837654;
 			
 			// aapt resource value: 0x7f020097
-			public const int ic_successstatus = 2130837655;
+			public const int ic_speaker_light = 2130837655;
 			
 			// aapt resource value: 0x7f020098
-			public const int ic_tv_dark = 2130837656;
+			public const int ic_successstatus = 2130837656;
 			
 			// aapt resource value: 0x7f020099
-			public const int ic_tv_light = 2130837657;
+			public const int ic_tv_dark = 2130837657;
 			
 			// aapt resource value: 0x7f02009a
-			public const int icon = 2130837658;
+			public const int ic_tv_light = 2130837658;
 			
 			// aapt resource value: 0x7f02009b
-			public const int menu_cart = 2130837659;
+			public const int icon = 2130837659;
 			
 			// aapt resource value: 0x7f02009c
-			public const int menu_filter = 2130837660;
+			public const int menu_cart = 2130837660;
 			
 			// aapt resource value: 0x7f02009d
-			public const int menu_profile = 2130837661;
+			public const int menu_filter = 2130837661;
 			
 			// aapt resource value: 0x7f02009e
-			public const int mr_dialog_material_background_dark = 2130837662;
+			public const int menu_profile = 2130837662;
 			
 			// aapt resource value: 0x7f02009f
-			public const int mr_dialog_material_background_light = 2130837663;
+			public const int mr_dialog_material_background_dark = 2130837663;
 			
 			// aapt resource value: 0x7f0200a0
-			public const int mr_ic_audiotrack_light = 2130837664;
+			public const int mr_dialog_material_background_light = 2130837664;
 			
 			// aapt resource value: 0x7f0200a1
-			public const int mr_ic_cast_dark = 2130837665;
+			public const int mr_ic_audiotrack_light = 2130837665;
 			
 			// aapt resource value: 0x7f0200a2
-			public const int mr_ic_cast_light = 2130837666;
+			public const int mr_ic_cast_dark = 2130837666;
 			
 			// aapt resource value: 0x7f0200a3
-			public const int mr_ic_close_dark = 2130837667;
+			public const int mr_ic_cast_light = 2130837667;
 			
 			// aapt resource value: 0x7f0200a4
-			public const int mr_ic_close_light = 2130837668;
+			public const int mr_ic_close_dark = 2130837668;
 			
 			// aapt resource value: 0x7f0200a5
-			public const int mr_ic_media_route_connecting_mono_dark = 2130837669;
+			public const int mr_ic_close_light = 2130837669;
 			
 			// aapt resource value: 0x7f0200a6
-			public const int mr_ic_media_route_connecting_mono_light = 2130837670;
+			public const int mr_ic_media_route_connecting_mono_dark = 2130837670;
 			
 			// aapt resource value: 0x7f0200a7
-			public const int mr_ic_media_route_mono_dark = 2130837671;
+			public const int mr_ic_media_route_connecting_mono_light = 2130837671;
 			
 			// aapt resource value: 0x7f0200a8
-			public const int mr_ic_media_route_mono_light = 2130837672;
+			public const int mr_ic_media_route_mono_dark = 2130837672;
 			
 			// aapt resource value: 0x7f0200a9
-			public const int mr_ic_pause_dark = 2130837673;
+			public const int mr_ic_media_route_mono_light = 2130837673;
 			
 			// aapt resource value: 0x7f0200aa
-			public const int mr_ic_pause_light = 2130837674;
+			public const int mr_ic_pause_dark = 2130837674;
 			
 			// aapt resource value: 0x7f0200ab
-			public const int mr_ic_play_dark = 2130837675;
+			public const int mr_ic_pause_light = 2130837675;
 			
 			// aapt resource value: 0x7f0200ac
-			public const int mr_ic_play_light = 2130837676;
+			public const int mr_ic_play_dark = 2130837676;
 			
 			// aapt resource value: 0x7f0200ad
-			public const int noimage = 2130837677;
-			
-			// aapt resource value: 0x7f0200b4
-			public const int notification_template_icon_bg = 2130837684;
+			public const int mr_ic_play_light = 2130837677;
 			
 			// aapt resource value: 0x7f0200ae
-			public const int product_add = 2130837678;
+			public const int noimage = 2130837678;
+			
+			// aapt resource value: 0x7f0200b5
+			public const int notification_template_icon_bg = 2130837685;
 			
 			// aapt resource value: 0x7f0200af
-			public const int roundedbg = 2130837679;
+			public const int product_add = 2130837679;
 			
 			// aapt resource value: 0x7f0200b0
-			public const int roundedbgdark = 2130837680;
+			public const int roundedbg = 2130837680;
 			
 			// aapt resource value: 0x7f0200b1
-			public const int splash_drawable = 2130837681;
+			public const int roundedbgdark = 2130837681;
 			
 			// aapt resource value: 0x7f0200b2
-			public const int switch_off = 2130837682;
+			public const int splash_drawable = 2130837682;
 			
 			// aapt resource value: 0x7f0200b3
-			public const int switch_on = 2130837683;
+			public const int switch_off = 2130837683;
+			
+			// aapt resource value: 0x7f0200b4
+			public const int switch_on = 2130837684;
 			
 			static Drawable()
 			{

src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj

@@ -223,6 +223,8 @@
     <None Include="packages.config" />
     <None Include="Resources\AboutResources.txt" />
     <None Include="Assets\AboutAssets.txt" />
+    <AndroidResource Include="Resources\drawable-xxhdpi\switch_off.png" />
+    <AndroidResource Include="Resources\drawable-xxhdpi\switch_on.png" />
     <AndroidResource Include="Resources\layout\Tabs.axml">
       <SubType>Designer</SubType>
     </AndroidResource>
@@ -332,9 +334,6 @@
   <ItemGroup>
     <AndroidResource Include="Resources\drawable-xhdpi\switch_on.png" />
   </ItemGroup>
-  <ItemGroup>
-    <AndroidResource Include="Resources\drawable-xxhdpi\switch_on.png" />
-  </ItemGroup>
   <ItemGroup>
     <AndroidResource Include="Resources\drawable-hdpi\switch_off.png" />
   </ItemGroup>
@@ -342,10 +341,10 @@
     <AndroidResource Include="Resources\drawable-xhdpi\switch_off.png" />
   </ItemGroup>
   <ItemGroup>
-    <AndroidResource Include="Resources\drawable-xxhdpi\switch_off.png" />
+    <AndroidResource Include="Resources\drawable\noimage.png" />
   </ItemGroup>
   <ItemGroup>
-    <AndroidResource Include="Resources\drawable\noimage.png" />
+    <AndroidResource Include="Resources\drawable\default_product.png" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
   <Import Project="..\..\packages\Xamarin.Android.Support.Vector.Drawable.23.3.0\build\Xamarin.Android.Support.Vector.Drawable.targets" Condition="Exists('..\..\packages\Xamarin.Android.Support.Vector.Drawable.23.3.0\build\Xamarin.Android.Support.Vector.Drawable.targets')" />

src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Renderers/CustomTabbedPageRenderer.cs

@@ -8,6 +8,7 @@ using System.Linq;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
 using Xamarin.Forms.Platform.UWP;
+using UI = Windows.UI;
 using Xaml = Windows.UI.Xaml;
 
 [assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
@@ -34,20 +35,30 @@ namespace eShopOnContainers.Windows.Renderers
 
         private void AddTabBadge(int tabIndex)
         {
+            if(Element == null)
+            {
+                return;
+            }
+
             var element = Element.Children[tabIndex];
 
             if (element != null)
             {
-
                 var dataTemplate = Xaml.Application.Current.Resources["TabbedPageHeaderTemplate"] as
                     Xaml.DataTemplate;
 
                 Control.HeaderTemplate = dataTemplate;
+                Control.SelectionChanged += OnControlSelectionChanged;
 
                 element.PropertyChanged += OnTabbedPagePropertyChanged;
             }
         }
 
+        private void OnControlSelectionChanged(object sender, Xaml.Controls.SelectionChangedEventArgs e)
+        {
+            SetSelectedTab((FormsPivot)sender);
+        }
+
         protected virtual void OnTabbedPagePropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
         {
             var element = sender as Element;
@@ -58,7 +69,7 @@ namespace eShopOnContainers.Windows.Renderers
             var tabItems = Control.GetDescendantsOfType<TabItem>();
             var tabItem = tabItems.FirstOrDefault(t => t.Label == ((Page)element).Title);
 
-            if(tabItem == null)
+            if (tabItem == null)
             {
                 return;
             }
@@ -75,6 +86,24 @@ namespace eShopOnContainers.Windows.Renderers
                     ColorHelper.XamarinFormColorToWindowsColor(
                     CustomTabbedPage.GetBadgeColor(element)));
             }
+
+            SetSelectedTab(Control);
+        }
+
+        private void SetSelectedTab(FormsPivot pivot)
+        {
+            var tabItems = Control.GetDescendantsOfType<TabItem>();
+            var tabItem = tabItems.FirstOrDefault(t => t.Label == ((Page)pivot.SelectedItem).Title);
+
+            if (tabItem == null)
+            {
+                return;
+            }
+
+            foreach (var item in tabItems)
+                item.Opacity = 0.5;
+
+            tabItem.Opacity = 1.0;
         }
     }
 }

src/Mobile/eShopOnContainers/eShopOnContainers.Windows/eShopOnContainers.Windows.csproj

@@ -130,6 +130,7 @@
   <ItemGroup>
     <Content Include="Assets\app_settings.png" />
     <Content Include="Assets\circle_button_background.png" />
+    <Content Include="Assets\default_product.png" />
     <Content Include="Assets\fake_product_01.png" />
     <Content Include="Assets\fake_product_02.png" />
     <Content Include="Assets\fake_product_03.png" />

src/Mobile/eShopOnContainers/eShopOnContainers.iOS/eShopOnContainers.iOS.csproj

@@ -369,6 +369,9 @@
   <ItemGroup>
     <BundleResource Include="Resources\noimage.png" />
   </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\default_product.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
     <PropertyGroup>