Sample updated to Preview 14 and Added themeing

egvijayanand · Mar 29, 2022 · 1ab74a2 · 1ab74a2
1 parent 407a085
commit 1ab74a2
Show file tree

Hide file tree

Showing 19 changed files with 469 additions and 216 deletions.
diff --git a/src/TestApp/Directory.Build.targets b/src/TestApp/Directory.Build.targets
diff --git a/src/TestApp/TestApp/App.xaml b/src/TestApp/TestApp/App.xaml
@@ -1,30 +1,64 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:local="clr-namespace:TestApp"
-             x:Class="TestApp.App">
+<Application
+    x:Class="TestApp.App"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:TestApp">
     <Application.Resources>
         <ResourceDictionary>
 
-            <Color x:Key="PrimaryColor">#512BDF</Color>
-            <Color x:Key="SecondaryColor">White</Color>
+            <x:Double x:Key="ItemSpacing">10</x:Double>
+            <x:Double x:Key="MobileFontSize">14</x:Double>
+            <x:Double x:Key="DesktopFontSize">16</x:Double>
+
+            <Color x:Key="MauiColor">#512BDF</Color>
+
+            <Color x:Key="PrimaryColor">#3700B3</Color>
+            <Color x:Key="PrimaryTextColor">White</Color>
+
+            <Color x:Key="BackgroundDark">#121212</Color>
+            <Color x:Key="BackgroundLight">White</Color>
+
+            <Color x:Key="TextDark">White</Color>
+            <Color x:Key="TextLight">Black</Color>
 
             <Style TargetType="Label">
-                <Setter Property="TextColor"
-                        Value="{DynamicResource PrimaryColor}" />
-                <Setter Property="FontFamily"
-                        Value="OpenSansRegular" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource TextDark}, Light={StaticResource TextLight}}" />
+                <Setter Property="FontFamily" Value="OSR" />
+                <Setter Property="FontSize" Value="{OnIdiom Phone=14, Desktop=18}" />
+            </Style>
+
+            <Style x:Key="MauiLabel" TargetType="Label">
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource TextDark}, Light={StaticResource MauiColor}}" />
+            </Style>
+
+            <Style ApplyToDerivedTypes="True" TargetType="StackBase">
+                <Setter Property="Spacing" Value="{StaticResource ItemSpacing}" />
+            </Style>
+
+            <Style x:Key="ContentArea" TargetType="Grid">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource BackgroundDark}, Light={StaticResource BackgroundLight}}" />
             </Style>
 
             <Style TargetType="Button">
-                <Setter Property="TextColor"
-                        Value="{DynamicResource SecondaryColor}" />
-                <Setter Property="FontFamily"
-                        Value="OpenSansRegular" />
-                <Setter Property="BackgroundColor"
-                        Value="{DynamicResource PrimaryColor}" />
-                <Setter Property="Padding"
-                        Value="14,10" />
+                <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
+                <Setter Property="FontFamily" Value="OSR" />
+                <Setter Property="FontSize" Value="{OnIdiom Phone={StaticResource MobileFontSize}, Desktop={StaticResource DesktopFontSize}}" />
+                <Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColor}" />
+                <Setter Property="Padding" Value="14,10" />
+            </Style>
+
+            <Style TargetType="RadioButton">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource BackgroundDark}, Light={StaticResource BackgroundLight}}" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource TextDark}, Light={StaticResource TextLight}}" />
+                <Setter Property="FontFamily" Value="OSR" />
+                <Setter Property="FontSize" Value="{OnIdiom Phone={StaticResource MobileFontSize}, Desktop={StaticResource DesktopFontSize}}" />
+            </Style>
+
+            <Style TargetType="NavigationPage">
+                <Setter Property="BarBackgroundColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="BarTextColor" Value="{StaticResource PrimaryTextColor}" />
+                <Setter Property="IconColor" Value="{StaticResource PrimaryTextColor}" />
             </Style>
 
         </ResourceDictionary>

