Improve design with Shell

src/TravelMonkey.iOS/Effects/SafeAreaPaddingEffect.cs

@@ -1,4 +1,6 @@
-using TravelMonkey.iOS.Effects;
+using System.Linq;
+using TravelMonkey.Effects;
+using TravelMonkey.iOS.Effects;
 using UIKit;
 using Xamarin.Forms;
 using Xamarin.Forms.Platform.iOS;
@@ -12,22 +14,36 @@ public class SafeAreaPaddingEffect_iOS : PlatformEffect
         Thickness _padding;
         protected override void OnAttached()
         {
-            if (Element is Layout element)
+            try
             {
-                if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
+                var effect = (SafeAreaPaddingEffect)Element.Effects.FirstOrDefault(e => e is SafeAreaPaddingEffect);
+                if (effect != null && Element is Layout element)
                 {
-                    _padding = element.Padding;
-                    var insets = UIApplication.SharedApplication.Windows[0].SafeAreaInsets;
-
-                    if (insets.Top > 0)
+                    if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
                     {
-                        element.Padding = new Thickness(_padding.Left + insets.Left, _padding.Top + insets.Top, _padding.Right + insets.Right, _padding.Bottom + insets.Bottom);
-                        return;
+                        _padding = element.Padding;
+                        var insets = UIApplication.SharedApplication.Windows[0].SafeAreaInsets;
+
+                        if (insets.Top > 0)
+                        {
+                            if (!effect.Revert)
+                                element.Padding = new Thickness(_padding.Left + insets.Left, _padding.Top + insets.Top, _padding.Right + insets.Right, _padding.Bottom + insets.Bottom);
+                            else
+                                element.Padding = new Thickness(_padding.Left - insets.Left, _padding.Top - insets.Top, _padding.Right - insets.Right, _padding.Bottom - insets.Bottom);
+                            return;
+                        }
                     }
+                    if (!effect.Revert)
+                        element.Padding = new Thickness(_padding.Left, _padding.Top + 20, _padding.Right, _padding.Bottom + 20);
+                    else
+                        element.Padding = new Thickness(_padding.Left, _padding.Top - 20, _padding.Right, _padding.Bottom - 20);
                 }
-
-                element.Padding = new Thickness(_padding.Left, _padding.Top + 20, _padding.Right, _padding.Bottom + 20);
             }
+            catch (System.Exception ex)
+            {
+                System.Console.WriteLine("Cannot set property on attached control. Error: ", ex.Message);
+            }
+
         }
 
         protected override void OnDetached()

src/TravelMonkey/AppShell.xaml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Shell xmlns="http://xamarin.com/schemas/2014/forms"
+       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+       xmlns:local="clr-namespace:TravelMonkey.Views"
+       FlyoutBehavior="Disabled"
+       x:Class="TravelMonkey.AppShell">
+
+    <!-- Main Page -->
+    <ShellContent Route="main"
+                  ContentTemplate="{DataTemplate local:MainPage}">
+    </ShellContent>
+
+        <!-- Main Page -->
+    <ShellContent Route="picture"
+                  ContentTemplate="{DataTemplate local:AddPicturePage}">
+    </ShellContent>
+
+        <!-- Main Page -->
+    <ShellContent Route="translation"
+                  ContentTemplate="{DataTemplate local:TranslationResultPage}">
+    </ShellContent>
+
+</Shell>

src/TravelMonkey/AppShell.xaml.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using Xamarin.Forms;
+
+namespace TravelMonkey
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/TravelMonkey/Effects/SafeAreaPaddingEffect.cs

@@ -4,6 +4,8 @@ namespace TravelMonkey.Effects
 {
     public class SafeAreaPaddingEffect : RoutingEffect
     {
+        public bool Revert { get; set; }
+
         public SafeAreaPaddingEffect() : base("TravelMonkey.SafeAreaPaddingEffect")
         {
         }

src/TravelMonkey/Views/AddPicturePage.xaml

@@ -1,5 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TravelMonkey.Views.AddPicturePage" xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:effect="clr-namespace:TravelMonkey.Effects" Title="Add Picture">
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="TravelMonkey.Views.AddPicturePage"
+             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
+             xmlns:effect="clr-namespace:TravelMonkey.Effects"
+             Shell.PresentationMode="ModalAnimated"
+             Shell.NavBarIsVisible="False"
+             Title="Add Picture">
     <yummy:PancakeView BackgroundGradientStartColor="{Binding PictureAccentColor}" BackgroundGradientEndColor="LightGray" BackgroundGradientAngle="40">
         <yummy:PancakeView.Effects>
             <effect:SafeAreaPaddingEffect />

src/TravelMonkey/Views/AddPicturePage.xaml.cs

@@ -12,14 +12,15 @@ public AddPicturePage()
 
             BindingContext = new AddPicturePageViewModel();
 
-            MessagingCenter.Subscribe<AddPicturePageViewModel>(this, Constants.PictureAddedMessage, async (vm) => await Navigation.PopModalAsync(true));
+            MessagingCenter.Subscribe<AddPicturePageViewModel>(this, Constants.PictureAddedMessage, async (vm) => await Shell.Current.GoToAsync("//main"));
 
             MessagingCenter.Subscribe<AddPicturePageViewModel>(this, Constants.PictureFailedMessage, async (vm) => await DisplayAlert("Uh-oh!", "Can you hand me my glasses? Something went wrong while analyzing this image", "OK"));
         }
 
-        private void Button_Clicked(object sender, EventArgs e)
+        private async void Button_Clicked(object sender, EventArgs e)
         {
-            Navigation.PopModalAsync();
+            //await Shell.Current.Navigation.PopModalAsync();
+            await Shell.Current.GoToAsync("//main");
         }
     }
 }

