preview 9 updates

davidortinau · Oct 27, 2021 · 72ce361 · 72ce361
1 parent e8fb9dd
commit 72ce361
Show file tree

Hide file tree

Showing 12 changed files with 193 additions and 124 deletions.
diff --git a/src/WeatherTwentyOne/App.xaml b/src/WeatherTwentyOne/App.xaml
@@ -2,9 +2,86 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:windows="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;assembly=Microsoft.Maui.Controls"
              xmlns:local="clr-namespace:WeatherTwentyOne"
+             xmlns:page="clr-namespace:WeatherTwentyOne.Pages"
              x:Class="WeatherTwentyOne.App"
              windows:Application.ImageDirectory="Assets">
     <Application.Resources>
         <ResourceDictionary Source="Resources/Styles/DefaultTheme.xaml"/>
     </Application.Resources>
+
+    <Application.MainPage>
+        <Shell 
+            FlyoutWidth="68"
+            FlyoutBackgroundColor="Red"
+            FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">
+
+            <Shell.FlyoutHeaderTemplate>
+                <DataTemplate>
+                    <BoxView HeightRequest="68"/>
+                </DataTemplate>
+
+            </Shell.FlyoutHeaderTemplate>
+
+            <Shell.FlyoutFooterTemplate>
+                <DataTemplate>
+                    <Grid RowDefinitions="68">
+                        <Grid.GestureRecognizers>
+                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
+
+                            </Grid.GestureRecognizers>
+                        <Image Source="tab_settings.png"
+                               VerticalOptions="Center"
+                               HorizontalOptions="Center"
+                        >
+
+                        </Image>
+                    </Grid>
+                </DataTemplate>
+
+            </Shell.FlyoutFooterTemplate>
+
+            <!-- Desktop/Tablet-->
+            <FlyoutItem Title="Home" Icon="tab_home.png">
+                <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
+            </FlyoutItem>
+            <FlyoutItem Title="Favorites" Icon="tab_favorites.png">
+                <ShellContent ContentTemplate="{DataTemplate page:FavoritesPage}"/>
+            </FlyoutItem>
+            <FlyoutItem Title="Map" Icon="tab_map.png">
+                <ShellContent ContentTemplate="{DataTemplate page:MapPage}"/>
+            </FlyoutItem>
+            <FlyoutItem Route="settings" FlyoutItemIsVisible="False" >
+                <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}"/>
+            </FlyoutItem>
+
+            <!-- Phone -->
+            <TabBar>
+                <Tab Title="Home" Icon="tab_home.png">
+                    <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
+                </Tab>
+                <Tab Title="Favorites" Icon="tab_favorites.png">
+                    <ShellContent ContentTemplate="{DataTemplate page:FavoritesPage}"/>
+                </Tab>
+                <Tab Title="Map" Icon="tab_map.png">
+                    <ShellContent ContentTemplate="{DataTemplate page:MapPage}"/>
+                </Tab>
+                <Tab Title="Settings" Icon="tab_settings.png">
+                    <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}"/>
+                </Tab>
+            </TabBar>
+
+            <Shell.ItemTemplate>
+                <DataTemplate>
+                    <Grid
+                        RowDefinitions="68" HeightRequest="68">
+                        <Image Source="{Binding FlyoutIcon}"
+                               VerticalOptions="Center"
+                               HorizontalOptions="Center"
+                               />
+                    </Grid>
+                </DataTemplate>
+
+            </Shell.ItemTemplate>
+        </Shell>
+    </Application.MainPage>
 </Application>
diff --git a/src/WeatherTwentyOne/App.xaml.cs b/src/WeatherTwentyOne/App.xaml.cs
@@ -3,18 +3,20 @@
 using Microsoft.Maui.Controls.Xaml;
 using WeatherTwentyOne.Pages;
 