diff --git a/src/TestApp/TestApp/App.xaml.cs b/src/TestApp/TestApp/App.xaml.cs
@@ -1,12 +1,60 @@
-namespace TestApp
+using TestApp.Models;
+using TestApp.Services;
+using VijayAnand.MauiToolkit.Services;
+
+namespace TestApp
 {
     public partial class App : Application
     {
+        private static readonly object locker = new();
+        private readonly IThemeService? themeService;
+
         public App()
         {
-            InitializeComponent();
+            if (Instance == null)
+            {
+                lock (locker)
+                {
+                    if (Instance == null)
+                    {
+                        Instance = this;
+                    }
+                }
+            }
 
+            InitializeComponent();
             MainPage = new AppShell();
+
+            themeService = AppService.GetService<IThemeService>();
+
+            User = new UserModel();
+            // Add logic to check whether the user is authenticated or not and then update this flag
+            User.Authenticated = false;
+        }
+
+        public static App? Instance { get; private set; }
+
+        public UserModel User { get; internal set; }
+
+        protected override void OnStart()
+        {
+            OnResume();
+        }
+
+        protected override void OnResume()
+        {
+            themeService?.SetTheme();
+            RequestedThemeChanged += OnAppThemeChangeRequested;
+        }
+
+        protected override void OnSleep()
+        {
+            RequestedThemeChanged -= OnAppThemeChangeRequested;
+        }
+
+        private void OnAppThemeChangeRequested(object? sender, AppThemeChangedEventArgs e)
+        {
+            MainThread.BeginInvokeOnMainThread(() => themeService?.SetTheme());
         }
     }
 }
diff --git a/src/TestApp/TestApp/AppShell.xaml b/src/TestApp/TestApp/AppShell.xaml
@@ -1,67 +1,58 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<Shell x:Class="TestApp.AppShell"
-       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-       xmlns:local="clr-namespace:TestApp">
+<Shell
+    x:Class="TestApp.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:TestApp"
+    FlyoutBackgroundColor="{AppThemeBinding Dark={StaticResource BackgroundDark},
+                                            Light={StaticResource BackgroundLight}}">
     <!--
         The overall app visual hierarchy is defined here, along with navigation.
         Ensure atleast a Flyout item or a TabBar is defined for Shell to work
     -->
     <Shell.Resources>
         <ResourceDictionary>
-            <Style x:Key="BaseStyle"
-                   TargetType="Element">
-                <Setter Property="Shell.BackgroundColor"
-                        Value="{StaticResource PrimaryColor}" />
-                <Setter Property="Shell.ForegroundColor"
-                        Value="White" />
-                <Setter Property="Shell.TitleColor"
-                        Value="White" />
-                <Setter Property="Shell.DisabledColor"
-                        Value="#B4FFFFFF" />
-                <Setter Property="Shell.UnselectedColor"
-                        Value="#95FFFFFF" />
-                <Setter Property="Shell.TabBarBackgroundColor"
-                        Value="{StaticResource PrimaryColor}" />
-                <Setter Property="Shell.TabBarForegroundColor"
-                        Value="White" />
-                <Setter Property="Shell.TabBarUnselectedColor"
-                        Value="#95FFFFFF" />
-                <Setter Property="Shell.TabBarTitleColor"
-                        Value="White" />
+
+            <Style x:Key="BaseStyle" TargetType="Element">
+                <Setter Property="Shell.BackgroundColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="Shell.ForegroundColor" Value="{StaticResource PrimaryTextColor}" />
+                <Setter Property="Shell.TitleColor" Value="{StaticResource PrimaryTextColor}" />
+                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
+                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
+                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource PrimaryColor}" />
+                <Setter Property="Shell.TabBarForegroundColor" Value="White" />
+                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF" />
+                <Setter Property="Shell.TabBarTitleColor" Value="White" />
             </Style>
-            <Style BasedOn="{StaticResource BaseStyle}"
-                   TargetType="TabBar" />
-            <Style BasedOn="{StaticResource BaseStyle}"
-                   TargetType="FlyoutItem" />
+
+            <Style
+                ApplyToDerivedTypes="True"
+                BasedOn="{StaticResource BaseStyle}"
+                TargetType="ShellItem" />
 
             <!--
                 Default Styles for all Flyout Items
             -->
-            <Style Class="FlyoutItemLabelStyle"
-                   TargetType="Label">
-                <Setter Property="TextColor"
-                        Value="White" />
+            <Style Class="FlyoutItemLabelStyle" TargetType="Label">
+                <Setter Property="TextColor" Value="White" />
             </Style>
-            <Style ApplyToDerivedTypes="True"
-                   Class="FlyoutItemLayoutStyle"
-                   TargetType="Layout">
+            <Style
+                ApplyToDerivedTypes="True"
+                Class="FlyoutItemLayoutStyle"
+                TargetType="Layout">
                 <Setter Property="VisualStateManager.VisualStateGroups">
                     <VisualStateGroupList>
                         <VisualStateGroup x:Name="CommonStates">
                             <VisualState x:Name="Normal">
                                 <VisualState.Setters>
-                                    <Setter Property="BackgroundColor"
-                                            Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
-                                    <Setter TargetName="FlyoutItemLabel"
-                                            Property="Label.TextColor"
-                                            Value="{StaticResource PrimaryColor}" />
+                                    <Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, Android=Transparent, iOS=White}" />
+                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{AppThemeBinding Dark={StaticResource TextDark}, Light={StaticResource TextLight}}" />
                                 </VisualState.Setters>
                             </VisualState>
                             <VisualState x:Name="Selected">
                                 <VisualState.Setters>
