[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

@@ -929,6 +929,7 @@ LEFTSCROLLBAR
 LEFTUP
 lego
 len
+lepo
 LError
 Lessthan
 LEVELID
@@ -2189,6 +2190,7 @@ wox
 wparam
 wpf
 wpftmp
+wpfui
 wpr
 wprp
 wql

.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": [

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 -->

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
 

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:ThemesDictionary Theme="Dark" />
-                <ui:XamlControlsResources />
+                <ui:ControlsDictionary />
             </ResourceDictionary.MergedDictionaries>
 
             <ObjectDataProvider x:Key="ResizeFitValues"

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);
         }
     }

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" />

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);
+            }
+        }
     }
 }

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>

src/modules/imageresizer/ui/Themes/Dark.xaml

@@ -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>

src/modules/imageresizer/ui/Themes/HighContrast1.xaml

@@ -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>

src/modules/imageresizer/ui/Themes/HighContrast2.xaml

@@ -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>

src/modules/imageresizer/ui/Themes/HighContrastBlack.xaml

@@ -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>

src/modules/imageresizer/ui/Themes/HighContrastWhite.xaml

@@ -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>

src/modules/imageresizer/ui/Themes/Light.xaml

@@ -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>

src/modules/imageresizer/ui/Views/InputPage.xaml

@@ -1,209 +1,295 @@
-<UserControl x:Class="ImageResizer.Views.InputPage"
+<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"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
-             MinWidth="350">
-
-    <Grid Background="{DynamicResource PrimaryBackgroundBrush}">
 
+    <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" MinHeight="84"/>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <ComboBox x:Name="SizeComboBox"
+        <ComboBox
-                  ItemsSource="{Binding Settings.AllSizes}"
+            x:Name="SizeComboBox"
+            Grid.Row="1"
+            Height="64"
+            Margin="16,16,16,24"
             HorizontalAlignment="Stretch"
-                  Margin="12"
+            VerticalAlignment="Stretch"
-                  SelectedIndex="{Binding Settings.SelectedSizeIndex}"
+            VerticalContentAlignment="Stretch"
-                  ui:ControlHelper.Header="{x:Static p:Resources.Input_Content}">
+            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="Auto" />
-                            <RowDefinition Height="24" />
+                            <RowDefinition Height="Auto" />
                         </Grid.RowDefinitions>
-                        <TextBlock Text="{Binding Name}"
+                        <TextBlock FontWeight="SemiBold" Text="{Binding Name}" />
-                                   FontSize="14"
+                        <StackPanel
-                                   FontWeight="SemiBold"/>
-                        <StackPanel Orientation="Horizontal"
                             Grid.Row="1"
-                                    VerticalAlignment="Top">
+                            VerticalAlignment="Top"
-                            <TextBlock Text="{Binding Fit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ThirdPersonSingular}"
+                            Orientation="Horizontal">
-                                       Style="{StaticResource CaptionTextBlockStyle}"
+                            <TextBlock
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
+                                FontSize="12"
-                            <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}}"/>
+                                Text="{Binding Fit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ThirdPersonSingular}" />
-                            <TextBlock Text="{Binding Height, Converter={StaticResource AutoDoubleConverter}, ConverterParameter=Auto}"
+                            <TextBlock
                                 Margin="4,0,0,0"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
+                                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 Text="{Binding Unit, Converter={StaticResource EnumValueConverter}, ConverterParameter=ToLower}"
+                            <TextBlock
                                 Margin="4,0,0,0"
-                                       Style="{StaticResource CaptionTextBlockStyle}"
+                                FontSize="12"
-                                       Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
+                                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"
+                    <Grid VerticalAlignment="Center" AutomationProperties.Name="{Binding Name}">
-                          AutomationProperties.Name="{Binding Name}">
+                        <TextBlock
-
-                        <TextBlock Text="{Binding Name}"
-                                   Margin="0,0,0,0"
-                                   VerticalAlignment="Center"
-                                   FontSize="14"
                             FontWeight="SemiBold"
-                                   Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                            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}}">
+        <Grid Grid.Row="2">
-            <ComboBox ItemsSource="{Binding Source={StaticResource ResizeFitValues}}"
+            <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" />
+
+            <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>
+
+
+                <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}}">
+
+                    <ui:NumberBox.Value>
+                        <Binding
+                            ElementName="SizeComboBox"
+                            Mode="TwoWay"
+                            Path="SelectedValue.Height"
+                            UpdateSourceTrigger="PropertyChanged" />
+                    </ui:NumberBox.Value>
+                </ui:NumberBox>
+
+                <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}" />
+
+                <ComboBox
+                    Grid.Row="2"
+                    Grid.Column="1"
+                    HorizontalAlignment="Stretch"
                     AutomationProperties.Name="{x:Static p:Resources.Resize_Type}"