-[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
-
 namespace WeatherTwentyOne
 {
     public partial class App : Application
     {
         public App()
         {
             InitializeComponent();
+
+            Routing.RegisterRoute("settings", typeof(SettingsPage));
         }
 
-        protected override Window CreateWindow(IActivationState activationState) =>
-            new Window(new NavigationPage(new HomePage())) { Title = "Weather TwentyOne" };
+        void TapGestureRecognizer_Tapped(System.Object sender, System.EventArgs e)
+        {
+            Shell.Current.GoToAsync("///settings");
+        }
     }
 }
diff --git a/src/WeatherTwentyOne/Pages/FavoritesPage.xaml b/src/WeatherTwentyOne/Pages/FavoritesPage.xaml
@@ -8,15 +8,8 @@
              x:Class="WeatherTwentyOne.Pages.FavoritesPage"
              >
 
-    <Grid
-        ColumnDefinitions="{OnIdiom Phone='*', Default='68,*'}"
-        RowDefinitions="{OnIdiom Phone='*,68', Default='*'}"
-        >
-
         <!-- Main Section -->
-        <ScrollView
-            Grid.Column="{OnIdiom Phone=0,Default=1}"
-            >
+        <ScrollView>
             <ScrollView.Resources>
                 <DataTemplate x:Key="FavouriteTemplate">
                     <Frame
@@ -93,9 +86,13 @@
 
                 <!-- Actual Content -->
                 <!-- this should be a FlexLayout, but that's busted in preview 7 with BindableLayout -->
-                <VerticalStackLayout
-                    BindableLayout.ItemsSource="{Binding Favorites}"
+                <FlexLayout
+                    Wrap="Wrap" Direction="Row"
+                    JustifyContent="Start"
+                    AlignItems="Start"
+                    AlignContent="Start"
                     BindableLayout.ItemTemplate="{StaticResource FavouriteTemplate}"
+                    BindableLayout.ItemsSource="{Binding Favorites}"
                     >
                     <Grid
                         HeightRequest="132"
@@ -107,16 +104,9 @@
                             Source="add_icon.png"
                             VerticalOptions="Center" HorizontalOptions="Center"/>
                     </Grid>
-                </VerticalStackLayout>
+                </FlexLayout>
 
             </StackLayout>
         </ScrollView>
 
-        <!-- Menu -->
-        <v:NavBarView
-            x:Name="NavBar"
-            Grid.Row="{OnIdiom Phone=1, Default=0}"/>
-
-    </Grid>
-
 </ContentPage>
diff --git a/src/WeatherTwentyOne/Pages/FavoritesPage.xaml.cs b/src/WeatherTwentyOne/Pages/FavoritesPage.xaml.cs
@@ -13,8 +13,6 @@ public FavoritesPage()
             InitializeComponent();
 
             BindingContext = new FavoritesViewModel();
-
-            NavBar.ActiveTab = "Favorites";
         }
 
         protected override async void OnAppearing()

diff --git a/src/WeatherTwentyOne/Pages/HomePage.xaml b/src/WeatherTwentyOne/Pages/HomePage.xaml
@@ -8,21 +8,20 @@
     Title="Redmond, WA"
     x:Class="WeatherTwentyOne.Pages.HomePage">
 
-    <Grid
-        ColumnDefinitions="{OnIdiom Phone='*', Default='68,*,480'}"
+    <GridLayout
+        ColumnDefinitions="{OnIdiom Phone='*', Default='*,500'}"
         RowDefinitions="{OnIdiom Phone='*,68', Default='*'}"
         >
 
         <!-- Main content -->
-        <ScrollView
-            Grid.Column="{OnIdiom Phone=0,Default=1}">
+        <ScrollView GridLayout.Column="0">
             <VerticalStackLayout
                 Padding="{OnIdiom Phone='0,50',Default='0,50'}"
                 Spacing="{OnIdiom Phone=25,Default=50}">
 
                 <!-- Top widgets -->
                 <FlexLayout
-                    IsVisible="{OnIdiom Phone=False, Default=True}"
+                    MinimumHeightRequest="360"
                     AlignItems="Center"
                     AlignContent="Center"
                     JustifyContent="SpaceEvenly">
