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
Esri · Jan 16, 2024 · d1cc053 · d1cc053
1 parent b65e653
commit d1cc053
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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/...lkit/Toolkit.Maui/Assets/BasemapLight.png → src/Toolkit/Toolkit.Maui/Assets/basemap.png b/...lkit/Toolkit.Maui/Assets/BasemapLight.png → src/Toolkit/Toolkit.Maui/Assets/basemap.png
diff --git a/...olkit/Toolkit.Maui/Assets/BasemapDark.png → ...olkit/Toolkit.Maui/Assets/basemapdark.png b/...olkit/Toolkit.Maui/Assets/BasemapDark.png → ...olkit/Toolkit.Maui/Assets/basemapdark.png
diff --git 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
@@ -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
@@ -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
diff --git a/src/Toolkit/Toolkit.WinUI/Assets/BasemapDark.png b/src/Toolkit/Toolkit.WinUI/Assets/BasemapDark.png
diff --git a/src/Toolkit/Toolkit.WinUI/UI/Controls/BasemapGallery/BasemapGallery.Resources.xaml 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
@@ -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">