From 6dc3f864d858513cfc36fc8ec873ec76f94b2711 Mon Sep 17 00:00:00 2001
From: David Ortinau <david.ortinau@microsoft.com>
Date: Tue, 21 Jun 2022 11:29:39 -0500
Subject: [PATCH] Visibility of nav bar, title, and flyout icon states (#211)

---
 .gitignore                                    |  1 +
 .../src/WeatherTwentyOne/.vscode/launch.json  | 14 ------
 .../src/WeatherTwentyOne/App.xaml             | 13 ++---
 .../Converters/ImageByStateConverter.cs       | 23 +++++++++
 .../WeatherTwentyOne/Pages/FavoritesPage.xaml |  1 +
 .../src/WeatherTwentyOne/Pages/HomePage.xaml  |  6 ++-
 .../src/WeatherTwentyOne/Pages/MapPage.xaml   |  1 +
 .../WeatherTwentyOne/Pages/SettingsPage.xaml  |  1 +
 .../Resources/Styles/DefaultTheme.xaml        | 47 ++++++++++++++++++-
 9 files changed, 80 insertions(+), 27 deletions(-)
 delete mode 100644 6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/.vscode/launch.json
 create mode 100644 6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Converters/ImageByStateConverter.cs

diff --git a/.gitignore b/.gitignore
index 7376bc5a..fc0eb280 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 *.user
 *.userosscache
 *.sln.docstates
+*.idea
 
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/.vscode/launch.json b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/.vscode/launch.json
deleted file mode 100644
index 387ab889..00000000
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/.vscode/launch.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Debug",
-            "type": "comet",
-            "request": "launch",
-            "preLaunchTask": "comet: Run"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/App.xaml b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/App.xaml
index 2c1dc568..922800f8 100644
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/App.xaml
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/App.xaml
@@ -12,13 +12,6 @@
             FlyoutWidth="68" FlyoutBackgroundColor="{StaticResource Background_Mid}"
             FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">
 
-            <!--<Shell.FlyoutHeaderTemplate>
-                <DataTemplate>
-                    <BoxView HeightRequest="68"/>
-                </DataTemplate>
-
-            </Shell.FlyoutHeaderTemplate>-->
-
             <Shell.FlyoutFooterTemplate>
                 <DataTemplate>
                     <Grid RowDefinitions="68">
@@ -40,13 +33,13 @@
             
 
             <!-- Desktop/Tablet-->
-            <FlyoutItem Title="Home" FlyoutIcon="tab_home.png">
+            <FlyoutItem Title="Home" Style="{StaticResource HomeFlyout}">
                 <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
             </FlyoutItem>
-            <FlyoutItem Title="Favorites" FlyoutIcon="tab_favorites.png">
+            <FlyoutItem Title="Favorites" Style="{StaticResource FavFlyout}">
                 <ShellContent ContentTemplate="{DataTemplate page:FavoritesPage}"/>
             </FlyoutItem>
-            <FlyoutItem Title="Map" FlyoutIcon="tab_map.png">
+            <FlyoutItem Title="Map" Style="{StaticResource MapFlyout}">
                 <ShellContent ContentTemplate="{DataTemplate page:MapPage}"/>
             </FlyoutItem>
             <FlyoutItem Title="Settings" Route="settings" FlyoutItemIsVisible="False">
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Converters/ImageByStateConverter.cs b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Converters/ImageByStateConverter.cs
new file mode 100644
index 00000000..1e879ba9
--- /dev/null
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Converters/ImageByStateConverter.cs
@@ -0,0 +1,23 @@
+using System.Globalization;
+
+namespace WeatherTwentyOne.Converters;
+
+public class ImageByStateConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        var target = (FlyoutItem)value;
+        var allParams = ((string)parameter).Split((';')); // 0=normal, 1=selected
+
+        if (target.IsChecked && allParams.Length > 1)
+            return allParams[1];
+        else
+            return allParams[0];
+    }
+
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        return (string)value;
+    }
+}
\ No newline at end of file
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/FavoritesPage.xaml b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/FavoritesPage.xaml
index 4230c629..833cdf07 100644
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/FavoritesPage.xaml
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/FavoritesPage.xaml
@@ -6,6 +6,7 @@
              xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
              ios:Page.UseSafeArea="True"
              Title="Favorites"
