From d1cc053842eb76e897ca871638c7f3699fb34835 Mon Sep 17 00:00:00 2001
From: Hamish Duff <99325835+duffh@users.noreply.github.com>
Date: Tue, 16 Jan 2024 08:54:07 -0800
Subject: [PATCH] Improve WinUI, UWP, .NET MAUI dark mode handling (#542)

* improve dark mode handling of MAUI + UWP + WinUI

* Update WInUI + UWP BasemapGallery

* update MAUI resources

* Improve resource loading for maui converter

* Update BasemapGallery.Theme.xaml

* Update BasemapGallery.Theme.xaml

* Update BasemapGallery.Theme.xaml
---
 src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml |  10 +++++-----
 src/Samples/Toolkit.SampleApp.UWP/MainPage.xaml  |   6 +++---
 .../Toolkit.SampleApp.WinUI/MainWindow.xaml      |   6 +++---
 .../Assets/{BasemapLight.png => basemap.png}     | Bin
 .../Assets/{BasemapDark.png => basemapdark.png}  | Bin
 .../ByteArrayToImageSourceConverter.cs           |  10 +++++++++-
 .../Esri.ArcGISRuntime.Toolkit.Maui.csproj       |  12 +-----------
 .../BasemapGallery/BasemapGallery.Resources.xaml |  15 +++++++++++++++
 src/Toolkit/Toolkit.WinUI/Assets/Basemap.png     | Bin 0 -> 1998 bytes
 src/Toolkit/Toolkit.WinUI/Assets/BasemapDark.png | Bin 0 -> 3222 bytes
 .../BasemapGallery/BasemapGallery.Resources.xaml |  15 +++++++++++++++
 .../BasemapGallery/BasemapGallery.Theme.xaml     |   5 +++--
 12 files changed, 54 insertions(+), 25 deletions(-)
 rename src/Toolkit/Toolkit.Maui/Assets/{BasemapLight.png => basemap.png} (100%)
 rename src/Toolkit/Toolkit.Maui/Assets/{BasemapDark.png => basemapdark.png} (100%)
 create mode 100644 src/Toolkit/Toolkit.UWP/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml
 create mode 100644 src/Toolkit/Toolkit.WinUI/Assets/Basemap.png
 create mode 100644 src/Toolkit/Toolkit.WinUI/Assets/BasemapDark.png
 create mode 100644 src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml

diff --git a/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml b/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml
index 83f1bd03f..cda781e68 100644
--- a/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml
+++ b/src/Samples/Toolkit.SampleApp.Maui/MainPage.xaml
@@ -11,8 +11,8 @@
             </ListView.ItemTemplate>
         </ListView>
 
-        <Border  x:Name="ApiKeyWindow" Background="#ccffffff" IsVisible="false">
-            <Grid HorizontalOptions="Center" VerticalOptions="Center" Background="White">
+        <Border  x:Name="ApiKeyWindow" Background="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" IsVisible="false">
+            <Grid HorizontalOptions="Center" VerticalOptions="Center">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition />
@@ -31,13 +31,13 @@
                         <Label Text="Enter API Key:" Margin="0,10,0,5" />
                         <Entry x:Name="ApiKeyInput" MaximumWidthRequest="475" />
                         <Button HorizontalOptions="End" Text="Save" Padding="20,5" 
-                                Background="CornflowerBlue" TextColor="White" BorderColor="White"
+                                Background="CornflowerBlue" TextColor="White"
                                 Clicked="SaveApiKey_Click" />
                         <Label MaxLines="5" Margin="0,10,0,0" >
                             <Label.FormattedText>
                                 <FormattedString>
                                     <Span Text="You can get or create an API key from " />
-                                    <Span Text="your developer dashboard" TextDecorations="Underline" TextColor="Blue" >
+                                    <Span Text="your developer dashboard" TextDecorations="Underline" TextColor="{AppThemeBinding Light={StaticResource Blue100Accent}, Dark={StaticResource Blue300Accent}}" >
                                         <Span.GestureRecognizers>
                                             <TapGestureRecognizer Tapped="DashboardLinkTapped" />
                                         </Span.GestureRecognizers>
@@ -46,7 +46,7 @@
                                 </FormattedString>
                             </Label.FormattedText>
                         </Label>
-                        <Label MaxLines="5" Margin="0,10,0,0" TextDecorations="Underline" TextColor="Blue" Text="More info on API Keys">
+                        <Label MaxLines="5" Margin="0,10,0,0" TextDecorations="Underline" TextColor="{AppThemeBinding Light={StaticResource Blue100Accent}, Dark={StaticResource Blue300Accent}}" Text="More info on API Keys">
                             <Label.GestureRecognizers>
                                 <TapGestureRecognizer Tapped="MoreInfoLinkTapped" />
                             </Label.GestureRecognizers>
diff --git a/src/Samples/Toolkit.SampleApp.UWP/MainPage.xaml b/src/Samples/Toolkit.SampleApp.UWP/MainPage.xaml
index 388167c49..9af5a9dd4 100644
--- a/src/Samples/Toolkit.SampleApp.UWP/MainPage.xaml
+++ b/src/Samples/Toolkit.SampleApp.UWP/MainPage.xaml
@@ -48,8 +48,8 @@
                 <Frame x:Name="rootFrame" Background="{ThemeResource ApplicationForegroundThemeBrush}" />
 
 
-                <Border  x:Name="ApiKeyWindow" Background="#ccffffff" d:Visibility="Visible" Visibility="Collapsed">
-                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="White">
+                <Border  x:Name="ApiKeyWindow" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" d:Visibility="Visible" Visibility="Collapsed">
+                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition />
@@ -68,7 +68,7 @@
                                 <TextBlock Text="Enter API Key:" Margin="0,10,0,5" />
                                 <TextBox x:Name="ApiKeyInput" Width="475" />
                                 <Button HorizontalAlignment="Right" Content="Save" Padding="20,5" 
-                                Background="CornflowerBlue" Foreground="White" BorderBrush="White"
+                                Background="CornflowerBlue" Foreground="White"
                                 Click="SaveApiKey_Click" />
                                 <TextBlock TextWrapping="Wrap" Margin="0,10,0,0">
                             <Span>You can get or create an API key from <Hyperlink NavigateUri="https://developers.arcgis.com/api-keys/">your developer dashboard</Hyperlink>.</Span><LineBreak></LineBreak>
diff --git a/src/Samples/Toolkit.SampleApp.WinUI/MainWindow.xaml b/src/Samples/Toolkit.SampleApp.WinUI/MainWindow.xaml
index 40df81cca..5638f02bf 100644
--- a/src/Samples/Toolkit.SampleApp.WinUI/MainWindow.xaml
+++ b/src/Samples/Toolkit.SampleApp.WinUI/MainWindow.xaml
@@ -41,8 +41,8 @@
                     <local:WelcomePage />
                 </Frame>
 
-                <Border  x:Name="ApiKeyWindow" Background="#ccffffff" d:Visibility="Visible" Visibility="Collapsed">
-                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="White">
+                <Border  x:Name="ApiKeyWindow" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" d:Visibility="Visible" Visibility="Collapsed">
+                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition />
@@ -61,7 +61,7 @@
                                 <TextBlock Text="Enter API Key:" Margin="0,10,0,5" />
                                 <TextBox x:Name="ApiKeyInput" Width="475" />
                                 <Button HorizontalAlignment="Right" Content="Save" Padding="20,5" 
-                                Background="CornflowerBlue" Foreground="White" BorderBrush="White"
+                                Background="CornflowerBlue" Foreground="White"
                                 Click="SaveApiKey_Click" />
                                 <TextBlock TextWrapping="Wrap" Margin="0,10,0,0">
                             <Span>You can get or create an API key from <Hyperlink NavigateUri="https://developers.arcgis.com/api-keys/">your developer dashboard</Hyperlink>.</Span><LineBreak></LineBreak>
diff --git a/src/Toolkit/Toolkit.Maui/Assets/BasemapLight.png b/src/Toolkit/Toolkit.Maui/Assets/basemap.png
similarity index 100%
rename from src/Toolkit/Toolkit.Maui/Assets/BasemapLight.png
rename to src/Toolkit/Toolkit.Maui/Assets/basemap.png
diff --git a/src/Toolkit/Toolkit.Maui/Assets/BasemapDark.png b/src/Toolkit/Toolkit.Maui/Assets/basemapdark.png
similarity index 100%
rename from src/Toolkit/Toolkit.Maui/Assets/BasemapDark.png
rename to src/Toolkit/Toolkit.Maui/Assets/basemapdark.png
diff --git a/src/Toolkit/Toolkit.Maui/BasemapGallery/ByteArrayToImageSourceConverter.cs b/src/Toolkit/Toolkit.Maui/BasemapGallery/ByteArrayToImageSourceConverter.cs
index c596e66c1..e46509aaa 100644
--- a/src/Toolkit/Toolkit.Maui/BasemapGallery/ByteArrayToImageSourceConverter.cs
+++ b/src/Toolkit/Toolkit.Maui/BasemapGallery/ByteArrayToImageSourceConverter.cs
@@ -14,6 +14,7 @@
 //  *   limitations under the License.
 //  ******************************************************************************/
 
+using Microsoft.Maui.ApplicationModel;
 using System.Globalization;
 
 namespace Esri.ArcGISRuntime.Toolkit.Maui;
@@ -30,8 +31,15 @@ internal class ByteArrayToImageSourceConverter : IValueConverter
             return ImageSource.FromStream(() => new MemoryStream(rawBuffer));
         }
 
