windows layout cleanup, dark mode

Extends content into title bar disabled so we can get a bar to drag the window until the Shell PR is merged for this. started on theme modes.
davidortinau · Jan 14, 2022 · 6c2849f · 6c2849f
1 parent e2fb960
commit 6c2849f
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 38 deletions.
diff --git a/src/WeatherTwentyOne/App.xaml b/src/WeatherTwentyOne/App.xaml
@@ -15,12 +15,12 @@
             FlyoutBackgroundColor="{StaticResource Background_Mid}"
             FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">
 
-            <Shell.FlyoutHeaderTemplate>
+            <!--<Shell.FlyoutHeaderTemplate>
                 <DataTemplate>
                     <BoxView HeightRequest="68"/>
                 </DataTemplate>
 
-            </Shell.FlyoutHeaderTemplate>
+            </Shell.FlyoutHeaderTemplate>-->
 
             <Shell.FlyoutFooterTemplate>
                 <DataTemplate>

diff --git a/src/WeatherTwentyOne/MauiProgram.cs b/src/WeatherTwentyOne/MauiProgram.cs
@@ -24,6 +24,7 @@ public static MauiApp CreateMauiApp()
                         WindowExtensions.Hwnd = args.Hwnd;
                         WindowExtensions.SetIcon("Platforms/Windows/trayicon.ico");
                     }
+                    app.ExtendsContentIntoTitleBar = false;
                 }));
 #endif
         });

diff --git a/src/WeatherTwentyOne/Pages/HomePage.xaml.cs b/src/WeatherTwentyOne/Pages/HomePage.xaml.cs
@@ -28,7 +28,7 @@ private void SetupAppActions()
         try
         {
 #if WINDOWS
-                AppActions.IconDirectory = Application.Current.On<WindowsConfiguration>().GetImageDirectory();
+            AppActions.IconDirectory = Application.Current.On<WindowsConfiguration>().GetImageDirectory();
 #endif
             AppActions.SetAsync(
                 new AppAction("current_info", "Check Current Weather", icon: "current_info"),

diff --git a/src/WeatherTwentyOne/Pages/SettingsPage.xaml b/src/WeatherTwentyOne/Pages/SettingsPage.xaml
@@ -44,17 +44,18 @@
 
                     <Label Text="Units" class="SectionTitle"/>
 
-                    <Grid RowDefinitions="*,*">
-                    <Grid.GestureRecognizers>
-                        <TapGestureRecognizer Command="{Binding SelectUnits}"
-                                              CommandParameter="imperial"/>
-                    </Grid.GestureRecognizers>
+                    <Grid RowDefinitions="30,30">
+                        <Grid.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding SelectUnits}"
+                                                  CommandParameter="imperial"/>
+                        </Grid.GestureRecognizers>
                         <Label Grid.Row="0" Text="Imperial" class="Subhead"/>
                         <Label Grid.Row="1"
                             Text="˚F / mph / miles / inches" class="SubContent"/>
                         <Image
                             x:Name="Imperial"
                             Grid.RowSpan="2"
+                            Aspect="Center"
                             IsVisible="{Binding IsImperial}"
                             Source="checkmark_icon.png"
                             HorizontalOptions="End"
@@ -63,7 +64,7 @@
                     </Grid>
                     <BoxView class="HRule"/>
 
-                    <Grid RowDefinitions="*,*">
+                <Grid RowDefinitions="30,30">
                     <Grid.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding SelectUnits}"
                                               CommandParameter="metric"/>
@@ -74,14 +75,15 @@
                             Text="˚C / kmh / km / millimeters / milibars" class="SubContent"/>
                     <Image x:Name="Metric"
                             Grid.RowSpan="2"
+                           Aspect="Center"
                             IsVisible="{Binding IsMetric}"
                             Source="checkmark_icon.png"
                             HorizontalOptions="End"
                             VerticalOptions="Center"/>
                 </Grid>
                     <BoxView class="HRule"/>
 
