From a158233b944b4e7eeffcf2ea90cd854b8e51c673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Su=C3=A1rez=20Ruiz?= <jsuarez@plainconcepts.com>
Date: Thu, 17 Nov 2016 10:51:52 +0100
Subject: [PATCH] Adapt UI to UWP App

---
 .../eShopOnContainers.Core/App.xaml           |  33 ++++++
 .../Controls/CartButton.xaml                  |  86 +++++++++++++++
 .../Controls/CartButton.xaml.cs               |  12 ++
 .../Effects/LineColorEffect.cs                |   2 +-
 .../ViewModels/MainViewModel.cs               |   2 +
 .../Views/CustomNavigationPage.xaml           |   2 +
 .../Views/FiltersView.xaml                    |  34 ++++--
 .../Views/LoginView.xaml                      |  19 +++-
 .../Views/MainView.xaml                       |   1 +
 .../Views/OrderDetailView.xaml                |   3 +-
 .../Views/Templates/OrderItemTemplate.xaml    |   1 +
 .../Views/Templates/ProductTemplate.xaml      |  25 +----
 .../eShopOnContainers.Core.csproj             |   9 ++
 .../eShopOnContainers.Windows/App.xaml        |  46 ++++++++
 .../Assets/circle_button_background.png       | Bin 0 -> 2930 bytes
 .../Effects/EntryLineColorEffect.cs           |   3 +-
 .../Renderers/CustomTabbedPageRenderer.cs     |   1 -
 .../eShopOnContainers.Windows.csproj          |   1 +
 .../Renderers/CustomTabbedPageRenderer.cs     | 104 +++++++++++++++++-
 19 files changed, 345 insertions(+), 39 deletions(-)
 create mode 100644 src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml
 create mode 100644 src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml.cs
 create mode 100644 src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Assets/circle_button_background.png

diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml
index 9a5c14319..d67f7f3d6 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml
@@ -136,6 +136,39 @@
                 </Style.Triggers>
             </Style>
 