+        AppTheme currentTheme = Application.Current.RequestedTheme;
+
+        if (currentTheme == AppTheme.Dark)
+        {
+            return ImageSource.FromResource("Esri.ArcGISRuntime.Toolkit.Maui.Assets.basemapdark.png", typeof(BasemapGallery).Assembly);
+        }
+
         // Return the placeholder image directly rather than null to work around bugs/limitations in MAUI
-        return ImageSource.FromResource("Esri.ArcGISRuntime.Toolkit.Maui.Assets.BasemapLight.png", typeof(BasemapGallery).Assembly); ;
+        return ImageSource.FromResource("Esri.ArcGISRuntime.Toolkit.Maui.Assets.basemap.png", typeof(BasemapGallery).Assembly);
     }
 
     /// <inheritdoc/>
diff --git a/src/Toolkit/Toolkit.Maui/Esri.ArcGISRuntime.Toolkit.Maui.csproj b/src/Toolkit/Toolkit.Maui/Esri.ArcGISRuntime.Toolkit.Maui.csproj
index 0162ce87d..13c32caa3 100644
--- a/src/Toolkit/Toolkit.Maui/Esri.ArcGISRuntime.Toolkit.Maui.csproj
+++ b/src/Toolkit/Toolkit.Maui/Esri.ArcGISRuntime.Toolkit.Maui.csproj
@@ -19,18 +19,8 @@
 
     <ItemGroup>
       <EmbeddedResource Include="..\Toolkit\LocalizedStrings\Resources.resx" Link="LocalizedStrings\Resources.resx" />