-                    <Grid RowDefinitions="*,*">
+                <Grid RowDefinitions="30,30">
                     <Grid.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding SelectUnits}"
                                               CommandParameter="hybrid"/>
@@ -92,25 +94,30 @@
                             Text="˚C / mph / miles / millimeters / millibars" class="SubContent"/>
                     <Image x:Name="Hybrid"
                             Grid.RowSpan="2"
+                           Aspect="Center"
                             IsVisible="{Binding IsHybrid}"
                             Source="checkmark_icon.png"
                             HorizontalOptions="End"
                             VerticalOptions="Center"/>
                 </Grid>
-                    <BoxView class="HRule"/>
+                <BoxView class="HRule"/>
 
-                    <Label Text="More" class="SectionTitle"/>
+                <Label Text="More" class="SectionTitle"/>
 
-                    <Grid RowDefinitions="*,*">
-                        <Label Grid.Row="0"
-                            Text="Support" class="Subhead"/>
-                        <!-- <Label Grid.Row="1"
-                            Text="˚C / mph / miles / millimeters / millibars" class="SubContent"/> -->
-                        <Grid.GestureRecognizers>
-                            <TapGestureRecognizer Tapped="OnSupportTapped"/>
-                        </Grid.GestureRecognizers>
-                    </Grid>
-                    <BoxView class="HRule"/>                                          
+                <Label Grid.Row="0"
+                                Text="Support" class="Subhead">
+                    <Label.GestureRecognizers>
+                        <TapGestureRecognizer Tapped="OnSupportTapped"/>
+                    </Label.GestureRecognizers>
+                </Label>
+
+
+                <BoxView class="HRule"/>
+
+                <FlexLayout HeightRequest="30" JustifyContent="SpaceBetween">
+                    <Label Text="Dark Mode" class="Subhead"/>
+                    <Switch IsToggled="{Binding IsDarkMode}" />
+                </FlexLayout>
 
                 </VerticalStackLayout>
 

diff --git a/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml b/src/WeatherTwentyOne/Resources/Styles/DefaultTheme.xaml
@@ -40,22 +40,22 @@
      <!-- 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>
+            <Setter Property="Shell.FlyoutBackground"
+                        Value="{AppThemeBinding Light={StaticResource NeutralDarker}, Dark={StaticResource Background_Mid}}"/>
+            <Setter Property="Shell.BackgroundColor"
+                    Value="{AppThemeBinding Light={StaticResource NeutralDarker}, Dark={StaticResource Background_Mid}}" />
+            <Setter Property="Shell.ForegroundColor"
+                Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+            <Setter Property="Shell.TitleColor"
+                Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+            <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"

diff --git a/src/WeatherTwentyOne/ViewModels/SettingsViewModel.cs b/src/WeatherTwentyOne/ViewModels/SettingsViewModel.cs
@@ -19,6 +19,16 @@ public string Units {
         }
     }
 
+    public bool IsDarkMode {
+        get {
+            return App.Current.UserAppTheme == OSAppTheme.Dark;
+        }
+        set {
+            App.Current.UserAppTheme = value ? OSAppTheme.Dark : OSAppTheme.Light;
+            OnPropertyChanged();
+        }
+    }
+
     public string Temperature => IsImperial ? "70˚F" : "21˚C";
 
     public bool IsImperial => units == "imperial";
@@ -29,9 +39,18 @@ public string Units {
 
     public Command SelectUnits { get; set; }
 
+    public Command ChangeThemeMode { get; set; }
+
     public SettingsViewModel()
     {
         SelectUnits = new Command<string>(OnSelectUnits);
+        ChangeThemeMode = new Command<bool>(OnChangeThemeMode);
+    }
+
+    private void OnChangeThemeMode(bool dark)
+    {
+        App.Current.UserAppTheme = dark ? OSAppTheme.Dark : OSAppTheme.Light;
+        OnPropertyChanged(nameof(IsDarkMode));
     }
 
     private void OnSelectUnits(string unit)