+             Shell.NavBarIsVisible="{OnIdiom True, Desktop=False}"
              x:Class="WeatherTwentyOne.Pages.FavoritesPage"
              >
     <ContentPage.Resources>
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/HomePage.xaml b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/HomePage.xaml
index c389493d..e0a224da 100644
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/HomePage.xaml
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/HomePage.xaml
@@ -5,8 +5,10 @@
     xmlns:v="clr-namespace:WeatherTwentyOne.Views"
     xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
     ios:Page.UseSafeArea="True"
-    Title="St. Louis, Missouri USA"
-    x:Class="WeatherTwentyOne.Pages.HomePage">
+    Title="{OnIdiom 'St. Louis, Missouri USA', Desktop=''}"
+    Shell.NavBarIsVisible="{OnPlatform True, MacCatalyst=False}"
+    x:Class="WeatherTwentyOne.Pages.HomePage"
+    x:Name="this">
 
     <ContentPage.MenuBarItems>
         <MenuBarItem Text="File">
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/MapPage.xaml b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/MapPage.xaml
index bdfc309c..ed58926e 100644
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/MapPage.xaml
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/MapPage.xaml
@@ -4,6 +4,7 @@
     xmlns:m="clr-namespace:WeatherTwentyOne.Models"
     xmlns:v="clr-namespace:WeatherTwentyOne.Views"
     Title="Wind Map"
+    Shell.NavBarIsVisible="{OnIdiom True, Desktop=False}"
     x:Class="WeatherTwentyOne.Pages.MapPage">
 
     <Grid
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/SettingsPage.xaml b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/SettingsPage.xaml
index f395c232..0ac07f65 100644
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/SettingsPage.xaml
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Pages/SettingsPage.xaml
@@ -6,6 +6,7 @@
              xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
              ios:Page.UseSafeArea="True"
              Title="Settings"
+             Shell.NavBarIsVisible="{OnIdiom True, Desktop=False}"
              x:Class="WeatherTwentyOne.Pages.SettingsPage">
 
     <ContentPage.Resources>
diff --git a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml
index 8cdaed9b..402e690e 100644
--- a/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml
+++ b/6.0/Apps/WeatherTwentyOne/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml
@@ -3,7 +3,8 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                     xmlns:app="clr-namespace:WeatherTwentyOne.Resources.Styles"
                     x:Class="WeatherTwentyOne.Resources.Styles.DefaultTheme"
-                    xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls">
+                    xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
+                    xmlns:converter="clr-namespace:WeatherTwentyOne.Converters">
 
     <Color x:Key="Primary">#512BD4</Color>
     <Color x:Key="Secondary">#DFD8F7</Color>
@@ -363,4 +364,48 @@
             </Grid>
         </Frame>
     </DataTemplate>
+
+    <converter:ImageByStateConverter x:Key="ImageByStateConverter"/>
+
+    <Style TargetType="FlyoutItem" x:Key="HomeFlyout">
+        <Style.Triggers>
+            <Trigger TargetType="FlyoutItem"
+                        Property="IsChecked" Value="False">
+                <Setter Property="FlyoutIcon" Value="tab_home.png"/>
+            </Trigger>
+            <Trigger TargetType="FlyoutItem"
+                        Property="IsChecked" Value="True">
+                <Setter Property="FlyoutIcon" Value="tab_home_on.png"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style TargetType="FlyoutItem" x:Key="FavFlyout">
+        <Style.Triggers>
+            <Trigger TargetType="FlyoutItem"
+                        Property="IsChecked" Value="False">
+                <Setter Property="FlyoutIcon" Value="tab_favorites.png"/>
+            </Trigger>
+            <Trigger TargetType="FlyoutItem"
+                        Property="IsChecked" Value="True">
+                <Setter Property="FlyoutIcon" Value="tab_favorites_on.png"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style TargetType="FlyoutItem" x:Key="MapFlyout">
+        <Style.Triggers>
+            <Trigger TargetType="FlyoutItem"
+                        Property="IsChecked" Value="False">
+                <Setter Property="FlyoutIcon" Value="tab_map.png"/>
+            </Trigger>
+            <Trigger TargetType="FlyoutItem"
+                        Property="IsChecked" Value="True">
+                <Setter Property="FlyoutIcon" Value="tab_map_on.png"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    
+
 </ResourceDictionary>
\ No newline at end of file