+            <Style x:Key="UwpEntryStyle"
+                   TargetType="{x:Type Entry}">
+                <Setter Property="FontFamily"
+                        Value="{StaticResource MontserratRegular}" />
+                <Setter Property="TextColor"
+                        Value="{StaticResource BlackColor}" />
+                <Setter Property="PlaceholderColor"
+                        Value="{StaticResource BlackColor}" />
+                <Setter Property="FontSize"
+                        Value="{StaticResource LargeSize}" />
+                <Setter Property="HorizontalOptions"                      
+                        Value="FillAndExpand" />
+                <Setter Property="FontAttributes"
+                        Value="Bold" />
+                <Setter Property="BackgroundColor" 
+                        Value="Transparent" />
+                <Setter Property="Opacity"
+                        Value="0.6" />
+                <Setter Property="effects:LineColorEffect.ApplyLineColor"
+                        Value="True" />
+                <Setter Property="effects:LineColorEffect.LineColor"
+                        Value="Gray" />
+                <Style.Triggers>
+                    <Trigger TargetType="Entry"
+                       Property="IsFocused"
+                       Value="True">
+                        <Setter Property="Opacity" Value="1" />
+                        <Setter Property="effects:LineColorEffect.LineColor"                        
+                                Value="{StaticResource GreenColor}" />
+                    </Trigger>
+                </Style.Triggers>
+            </Style>
+            
             <Style TargetType="NavigationPage">
                 <Setter Property="BarBackgroundColor" Value="{StaticResource GreenColor}"/>
                 <Setter Property="BarTextColor" Value="{StaticResource WhiteColor}"/>
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml
new file mode 100644
index 000000000..808453fe6
--- /dev/null
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml
@@ -0,0 +1,86 @@
+<?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="eShopOnContainers.Core.Controls.CartButton">
+    <ContentView.Resources>
+        <ResourceDictionary>
+
+            <Style x:Key="AddButtonStyle" 
+               TargetType="{x:Type Grid}">
+                <Setter Property="HeightRequest"
+                        Value="42" />
+                <Setter Property="WidthRequest"
+                        Value="42" />
+                <Setter Property="HorizontalOptions"
+                        Value="Center" />
+                <Setter Property="VerticalOptions"
+                        Value="End" />
+                <Setter Property="Margin"
+                        Value="0, 0, 0, 24" />
+            </Style>
+
+            <Style x:Key="AddBackgroundImageStyle" 
+               TargetType="{x:Type Image}">
+                <Setter Property="HorizontalOptions"
+                        Value="Center" />
+                <Setter Property="VerticalOptions"
+                        Value="Center" />
+                <Setter Property="HeightRequest"
+                        Value="128" />
+                <Setter Property="WidthRequest"
+                        Value="128" />
+            </Style>
+            
+            <Style x:Key="AddImageStyle" 
+               TargetType="{x:Type Image}">
+                <Setter Property="HeightRequest"
+                        Value="24" />
+                <Setter Property="WidthRequest"
+                        Value="24" />
+            </Style>
+
+        </ResourceDictionary>
+    </ContentView.Resources>
+    <ContentView.Content>
+        <Grid>
+            <!-- IOS & ANDROID -->
+            <Grid
+                Style="{StaticResource AddButtonStyle}">
+                <Grid.IsVisible>
+                    <OnPlatform         
+                        x:TypeArguments="x:Boolean"
+                        Android="True"
+                        iOS="True"
+                        WinPhone="False"/>
+                </Grid.IsVisible>
+                <BoxView  
+                    BackgroundColor="{StaticResource LightGreenColor}"
+                    StyleClass="Circle" />
+                <Image 
+                    Aspect="AspectFit" 
+                    Source="product_add"
+                    Style="{StaticResource AddImageStyle}">
+                    <Image.Margin>
+                        <OnPlatform         
+                            x:TypeArguments="Thickness"
+                            Android="5, 12, 12, 12"
+                            iOS="6, 12, 12, 12"/>
+                    </Image.Margin>
+                </Image>
+            </Grid>
+            <!-- UWP -->
+            <Grid>
+                <Image
+                    Source="Assets/circle_button_background.png"
+                    Aspect="AspectFit"
+                    Style="{StaticResource AddBackgroundImageStyle}" />
+                <Image 
+                    Aspect="AspectFit" 
+                    Source="Assets\product_add.png"
+                    Style="{StaticResource AddImageStyle}"
+                    Margin="12" />
+            </Grid>
+        </Grid>
+    </ContentView.Content>
+</ContentView>
\ No newline at end of file
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml.cs b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml.cs
new file mode 100644
index 000000000..b46235a66
--- /dev/null
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Controls/CartButton.xaml.cs
@@ -0,0 +1,12 @@
+using Xamarin.Forms;
+
+namespace eShopOnContainers.Core.Controls
+{
+    public partial class CartButton : ContentView
+    {
+        public CartButton()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Effects/LineColorEffect.cs b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Effects/LineColorEffect.cs
index 3c1759c24..2635b3a3f 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Effects/LineColorEffect.cs
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Effects/LineColorEffect.cs
@@ -59,7 +59,7 @@ namespace eShopOnContainers.Core.Effects
 
         class EntryLineColorEffect : RoutingEffect
         {
-            public EntryLineColorEffect() : base("BikeSharing.EntryLineColorEffect")
+            public EntryLineColorEffect() : base("eShopOnContainers.EntryLineColorEffect")
             {
             }
         }
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/MainViewModel.cs b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/MainViewModel.cs
index cf7d8032d..f2a28a184 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/MainViewModel.cs
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/ViewModels/MainViewModel.cs
@@ -10,6 +10,8 @@ namespace eShopOnContainers.Core.ViewModels
     {
         public override Task InitializeAsync(object navigationData)
         {
+            IsBusy = true;
+
             if (navigationData is TabParameter)
             {
                 var tabIndex = ((TabParameter)navigationData).TabIndex;
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/CustomNavigationPage.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/CustomNavigationPage.xaml
index 477ac142f..793425447 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/CustomNavigationPage.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/CustomNavigationPage.xaml
@@ -2,5 +2,7 @@
 <NavigationPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="eShopOnContainers.Core.Views.CustomNavigationPage"
+                BarBackgroundColor="{StaticResource GreenColor}"
+                BarTextColor="{StaticResource WhiteColor}"
                 BackgroundColor="Transparent">
 </NavigationPage>
\ No newline at end of file
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/FiltersView.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/FiltersView.xaml
index ba6f4b0fa..35e84655b 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/FiltersView.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/FiltersView.xaml
@@ -62,23 +62,39 @@
     RowSpacing="0"
     Margin="48, 24">
     <Grid.RowDefinitions>      
-      <RowDefinition />
-      <RowDefinition /> 
+      <RowDefinition Height="60" />
+      <RowDefinition Height="60" /> 
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
-    <controls:BindablePicker 
+    <controls:BindablePicker
       Grid.Row="0"
-      Title="BRAND"
-      ItemsSource="{Binding Brands}" 
+      Title="BRAND" 
+      ItemsSource="{Binding Brands}"
       SelectedItem="{Binding Brand, Mode=TwoWay}"
-      Style="{StaticResource FilterPickerStyle}"/>
-    <controls:BindablePicker 
+      Style="{StaticResource FilterPickerStyle}">
+      <controls:BindablePicker.HeightRequest>   
+        <OnPlatform 
+          x:TypeArguments="x:Double"       
+          Android="48"
+          iOS="48"
+          WinPhone="36"/>
+      </controls:BindablePicker.HeightRequest> 
+    </controls:BindablePicker>
+    <controls:BindablePicker
       Grid.Row="1"
-      Title="TYPE"  
+      Title="TYPE"
       ItemsSource="{Binding Types}"
       SelectedItem="{Binding Type, Mode=TwoWay}"
-      Style="{StaticResource FilterPickerStyle}"/>
+      Style="{StaticResource FilterPickerStyle}">    
+      <controls:BindablePicker.HeightRequest>   
+        <OnPlatform 
+          x:TypeArguments="x:Double"       
+          Android="48"
+          iOS="48"
+          WinPhone="36"/>
+      </controls:BindablePicker.HeightRequest> 
+    </controls:BindablePicker>
     <Button 
       Grid.Row="2"
       Text="Apply" 
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/LoginView.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/LoginView.xaml
index 38a4df392..a078de3c6 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/LoginView.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/LoginView.xaml
@@ -124,13 +124,28 @@
                     Text="User name or email"
                     Style="{StaticResource HeaderLabelStyle}"/>
                 <Entry  
-                    Text="{Binding UserName.Value, Mode=TwoWay}"/>
+                    Text="{Binding UserName.Value, Mode=TwoWay}">
+                    <Entry.Style>
+                        <OnPlatform x:TypeArguments="Style"
+                            iOS="{StaticResource EntryStyle}"
+                            Android="{StaticResource EntryStyle}"
+                            WinPhone="{StaticResource UwpEntryStyle}"/>
+                    </Entry.Style>
+                </Entry>
                 <Label 
                     Text="Password"
                     Style="{StaticResource HeaderLabelStyle}"/>
                 <Entry 
                     IsPassword="True"
-                    Text="{Binding Password.Value, Mode=TwoWay}" />
+                    Text="{Binding Password.Value, Mode=TwoWay}"  
+                    Style="{StaticResource EntryStyle}">
+                    <Entry.Style>
+                        <OnPlatform x:TypeArguments="Style"
+                            iOS="{StaticResource EntryStyle}"
+                            Android="{StaticResource EntryStyle}"
+                            WinPhone="{StaticResource UwpEntryStyle}"/>
+                    </Entry.Style>
+                </Entry>
             </StackLayout>
             <!-- LOGIN BUTTON -->
             <Grid
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/MainView.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/MainView.xaml
index 840ed9c9c..2ec9af122 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/MainView.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/MainView.xaml
@@ -6,6 +6,7 @@
             xmlns:controls="clr-namespace:eShopOnContainers.Core.Controls;assembly=eShopOnContainers.Core"
             BarBackgroundColor="{StaticResource DarkGreenColor}"
             BackgroundColor="{StaticResource BackgroundColor}"
+            BarTextColor="{StaticResource WhiteColor}"
             Title="eShop on Containers">
     <views:CatalogView  
         x:Name="HomeView">
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/OrderDetailView.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/OrderDetailView.xaml
index 08068718f..05684009b 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/OrderDetailView.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/OrderDetailView.xaml
@@ -195,7 +195,7 @@
                 Grid.Row="2"        
                 Opacity="0">
                 <Grid.RowDefinitions>
-                    <RowDefinition Height="*" />
+                    <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
                 <ListView 
@@ -203,7 +203,6 @@
                     ItemsSource="{Binding Order.OrderItems}"       
                     HasUnevenRows="True"
                     SeparatorVisibility="None"
-                    VerticalOptions="FillAndExpand"
                     CachingStrategy="RecycleElement">
                     <ListView.ItemTemplate>
                         <DataTemplate>
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/OrderItemTemplate.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/OrderItemTemplate.xaml
index 5d9b3a218..c1bdcb006 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/OrderItemTemplate.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/OrderItemTemplate.xaml
@@ -57,6 +57,7 @@
     </ContentView.Resources>
     <ContentView.Content>
         <Grid   
+            HeightRequest="120"
             BackgroundColor="{StaticResource BackgroundColor}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/ProductTemplate.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/ProductTemplate.xaml
index b98ebff53..6dbb31b5f 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/ProductTemplate.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/ProductTemplate.xaml
@@ -3,6 +3,7 @@
     xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
     xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
+    xmlns:controls="clr-namespace:eShopOnContainers.Core.Controls;assembly=eShopOnContainers.Core"
     x:Class="eShopOnContainers.Core.Views.Templates.ProductTemplate">
     <ContentView.Resources>
         <ResourceDictionary>
@@ -80,27 +81,9 @@
                 Grid.Row="0"
                 Grid.RowSpan="2"
                 Style="{StaticResource AddButtonStyle}">
-                <BoxView  
-                    BackgroundColor="{StaticResource LightGreenColor}"
-                    StyleClass="Circle"/>
-                <Image 
-                    Aspect="AspectFit" 
-                    Style="{StaticResource AddImageStyle}">
-                    <Image.Margin>
-                        <OnPlatform        
-                            x:TypeArguments="Thickness"
-                            Android="5, 12, 12, 12"
-                            iOS="6, 12, 12, 12"
-                            WinPhone="8, 12, 12, 12"/>
-                    </Image.Margin>
-                    <Image.Source>
-                        <OnPlatform 
-                            x:TypeArguments="ImageSource"
-                            Android="product_add"
-                            iOS="product_add"
-                            WinPhone="Assets\product_add.png"/>
-                    </Image.Source>
-                </Image>
+                <controls:CartButton>
+                    
+                </controls:CartButton>
             </Grid>
             <Label 
                 Grid.Row="1"
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/eShopOnContainers.Core.csproj b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/eShopOnContainers.Core.csproj
index 3ebfa339e..73791230b 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Core/eShopOnContainers.Core.csproj
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Core/eShopOnContainers.Core.csproj
@@ -45,6 +45,9 @@
     <Compile Include="Behaviors\Base\BindableBehavior.cs" />
     <Compile Include="Behaviors\EventToCommandBehavior.cs" />
     <Compile Include="Controls\BindablePicker.cs" />
+    <Compile Include="Controls\CartButton.xaml.cs">
+      <DependentUpon>CartButton.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\CustomTabbedPage.cs" />
     <Compile Include="Converters\CountToBoolConverter.cs" />
     <Compile Include="Converters\DatetimeConverter.cs" />
@@ -294,6 +297,12 @@
       <SubType>Designer</SubType>
     </EmbeddedResource>
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="Controls\CartButton.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Portable\$(TargetFrameworkVersion)\Microsoft.Portable.CSharp.targets" />
   <Import Project="..\..\packages\Xamarin.Forms.2.3.2.127\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets" Condition="Exists('..\..\packages\Xamarin.Forms.2.3.2.127\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets')" />
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/App.xaml b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/App.xaml
index 059e72563..25cd8e1e5 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/App.xaml
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/App.xaml
@@ -239,6 +239,52 @@
             <Style TargetType="PivotItem">
                 <Setter Property="Margin" Value="0" />
             </Style>
+
+            <Style TargetType="ListViewItem">
+                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+                <Setter Property="Background" Value="Transparent"/>
+                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
+                <Setter Property="TabNavigation" Value="Local"/>
+                <Setter Property="IsHoldingEnabled" Value="True"/>
+                <Setter Property="Padding" Value="12,0,12,0"/>
+                <Setter Property="HorizontalContentAlignment" Value="Left"/>
+                <Setter Property="VerticalContentAlignment" Value="Center"/>
+                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
+                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="ListViewItem">
+                            <ListViewItemPresenter
+                                ContentTransitions="{TemplateBinding ContentTransitions}"
+                                SelectionCheckMarkVisualEnabled="True"
+                                CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
+                                CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
+                                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
+                                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
+                                FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
+                                FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
+                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
+                                PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
+                                PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
+                                SelectedBackground="Red"
+                                SelectedForeground="Transparent"
+                                SelectedPointerOverBackground="Transparent"
+                                PressedBackground="Transparent"
+                                SelectedPressedBackground="Transparent"
+                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
+                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
+                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                ContentMargin="{TemplateBinding Padding}"
+                                CheckMode="Inline"/>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
+
+
             
         </ResourceDictionary>
     </Application.Resources>    
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Assets/circle_button_background.png b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Assets/circle_button_background.png
new file mode 100644
index 0000000000000000000000000000000000000000..23f6dbbcb0be8848e20c3b3f04a71f6ea0a75c4c
GIT binary patch
literal 2930
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

literal 0
HcmV?d00001

diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Effects/EntryLineColorEffect.cs b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Effects/EntryLineColorEffect.cs
index ce7f69f98..a35eb4970 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Effects/EntryLineColorEffect.cs
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Effects/EntryLineColorEffect.cs
@@ -10,6 +10,7 @@ using Windows.UI.Xaml.Controls;
 using eShopOnContainers.Windows.Effects;
 using eShopOnContainers.Core.Effects;
 
+[assembly: ResolutionGroupName("eShopOnContainers")]
 [assembly: ExportEffect(typeof(EntryLineColorEffect), "EntryLineColorEffect")]
 namespace eShopOnContainers.Windows.Effects
 {
@@ -51,7 +52,7 @@ namespace eShopOnContainers.Windows.Effects
                 var lineColor = XamarinFormColorToWindowsColor(LineColorEffect.GetLineColor(Element));
                 control.BorderBrush = new Media.SolidColorBrush(lineColor);
 
-                var style = App.Current.Resources["FormTextBoxStyle"] as Xaml.Style;
+                var style = Xaml.Application.Current.Resources["FormTextBoxStyle"] as Xaml.Style;
                 control.Style = style;
             }
         }
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Renderers/CustomTabbedPageRenderer.cs b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Renderers/CustomTabbedPageRenderer.cs
index 1c213748e..7adfd7a10 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Renderers/CustomTabbedPageRenderer.cs
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/Renderers/CustomTabbedPageRenderer.cs
@@ -9,6 +9,5 @@ namespace eShopOnContainers.Windows.Renderers
     [Preserve]
     public class CustomTabbedPageRenderer : TabbedPageRenderer
     {
-
     }
 }
\ No newline at end of file
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/eShopOnContainers.Windows.csproj b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/eShopOnContainers.Windows.csproj
index 1cd8baba5..57e0400c2 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/eShopOnContainers.Windows.csproj
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.Windows/eShopOnContainers.Windows.csproj
@@ -120,6 +120,7 @@
     <None Include="Windows_TemporaryKey.pfx" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Assets\circle_button_background.png" />
     <Content Include="Assets\fake_product_01.png" />
     <Content Include="Assets\fake_product_02.png" />
     <Content Include="Assets\fake_product_03.png" />
diff --git a/src/Mobile/eShopOnContainers/eShopOnContainers.iOS/Renderers/CustomTabbedPageRenderer.cs b/src/Mobile/eShopOnContainers/eShopOnContainers.iOS/Renderers/CustomTabbedPageRenderer.cs
index 1ea673426..afb244925 100644
--- a/src/Mobile/eShopOnContainers/eShopOnContainers.iOS/Renderers/CustomTabbedPageRenderer.cs
+++ b/src/Mobile/eShopOnContainers/eShopOnContainers.iOS/Renderers/CustomTabbedPageRenderer.cs
@@ -1,10 +1,110 @@
-using Foundation;
+using eShopOnContainers.Core.Controls;
+using eShopOnContainers.iOS.Renderers;
+using Foundation;
+using System.Threading.Tasks;
+using UIKit;
+using Xamarin.Forms;
 using Xamarin.Forms.Platform.iOS;
 
+[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
 namespace eShopOnContainers.iOS.Renderers
 {
     [Preserve]
     public class CustomTabbedPageRenderer : TabbedRenderer
     {
+        public override void ViewWillAppear(bool animated)
+        {
+            base.ViewWillAppear(animated);
+
+            for (var i = 0; i < TabBar.Items.Length; i++)
+            {
+                AddTabBadge(i);
+            }
+
+            Element.ChildAdded += OnTabAdded;
+            Element.ChildRemoved += OnTabRemoved;
+        }
+
+        private void AddTabBadge(int tabIndex)
+        {
+            var element = Tabbed.Children[tabIndex];
+            element.PropertyChanged += OnTabbedPagePropertyChanged;
+
+            if (TabBar.Items.Length > tabIndex)
+            {
+                var tabBarItem = TabBar.Items[tabIndex];
+                UpdateTabBadgeText(tabBarItem, element);
+
+                var tabColor = CustomTabbedPage.GetBadgeColor(element);
+                if (tabColor != Color.Default)
+                {
+                    tabBarItem.BadgeColor = tabColor.ToUIColor();
+                }
+            }
+        }
+
+        private void UpdateTabBadgeText(UITabBarItem tabBarItem, Element element)
+        {
+            var text = CustomTabbedPage.GetBadgeText(element);
+
+            tabBarItem.BadgeValue = string.IsNullOrEmpty(text) ? null : text;
+        }
+
+        private void OnTabbedPagePropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            var page = sender as Page;
+            if (page == null)
+                return;
+
+            if (e.PropertyName == CustomTabbedPage.BadgeTextProperty.PropertyName)
+            {
+                var tabIndex = Tabbed.Children.IndexOf(page);
+
+                if (tabIndex < TabBar.Items.Length)
+                    UpdateTabBadgeText(TabBar.Items[tabIndex], page);
+
+                return;
+            }
+
+            if (e.PropertyName == CustomTabbedPage.BadgeColorProperty.PropertyName)
+            {
+                var tabIndex = Tabbed.Children.IndexOf(page);
+                if (tabIndex < TabBar.Items.Length)
+                    TabBar.Items[tabIndex].BadgeColor = CustomTabbedPage.GetBadgeColor(page).ToUIColor();
+            }
+        }
+
+        private async void OnTabAdded(object sender, ElementEventArgs e)
+        {
+            await Task.Delay(10);
+
+            var page = e.Element as Page;
+            if (page == null)
+                return;
+
+            var tabIndex = Tabbed.Children.IndexOf(page);
+            AddTabBadge(tabIndex);
+        }
+
+        private void OnTabRemoved(object sender, ElementEventArgs e)
+        {
+            e.Element.PropertyChanged -= OnTabbedPagePropertyChanged;
+        }
+
+        protected override void Dispose(bool disposing)
+        {
+            if (Tabbed != null)
+            {
+                foreach (var tab in Tabbed.Children)
+                {
+                    tab.PropertyChanged -= OnTabbedPagePropertyChanged;
+                }
+
+                Tabbed.ChildAdded -= OnTabAdded;
+                Tabbed.ChildRemoved -= OnTabRemoved;
+            }
+
+            base.Dispose(disposing);
+        }
     }
-}
+}
\ No newline at end of file