[File Explorer Add-ons] Fix file preview pane flickering on file selection and resizing (#26660)

* Move color values to constant

* Fix MonacoPreview flickering on file selection and resizing

* Fix MarkdownPreview flickering on file selection and resizing

* Fix SvgPreview flickering on file selection and resizing

* Create Settings class and standardize background setting for MarkdownPreview

* Replace ColorTranslator.FromHtml with Color.FromArgb for constant color settings

* Use existing SetBackground

* Remove duplicate GetTheme function

* Update src/modules/previewpane/MarkdownPreviewHandler/Settings.cs

src/modules/previewpane/MarkdownPreviewHandler/MarkdownPreviewHandlerControl.cs

@@ -83,6 +83,7 @@ namespace Microsoft.PowerToys.PreviewHandler.Markdown
         /// </summary>
         public MarkdownPreviewHandlerControl()
         {
+            this.SetBackgroundColor(Settings.BackgroundColor);
         }
 
         /// <summary>
@@ -121,11 +122,12 @@ namespace Microsoft.PowerToys.PreviewHandler.Markdown
                     _infoBarDisplayed = true;
                 }
 
-                string markdownHTML = FilePreviewCommon.MarkdownHelper.MarkdownHtml(fileText, Common.UI.ThemeManager.GetWindowsBaseColor().ToLowerInvariant(), filePath, ImagesBlockedCallBack);
+                string markdownHTML = FilePreviewCommon.MarkdownHelper.MarkdownHtml(fileText, Settings.GetTheme(), filePath, ImagesBlockedCallBack);
 
                 _browser = new WebView2()
                 {
                     Dock = DockStyle.Fill,
+                    DefaultBackgroundColor = Color.Transparent,
                 };
 
                 var webView2Options = new CoreWebView2EnvironmentOptions("--block-new-web-contents");