-                                    <Setter Property="BackgroundColor"
-                                            Value="{StaticResource PrimaryColor}" />
+                                    <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
+                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
                                 </VisualState.Setters>
                             </VisualState>
                         </VisualStateGroup>
@@ -72,17 +63,16 @@
             <!--
                 Custom Style you can apply to any Flyout Item
             -->
-            <Style ApplyToDerivedTypes="True"
-                   Class="MenuItemLayoutStyle"
-                   TargetType="Layout">
+            <Style
+                ApplyToDerivedTypes="True"
+                Class="MenuItemLayoutStyle"
+                TargetType="Layout">
                 <Setter Property="VisualStateManager.VisualStateGroups">
                     <VisualStateGroupList>
                         <VisualStateGroup x:Name="CommonStates">
                             <VisualState x:Name="Normal">
                                 <VisualState.Setters>
-                                    <Setter TargetName="FlyoutItemLabel"
-                                            Property="Label.TextColor"
-                                            Value="{StaticResource PrimaryColor}" />
+                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource PrimaryColor}" />
                                 </VisualState.Setters>
                             </VisualState>
                         </VisualStateGroup>
@@ -97,20 +87,20 @@
     -->
 
     <FlyoutItem Title="Home">
-        <ShellContent ContentTemplate="{DataTemplate local:HomePage}"
-                      Route="home" />
+        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="home" />
     </FlyoutItem>
     <FlyoutItem Title="Search">
-        <ShellContent ContentTemplate="{DataTemplate local:SearchPage}"
-                      Route="search" />
+        <ShellContent ContentTemplate="{DataTemplate local:SearchPage}" Route="search" />
+    </FlyoutItem>
+    <FlyoutItem Title="Settings">
+        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" Route="settings" />
     </FlyoutItem>
 
     <!--
         When the Flyout is visible this will be a menu item you can tie a click behavior to
     -->
 
-    <MenuItem Clicked="OnMenuItemClicked"
-              Text="Logout" />
+    <MenuItem Clicked="OnLogoutClicked" Text="Logout" />
 
     <!--
         TabBar lets you define content that won't show up in a Flyout menu. When this content is active
@@ -121,8 +111,7 @@
     -->
 
     <TabBar>
-        <ShellContent ContentTemplate="{DataTemplate local:LoginPage}"
-                      Route="login" />
+        <ShellContent ContentTemplate="{DataTemplate local:LoginPage}" Route="login" />
     </TabBar>
 
     <!-- Optional Templates

diff --git a/src/TestApp/TestApp/AppShell.xaml.cs b/src/TestApp/TestApp/AppShell.xaml.cs
@@ -7,10 +7,9 @@ public AppShell()
             InitializeComponent();
         }
 
-        private async void OnMenuItemClicked(object sender, EventArgs e)
+        private void OnLogoutClicked(object sender, EventArgs e)
         {
-            await Current.GoToAsync("//login");
+            App.Instance!.User.Authenticated = false;
         }
-
     }
 }
diff --git a/src/TestApp/TestApp/HomePage.xaml b/src/TestApp/TestApp/HomePage.xaml
@@ -1,14 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<ContentPage x:Class="TestApp.HomePage"
-             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:local="clr-namespace:TestApp"
-             Title="Home"
-             BackgroundColor="{DynamicResource SecondaryColor}">
-    <ContentPage.Content>
-        <StackLayout HorizontalOptions="Center"
-                     VerticalOptions="Center">
+<ContentPage
+    x:Class="TestApp.HomePage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:TestApp"
+    Title="Home">
+    <Grid Style="{StaticResource ContentArea}">
+        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
             <Label Text="Home Page" />
         </StackLayout>
-    </ContentPage.Content>
+    </Grid>
 </ContentPage>
diff --git a/src/TestApp/TestApp/LoginPage.xaml b/src/TestApp/TestApp/LoginPage.xaml
@@ -1,15 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<ContentPage x:Class="TestApp.LoginPage"
-             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:local="clr-namespace:TestApp"
-             Title="Login"
-             BackgroundColor="{DynamicResource SecondaryColor}">
-    <ContentPage.Content>
-        <StackLayout HorizontalOptions="Center"
-                     VerticalOptions="Center">
-            <Button Text="Login"
-                    Clicked="Login_Clicked" />
+<ContentPage
+    x:Class="TestApp.LoginPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:TestApp"
+    Title="Login"
+    Shell.NavBarIsVisible="False">
+    <Grid Style="{StaticResource ContentArea}">
+        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
+            <Button Clicked="OnLoginClicked" Text="Login" />
         </StackLayout>
-    </ContentPage.Content>
+    </Grid>
 </ContentPage>