-                      Height="56"
+                    ItemsSource="{Binding Source={StaticResource ResizeFitValues}}"
-                      MinWidth="120"
-                      ui:ControlHelper.Header="{x:Static p:Resources.Resize_Type}"
                     Text="{Binding ElementName=SizeComboBox, Path=SelectedValue.Fit, Mode=TwoWay}" />
 
-            <ui:NumberBox SpinButtonPlacementMode="Compact"
+                <ui:SymbolIcon
-                          Minimum="0"
+                    Grid.Row="2"
-                          Width="102"
+                    Grid.Column="3"
-                          Name="WidthNumberBox"
+                    Margin="-2,0,0,0"
-                          KeyDown="Button_KeyDown"
+                    HorizontalAlignment="Left"
-                          AutomationProperties.Name="{x:Static p:Resources.Width}"                          
+                    VerticalAlignment="Center"
-                          Margin="8,0,0,0">
+                    FontSize="18"
-                <ui:ControlHelper.Header>
+                    Foreground="{DynamicResource TextFillColorSecondaryBrush}"
-                    <TextBlock Text="{x:Static p:Resources.Width}" Margin="0,0,0,-1" />
+                    Symbol="Ruler16"
-                </ui:ControlHelper.Header>
+                    ToolTipService.ToolTip="{x:Static p:Resources.Unit}" />
-                <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}" 
+                <ComboBox
-                          SpinButtonPlacementMode="Compact"
+                    Grid.Row="2"
-                          Minimum="0"
+                    Grid.Column="4"
-                          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}"
+                    ItemsSource="{Binding Source={StaticResource ResizeUnitValues}}"
                     Text="{Binding ElementName=SizeComboBox, Path=SelectedValue.Unit, Mode=TwoWay}" />
-        </StackPanel>
 
+            </Grid>
 
-        <StackPanel Grid.Row="2" Orientation="Vertical">
+            <StackPanel
+                Grid.Row="1"
+                VerticalAlignment="Top"
+                Orientation="Vertical">
 
-        <CheckBox Margin="12,4,12,0"
+                <CheckBox
+                    Margin="16,12,16,0"
                     Content="{x:Static p:Resources.Input_ShrinkOnly}"
                     IsChecked="{Binding Settings.ShrinkOnly}" />
 
-        <CheckBox Margin="12,4,12,0"
+                <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) -->
+                    TODO: This option doesn't make much sense when resizing into a directory. We should swap it for an option
-        <CheckBox Margin="12,4,12,0"
+                    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="12,4,12,0"
+                <CheckBox
+                    Margin="16,2,16,0"
                     Content="{x:Static p:Resources.Input_RemoveMetadata}"
                     IsChecked="{Binding Settings.RemoveMetadata}" />
-
-            <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"
+            <Border
-                Background="{DynamicResource SecondaryBackgroundBrush}"
+                Grid.Row="2"
-                BorderBrush="{DynamicResource PrimaryBorderBrush}"
+                Height="1"
-                BorderThickness="0,1,0,0"
+                Margin="0,12,0,8"
-                Padding="12"
+                HorizontalAlignment="Stretch"
-                Grid.Row="3">
+                VerticalAlignment="Top"
-            <Grid>
+                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" />
                 </Grid.ColumnDefinitions>
-                <Button Width="36"
+
-                    Command="{Binding OpenSettingsCommand}"
+                <ui:Button
+                    Width="36"
                     Height="36"
-                    Margin="-8,0,0,0"
+                    Margin="-6,0,0,0"
-                    Content="&#xE713;"
+                    Padding="0"
-                    Background="Transparent"
-                    FontFamily="{StaticResource SymbolThemeFontFamily}"
-                        FontSize="16"
                     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"
-                <Button Grid.Column="1"
+                    Command="{Binding OpenSettingsCommand}"
-                        Style="{StaticResource AccentButtonStyle}"
+                    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="12,0,0,0"
+                    Margin="8,0,0,0"
-                        Command="{Binding ResizeCommand}"
+                    Appearance="Primary"
                     AutomationProperties.Name="{x:Static p:Resources.Resize_Tooltip}"
-                        Content="{x:Static p:Resources.Input_Resize}"
+                    Command="{Binding ResizeCommand}"
-                        IsDefault="True"/>
+                    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="2"
+                <ui:Button
-                        Style="{StaticResource DefaultButtonStyle}"
+                    Grid.Column="2"
                     MinWidth="76"
-                        Margin="12,0,0,0"
+                    Margin="8,0,0,0"
                     Command="{Binding CancelCommand}"
                     Content="{x:Static p:Resources.Cancel}"
                     IsCancel="True" />
             </Grid>
-        </Border>
+
+
+        </Grid>
     </Grid>
 </UserControl>

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)

src/modules/imageresizer/ui/Views/MainWindow.xaml