src/modules/previewpane/MarkdownPreviewHandler/Settings.cs

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Microsoft.PowerToys.PreviewHandler.Markdown
+{
+    internal sealed class Settings
+    {
+        /// <summary>
+        /// Gets the color of the window background.
+        /// Even though this is not a setting yet, it's retrieved from a "Settings" class to be aligned with other preview handlers that contain this setting.
+        /// It's possible it can be converted into a setting in the future.
+        /// </summary>
+        public static Color BackgroundColor
+        {
+            get
+            {
+                if (GetTheme() == "dark")
+                {
+                    return Color.FromArgb(30, 30, 30); // #1e1e1e
+                }
+                else
+                {
+                    return Color.White;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Returns the theme.
+        /// </summary>
+        /// <returns>Theme that should be used.</returns>
+        public static string GetTheme()
+        {
+            return Common.UI.ThemeManager.GetWindowsBaseColor().ToLowerInvariant();
+        }
+    }
+}

src/modules/previewpane/MarkdownPreviewHandlerCpp/MarkdownPreviewHandler.cpp

@@ -1,6 +1,7 @@
 #include "pch.h"
 #include "MarkdownPreviewHandler.h"
 #include "Generated Files/resource.h"
+#include "../powerpreview/powerpreviewConstants.h"
 
 #include <shellapi.h>
 #include <Shlwapi.h>
@@ -10,6 +11,7 @@
 #include <common/logger/logger.h>
 #include <common/SettingsAPI/settings_helpers.h>
 #include <common/utils/process_path.h>
+#include <common/Themes/windows_colors.h>
 
 extern HINSTANCE g_hInst;
 extern long g_cDllRef;
@@ -203,6 +205,8 @@ IFACEMETHODIMP MarkdownPreviewHandler::Unload()
 
 IFACEMETHODIMP MarkdownPreviewHandler::SetBackgroundColor(COLORREF color)
 {
+    HBRUSH brush = CreateSolidBrush(WindowsColors::is_dark_mode() ? powerpreviewConstants::DARK_THEME_COLOR : powerpreviewConstants::LIGHT_THEME_COLOR);
+    SetClassLongPtr(m_hwndParent, GCLP_HBRBACKGROUND, reinterpret_cast<LONG_PTR>(brush));
     return S_OK;
 }
 

src/modules/previewpane/MarkdownPreviewHandlerCpp/MarkdownPreviewHandlerCpp.vcxproj

@@ -76,7 +76,7 @@
       <GenerateDebugInformation>true</GenerateDebugInformation>
       <EnableUAC>false</EnableUAC>
       <ModuleDefinitionFile>GlobalExportFunctions.def</ModuleDefinitionFile>
-      <AdditionalDependencies>Shlwapi.lib;$(CoreLibraryDependencies);%(AdditionalDependencies)</AdditionalDependencies>
+      <AdditionalDependencies>Shlwapi.lib;dwmapi.lib;$(CoreLibraryDependencies);%(AdditionalDependencies)</AdditionalDependencies>
     </Link>
   </ItemDefinitionGroup>
   <ItemGroup>
@@ -109,6 +109,9 @@
     <ProjectReference Include="..\..\..\common\SettingsAPI\SettingsAPI.vcxproj">
       <Project>{6955446d-23f7-4023-9bb3-8657f904af99}</Project>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\common\Themes\Themes.vcxproj">
+      <Project>{98537082-0fdb-40de-abd8-0dc5a4269bab}</Project>
+    </ProjectReference>
   </ItemGroup>
   <ItemGroup>
     <None Include="Resources.resx" />

src/modules/previewpane/MonacoPreviewHandler/MonacoPreviewHandlerControl.cs

@@ -77,6 +77,11 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
         /// </summary>
         private string _base64FileCode;
 
+        public MonacoPreviewHandlerControl()
+        {
+            this.SetBackground();
+        }
+
         [STAThread]
         public override void DoPreview<T>(T dataSource)
         {
@@ -95,14 +100,12 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
 
             base.DoPreview(dataSource);
 
-            // Sets background color
-            SetBackground();
-
             // Starts loading screen
             InitializeLoadingScreen();
 
             // New webview2 element
             _webView = new WebView2();
+            _webView.DefaultBackgroundColor = Color.Transparent;
 
             // Checks if dataSource is a string
             if (!(dataSource is string filePath))

src/modules/previewpane/MonacoPreviewHandler/Settings.cs

@@ -86,7 +86,7 @@ namespace Microsoft.PowerToys.PreviewHandler.Monaco
             {
                 if (GetTheme() == "dark")
                 {
-                    return System.Drawing.ColorTranslator.FromHtml("#1e1e1e");
+                    return Color.FromArgb(30, 30, 30); // #1e1e1e
                 }
                 else
                 {

src/modules/previewpane/MonacoPreviewHandlerCpp/MonacoPreviewHandler.cpp

@@ -1,5 +1,6 @@
 #include "pch.h"
 #include "MonacoPreviewHandler.h"
+#include "../powerpreview/powerpreviewConstants.h"
 
 #include <shellapi.h>
 #include <Shlwapi.h>
@@ -9,6 +10,7 @@
 #include <common/logger/logger.h>
 #include <common/SettingsAPI/settings_helpers.h>
 #include <common/utils/process_path.h>
+#include <common/Themes/windows_colors.h>
 
 extern HINSTANCE g_hInst;
 extern long g_cDllRef;
@@ -202,6 +204,8 @@ IFACEMETHODIMP MonacoPreviewHandler::Unload()
 
 IFACEMETHODIMP MonacoPreviewHandler::SetBackgroundColor(COLORREF color)
 {
+    HBRUSH brush = CreateSolidBrush(WindowsColors::is_dark_mode() ? powerpreviewConstants::DARK_THEME_COLOR : powerpreviewConstants::LIGHT_THEME_COLOR);
+    SetClassLongPtr(m_hwndParent, GCLP_HBRBACKGROUND, reinterpret_cast<LONG_PTR>(brush));
     return S_OK;
 }
 

src/modules/previewpane/MonacoPreviewHandlerCpp/MonacoPreviewHandlerCpp.vcxproj

@@ -72,7 +72,7 @@
       <GenerateDebugInformation>true</GenerateDebugInformation>
       <EnableUAC>false</EnableUAC>
       <ModuleDefinitionFile>GlobalExportFunctions.def</ModuleDefinitionFile>
-      <AdditionalDependencies>Shlwapi.lib;$(CoreLibraryDependencies);%(AdditionalDependencies)</AdditionalDependencies>
+      <AdditionalDependencies>Shlwapi.lib;dwmapi.lib;$(CoreLibraryDependencies);%(AdditionalDependencies)</AdditionalDependencies>
     </Link>
   </ItemDefinitionGroup>
   <ItemGroup>
@@ -103,6 +103,9 @@
     <ProjectReference Include="..\..\..\common\SettingsAPI\SettingsAPI.vcxproj">
       <Project>{6955446d-23f7-4023-9bb3-8657f904af99}</Project>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\common\Themes\Themes.vcxproj">
+      <Project>{98537082-0fdb-40de-abd8-0dc5a4269bab}</Project>
+    </ProjectReference>
   </ItemGroup>
   <Import Project="..\..\..\..\deps\spdlog.props" />
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />

src/modules/previewpane/SvgPreviewHandler/Settings.cs

@@ -47,7 +47,7 @@ namespace SvgPreviewHandler
             {
                 if (Common.UI.ThemeManager.GetWindowsBaseColor().ToLowerInvariant() == "dark")
                 {
-                    return ColorTranslator.FromHtml("#1e1e1e");
+                    return Color.FromArgb(30, 30, 30); // #1e1e1e
                 }
                 else
                 {

src/modules/previewpane/SvgPreviewHandler/SvgPreviewControl.cs

@@ -20,6 +20,11 @@ namespace Microsoft.PowerToys.PreviewHandler.Svg
     /// </summary>
     public class SvgPreviewControl : FormHandlerControl
     {
+        /// <summary>
+        /// Settings class
+        /// </summary>
+        private readonly SvgPreviewHandler.Settings _settings = new();
+
         /// <summary>
         /// Generator for the actual preview file
         /// </summary>
@@ -78,6 +83,11 @@ namespace Microsoft.PowerToys.PreviewHandler.Svg
         private string _webView2UserDataFolder = System.Environment.GetEnvironmentVariable("USERPROFILE") +
                                 "\\AppData\\LocalLow\\Microsoft\\PowerToys\\SvgPreview-Temp";
 
+        public SvgPreviewControl()
+        {
+            this.SetBackgroundColor(_settings.ThemeColor);
+        }
+
         /// <summary>
         /// Start the preview on the Control.
         /// </summary>
@@ -199,6 +209,7 @@ namespace Microsoft.PowerToys.PreviewHandler.Svg
         private void AddWebViewControl(string svgData)
         {
             _browser = new WebView2();
+            _browser.DefaultBackgroundColor = Color.Transparent;
             _browser.Dock = DockStyle.Fill;
 
             // Prevent new windows from being opened.

src/modules/previewpane/SvgPreviewHandlerCpp/SvgPreviewHandler.cpp

@@ -1,5 +1,6 @@
 #include "pch.h"
 #include "SvgPreviewHandler.h"
+#include "../powerpreview/powerpreviewConstants.h"
 
 #include <shellapi.h>
 #include <Shlwapi.h>
@@ -9,6 +10,7 @@
 #include <common/logger/logger.h>
 #include <common/SettingsAPI/settings_helpers.h>
 #include <common/utils/process_path.h>
+#include <common/Themes/windows_colors.h>
 
 extern HINSTANCE g_hInst;
 extern long g_cDllRef;
@@ -198,6 +200,8 @@ IFACEMETHODIMP SvgPreviewHandler::Unload()
 
 IFACEMETHODIMP SvgPreviewHandler::SetBackgroundColor(COLORREF color)
 {
+    HBRUSH brush = CreateSolidBrush(WindowsColors::is_dark_mode() ? powerpreviewConstants::DARK_THEME_COLOR : powerpreviewConstants::LIGHT_THEME_COLOR);
+    SetClassLongPtr(m_hwndParent, GCLP_HBRBACKGROUND, reinterpret_cast<LONG_PTR>(brush));
     return S_OK;
 }
 

src/modules/previewpane/SvgPreviewHandlerCpp/SvgPreviewHandlerCpp.vcxproj

@@ -72,7 +72,7 @@
       <GenerateDebugInformation>true</GenerateDebugInformation>
       <EnableUAC>false</EnableUAC>
       <ModuleDefinitionFile>GlobalExportFunctions.def</ModuleDefinitionFile>
-      <AdditionalDependencies>Shlwapi.lib;$(CoreLibraryDependencies);%(AdditionalDependencies)</AdditionalDependencies>
+      <AdditionalDependencies>Shlwapi.lib;dwmapi.lib;$(CoreLibraryDependencies);%(AdditionalDependencies)</AdditionalDependencies>
     </Link>
   </ItemDefinitionGroup>
   <ItemGroup>
@@ -103,6 +103,9 @@
     <ProjectReference Include="..\..\..\common\SettingsAPI\SettingsAPI.vcxproj">
       <Project>{6955446d-23f7-4023-9bb3-8657f904af99}</Project>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\common\Themes\Themes.vcxproj">
+      <Project>{98537082-0fdb-40de-abd8-0dc5a4269bab}</Project>
+    </ProjectReference>
   </ItemGroup>
   <Import Project="..\..\..\..\deps\spdlog.props" />
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />

src/modules/previewpane/powerpreview/powerpreviewConstants.h

@@ -5,4 +5,10 @@ namespace powerpreviewConstants
 {
     // Name of the powertoy module.
     inline const std::wstring ModuleKey = L"File Explorer";
-}
+    
+    // Dark theme background color
+    const COLORREF DARK_THEME_COLOR = RGB(0x1e, 0x1e, 0x1e);
+
+    // Light theme background color
+    const COLORREF LIGHT_THEME_COLOR = RGB(0xff, 0xff, 0xff);
+}