src/TravelMonkey/Views/MainPage.xaml

@@ -1,6 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
-<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:effect="clr-namespace:TravelMonkey.Effects" mc:Ignorable="d" x:Class="TravelMonkey.Views.MainPage">
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
+             xmlns:effect="clr-namespace:TravelMonkey.Effects"
+             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
+             mc:Ignorable="d"
+             Shell.NavBarIsVisible="False"
+             ios:Page.UseSafeArea="False"
+             x:Class="TravelMonkey.Views.MainPage">
     <ScrollView>
+        <ScrollView.Effects>
+            <effect:SafeAreaPaddingEffect Revert="True"/>
+        </ScrollView.Effects>
         <StackLayout BackgroundColor="White">
             <!-- Hero image -->
             <yummy:PancakeView HorizontalOptions="Fill" VerticalOptions="Start" CornerRadius="0,0,0,40" HeightRequest="350">
@@ -22,7 +35,7 @@
                                 </OnPlatform>
                             </StackLayout.Margin>
                             <StackLayout.Effects>
-                                <effect:SafeAreaPaddingEffect />
+                                <effect:SafeAreaPaddingEffect Revert="False"/>
                             </StackLayout.Effects>
                             <StackLayout Margin="20,0,20,0" Spacing="0">
                                 <StackLayout.Margin>

src/TravelMonkey/Views/MainPage.xaml.cs

@@ -33,7 +33,8 @@ protected override void OnDisappearing()
 
         private async void AddNewPicture_Tapped(object sender, EventArgs e)
         {
-            await Navigation.PushModalAsync(new AddPicturePage());
+            //await Navigation.PushModalAsync(new AddPicturePage());
+            await Shell.Current.GoToAsync("//picture");
         }
 
         private async void Entry_Completed(object sender, EventArgs e)
@@ -43,8 +44,8 @@ private async void Entry_Completed(object sender, EventArgs e)
                 await DisplayAlert("No text entered", "You didn't enter any text!", "OK");
                 return;
             }
-
-            await Navigation.PushModalAsync(new TranslationResultPage(TranslateTextEntry.Text));
+            await Shell.Current.GoToAsync($"//translation?inputText={TranslateTextEntry.Text}");
+            //await Shell.Current.Navigation.PushModalAsync(new TranslationResultPage(TranslateTextEntry.Text));
             TranslateTextEntry.Text = "";
         }
     }

src/TravelMonkey/Views/SplashScreen.xaml.cs

@@ -61,7 +61,8 @@ private void NavigateToMainPage()
         {
             MainThread.BeginInvokeOnMainThread(() =>
             {
-                Application.Current.MainPage = new MainPage();
+                Application.Current.MainPage = new AppShell();
+                Shell.Current.GoToAsync("//main");
             });
         }
     }

src/TravelMonkey/Views/TranslationResultPage.xaml

@@ -1,5 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:effect="clr-namespace:TravelMonkey.Effects" xmlns:converters="clr-namespace:TravelMonkey.Converters" xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" x:Class="TravelMonkey.Views.TranslationResultPage" BackgroundColor="#F3F3F3">
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:effect="clr-namespace:TravelMonkey.Effects"
+             xmlns:converters="clr-namespace:TravelMonkey.Converters"
+             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
+             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
+             x:Class="TravelMonkey.Views.TranslationResultPage"
+             Shell.PresentationMode="ModalAnimated"
+             Shell.NavBarIsVisible="False"
+             ios:Page.UseSafeArea="False"
+             BackgroundColor="#F3F3F3">
     <ContentPage.Resources>
         <converters:LanguageCodeToDescriptionConverter x:Key="LanguageCodeToDescriptionConverter" />
     </ContentPage.Resources>

src/TravelMonkey/Views/TranslationResultPage.xaml.cs

@@ -4,11 +4,33 @@
 
 namespace TravelMonkey.Views
 {
+    [QueryProperty("InputText", "inputText")]
     public partial class TranslationResultPage : ContentPage
     {
         private readonly TranslateResultPageViewModel _translateResultPageViewModel =
             new TranslateResultPageViewModel();
 
+        public string InputText
+        {
+            set
+            {
+                _translateResultPageViewModel.InputText = value;
+                BindingContext = _translateResultPageViewModel;
+            }
+        }
+
+        public TranslationResultPage()
+        {
+            InitializeComponent();
+
+            MessagingCenter.Subscribe<TranslateResultPageViewModel>(this,
+                Constants.TranslationFailedMessage,
+                async (s) =>
+                {
+                    await DisplayAlert("Whoops!", "We lost our dictionary, something went wrong while translating", "OK");
+                });
+        }
+
         public TranslationResultPage(string inputText)
         {
             InitializeComponent();
@@ -20,14 +42,17 @@ public TranslationResultPage(string inputText)
                     await DisplayAlert("Whoops!", "We lost our dictionary, something went wrong while translating", "OK");
                 });
 
+
             _translateResultPageViewModel.InputText = inputText;
 
             BindingContext = _translateResultPageViewModel;
+
         }
 
         private async void Button_Clicked(object sender, EventArgs e)
         {
-            await Navigation.PopModalAsync();
+            //await Navigation.PopModalAsync();
+            await Shell.Current.GoToAsync("//main");
         }
     }
 }