Adapt UI to UWP App

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}"/>

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>

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();
+        }
+    }
+}

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")
             {
             }
         }

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;

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>

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

@@ -62,23 +62,39 @@
     RowSpacing="0"
     Margin="48, 24">
     <Grid.RowDefinitions>      
-      <RowDefinition />
+      <RowDefinition Height="60" />
-      <RowDefinition /> 
+      <RowDefinition Height="60" /> 
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
-    <controls:BindablePicker 
+    <controls:BindablePicker
       Grid.Row="0"
-      Title="BRAND"
+      Title="BRAND" 
-      ItemsSource="{Binding Brands}" 
+      ItemsSource="{Binding Brands}"
       SelectedItem="{Binding Brand, Mode=TwoWay}"
-      Style="{StaticResource FilterPickerStyle}"/>
+      Style="{StaticResource FilterPickerStyle}">
-    <controls:BindablePicker 
+      <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" 

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

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">

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>

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" />

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  
+                <controls:CartButton>
-                    BackgroundColor="{StaticResource LightGreenColor}"
+                    
-                    StyleClass="Circle"/>
+                </controls:CartButton>
-                <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>
             </Grid>
             <Label 
                 Grid.Row="1"

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">

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>    

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;
             }
         }

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

@@ -9,6 +9,5 @@ namespace eShopOnContainers.Windows.Renderers
     [Preserve]
     public class CustomTabbedPageRenderer : TabbedPageRenderer
     {
-
     }
 }

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" />

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);
+        }
     }
-}
+}