@@ -32,6 +31,7 @@
                         x:Name="WindWidget"
                         WidthRequest="200" />
                 </FlexLayout>
+
                 <v:CurrentWidget
                     IsVisible="{OnIdiom Phone=True, Default=False}"/>
 
@@ -43,16 +43,9 @@
             </VerticalStackLayout>
         </ScrollView>
 
-        <!-- Menu -->
-        <v:NavBarView
-            x:Name="NavBar"
-            Grid.Row="{OnIdiom Phone=1, Default=0}"/>
-
         <!-- Widget panel -->
-        <v:WidgetsPanel
-            IsVisible="{OnIdiom Phone=False, Default=True}"
-            Grid.Column="{OnIdiom Phone=0, Default=2}" />
+        <v:WidgetsPanel GridLayout.Column="{OnIdiom Phone=0, Default=1}"/>
 
-    </Grid>
+    </GridLayout>
 
 </ContentPage>
diff --git a/src/WeatherTwentyOne/Pages/HomePage.xaml.cs b/src/WeatherTwentyOne/Pages/HomePage.xaml.cs
@@ -17,8 +17,6 @@ public HomePage()
         {
             InitializeComponent();
 
-            NavBar.ActiveTab = "Home";
-
             if (!isSetup)
             {
                 isSetup = true;

diff --git a/src/WeatherTwentyOne/Pages/MapPage.xaml b/src/WeatherTwentyOne/Pages/MapPage.xaml
@@ -3,38 +3,23 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:m="clr-namespace:WeatherTwentyOne.Models"
     xmlns:v="clr-namespace:WeatherTwentyOne.Views"
-    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
-    ios:Page.UseSafeArea="True"
     Title="Wind Map"
     x:Class="WeatherTwentyOne.Pages.MapPage">
 
     <Grid
-        RowDefinitions="{OnPlatform iOS='0,*', Default='*'}">
-        <Grid
-            Grid.Row="{OnPlatform iOS=1, Default=0}"
-            ColumnDefinitions="{OnIdiom Phone='*', Default='68,*,480'}"
-            RowDefinitions="{OnIdiom Phone='*,68', Default='*,0'}">
+        Grid.Row="{OnPlatform iOS=1, Default=0}"
+        ColumnDefinitions="{OnIdiom Phone='*', Default='*,480'}"
+        RowDefinitions="*">
 
-            <!-- Main content -->
-            <WebView
-                Grid.Column="{OnIdiom Phone=0, Default=1}"
-                Grid.Row="0"
-                Source="https://embed.windy.com" />
+        <!-- Main content -->
+        <WebView
+            Source="https://embed.windy.com" />
 
-            <!-- Desktop Menu -->
-            <v:NavBarView 
-                x:Name="NavBar"
-                Grid.Column="0"
-                Grid.Row="{OnIdiom Phone=1, Default=0}"
-                Grid.RowSpan="{OnIdiom Phone=1,Default=2}"/>
-
-            <!-- Widget panel -->
-            <v:WidgetsPanel
-                IsVisible="{OnIdiom Phone=False, Default=True}"
-                Grid.Row="0"
-                Grid.Column="{OnIdiom Phone=0, Default=2}" />
+        <!-- Widget panel -->
+        <v:WidgetsPanel
+            IsVisible="{OnIdiom Phone=False, Default=True}"
+            Grid.Column="{OnIdiom Phone=0, Default=1}" />
 
-        </Grid>
     </Grid>
 
 </ContentPage>
diff --git a/src/WeatherTwentyOne/Pages/MapPage.xaml.cs b/src/WeatherTwentyOne/Pages/MapPage.xaml.cs
@@ -6,9 +6,7 @@ public partial class MapPage : ContentPage
     {
         public MapPage()
         {
-            InitializeComponent(); 
-
-            NavBar.ActiveTab = "Map";
+            InitializeComponent();
         }
     }
 }
diff --git a/src/WeatherTwentyOne/Pages/SettingsPage.xaml b/src/WeatherTwentyOne/Pages/SettingsPage.xaml
@@ -8,11 +8,10 @@
 
 
         <Grid
-            ColumnDefinitions="{OnIdiom Phone='*', Default='68,*'}"
-            RowDefinitions="{OnIdiom Phone='100,*,68', Default='100,*,0'}"
+            ColumnDefinitions="*"
+            RowDefinitions="{OnIdiom Phone='100,*', Default='100,*,0'}"
             >
-            <ScrollView Grid.Column="{OnIdiom Phone=0,Default=1}"
-                        Grid.Row="1"
+            <ScrollView Grid.Row="1"
                         Margin="{OnIdiom Phone=15, Default=25}"
                         >
                 <VerticalStackLayout>
@@ -115,24 +114,15 @@
 
             </ScrollView>
 
-
-
-            <!-- Desktop Menu -->
-            <v:NavBarView x:Name="NavBar"
-                Grid.Column="0"
-                Grid.Row="{OnIdiom Phone=2, Default=0}"
-                Grid.RowSpan="{OnIdiom Phone=1,Default=2}"/>
-
             <Grid 
                 Grid.Row="0"
-                Grid.Column="{OnIdiom Phone=0, Default=1}"
                 Grid.ColumnDefinitions="16,120,8,*,100,16"
                 >
                 <Image Grid.Column="1"
                     HorizontalOptions="Start"
                     VerticalOptions="Center"
-                    WidthRequest="120"
-                    HeightRequest="120"         
+                    WidthRequest="60"
+                    HeightRequest="60"         
                     Aspect="AspectFill"
                     Source="https://devblogs.microsoft.com/xamarin/wp-content/uploads/sites/44/2019/03/Screen-Shot-2017-01-03-at-3.35.53-PM-150x150.png">
                     <Image.Clip>

diff --git a/src/WeatherTwentyOne/Pages/SettingsPage.xaml.cs b/src/WeatherTwentyOne/Pages/SettingsPage.xaml.cs
@@ -11,8 +11,6 @@ public SettingsPage()
             InitializeComponent();
 
             BindingContext = new SettingsViewModel();
-
-            NavBar.ActiveTab = "Settings";
         }
 
         async void OnSignOut(object sender, EventArgs eventArgs)