@@ -1,23 +1,24 @@
-<Window x:Class="ImageResizer.Views.MainWindow"
+<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: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:ui="http://schemas.lepo.co/wpfui/2022/xaml"
     xmlns:vm="clr-namespace:ImageResizer.ViewModels"
-        Content="{Binding CurrentPage}"
-        Icon="/PowerToys.ImageResizer;component/Resources/ImageResizer.ico"
     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"
-        SizeToContent="WidthAndHeight"
+    WindowBackdropType="Mica"
-        MinWidth="485"
+    WindowCornerPreference="Default"
-        Title="{x:Static p:Resources.ImageResizer}"
+    WindowStartupLocation="CenterScreen">
-        WindowStartupLocation="CenterScreen"
-        ui:WindowHelper.UseModernWindowStyle="True"
-        ui:TitleBar.IsIconVisible="True"
-        ui:TitleBar.Background="{DynamicResource PrimaryBackgroundBrush}"
-        AutomationProperties.Name="{x:Static p:Resources.ImageResizer}">
 
     <Window.Resources>
         <DataTemplate DataType="{x:Type vm:InputViewModel}">
@@ -41,4 +42,23 @@
         </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>

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();
         }
 

src/modules/imageresizer/ui/Views/ProgressPage.xaml

@@ -1,11 +1,10 @@
-<UserControl x:Class="ImageResizer.Views.ProgressPage"
+<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"
+    xmlns:p="clr-namespace:ImageResizer.Properties">
-             Background="{DynamicResource PrimaryBackgroundBrush}"
-             MinWidth="350">
 
     <UserControl.Resources>
         <local:TimeRemainingConverter x:Key="TimeRemainingConverter" />
@@ -18,25 +17,26 @@
     </behaviors:Interaction.Triggers>
 
     <StackPanel>
-        <TextBlock Margin="12,12,12,0"
+        <TextBlock
-                   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}"
+            FontSize="16"
-                     Maximum="1"/>
+            Text="{x:Static p:Resources.Progress_MainInstruction}" />
-        <Border Margin="0,12,0,0"
+        <TextBlock
-                Background="{DynamicResource SecondaryBackgroundBrush}"
+            Margin="12,12,12,0"
-                BorderBrush="{DynamicResource PrimaryBorderBrush}"
+            Foreground="{DynamicResource TextFillColorSecondaryBrush}"
-                BorderThickness="0,1,0,0"
+            Text="{Binding TimeRemaining, Converter={StaticResource TimeRemainingConverter}}" />
-                Padding="12,12">
+        <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"
+                <Button
-                        Style="{StaticResource AccentButtonStyle}"
+                    MinWidth="76"
                     Command="{Binding StopCommand}"
                     Content="{x:Static p:Resources.Progress_Stop}"
                     IsCancel="True" />

src/modules/imageresizer/ui/Views/ResultsPage.xaml

@@ -1,16 +1,16 @@
-<UserControl x:Class="ImageResizer.Views.ResultsPage"
+<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"
+    xmlns:p="clr-namespace:ImageResizer.Properties">
-             MinWidth="350"
-             Background="{DynamicResource PrimaryBackgroundBrush}">
 
     <StackPanel>
-        <TextBlock Margin="12,12,12,0"
+        <TextBlock
+            Margin="12,12,12,0"
             FontSize="16"
-                   Foreground="{DynamicResource PrimaryForegroundBrush}"
             Text="{x:Static p:Resources.Results_MainInstruction}" />
-        <ScrollViewer MaxWidth="363"
+        <ScrollViewer
+            MaxWidth="363"
             MaxHeight="350"
             HorizontalAlignment="Stretch"
             VerticalScrollBarVisibility="Auto">
@@ -18,7 +18,8 @@
                 <ItemsControl.ItemTemplate>
                     <DataTemplate DataType="ResizeError">
                         <StackPanel>
-                            <TextBlock Margin="0,8,0,0"
+                            <TextBlock
+                                Margin="0,8,0,0"
                                 FontWeight="Bold"
                                 Text="{Binding File}" />
                             <TextBlock Text="{Binding Error}" TextWrapping="Wrap" />
@@ -27,13 +28,15 @@
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
         </ScrollViewer>
-        <Border Margin="0,12,0,0"
+        <Border
-                Background="{DynamicResource SecondaryBackgroundBrush}"
+            Margin="0,12,0,0"
-                BorderBrush="{DynamicResource PrimaryBorderBrush}"
+            Padding="12,12"
-                BorderThickness="0,1,0,0"
+            Background="{DynamicResource LayerFillColorDefaultBrush}"
-                Padding="12,12">
+            BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
+            BorderThickness="0,1,0,0">
             <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                <Button MinWidth="76"
+                <Button
+                    MinWidth="76"
                     Command="{Binding CloseCommand}"
                     Content="{x:Static p:Resources.Results_Close}"
                     IsCancel="True"