From a49f806ac70faaa6109cea5b1c4fbb183e004f5d Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 8 Aug 2023 15:19:38 +0200
Subject: [PATCH] [ImageResizer] Moving from ModernWPF to WpfUI (#26858)

* Moving from ModernWPF to WpfUI

* signing fix

* Spellcheck

* Sign fix 2

* Loc tweaks

* sign fix 3

* Move titlebar

* Tweaks

* Debug

* Fix again

* Updating preview package

* Fixes

* Update notice.md

---------

Co-authored-by: Stefan Markovic <stefan@janeasystems.com>
---
 .github/actions/spell-check/expect.txt        |   2 +
 .pipelines/ESRPSigning_core.json              |   3 +-
 Directory.Packages.props                      |   1 +
 NOTICE.md                                     |   1 +
 src/modules/imageresizer/ui/App.xaml          |   7 +-
 src/modules/imageresizer/ui/App.xaml.cs       |  20 -
 .../imageresizer/ui/ImageResizerUI.csproj     |   2 +-
 .../ui/Properties/Resources.Designer.cs       |  24 +-
 .../imageresizer/ui/Properties/Resources.resx |  12 +-
 src/modules/imageresizer/ui/Themes/Dark.xaml  |  18 -
 .../imageresizer/ui/Themes/HighContrast1.xaml |  18 -
 .../imageresizer/ui/Themes/HighContrast2.xaml |  19 -
 .../ui/Themes/HighContrastBlack.xaml          |  18 -
 .../ui/Themes/HighContrastWhite.xaml          |  18 -
 src/modules/imageresizer/ui/Themes/Light.xaml |  18 -
 .../imageresizer/ui/Views/InputPage.xaml      | 438 +++++++++++-------
 .../imageresizer/ui/Views/InputPage.xaml.cs   |   5 +-
 .../imageresizer/ui/Views/MainWindow.xaml     |  72 +--
 .../imageresizer/ui/Views/MainWindow.xaml.cs  |   5 +-
 .../imageresizer/ui/Views/ProgressPage.xaml   |  62 +--
 .../imageresizer/ui/Views/ResultsPage.xaml    |  59 +--
 21 files changed, 417 insertions(+), 405 deletions(-)
 delete mode 100644 src/modules/imageresizer/ui/Themes/Dark.xaml
 delete mode 100644 src/modules/imageresizer/ui/Themes/HighContrast1.xaml
 delete mode 100644 src/modules/imageresizer/ui/Themes/HighContrast2.xaml
 delete mode 100644 src/modules/imageresizer/ui/Themes/HighContrastBlack.xaml
 delete mode 100644 src/modules/imageresizer/ui/Themes/HighContrastWhite.xaml
 delete mode 100644 src/modules/imageresizer/ui/Themes/Light.xaml

diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt
index f1a9bc0347..3a7b44a779 100644
--- a/.github/actions/spell-check/expect.txt
+++ b/.github/actions/spell-check/expect.txt
@@ -929,6 +929,7 @@ LEFTSCROLLBAR
 LEFTUP
 lego
 len
+lepo
 LError
 Lessthan
 LEVELID
@@ -2189,6 +2190,7 @@ wox
 wparam
 wpf
 wpftmp
+wpfui
 wpr
 wprp
 wql
diff --git a/.pipelines/ESRPSigning_core.json b/.pipelines/ESRPSigning_core.json
index 0bc1ce432f..e590f9cff4 100644
--- a/.pipelines/ESRPSigning_core.json
+++ b/.pipelines/ESRPSigning_core.json
@@ -281,7 +281,8 @@
                 "WinUI3Apps\\SharpCompress.dll",
                 "ColorCode.Core.dll", 
                 "ColorCode.UWP.dll",
-                "UnitsNet.dll"
+                "UnitsNet.dll",
+                "Wpf.Ui.dll"
             ],
             "SigningInfo": {
                 "Operations": [
diff --git a/Directory.Packages.props b/Directory.Packages.props
index 466ce4f619..5b81560e37 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -66,6 +66,7 @@
     <PackageVersion Include="Vanara.PInvoke.User32" Version="3.4.11" />
     <PackageVersion Include="Vanara.PInvoke.Shell32" Version="3.4.11" />
     <PackageVersion Include="WinUIEx" Version="2.2.0" />
+    <PackageVersion Include="WPF-UI" Version="3.0.0-preview.4" />
   </ItemGroup>
   <ItemGroup Condition="'$(IsExperimentationLive)'!=''">
     <!-- Additional dependencies used by experimentation -->
diff --git a/NOTICE.md b/NOTICE.md
index 95d88ee7b6..6e251a6157 100644
--- a/NOTICE.md
+++ b/NOTICE.md
@@ -337,4 +337,5 @@ SOFTWARE.
 - Vanara.PInvoke.Shell32 3.4.11
 - Vanara.PInvoke.User32 3.4.11
 - WinUIEx 2.2.0
+- WPF-UI 3.0.0-preview.4
 
diff --git a/src/modules/imageresizer/ui/App.xaml b/src/modules/imageresizer/ui/App.xaml
index 73d0917871..00fa42a212 100644
--- a/src/modules/imageresizer/ui/App.xaml
+++ b/src/modules/imageresizer/ui/App.xaml
@@ -4,13 +4,12 @@
              xmlns:m="clr-namespace:ImageResizer.Models"
              xmlns:sys="clr-namespace:System;assembly=System.Runtime"
              xmlns:v="clr-namespace:ImageResizer.Views"
-             xmlns:ui="http://schemas.modernwpf.com/2019">
-
+             xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ui:ThemeResources />
-                <ui:XamlControlsResources />
+                <ui:ThemesDictionary Theme="Dark" />
+                <ui:ControlsDictionary />
             </ResourceDictionary.MergedDictionaries>
 
             <ObjectDataProvider x:Key="ResizeFitValues"
diff --git a/src/modules/imageresizer/ui/App.xaml.cs b/src/modules/imageresizer/ui/App.xaml.cs
index fd3f7c5368..2840739a20 100644
--- a/src/modules/imageresizer/ui/App.xaml.cs
+++ b/src/modules/imageresizer/ui/App.xaml.cs
@@ -5,7 +5,6 @@
 using System;
 using System.Text;
 using System.Windows;
-using Common.UI;
 using ImageResizer.Models;
 using ImageResizer.Properties;
 using ImageResizer.Utilities;
@@ -16,9 +15,6 @@ namespace ImageResizer
 {
     public partial class App : Application, IDisposable
     {
-        private ThemeManager _themeManager;
-        private bool _isDisposed;
-
         static App()
         {
             Console.InputEncoding = Encoding.Unicode;
@@ -44,8 +40,6 @@ namespace ImageResizer
             var mainWindow = new MainWindow(new MainViewModel(batch, Settings.Default));
             mainWindow.Show();
 
-            _themeManager = new ThemeManager(this);
-
             // Temporary workaround for issue #1273
             BecomeForegroundWindow(new System.Windows.Interop.WindowInteropHelper(mainWindow).Handle);
         }
@@ -58,23 +52,9 @@ namespace ImageResizer
             NativeMethods.SetForegroundWindow(hWnd);
         }
 
-        protected virtual void Dispose(bool disposing)
-        {
-            if (!_isDisposed)
-            {
-                if (disposing)
-                {
-                    _themeManager?.Dispose();
-                }
-
-                _isDisposed = true;
-            }
-        }
-
         public void Dispose()
         {
             // Do not change this code. Put cleanup code in 'Dispose(bool disposing)' method
-            Dispose(disposing: true);
             GC.SuppressFinalize(this);
         }
     }
diff --git a/src/modules/imageresizer/ui/ImageResizerUI.csproj b/src/modules/imageresizer/ui/ImageResizerUI.csproj
index 484a17da8b..8aef549971 100644
--- a/src/modules/imageresizer/ui/ImageResizerUI.csproj
+++ b/src/modules/imageresizer/ui/ImageResizerUI.csproj
@@ -56,8 +56,8 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.Windows.CsWinRT" />
     <PackageReference Include="Microsoft.Xaml.Behaviors.Wpf" />
-    <PackageReference Include="ModernWpfUI" />
     <PackageReference Include="System.IO.Abstractions" />
+    <PackageReference Include="WPF-UI" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\..\..\common\GPOWrapperProjection\GPOWrapperProjection.csproj" />
diff --git a/src/modules/imageresizer/ui/Properties/Resources.Designer.cs b/src/modules/imageresizer/ui/Properties/Resources.Designer.cs
index fc6e78ecc2..3b0ac8807b 100644
--- a/src/modules/imageresizer/ui/Properties/Resources.Designer.cs
+++ b/src/modules/imageresizer/ui/Properties/Resources.Designer.cs
@@ -19,7 +19,7 @@ namespace ImageResizer.Properties {
     // class via a tool like ResGen or Visual Studio.
     // To add or remove a member, edit your .ResX file then rerun ResGen
     // with the /str option, or rebuild your VS project.
-    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "16.0.0.0")]
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "17.0.0.0")]
     [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
     [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
     public class Resources {
@@ -87,6 +87,15 @@ namespace ImageResizer.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to H.
+        /// </summary>
+        public static string HeightChar {
+            get {
+                return ResourceManager.GetString("HeightChar", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Image Resizer.
         /// </summary>
@@ -214,7 +223,7 @@ namespace ImageResizer.Properties {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Open settings.
+        ///   Looks up a localized string similar to Settings.
         /// </summary>
         public static string Open_settings {
             get {
@@ -277,7 +286,7 @@ namespace ImageResizer.Properties {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to _Stop.
+        ///   Looks up a localized string similar to Stop.
         /// </summary>
         public static string Progress_Stop {
             get {
@@ -554,5 +563,14 @@ namespace ImageResizer.Properties {
                 return ResourceManager.GetString("Width", resourceCulture);
             }
         }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to W.
+        /// </summary>
+        public static string WidthChar {
+            get {
+                return ResourceManager.GetString("WidthChar", resourceCulture);
+            }
+        }
     }
 }
diff --git a/src/modules/imageresizer/ui/Properties/Resources.resx b/src/modules/imageresizer/ui/Properties/Resources.resx
index fb2df38749..50ee6864ec 100644
--- a/src/modules/imageresizer/ui/Properties/Resources.resx
+++ b/src/modules/imageresizer/ui/Properties/Resources.resx
@@ -185,7 +185,7 @@
     <value>Resizing your pictures...</value>
   </data>
   <data name="Progress_Stop" xml:space="preserve">
-    <value>_Stop</value>
+    <value>Stop</value>
   </data>
   <data name="Progress_TimeRemaining_HourMinute" xml:space="preserve">
     <value>About {0} hour, {1} minute remaining.</value>
@@ -278,9 +278,17 @@
     <value>Width</value>
   </data>
   <data name="Open_settings" xml:space="preserve">
-    <value>Open settings</value>
+    <value>Settings</value>
   </data>
   <data name="Input_RemoveMetadata" xml:space="preserve">
     <value>Remove metadata that doesn't affect rendering</value>
   </data>
+  <data name="HeightChar" xml:space="preserve">
+    <value>H</value>
+    <comment>First character of 'Height'</comment>
+  </data>
+  <data name="WidthChar" xml:space="preserve">
+    <value>W</value>
+    <comment>First character of 'Width'</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Themes/Dark.xaml b/src/modules/imageresizer/ui/Themes/Dark.xaml
deleted file mode 100644
index f0d0cb1339..0000000000
--- a/src/modules/imageresizer/ui/Themes/Dark.xaml
+++ /dev/null
@@ -1,18 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
-
-    <!--  Metadata  -->
-    <system:String x:Key="Theme.Name">Dark.Accent1</system:String>
-    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
-    <system:String x:Key="Theme.DisplayName">Accent1 (Dark)</system:String>
-    <system:String x:Key="Theme.BaseColorScheme">Dark</system:String>
-    <system:String x:Key="Theme.ColorScheme">Accent1</system:String>
-    <Color x:Key="Theme.PrimaryAccentColor">Black</Color>
-
-    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
-    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
-    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFFFFFFF" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF999999" />
-    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="Transparent"/>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Themes/HighContrast1.xaml b/src/modules/imageresizer/ui/Themes/HighContrast1.xaml
deleted file mode 100644
index 7bfaf2e19d..0000000000
--- a/src/modules/imageresizer/ui/Themes/HighContrast1.xaml
+++ /dev/null
@@ -1,18 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
-
-    <!--  Metadata  -->
-    <system:String x:Key="Theme.Name">HighContrast.Accent2</system:String>
-    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
-    <system:String x:Key="Theme.DisplayName">Accent2 (HighContrast)</system:String>
-    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
-    <system:String x:Key="Theme.ColorScheme">Accent2</system:String>
-    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
-
-    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
-    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
-    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFffff00" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF00ff00" />
-    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="#FFffff00"/>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Themes/HighContrast2.xaml b/src/modules/imageresizer/ui/Themes/HighContrast2.xaml
deleted file mode 100644
index 15f7f1b639..0000000000
--- a/src/modules/imageresizer/ui/Themes/HighContrast2.xaml
+++ /dev/null
@@ -1,19 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
-
-    <!--  Metadata  -->
-    <system:String x:Key="Theme.Name">HighContrast.Accent3</system:String>
-    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
-    <system:String x:Key="Theme.DisplayName">Accent3 (HighContrast)</system:String>
-    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
-    <system:String x:Key="Theme.ColorScheme">Accent3</system:String>
-    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
-
-
-    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
-    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
-    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF00ff00" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FFc0c0c0" />
-    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="#FF00ff00"/>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Themes/HighContrastBlack.xaml b/src/modules/imageresizer/ui/Themes/HighContrastBlack.xaml
deleted file mode 100644
index 3f5458dabb..0000000000
--- a/src/modules/imageresizer/ui/Themes/HighContrastBlack.xaml
+++ /dev/null
@@ -1,18 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
-    
-    <!--  Metadata  -->
-    <system:String x:Key="Theme.Name">HighContrast.Accent4</system:String>
-    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
-    <system:String x:Key="Theme.DisplayName">Accent4 (HighContrast)</system:String>
-    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
-    <system:String x:Key="Theme.ColorScheme">Accent4</system:String>
-    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
-
-    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FF3a3a3a" />
-    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FF333333" />
-    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFffffff" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF1aebff" />
-    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="White"/>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Themes/HighContrastWhite.xaml b/src/modules/imageresizer/ui/Themes/HighContrastWhite.xaml
deleted file mode 100644
index 40ccf7f047..0000000000
--- a/src/modules/imageresizer/ui/Themes/HighContrastWhite.xaml
+++ /dev/null
@@ -1,18 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
-
-    <!--  Metadata  -->
-    <system:String x:Key="Theme.Name">HighContrast.Accent5</system:String>
-    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
-    <system:String x:Key="Theme.DisplayName">Accent5 (HighContrast)</system:String>
-    <system:String x:Key="Theme.BaseColorScheme">HighContrast</system:String>
-    <system:String x:Key="Theme.ColorScheme">Accent5</system:String>
-    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
-
-    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFf3f3f3" />
-    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FFffffff" />
-    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF676666" />
-    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="Black"/>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Themes/Light.xaml b/src/modules/imageresizer/ui/Themes/Light.xaml
deleted file mode 100644
index 9b8e55a430..0000000000
--- a/src/modules/imageresizer/ui/Themes/Light.xaml
+++ /dev/null
@@ -1,18 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
-
-    <!--  Metadata  -->
-    <system:String x:Key="Theme.Name">Light.Accent1</system:String>
-    <system:String x:Key="Theme.Origin">PowerToysImageResizer</system:String>
-    <system:String x:Key="Theme.DisplayName">Accent1 (Light)</system:String>
-    <system:String x:Key="Theme.BaseColorScheme">Light</system:String>
-    <system:String x:Key="Theme.ColorScheme">Accent1</system:String>
-    <Color x:Key="Theme.PrimaryAccentColor">White</Color>
-
-    <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFf3f3f3" />
-    <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="#FFffffff" />
-    <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF676666" />
-    <SolidColorBrush x:Key="PrimaryBorderBrush" Color="Transparent"/>
-</ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/imageresizer/ui/Views/InputPage.xaml b/src/modules/imageresizer/ui/Views/InputPage.xaml
index 8fd452ed21..5eeb3e5e09 100644
--- a/src/modules/imageresizer/ui/Views/InputPage.xaml
+++ b/src/modules/imageresizer/ui/Views/InputPage.xaml
@@ -1,209 +1,295 @@
-<UserControl x:Class="ImageResizer.Views.InputPage"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:local="clr-namespace:ImageResizer.Views"
-             xmlns:m="clr-namespace:ImageResizer.Models"
-             xmlns:p="clr-namespace:ImageResizer.Properties"
-             xmlns:ui="http://schemas.modernwpf.com/2019"
-             MinWidth="350">
-
-    <Grid Background="{DynamicResource PrimaryBackgroundBrush}">
+<UserControl
+    x:Class="ImageResizer.Views.InputPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:m="clr-namespace:ImageResizer.Models"
+    xmlns:p="clr-namespace:ImageResizer.Properties"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
 
+    <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" MinHeight="84"/>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <ComboBox x:Name="SizeComboBox"
-                  ItemsSource="{Binding Settings.AllSizes}"
-                  HorizontalAlignment="Stretch"
-                  Margin="12"
-                  SelectedIndex="{Binding Settings.SelectedSizeIndex}"
-                  ui:ControlHelper.Header="{x:Static p:Resources.Input_Content}">
+        <ComboBox
+            x:Name="SizeComboBox"
+            Grid.Row="1"
+            Height="64"
+            Margin="16,16,16,24"
+            HorizontalAlignment="Stretch"
+            VerticalAlignment="Stretch"
+            VerticalContentAlignment="Stretch"
+            ItemsSource="{Binding Settings.AllSizes}"
+            SelectedIndex="{Binding Settings.SelectedSizeIndex}">
             <ComboBox.Resources>
                 <DataTemplate DataType="{x:Type m:ResizeSize}">
-                    <Grid Margin="0,6,0,0" AutomationProperties.Name="{Binding Name}">
+                    <Grid Margin="2,0,0,0" VerticalAlignment="Center" AutomationProperties.Name="{Binding Name}">
                         <Grid.RowDefinitions>
-                            <RowDefinition Height="20" />
-                            <RowDefinition Height="24" />
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
                         </Grid.RowDefinitions>
-                        <TextBlock Text="{Binding Name}"
-                                   FontSize="14"
-                                   FontWeight="SemiBold"/>
-                        <StackPanel Orientation="Horizontal"
-                                    Grid.Row="1"
-                                    VerticalAlignment="Top">
-                            <TextBlock Text="{Binding Fit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ThirdPersonSingular}"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
-                            <TextBlock Text="{Binding Width, Converter={StaticResource AutoDoubleConverter}, ConverterParameter=Auto}"
-                                       Margin="4,0,0,0"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
-                            <TextBlock Text="×"
-                                       Margin="4,0,0,0"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"
-                                       Visibility="{Binding ShowHeight, Converter={StaticResource BoolValueConverter}}"/>
-                            <TextBlock Text="{Binding Height, Converter={StaticResource AutoDoubleConverter}, ConverterParameter=Auto}"
-                                       Margin="4,0,0,0"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"
-                                       Visibility="{Binding ShowHeight, Converter={StaticResource BoolValueConverter}}"/>
-                            <TextBlock Text="{Binding Unit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ToLower}"
-                                       Margin="4,0,0,0"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
+                        <TextBlock FontWeight="SemiBold" Text="{Binding Name}" />
+                        <StackPanel
+                            Grid.Row="1"
+                            VerticalAlignment="Top"
+                            Orientation="Horizontal">
+                            <TextBlock
+                                FontSize="12"
+                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                                Text="{Binding Fit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ThirdPersonSingular}" />
+                            <TextBlock
+                                Margin="4,0,0,0"
+                                FontSize="12"
+                                FontWeight="SemiBold"
+                                Text="{Binding Width, Converter={StaticResource AutoDoubleConverter}, ConverterParameter=Auto}" />
+                            <TextBlock
+                                Margin="4,0,0,0"
+                                FontSize="12"
+                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                                Text="×"
+                                Visibility="{Binding ShowHeight, Converter={StaticResource BoolValueConverter}}" />
+                            <TextBlock
+                                Margin="4,0,0,0"
+                                FontSize="12"
+                                FontWeight="SemiBold"
+                                Text="{Binding Height, Converter={StaticResource AutoDoubleConverter}, ConverterParameter=Auto}"
+                                Visibility="{Binding ShowHeight, Converter={StaticResource BoolValueConverter}}" />
+                            <TextBlock
+                                Margin="4,0,0,0"
+                                FontSize="12"
+                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                                Text="{Binding Unit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ToLower}" />
                         </StackPanel>
                     </Grid>
                 </DataTemplate>
 
                 <DataTemplate DataType="{x:Type m:CustomSize}">
-                    <Grid Height="50"
-                          AutomationProperties.Name="{Binding Name}">
-
-                        <TextBlock Text="{Binding Name}"
-                                   Margin="0,0,0,0"
-                                   VerticalAlignment="Center"
-                                   FontSize="14"
-                                   FontWeight="SemiBold"
-                                   Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                    <Grid VerticalAlignment="Center" AutomationProperties.Name="{Binding Name}">
+                        <TextBlock
+                            FontWeight="SemiBold"
+                            Text="{Binding Name}" />
                     </Grid>
                 </DataTemplate>
             </ComboBox.Resources>
         </ComboBox>
 
-        <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="12,0,12,12" Visibility="{Binding ElementName=SizeComboBox, Path=SelectedValue, Converter={StaticResource SizeTypeToVisibilityConverter}}">
-            <ComboBox ItemsSource="{Binding Source={StaticResource ResizeFitValues}}"
-                      AutomationProperties.Name="{x:Static p:Resources.Resize_Type}"
-                      Height="56"
-                      MinWidth="120"
-                      ui:ControlHelper.Header="{x:Static p:Resources.Resize_Type}"
-                      Text="{Binding ElementName=SizeComboBox, Path= SelectedValue.Fit, Mode=TwoWay}"/>
+        <Grid Grid.Row="2">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Border
+                Grid.RowSpan="5"
+                Background="{DynamicResource LayerFillColorDefaultBrush}"
+                BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
+                BorderThickness="0,1,0,0" />
 
-            <ui:NumberBox SpinButtonPlacementMode="Compact"
-                          Minimum="0"
-                          Width="102"
-                          Name="WidthNumberBox"
-                          KeyDown="Button_KeyDown"
-                          AutomationProperties.Name="{x:Static p:Resources.Width}"                          
-                          Margin="8,0,0,0">
-                <ui:ControlHelper.Header>
-                    <TextBlock Text="{x:Static p:Resources.Width}" Margin="0,0,0,-1" />
-                </ui:ControlHelper.Header>
-                <ui:NumberBox.Value>
-                    <Binding ElementName="SizeComboBox" Path="SelectedValue.Width" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
-                </ui:NumberBox.Value>
-            </ui:NumberBox>
-            <TextBlock VerticalAlignment="Center"
-                       Text="&#xE947;"
-                       FontFamily="{StaticResource SymbolThemeFontFamily}"
-                       Width="24"
-                       Foreground="{DynamicResource SecondaryForegroundBrush}"
-                       Name="Times_Symbol"
-                       AutomationProperties.Name="{x:Static p:Resources.Times_Symbol}"
-                       TextAlignment="Center"
-                       Margin="0,8,0,0"
-                       Visibility="{Binding ElementName=SizeComboBox, Path= SelectedValue.ShowHeight, Converter={StaticResource BoolValueConverter}}"/>
-
-            <ui:NumberBox DataContext="{Binding ElementName=SizeComboBox, Path=SelectedItem}" 
-                          SpinButtonPlacementMode="Compact"
-                          Minimum="0"
-                          Width="102"
-                          Name="HeightNumberBox"
-                          KeyDown="Button_KeyDown"
-                          AutomationProperties.Name="{x:Static p:Resources.Height}"
-                          Visibility="{Binding ElementName=SizeComboBox, Path= SelectedValue.ShowHeight, Converter={StaticResource BoolValueConverter}}">
-                <ui:ControlHelper.Header>
-                    <TextBlock Text="{x:Static p:Resources.Height}" Margin="0,0,0,-1" />
-                </ui:ControlHelper.Header>
-                <ui:NumberBox.Value>
-                    <Binding ElementName="SizeComboBox" Path="SelectedValue.Height" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
-                </ui:NumberBox.Value>
-            </ui:NumberBox>
-            <ComboBox Margin="8,0,0,0"
-                      Height="56"
-                      ItemsSource="{Binding Source={StaticResource ResizeUnitValues}}"
-                      AutomationProperties.Name="{x:Static p:Resources.Unit}"
-                      ui:ControlHelper.Header="{x:Static p:Resources.Unit}"
-                      Text="{Binding ElementName=SizeComboBox, Path= SelectedValue.Unit, Mode=TwoWay}"/>
-        </StackPanel>
+            <Grid
+                Height="86"
+                Margin="18,16,16,16"
+                Visibility="{Binding ElementName=SizeComboBox, Path=SelectedValue, Converter={StaticResource SizeTypeToVisibilityConverter}}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="20" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="24" />
+                    <ColumnDefinition Width="20" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="8" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
 
 
-        <StackPanel Grid.Row="2" Orientation="Vertical">
+                <TextBlock
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    AutomationProperties.Name="{x:Static p:Resources.Width}"
+                    FontSize="12"
+                    FontWeight="SemiBold"
+                    Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                    Text="{x:Static p:Resources.WidthChar}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Width}" />
+                <ui:NumberBox
+                    Name="WidthNumberBox"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    AutomationProperties.Name="{x:Static p:Resources.Width}"
+                    KeyDown="Button_KeyDown"
+                    Minimum="0"
+                    SpinButtonPlacementMode="Inline">
+                    <ui:NumberBox.Value>
+                        <Binding
+                            ElementName="SizeComboBox"
+                            Mode="TwoWay"
+                            Path="SelectedValue.Width"
+                            UpdateSourceTrigger="PropertyChanged" />
+                    </ui:NumberBox.Value>
+                </ui:NumberBox>
+                <TextBlock
+                    Grid.Column="3"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    AutomationProperties.Name="{x:Static p:Resources.Height}"
+                    FontSize="12"
+                    FontWeight="SemiBold"
+                    Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                    Text="{x:Static p:Resources.HeightChar}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Height}"
+                    Visibility="{Binding ElementName=SizeComboBox, Path=SelectedValue.ShowHeight, Converter={StaticResource BoolValueConverter}}" />
+                <ui:NumberBox
+                    Name="HeightNumberBox"
+                    Grid.Column="4"
+                    HorizontalAlignment="Stretch"
+                    AutomationProperties.Name="{x:Static p:Resources.Height}"
+                    DataContext="{Binding ElementName=SizeComboBox, Path=SelectedItem}"
+                    KeyDown="Button_KeyDown"
+                    Minimum="0"
+                    SpinButtonPlacementMode="Inline"
+                    Visibility="{Binding ElementName=SizeComboBox, Path=SelectedValue.ShowHeight, Converter={StaticResource BoolValueConverter}}">
 
-        <CheckBox Margin="12,4,12,0"
-                  Content="{x:Static p:Resources.Input_ShrinkOnly}"
-                  IsChecked="{Binding Settings.ShrinkOnly}"/>
-            
-        <CheckBox Margin="12,4,12,0"
-                  Content="{x:Static p:Resources.Input_IgnoreOrientation}"
-                  IsChecked="{Binding Settings.IgnoreOrientation}"/>
-        <!-- TODO: This option doesn't make much sense when resizing into a directory. We should swap it for an option
-                   to overwrite any files in the directory instead (issue #88) -->
-        <CheckBox Margin="12,4,12,0"
-                  Content="{x:Static p:Resources.Input_Replace}"
-                  IsChecked="{Binding Settings.Replace}"/>
+                    <ui:NumberBox.Value>
+                        <Binding
+                            ElementName="SizeComboBox"
+                            Mode="TwoWay"
+                            Path="SelectedValue.Height"
+                            UpdateSourceTrigger="PropertyChanged" />
+                    </ui:NumberBox.Value>
+                </ui:NumberBox>
 
-        <CheckBox Margin="12,4,12,0"
-                  Content="{x:Static p:Resources.Input_RemoveMetadata}"
-                  IsChecked="{Binding Settings.RemoveMetadata}"/>
+                <ui:SymbolIcon
+                    Grid.Row="2"
+                    Margin="-2,0,0,0"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                    Symbol="ArrowMaximize16"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Resize_Type}" />
 
-            <TextBlock Grid.Column="0"
-                           FontWeight="Bold"
-                           Text="{x:Static p:Resources.Input_GifWarning}"
-                           TextWrapping="Wrap"
-                       Margin="12,12,12,0"
-                           HorizontalAlignment="Right"
-                           TextAlignment="Left"
-                           Foreground="{ui:ThemeResource SystemControlErrorTextForegroundBrush}"
-                           Visibility="{Binding TryingToResizeGifFiles, Converter={StaticResource BoolValueConverter}}"
-                           />
-        </StackPanel>
-    
-        <Border Margin="0,12,0,0"
-                Background="{DynamicResource SecondaryBackgroundBrush}"
-                BorderBrush="{DynamicResource PrimaryBorderBrush}"
-                BorderThickness="0,1,0,0"
-                Padding="12"
-                Grid.Row="3">
-            <Grid>
+                <ComboBox
+                    Grid.Row="2"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
+                    AutomationProperties.Name="{x:Static p:Resources.Resize_Type}"
+                    ItemsSource="{Binding Source={StaticResource ResizeFitValues}}"
+                    Text="{Binding ElementName=SizeComboBox, Path=SelectedValue.Fit, Mode=TwoWay}" />
+
+                <ui:SymbolIcon
+                    Grid.Row="2"
+                    Grid.Column="3"
+                    Margin="-2,0,0,0"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    FontSize="18"
+                    Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                    Symbol="Ruler16"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Unit}" />
+
+                <ComboBox
+                    Grid.Row="2"
+                    Grid.Column="4"
+                    AutomationProperties.Name="{x:Static p:Resources.Unit}"
+                    ItemsSource="{Binding Source={StaticResource ResizeUnitValues}}"
+                    Text="{Binding ElementName=SizeComboBox, Path=SelectedValue.Unit, Mode=TwoWay}" />
+
+            </Grid>
+
+            <StackPanel
+                Grid.Row="1"
+                VerticalAlignment="Top"
+                Orientation="Vertical">
+
+                <CheckBox
+                    Margin="16,12,16,0"
+                    Content="{x:Static p:Resources.Input_ShrinkOnly}"
+                    IsChecked="{Binding Settings.ShrinkOnly}" />
+
+                <CheckBox
+                    Margin="16,2,16,0"
+                    Content="{x:Static p:Resources.Input_IgnoreOrientation}"
+                    IsChecked="{Binding Settings.IgnoreOrientation}" />
+                <!--
+                    TODO: This option doesn't make much sense when resizing into a directory. We should swap it for an option
+                    to overwrite any files in the directory instead (issue #88)
+                -->
+                <CheckBox
+                    Margin="16,2,16,0"
+                    Content="{x:Static p:Resources.Input_Replace}"
+                    IsChecked="{Binding Settings.Replace}" />
+
+                <CheckBox
+                    Margin="16,2,16,0"
+                    Content="{x:Static p:Resources.Input_RemoveMetadata}"
+                    IsChecked="{Binding Settings.RemoveMetadata}" />
+            </StackPanel>
+
+            <Border
+                Grid.Row="2"
+                Height="1"
+                Margin="0,12,0,8"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Top"
+                Background="{DynamicResource DividerStrokeColorDefaultBrush}" />
+            <ui:InfoBar
+                Grid.Row="3"
+                Margin="16,0,16,0"
+                Padding="12,8,8,8"
+                IsClosable="False"
+                IsOpen="{Binding TryingToResizeGifFiles}"
+                Message="{x:Static p:Resources.Input_GifWarning}"
+                Severity="Warning" />
+            <Grid Grid.Row="4" Margin="16,8,16,16">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition />
-                    <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="Auto"/>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-                <Button Width="36"
-                    Command="{Binding OpenSettingsCommand}"
+
+                <ui:Button
+                    Width="36"
                     Height="36"
-                    Margin="-8,0,0,0"
-                    Content="&#xE713;"
-                    Background="Transparent"
-                    FontFamily="{StaticResource SymbolThemeFontFamily}"
-                        FontSize="16"
+                    Margin="-6,0,0,0"
+                    Padding="0"
                     HorizontalAlignment="Left"
-                    ToolTipService.ToolTip="{x:Static p:Resources.Open_settings}"
-                    AutomationProperties.Name="{x:Static p:Resources.Open_settings}" />
+                    AutomationProperties.Name="{x:Static p:Resources.Open_settings}"
+                    Background="Transparent"
+                    BorderBrush="Transparent"
+                    Command="{Binding OpenSettingsCommand}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Open_settings}">
+                    <ui:Button.Content>
+                        <ui:SymbolIcon FontSize="18" Symbol="Settings20" />
+                    </ui:Button.Content>
+                </ui:Button>
+                <ui:Button
+                    Grid.Column="1"
+                    MinWidth="76"
+                    Margin="8,0,0,0"
+                    Appearance="Primary"
+                    AutomationProperties.Name="{x:Static p:Resources.Resize_Tooltip}"
+                    Command="{Binding ResizeCommand}"
+                    IsDefault="True">
+                    <StackPanel Orientation="Horizontal">
+                        <ui:SymbolIcon FontSize="18" Symbol="ResizeImage20" />
+                        <TextBlock Margin="8,0,0,0" Text="{x:Static p:Resources.Input_Resize}" />
+                    </StackPanel>
+                </ui:Button>
 
-                <Button Grid.Column="1"
-                        Style="{StaticResource AccentButtonStyle}"
-                        MinWidth="76"
-                        Margin="12,0,0,0"
-                        Command="{Binding ResizeCommand}"
-                        AutomationProperties.Name="{x:Static p:Resources.Resize_Tooltip}"
-                        Content="{x:Static p:Resources.Input_Resize}"
-                        IsDefault="True"/>
-
-                <Button Grid.Column="2"
-                        Style="{StaticResource DefaultButtonStyle}"
-                        MinWidth="76"
-                        Margin="12,0,0,0"
-                        Command="{Binding CancelCommand}"
-                        Content="{x:Static p:Resources.Cancel}"
-                        IsCancel="True"/>
+                <ui:Button
+                    Grid.Column="2"
+                    MinWidth="76"
+                    Margin="8,0,0,0"
+                    Command="{Binding CancelCommand}"
+                    Content="{x:Static p:Resources.Cancel}"
+                    IsCancel="True" />
             </Grid>
-        </Border>
+
+
+        </Grid>
     </Grid>
 </UserControl>
diff --git a/src/modules/imageresizer/ui/Views/InputPage.xaml.cs b/src/modules/imageresizer/ui/Views/InputPage.xaml.cs
index 9a3f5e4763..c22f74bdc2 100644
--- a/src/modules/imageresizer/ui/Views/InputPage.xaml.cs
+++ b/src/modules/imageresizer/ui/Views/InputPage.xaml.cs
@@ -5,8 +5,9 @@
 using System.Windows.Controls;
 using System.Windows.Input;
 using ImageResizer.ViewModels;
-using ModernWpf.Controls;
+using Wpf.Ui.Controls;
 using static ImageResizer.ViewModels.InputViewModel;
+using Numberbox = Wpf.Ui.Controls.NumberBox;
 
 namespace ImageResizer.Views
 {
@@ -31,7 +32,7 @@ namespace ImageResizer.Views
                 var viewModel = (InputViewModel)this.DataContext;
                 double number;
                 KeyPressParams keyParams;
-                if (double.TryParse(((TextBox)e.OriginalSource).Text, out number))
+                if (double.TryParse(((System.Windows.Controls.TextBox)e.OriginalSource).Text, out number))
                 {
                     // Determine which NumberBox triggered the event based on its name
                     switch (numberBox.Name)
diff --git a/src/modules/imageresizer/ui/Views/MainWindow.xaml b/src/modules/imageresizer/ui/Views/MainWindow.xaml
index 215b4d90de..3627e68d4a 100644
--- a/src/modules/imageresizer/ui/Views/MainWindow.xaml
+++ b/src/modules/imageresizer/ui/Views/MainWindow.xaml
@@ -1,44 +1,64 @@
-<Window x:Class="ImageResizer.Views.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:ui="http://schemas.modernwpf.com/2019"
-        xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
-        xmlns:local="clr-namespace:ImageResizer.Views"
-        xmlns:p="clr-namespace:ImageResizer.Properties"
-        xmlns:vm="clr-namespace:ImageResizer.ViewModels"
-        Content="{Binding CurrentPage}"
-        Icon="/PowerToys.ImageResizer;component/Resources/ImageResizer.ico"
-        Name="_this"
-        ResizeMode="NoResize"
-        SizeToContent="WidthAndHeight"
-        MinWidth="485"
-        Title="{x:Static p:Resources.ImageResizer}"
-        WindowStartupLocation="CenterScreen"
-        ui:WindowHelper.UseModernWindowStyle="True"
-        ui:TitleBar.IsIconVisible="True"
-        ui:TitleBar.Background="{DynamicResource PrimaryBackgroundBrush}"
-        AutomationProperties.Name="{x:Static p:Resources.ImageResizer}">
+<ui:FluentWindow
+    x:Class="ImageResizer.Views.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
+    xmlns:local="clr-namespace:ImageResizer.Views"
+    xmlns:p="clr-namespace:ImageResizer.Properties"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+    xmlns:vm="clr-namespace:ImageResizer.ViewModels"
+    Name="_this"
+    Width="360"
+    Height="506"
+    ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
+    ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
+    AutomationProperties.Name="{x:Static p:Resources.ImageResizer}"
+    ExtendsContentIntoTitleBar="True"
+    Icon="/PowerToys.ImageResizer;component/Resources/ImageResizer.ico"
+    ResizeMode="NoResize"
+    WindowBackdropType="Mica"
+    WindowCornerPreference="Default"
+    WindowStartupLocation="CenterScreen">
 
     <Window.Resources>
         <DataTemplate DataType="{x:Type vm:InputViewModel}">
-            <local:InputPage/>
+            <local:InputPage />
         </DataTemplate>
         <DataTemplate DataType="{x:Type vm:ProgressViewModel}">
-            <local:ProgressPage/>
+            <local:ProgressPage />
         </DataTemplate>
         <DataTemplate DataType="{x:Type vm:ResultsViewModel}">
-            <local:ResultsPage/>
+            <local:ResultsPage />
         </DataTemplate>
     </Window.Resources>
 
     <Window.TaskbarItemInfo>
-        <TaskbarItemInfo ProgressState="Normal" ProgressValue="{Binding Progress}"/>
+        <TaskbarItemInfo ProgressState="Normal" ProgressValue="{Binding Progress}" />
     </Window.TaskbarItemInfo>
 
     <behaviors:Interaction.Triggers>
         <behaviors:EventTrigger EventName="Loaded">
-            <behaviors:InvokeCommandAction Command="{Binding LoadCommand}" CommandParameter="{Binding ElementName=_this}"/>
+            <behaviors:InvokeCommandAction Command="{Binding LoadCommand}" CommandParameter="{Binding ElementName=_this}" />
         </behaviors:EventTrigger>
     </behaviors:Interaction.Triggers>
 
-</Window>
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <ui:TitleBar
+            x:Name="TitleBar"
+            Title="{x:Static p:Resources.ImageResizer}"
+            Grid.Row="0"
+            Height="32"
+            Padding="16,0,16,0"
+            ShowMaximize="False"
+            ShowMinimize="False">
+            <ui:TitleBar.Icon>
+                <ui:ImageIcon Source="/PowerToys.ImageResizer;component/Resources/ImageResizer.ico" />
+            </ui:TitleBar.Icon>
+        </ui:TitleBar>
+        <ContentPresenter Grid.Row="1" Content="{Binding CurrentPage}" />
+    </Grid>
+</ui:FluentWindow>
diff --git a/src/modules/imageresizer/ui/Views/MainWindow.xaml.cs b/src/modules/imageresizer/ui/Views/MainWindow.xaml.cs
index 4c975a384e..0c96ed12a7 100644
--- a/src/modules/imageresizer/ui/Views/MainWindow.xaml.cs
+++ b/src/modules/imageresizer/ui/Views/MainWindow.xaml.cs
@@ -5,18 +5,19 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
-using System.Windows;
 using ImageResizer.ViewModels;
 using Microsoft.Win32;
+using Wpf.Ui.Controls;
 using AppResources = ImageResizer.Properties.Resources;
 
 namespace ImageResizer.Views
 {
-    public partial class MainWindow : Window, IMainView
+    public partial class MainWindow : FluentWindow, IMainView
     {
         public MainWindow(MainViewModel viewModel)
         {
             DataContext = viewModel;
+            Wpf.Ui.Appearance.Watcher.Watch(this);
             InitializeComponent();
         }
 
diff --git a/src/modules/imageresizer/ui/Views/ProgressPage.xaml b/src/modules/imageresizer/ui/Views/ProgressPage.xaml
index c5c78febd4..137dbadfa3 100644
--- a/src/modules/imageresizer/ui/Views/ProgressPage.xaml
+++ b/src/modules/imageresizer/ui/Views/ProgressPage.xaml
@@ -1,45 +1,45 @@
-<UserControl x:Class="ImageResizer.Views.ProgressPage"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
-             xmlns:local="clr-namespace:ImageResizer.Views"
-             xmlns:p="clr-namespace:ImageResizer.Properties"
-             Background="{DynamicResource PrimaryBackgroundBrush}"
-             MinWidth="350">
+<UserControl
+    x:Class="ImageResizer.Views.ProgressPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
+    xmlns:local="clr-namespace:ImageResizer.Views"
+    xmlns:p="clr-namespace:ImageResizer.Properties">
 
     <UserControl.Resources>
-        <local:TimeRemainingConverter x:Key="TimeRemainingConverter"/>
+        <local:TimeRemainingConverter x:Key="TimeRemainingConverter" />
     </UserControl.Resources>
 
     <behaviors:Interaction.Triggers>
         <behaviors:EventTrigger EventName="Loaded">
-            <behaviors:InvokeCommandAction Command="{Binding StartCommand}"/>
+            <behaviors:InvokeCommandAction Command="{Binding StartCommand}" />
         </behaviors:EventTrigger>
     </behaviors:Interaction.Triggers>
 
     <StackPanel>
-        <TextBlock Margin="12,12,12,0"
-                   FontSize="16"
-                   Foreground="{DynamicResource PrimaryForegroundBrush}"
-                   Text="{x:Static p:Resources.Progress_MainInstruction}"/>
-        <TextBlock Margin="12,12,12,0"
-                   Foreground="{DynamicResource PrimaryForegroundBrush}"
-                   Text="{Binding TimeRemaining,Converter={StaticResource TimeRemainingConverter}}"/>
-        <ProgressBar Height="16"
-                     Margin="12,12,12,0"
-                     Value="{Binding Progress}"
-                     Maximum="1"/>
-        <Border Margin="0,12,0,0"
-                Background="{DynamicResource SecondaryBackgroundBrush}"
-                BorderBrush="{DynamicResource PrimaryBorderBrush}"
-                BorderThickness="0,1,0,0"
-                Padding="12,12">
+        <TextBlock
+            Margin="12,12,12,0"
+            FontSize="16"
+            Text="{x:Static p:Resources.Progress_MainInstruction}" />
+        <TextBlock
+            Margin="12,12,12,0"
+            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+            Text="{Binding TimeRemaining, Converter={StaticResource TimeRemainingConverter}}" />
+        <ProgressBar
+            Height="16"
+            Margin="12,12,12,0"
+            Maximum="1"
+            Value="{Binding Progress}" />
+        <Border
+            Margin="0,12,0,0"
+            Padding="12,12"
+            BorderThickness="0,1,0,0">
             <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                <Button MinWidth="76"
-                        Style="{StaticResource AccentButtonStyle}"
-                        Command="{Binding StopCommand}"
-                        Content="{x:Static p:Resources.Progress_Stop}"
-                        IsCancel="True"/>
+                <Button
+                    MinWidth="76"
+                    Command="{Binding StopCommand}"
+                    Content="{x:Static p:Resources.Progress_Stop}"
+                    IsCancel="True" />
             </StackPanel>
         </Border>
     </StackPanel>
diff --git a/src/modules/imageresizer/ui/Views/ResultsPage.xaml b/src/modules/imageresizer/ui/Views/ResultsPage.xaml
index 4f46d0d733..9f010df456 100644
--- a/src/modules/imageresizer/ui/Views/ResultsPage.xaml
+++ b/src/modules/imageresizer/ui/Views/ResultsPage.xaml
@@ -1,43 +1,46 @@
-<UserControl x:Class="ImageResizer.Views.ResultsPage"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:p="clr-namespace:ImageResizer.Properties"
-             MinWidth="350"
-             Background="{DynamicResource PrimaryBackgroundBrush}">
+<UserControl
+    x:Class="ImageResizer.Views.ResultsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:p="clr-namespace:ImageResizer.Properties">
 
     <StackPanel>
-        <TextBlock Margin="12,12,12,0"
-                   FontSize="16"
-                   Foreground="{DynamicResource PrimaryForegroundBrush}"
-                   Text="{x:Static p:Resources.Results_MainInstruction}"/>
-        <ScrollViewer MaxWidth="363"
-                      MaxHeight="350"
-                      HorizontalAlignment="Stretch"
-                      VerticalScrollBarVisibility="Auto">
+        <TextBlock
+            Margin="12,12,12,0"
+            FontSize="16"
+            Text="{x:Static p:Resources.Results_MainInstruction}" />
+        <ScrollViewer
+            MaxWidth="363"
+            MaxHeight="350"
+            HorizontalAlignment="Stretch"
+            VerticalScrollBarVisibility="Auto">
             <ItemsControl Margin="12,4,12,0" ItemsSource="{Binding Errors}">
                 <ItemsControl.ItemTemplate>
                     <DataTemplate DataType="ResizeError">
                         <StackPanel>
-                            <TextBlock Margin="0,8,0,0"
-                                       FontWeight="Bold"
-                                       Text="{Binding File}"/>
-                            <TextBlock Text="{Binding Error}" TextWrapping="Wrap"/>
+                            <TextBlock
+                                Margin="0,8,0,0"
+                                FontWeight="Bold"
+                                Text="{Binding File}" />
+                            <TextBlock Text="{Binding Error}" TextWrapping="Wrap" />
                         </StackPanel>
                     </DataTemplate>
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
         </ScrollViewer>
-        <Border Margin="0,12,0,0"
-                Background="{DynamicResource SecondaryBackgroundBrush}"
-                BorderBrush="{DynamicResource PrimaryBorderBrush}"
-                BorderThickness="0,1,0,0"
-                Padding="12,12">
+        <Border
+            Margin="0,12,0,0"
+            Padding="12,12"
+            Background="{DynamicResource LayerFillColorDefaultBrush}"
+            BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
+            BorderThickness="0,1,0,0">
             <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                <Button MinWidth="76"
-                        Command="{Binding CloseCommand}"
-                        Content="{x:Static p:Resources.Results_Close}"
-                        IsCancel="True"
-                        IsDefault="True"/>
+                <Button
+                    MinWidth="76"
+                    Command="{Binding CloseCommand}"
+                    Content="{x:Static p:Resources.Results_Close}"
+                    IsCancel="True"
+                    IsDefault="True" />
             </StackPanel>
         </Border>
     </StackPanel>