diff --git a/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml b/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml
@@ -37,6 +37,41 @@
                 Color="{StaticResource Background_Mid}"
                 Size="16"/>
 
+     <!-- SHELL -->
+    <Style x:Key="BaseStyle"
+           TargetType="Element">
+                <Setter Property="Shell.FlyoutBackground"
+                        Value="{StaticResource Background_Mid}"/>
+                <Setter Property="Shell.BackgroundColor"
+                    Value="{StaticResource Background_Mid}" />
+                <Setter Property="Shell.ForegroundColor"
+                    Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+                <Setter Property="Shell.TitleColor"
+                    Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+                <Setter Property="Shell.DisabledColor"
+                    Value="#B4000000" />
+                <Setter Property="Shell.UnselectedColor"
+                    Value="#CC0000" />
+                <Setter Property="Shell.NavBarHasShadow"
+                    Value="False"/>
+
+            </Style>
+
+    <Style BasedOn="{StaticResource BaseStyle}"
+           ApplyToDerivedTypes="True"
+           TargetType="FlyoutItem" />
+
+    <Style TargetType="TabBar">
+        <Setter Property="Shell.TabBarBackgroundColor"
+            Value="{StaticResource Background_Mid}" />
+        <Setter Property="Shell.TabBarTitleColor"
+            Value="{StaticResource Accent}" />
+        <Setter Property="Shell.TabBarUnselectedColor"
+            Value="{StaticResource TabOff}" />
+        <Setter Property="Shell.TabBarForegroundColor"
+            Value="{StaticResource Accent}" />
+    </Style>
+
     <Style TargetType="Page" ApplyToDerivedTypes="True">
         <Setter Property="Padding" Value="0"/>
         <Setter Property="BackgroundColor" Value="{StaticResource Background_Dark}"/>