-      <EmbeddedResource Include="Assets\BasemapDark.png" />
-      <EmbeddedResource Include="Assets\BasemapLight.png" />
       <MauiFont Include="Resources\Fonts\calcite-ui-icons-24.ttf" />
-      <EmbeddedResource Include="Assets\caret-down-small.png" />
-      <EmbeddedResource Include="Assets\caret-down.png" />
-      <EmbeddedResource Include="Assets\pin-tear-small.png" />
-      <EmbeddedResource Include="Assets\pin-tear.png" />
-      <EmbeddedResource Include="Assets\search-small.png" />
-      <EmbeddedResource Include="Assets\search.png" />
-      <EmbeddedResource Include="Assets\x-small.png" />
-      <EmbeddedResource Include="Assets\x.png" />
-      <EmbeddedResource Include="Assets\pin-red.png" />
+      <EmbeddedResource Include="Assets\*.png"/>
       <None Include="build\**\*.*" PackagePath="build;buildTransitive" Pack="true" />
       <None Include="Resources\Fonts\calcite-ui-icons-24.ttf" Pack="true" PackagePath="Resources\Fonts" />
     </ItemGroup>
diff --git a/src/Toolkit/Toolkit.UWP/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml b/src/Toolkit/Toolkit.UWP/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml
new file mode 100644
index 000000000..a439e7bd1
--- /dev/null
+++ b/src/Toolkit/Toolkit.UWP/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml
@@ -0,0 +1,15 @@
+<ResourceDictionary 
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit.UWP/Assets/Basemap.png" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit.UWP/Assets/Basemap.png" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit.UWP/Assets/BasemapDark.png" />
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>
diff --git a/src/Toolkit/Toolkit.WinUI/Assets/Basemap.png b/src/Toolkit/Toolkit.WinUI/Assets/Basemap.png
new file mode 100644
index 0000000000000000000000000000000000000000..079c6aff99fb6fc5424d86a81aec61e59f9a1825
GIT binary patch
literal 1998
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
LPXOUAo_hA*rN*FJ

literal 0
HcmV?d00001

diff --git a/src/Toolkit/Toolkit.WinUI/Assets/BasemapDark.png b/src/Toolkit/Toolkit.WinUI/Assets/BasemapDark.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4083e0015d2fdf6b62b678f6afea840feb2fc6d
GIT binary patch
literal 3222
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

literal 0
HcmV?d00001

diff --git a/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml b/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml
new file mode 100644
index 000000000..b7e3741fe
--- /dev/null
+++ b/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml
@@ -0,0 +1,15 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit.WinUI/Assets/Basemap.png" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit.WinUI/Assets/Basemap.png" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit.WinUI/Assets/BasemapDark.png" />
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>
diff --git a/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Theme.xaml b/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Theme.xaml
index 9085d4596..ab6c259af 100644
--- a/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Theme.xaml
+++ b/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Theme.xaml
@@ -3,6 +3,9 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:basemapgallery="using:Esri.ArcGISRuntime.Toolkit.UI.Controls"
     xmlns:controls="using:Esri.ArcGISRuntime.Toolkit.UI.Controls">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="BasemapGallery.Resources.xaml" />
+    </ResourceDictionary.MergedDictionaries>
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Light">
             <SolidColorBrush x:Key="ItemTextForegroundUnselected" Color="#6a6a6a" />
@@ -12,7 +15,6 @@
             <SolidColorBrush x:Key="HoverBackgroundBrush" Color="#f3f3f3" />
             <SolidColorBrush x:Key="ControlBackground" Color="#fff" />
             <SolidColorBrush x:Key="ControlBorder" Color="#cacaca" />
-            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit/Assets/BasemapLight.png" />
         </ResourceDictionary>
         <ResourceDictionary x:Key="Dark">
             <SolidColorBrush x:Key="ItemTextForegroundUnselected" Color="#ffffff" />
@@ -22,7 +24,6 @@
             <SolidColorBrush x:Key="HoverBackgroundBrush" Color="#2B2B2B" />
             <SolidColorBrush x:Key="ControlBackground" Color="#353535" />
             <SolidColorBrush x:Key="ControlBorder" Color="#555555" />
-            <BitmapImage x:Key="BasemapPlaceholder" UriSource="ms-appx:///Esri.ArcGISRuntime.Toolkit/Assets/BasemapDark.png" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
     <Style x:Key="BaseContainerStyle" TargetType="ListViewItem">