From 1f3deb89a45d635d4fcc7c0eeed441c3826cf856 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Wed, 7 Jul 2021 14:31:55 +0200
Subject: [PATCH 01/11] Flyout for ImageResizer sizes

---
 .../ImageResizerFitToStringConverter.cs       |  46 ++++
 .../ImageResizerUnitToStringConverter.cs      |  44 ++++
 .../Microsoft.PowerToys.Settings.UI.csproj    |   2 +
 .../Strings/en-us/Resources.resw              |  51 +++-
 .../Views/ImageResizerPage.xaml               | 241 ++++++++----------
 5 files changed, 238 insertions(+), 146 deletions(-)
 create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerFitToStringConverter.cs
 create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerUnitToStringConverter.cs

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerFitToStringConverter.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerFitToStringConverter.cs
new file mode 100644
index 000000000000..736ac8aa6d4d
--- /dev/null
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerFitToStringConverter.cs
@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Globalization;
+using System.Text;
+using Windows.ApplicationModel.Resources;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Media;
+
+namespace Microsoft.PowerToys.Settings.UI.Converters
+{
+    public sealed class ImageResizerFitToStringConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            var toLower = false;
+            if ((string)parameter == "ToLower")
+            {
+                toLower = true;
+            }
+
+            string targetValue = string.Empty;
+            switch (value)
+            {
+                case 0: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Fit_Fill_ThirdPersonSingular"); break;
+                case 1: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Fit_Fit_ThirdPersonSingular"); break;
+                case 2: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Fit_Stretch_ThirdPersonSingular"); break;
+            }
+
+            if (toLower)
+            {
+                targetValue = targetValue.ToLower(CultureInfo.CurrentCulture);
+            }
+
+            return targetValue;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            return value;
+        }
+    }
+}
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerUnitToStringConverter.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerUnitToStringConverter.cs
new file mode 100644
index 000000000000..b0b60715d0ec
--- /dev/null
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Converters/ImageResizerUnitToStringConverter.cs
@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Globalization;
+using Windows.ApplicationModel.Resources;
+using Windows.UI.Xaml.Data;
+
+namespace Microsoft.PowerToys.Settings.UI.Converters
+{
+    public sealed class ImageResizerUnitToStringConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            var toLower = false;
+            if ((string)parameter == "ToLower")
+            {
+                toLower = true;
+            }
+
+            string targetValue = string.Empty;
+            switch (value)
+            {
+                case 0: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Unit_Centimeter"); break;
+                case 1: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Unit_Inch"); break;
+                case 2: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Unit_Percent"); break;
+                case 3: targetValue = ResourceLoader.GetForCurrentView().GetString("ImageResizer_Unit_Pixel"); break;
+            }
+
+            if (toLower)
+            {
+                targetValue = targetValue.ToLower(CultureInfo.CurrentCulture);
+            }
+
+            return targetValue;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            return value;
+        }
+    }
+}
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
index ef9685a01d56..643ce5231355 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj
@@ -110,6 +110,8 @@
     </Compile>
     <Compile Include="Controls\SidePanel\SidePanelLink.cs" />
     <Compile Include="Converters\AwakeModeToBoolConverter.cs" />
+    <Compile Include="Converters\ImageResizerFitToStringConverter.cs" />
+    <Compile Include="Converters\ImageResizerUnitToStringConverter.cs" />
     <Compile Include="Converters\ModuleEnabledToOpacityConverter.cs" />
     <Compile Include="Converters\UpdatingStateCannotDownloadToVisibilityConverter.cs" />
     <Compile Include="Converters\UpdatingStateReadyToDownloadToVisibilityConverter.cs" />
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 83548cb10162..e35feed97baf 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -610,23 +610,20 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="ImageResizer_Configurations.AutomationProperties.Name" xml:space="preserve">
     <value>Configurations</value>
   </data>
-  <data name="ImageResizer_Name.AutomationProperties.Name" xml:space="preserve">
-    <value>Configuration Name</value>
+  <data name="ImageResizer_Name.Header" xml:space="preserve">
+    <value>Name</value>
   </data>
-  <data name="ImageResizer_Fit_Property.AutomationProperties.Name" xml:space="preserve">
-    <value>Fit Property</value>
-  </data>
-  <data name="ImageResizer_Width_Property.AutomationProperties.Name" xml:space="preserve">
-    <value>Width Property</value>
+  <data name="ImageResizer_Fit.Header" xml:space="preserve">
+    <value>Fit</value>
   </data>
-  <data name="ImageResizer_Height_Property.AutomationProperties.Name" xml:space="preserve">
-    <value>Height Property</value>
+  <data name="ImageResizer_Width.Header" xml:space="preserve">
+    <value>Width</value>
   </data>
-  <data name="ImageResizer_Size_Property.AutomationProperties.Name" xml:space="preserve">
-    <value>Size Property</value>
+  <data name="ImageResizer_Height.Header" xml:space="preserve">
+    <value>Height</value>
   </data>
-  <data name="ImageResizer_Times_Symbol.AutomationProperties.Name" xml:space="preserve">
-    <value>Times Symbol</value>
+  <data name="ImageResizer_Size.Header" xml:space="preserve">
+    <value>Unit</value>
   </data>
   <data name="RemoveButton.AutomationProperties.Name" xml:space="preserve">
     <value>Remove</value>
@@ -709,6 +706,10 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Fill</value>
     <comment>Refers to filling an image into a certain size. It could overflow</comment>
   </data>
+  <data name="ImageResizer_Sizes_Fit_Fill_ThirdPersonSingular.Text" xml:space="preserve">
+    <value>Fill</value>
+    <comment>Refers to filling an image into a certain size. It could overflow</comment>
+  </data>
   <data name="ImageResizer_Sizes_Fit_Fit.Content" xml:space="preserve">
     <value>Fit</value>
     <comment>Refers to fitting an image into a certain size. It won't overflow</comment>
@@ -1341,4 +1342,28 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="General_DownloadAndInstall.Content" xml:space="preserve">
     <value>Download and install</value>
   </data>
+  <data name="ImageResizer_Fit_Fill_ThirdPersonSingular" xml:space="preserve">
+    <value>Fills</value>
+  </data>
+  <data name="ImageResizer_Fit_Fit_ThirdPersonSingular" xml:space="preserve">
+    <value>Fits within</value>
+  </data>
+  <data name="ImageResizer_Fit_Stretch_ThirdPersonSingular" xml:space="preserve">
+    <value>Stretches to</value>
+  </data>
+  <data name="ImageResizer_Unit_Centimeter" xml:space="preserve">
+    <value>Centimeters</value>
+  </data>
+  <data name="ImageResizer_Unit_Inch" xml:space="preserve">
+    <value>Inches</value>
+  </data>
+  <data name="ImageResizer_Unit_Percent" xml:space="preserve">
+    <value>Percent</value>
+  </data>
+  <data name="ImageResizer_Unit_Pixel" xml:space="preserve">
+    <value>Pixels</value>
+  </data>
+  <data name="EditTooltip.Text" xml:space="preserve">
+    <value>Edit</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index dc046646ff1a..a57c74209aa5 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -6,11 +6,18 @@
     xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" 
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
+    xmlns:toolkitconverters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     AutomationProperties.LandmarkType="Main">
 
+    <Page.Resources>
+        <converters:ImageResizerFitToStringConverter x:Key="ImageResizerFitToStringConverter" />
+        <converters:ImageResizerUnitToStringConverter x:Key="ImageResizerUnitToStringConverter" />
+        <toolkitconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" TrueValue="Visible" FalseValue="Collapsed" />
+    </Page.Resources>
     <controls:SettingsPageControl x:Uid="About_ImageResizer"
                                   ModuleImageSource="ms-appx:///Assets/Modules/ImageResizer.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ImageResizer">
@@ -27,150 +34,118 @@
                 <ListView x:Name="ImagesSizesListView" 
                       x:Uid="ImagesSizesListView"
                       ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
-                      Padding="0,0,0,24"
+                      Padding="-12,0,0,0"
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      SelectionMode="None"
+                      SelectionMode="Single"
                       ScrollViewer.HorizontalScrollMode="Enabled"
                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
                       ScrollViewer.IsHorizontalRailEnabled="True"
                       ContainerContentChanging="ImagesSizesListView_ContainerContentChanging">
 
-                    <ListView.ItemContainerStyle>
-                        <Style TargetType="ListViewItem">
-                            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
-                            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
-                            <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}"/>
-                            <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}"/>
-                            <Setter Property="TabNavigation" Value="Local"/>
-                            <Setter Property="IsHoldingEnabled" Value="True"/>
-                            <Setter Property="Padding" Value="0"/>
-                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
-                            <Setter Property="VerticalContentAlignment" Value="Center"/>
-                            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
-                            <Setter Property="MinHeight" Value="0"/>
-                            <Setter Property="AllowDrop" Value="False"/>
-                            <Setter Property="UseSystemFocusVisuals" Value="True"/>
-                            <Setter Property="FocusVisualMargin" Value="0"/>
-                            <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}"/>
-                            <Setter Property="FocusVisualPrimaryThickness" Value="2"/>
-                            <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}"/>
-                            <Setter Property="FocusVisualSecondaryThickness" Value="1"/>
-                            <Setter Property="Template">
-                                <Setter.Value>
-                                    <ControlTemplate TargetType="ListViewItem">
-                                        <ListViewItemPresenter 
-                                        CheckBrush="{ThemeResource ListViewItemCheckBrush}" 
-                                        ContentMargin="{TemplateBinding Padding}" 
-                                        CheckMode="{ThemeResource ListViewItemCheckMode}" 
-                                        ContentTransitions="{TemplateBinding ContentTransitions}" 
-                                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}" 
-                                        DragForeground="{ThemeResource ListViewItemDragForeground}" 
-                                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
-                                        DragBackground="{ThemeResource ListViewItemDragBackground}" 
-                                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
-                                        FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}" 
-                                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}" 
-                                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}" 
-                                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}" 
-                                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}" 
-                                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}" 
-                                        FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}" 
-                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
-                                        Control.IsTemplateFocusTarget="True" 
-                                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}" 
-                                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
-                                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}" 
-                                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
-                                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}" 
-                                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}" 
-                                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}" 
-                                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}" 
-                                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}" 
-                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
-                                    </ControlTemplate>
-                                </Setter.Value>
-                            </Setter>
-                        </Style>
-
-                    </ListView.ItemContainerStyle>
                     <ListView.ItemTemplate>
-                        <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize" >
-                            <StackPanel Name="ImageResizer_Configurations" x:Uid="ImageResizer_Configurations" Orientation="Horizontal" Padding="0" Spacing="4">
-                                <TextBox Name="ImageResizer_Name"
-                                     x:Uid="ImageResizer_Name"
-                                     Text="{x:Bind Path=Name, Mode=TwoWay}" 
-                                     Width="90"
-                                     VerticalAlignment="Center"
-                                     Margin="{StaticResource SmallTopMargin}"/>
+                        <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize">
+                            <Grid Padding="0,12,12,12" Width="420">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="40" />
+                                        <ColumnDefinition Width="*" />
+                                        <ColumnDefinition Width="52" />
+                                    </Grid.ColumnDefinitions>
+              
+                        
+                                    <FontIcon Glyph="&#xE1D8;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
+
+                                <StackPanel Orientation="Vertical" Grid.Column="1" Margin="0,0,16,0">
+                                    <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="18" />
+
+                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Spacing="4" Grid.Column="1" Margin="0,4,0,0" >
+                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" />
+                                        <TextBlock Text="x" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold"/>
+                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                                    </StackPanel>
+                                </StackPanel>
+                                <StackPanel HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
+                                    <Button 
+                                        Background="Transparent"
+                                        FontFamily="Segoe MDL2 Assets"
+                                        Width="36"
+                                        Height="36"
+                                        Content="&#xE104;">
+                                        
+                                        <ToolTipService.ToolTip>
+                                            <TextBlock x:Uid="EditTooltip"/>
+                                        </ToolTipService.ToolTip>
+                                        <Button.Flyout>
+                                            <Flyout>
+                                                <StackPanel Spacing="16" Margin="0,12,0,0">
+                                                    <TextBox
+                                                        x:Uid="ImageResizer_Name"
+                                                        Text="{x:Bind Path=Name, Mode=TwoWay}" 
+                                                        Width="240"
+
+                                                        HorizontalAlignment="Left"/>
+
 
-                                <ComboBox Name="ImageResizer_Fit_Property"
-                                      x:Uid="ImageResizer_Fit_Property"
-                                      SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}"
-                                      Width="90"
-                                      VerticalAlignment="Center"
-                                      Margin="{StaticResource SmallTopMargin}">
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fill" />
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fit" />
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Stretch" />
-                                </ComboBox>
+                                                    <ComboBox
+                                                        x:Uid="ImageResizer_Fit"
+                                                        SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}"
+                                                        Width="240"
+                                                        HorizontalAlignment="Left">
+                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fill" />
+                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fit" />
+                                                            <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Stretch" />
+                                                    </ComboBox>
 
-                                <muxc:NumberBox Name="ImageResizer_Width_Property"
-                                            x:Uid="ImageResizer_Width_Property"
-                                            Value="{x:Bind Path=Width, Mode=TwoWay}" 
-                                            Minimum="0"
-                                            MinWidth="68"
-                                            SpinButtonPlacementMode="Compact"
-                                            VerticalAlignment="Center"
-                                            Margin="{StaticResource SmallTopMargin}"/>
+                                                    <StackPanel Spacing="8" Orientation="Horizontal">
+                                                        <muxc:NumberBox
+                                                            x:Uid="ImageResizer_Width"
+                                                            Value="{x:Bind Path=Width, Mode=TwoWay}" 
+                                                            Minimum="0"
+                                                            Width="116"
+                                                            SpinButtonPlacementMode="Compact"/>
 
-                                <TextBlock Name="ImageResizer_Times_Symbol"
-                                       x:Uid="ImageResizer_Times_Symbol"
-                                       Text="&#xE711;"
-                                       FontFamily="Segoe MDL2 Assets"
-                                       TextAlignment="Center"
-                                       VerticalAlignment="Center"
-                                       Margin="{StaticResource SmallTopMargin}" 
-                                       Opacity="{x:Bind Path=ExtraBoxOpacity, Mode=OneWay}"                                    
-                                       Width="25"/>
+                                                        <muxc:NumberBox
+                                                            x:Uid="ImageResizer_Height"
+                                                            Value="{x:Bind Path=Height, Mode=TwoWay}" 
+                                                            Width="116"
+                                                            Minimum="0"
+                                                            SpinButtonPlacementMode="Compact"
+                                                            Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
 
-                                <muxc:NumberBox Name="ImageResizer_Height_Property"
-                                            x:Uid="ImageResizer_Height_Property"
-                                            Value="{x:Bind Path=Height, Mode=TwoWay}" 
-                                            MinWidth="68"
-                                            Minimum="0"
-                                            VerticalAlignment="Center"
-                                            SpinButtonPlacementMode="Compact"
-                                            Opacity="{x:Bind Path=ExtraBoxOpacity, Mode=OneWay}"
-                                            IsEnabled="{x:Bind Path=EnableEtraBoxes, Mode=OneWay}"
-                                            Margin="{StaticResource SmallTopMargin}"/>
+                                                      
+                                                    </StackPanel>
+                                                    <ComboBox x:Uid="ImageResizer_Size"
+                                                                  SelectedIndex="{Binding Path=Unit, Mode=TwoWay}"
+                                                                  Width="240"
+                                                              Margin="0,0,0,24">
+                                                        <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_CM" />
+                                                        <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Inches" />
+                                                        <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Percent" />
+                                                        <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Pixels" />
+                                                    </ComboBox>
+                                                </StackPanel>
+                                            </Flyout>
+                                        </Button.Flyout>
+                                        </Button>
 
-                                <ComboBox Name="ImageResizer_Size_Property"
-                                      x:Uid="ImageResizer_Size_Property"
-                                      SelectedIndex="{Binding Path=Unit, Mode=TwoWay}"
-                                      MinWidth="120"
-                                      VerticalAlignment="Center"
-                                      Margin="{StaticResource SmallTopMargin}">
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_CM" />
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Inches" />
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Percent" />
-                                    <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Pixels" />
-                                </ComboBox>
-                                <Button x:Name="RemoveButton"
-                                    x:Uid="RemoveButton"
-                                    Background="Transparent"
-                                    FontFamily="Segoe MDL2 Assets"
-                                    Width="34"
-                                    Content="&#xE74D;"
-                                    VerticalAlignment="Center"
-                                    Margin="{StaticResource SmallTopMargin}" 
-                                    UseLayoutRounding="False"
-                                    Click="DeleteCustomSize"
-                                    CommandParameter="{Binding Id}">
-                                    <ToolTipService.ToolTip>
-                                        <TextBlock x:Uid="RemoveTooltip"/>
-                                    </ToolTipService.ToolTip>
-                                </Button>
-                            </StackPanel>
+                                    <Button x:Name="RemoveButton"
+                                        x:Uid="RemoveButton"
+                                        Background="Transparent"
+                                        FontFamily="Segoe MDL2 Assets"
+                                        Width="36"
+                                        Height="36"
+                                        Content="&#xE74D;"
+                                        Click="DeleteCustomSize"
+                                        CommandParameter="{Binding Id}">
+                                        <ToolTipService.ToolTip>
+                                            <TextBlock x:Uid="RemoveTooltip"/>
+                                        </ToolTipService.ToolTip>
+                                    </Button>
+                                </StackPanel>
+                             
+                            </Grid>
+         
                         </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>

From cd38bd17f78213018bb66a9c1b03a88eab2b2808 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Wed, 7 Jul 2021 22:12:57 +0200
Subject: [PATCH 02/11] Narrator support

---
 .../Strings/en-us/Resources.resw                     |  3 +++
 .../Views/ImageResizerPage.xaml                      | 12 +++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index e35feed97baf..d0d008a7e079 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -1366,4 +1366,7 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="EditTooltip.Text" xml:space="preserve">
     <value>Edit</value>
   </data>
+  <data name="EditButton.AutomationProperties.Name" xml:space="preserve">
+    <value>Edit</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index a57c74209aa5..3532b556bd78 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -44,8 +44,8 @@
 
                     <ListView.ItemTemplate>
                         <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize">
-                            <Grid Padding="0,12,12,12" Width="420">
-                                    <Grid.ColumnDefinitions>
+                            <Grid Padding="0,12,12,12" Width="420" AutomationProperties.Name="{x:Bind Name, Mode=OneWay}">
+                                <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="40" />
                                         <ColumnDefinition Width="*" />
                                         <ColumnDefinition Width="52" />
@@ -53,10 +53,11 @@
               
                         
                                     <FontIcon Glyph="&#xE1D8;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
+                                <TextBlock>
 
+                                </TextBlock>
                                 <StackPanel Orientation="Vertical" Grid.Column="1" Margin="0,0,16,0">
                                     <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="18" />
-
                                     <StackPanel Orientation="Horizontal" Grid.Row="1" Spacing="4" Grid.Column="1" Margin="0,4,0,0" >
                                         <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
                                         <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" />
@@ -67,12 +68,12 @@
                                 </StackPanel>
                                 <StackPanel HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
                                     <Button 
+                                        x:Uid="EditButton"
                                         Background="Transparent"
                                         FontFamily="Segoe MDL2 Assets"
                                         Width="36"
                                         Height="36"
                                         Content="&#xE104;">
-                                        
                                         <ToolTipService.ToolTip>
                                             <TextBlock x:Uid="EditTooltip"/>
                                         </ToolTipService.ToolTip>
@@ -83,10 +84,8 @@
                                                         x:Uid="ImageResizer_Name"
                                                         Text="{x:Bind Path=Name, Mode=TwoWay}" 
                                                         Width="240"
-
                                                         HorizontalAlignment="Left"/>
 
-
                                                     <ComboBox
                                                         x:Uid="ImageResizer_Fit"
                                                         SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}"
@@ -113,7 +112,6 @@
                                                             SpinButtonPlacementMode="Compact"
                                                             Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
 
-                                                      
                                                     </StackPanel>
                                                     <ComboBox x:Uid="ImageResizer_Size"
                                                                   SelectedIndex="{Binding Path=Unit, Mode=TwoWay}"

From b6f37b0235e46bd3b1d117dd21de917858c52e4a Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Fri, 9 Jul 2021 14:24:58 +0200
Subject: [PATCH 03/11] Improved spaces

---
 .../Views/ImageResizerPage.xaml                      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index 3532b556bd78..be961a6cfc59 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -58,12 +58,12 @@
                                 </TextBlock>
                                 <StackPanel Orientation="Vertical" Grid.Column="1" Margin="0,0,16,0">
                                     <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="18" />
-                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Spacing="4" Grid.Column="1" Margin="0,4,0,0" >
-                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
-                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" />
-                                        <TextBlock Text="x" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
-                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold"/>
-                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
+                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0" >
+                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"/>
+                                        <TextBlock Text="x" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
                                     </StackPanel>
                                 </StackPanel>
                                 <StackPanel HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">

From 702921c5434cf067dac26c7d5fe7df869c513cf2 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Sun, 11 Jul 2021 15:31:23 +0200
Subject: [PATCH 04/11] Fixed icons and added a confirmation dialog

---
 .../Strings/en-us/Resources.resw              | 14 ++++++++
 .../Views/ImageResizerPage.xaml               |  7 ++--
 .../Views/ImageResizerPage.xaml.cs            | 36 +++++++++++++------
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index d0d008a7e079..8a8d9ea5039e 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -1369,4 +1369,18 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="EditButton.AutomationProperties.Name" xml:space="preserve">
     <value>Edit</value>
   </data>
+  <data name="Cancel" xml:space="preserve">
+    <value>Cancel</value>
+    <comment>Label of a cancel button</comment>
+  </data>
+  <data name="Delete_Dialog_Description" xml:space="preserve">
+    <value>You are about to delete this item</value>
+  </data>
+  <data name="Delete_Dialog_Title" xml:space="preserve">
+    <value>Are you sure?</value>
+  </data>
+  <data name="OK" xml:space="preserve">
+    <value>OK</value>
+    <comment>Label of a confirmation button</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index be961a6cfc59..c4db62407583 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -50,8 +50,7 @@
                                         <ColumnDefinition Width="*" />
                                         <ColumnDefinition Width="52" />
                                     </Grid.ColumnDefinitions>
-              
-                        
+
                                     <FontIcon Glyph="&#xE1D8;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
                                 <TextBlock>
 
@@ -61,7 +60,7 @@
                                     <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0" >
                                         <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
                                         <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"/>
-                                        <TextBlock Text="x" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
+                                        <TextBlock Text="&#xE947;" FontFamily="Segoe MDL2 Assets" FontSize="11" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"/>
                                         <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"/>
                                         <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
                                     </StackPanel>
@@ -73,7 +72,7 @@
                                         FontFamily="Segoe MDL2 Assets"
                                         Width="36"
                                         Height="36"
-                                        Content="&#xE104;">
+                                        Content="&#xE70F;">
                                         <ToolTipService.ToolTip>
                                             <TextBlock x:Uid="EditTooltip"/>
                                         </ToolTipService.ToolTip>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
index f482f4d2cf9d..c92064f9d79f 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
@@ -9,6 +9,8 @@
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.Library.Utilities;
 using Microsoft.PowerToys.Settings.UI.Library.ViewModels;
+using Windows.ApplicationModel.Resources;
+using Windows.UI.Popups;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 
@@ -32,20 +34,32 @@ public ImageResizerPage()
             DataContext = ViewModel;
         }
 
-        public void DeleteCustomSize(object sender, RoutedEventArgs e)
+        public async void DeleteCustomSize(object sender, RoutedEventArgs e)
         {
-            Button deleteRowButton = (Button)sender;
+            MessageDialog dialog = new MessageDialog(ResourceLoader.GetForCurrentView().GetString("Delete_Dialog_Description"), ResourceLoader.GetForCurrentView().GetString("Delete_Dialog_Title"));
 
-            // Using InvariantCulture since this is internal and expected to be numerical
-            bool success = int.TryParse(deleteRowButton?.CommandParameter?.ToString(), NumberStyles.Integer, CultureInfo.InvariantCulture, out int rowNum);
-            if (success)
+#pragma warning disable CS1998 // Async method lacks 'await' operators and will run synchronously
+#pragma warning disable SA1130 // Use lambda syntax
+            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("Yes"), async delegate(IUICommand command)
+#pragma warning restore SA1130 // Use lambda syntax
+#pragma warning restore CS1998 // Async method lacks 'await' operators and will run synchronously
             {
-                ViewModel.DeleteImageSize(rowNum);
-            }
-            else
-            {
-                Logger.LogError("Failed to delete custom image size.");
-            }
+                Button deleteRowButton = (Button)sender;
+
+                // Using InvariantCulture since this is internal and expected to be numerical
+                bool success = int.TryParse(deleteRowButton?.CommandParameter?.ToString(), NumberStyles.Integer, CultureInfo.InvariantCulture, out int rowNum);
+                if (success)
+                {
+                    ViewModel.DeleteImageSize(rowNum);
+                }
+                else
+                {
+                    Logger.LogError("Failed to delete custom image size.");
+                }
+            }));
+
+            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("No")));
+            await dialog.ShowAsync();
         }
 
         [SuppressMessage("Design", "CA1031:Do not catch general exception types", Justification = "JSON exceptions from saving new settings should be caught and logged.")]

From d0ffa8bb15697306c24e8cfac04d0f5625022ece Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Thu, 15 Jul 2021 16:14:10 +0200
Subject: [PATCH 05/11] Add updatesourcetrigger

---
 .../Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index c4db62407583..bc9ba90d0bf2 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -81,7 +81,7 @@
                                                 <StackPanel Spacing="16" Margin="0,12,0,0">
                                                     <TextBox
                                                         x:Uid="ImageResizer_Name"
-                                                        Text="{x:Bind Path=Name, Mode=TwoWay}" 
+                                                        Text="{x:Bind Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                                                         Width="240"
                                                         HorizontalAlignment="Left"/>
 

From 2f00e7c41ab68c6219f9c80f35354ecd82d9b021 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Fri, 16 Jul 2021 21:03:40 +0200
Subject: [PATCH 06/11] Spellcheck fix

---
 .github/actions/spell-check/expect.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt
index c33d8eb07b06..6744f4df8e9b 100644
--- a/.github/actions/spell-check/expect.txt
+++ b/.github/actions/spell-check/expect.txt
@@ -2239,6 +2239,7 @@ todo
 toggleswitch
 toolbar
 Toolchain
+toolkitconverters
 toolset
 toolstrip
 tooltip

From 4d101bb9b41fde1872a0d402a0fd55a7a0bf962d Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Fri, 16 Jul 2021 21:19:49 +0200
Subject: [PATCH 07/11] Fixed missing strings

---
 .../Views/ImageResizerPage.xaml.cs                            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
index c92064f9d79f..56cc49db2525 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
@@ -40,7 +40,7 @@ public async void DeleteCustomSize(object sender, RoutedEventArgs e)
 
 #pragma warning disable CS1998 // Async method lacks 'await' operators and will run synchronously
 #pragma warning disable SA1130 // Use lambda syntax
-            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("Yes"), async delegate(IUICommand command)
+            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("OK"), async delegate(IUICommand command)
 #pragma warning restore SA1130 // Use lambda syntax
 #pragma warning restore CS1998 // Async method lacks 'await' operators and will run synchronously
             {
@@ -58,7 +58,7 @@ public async void DeleteCustomSize(object sender, RoutedEventArgs e)
                 }
             }));
 
-            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("No")));
+            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("Cancel")));
             await dialog.ShowAsync();
         }
 

From e2d3297c374932e53af95368bd36a040b458d92e Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Thu, 22 Jul 2021 22:12:26 +0200
Subject: [PATCH 08/11] Added messagedialog

---
 .../Strings/en-us/Resources.resw              | 13 +++---
 .../Views/ImageResizerPage.xaml               |  2 +-
 .../Views/ImageResizerPage.xaml.cs            | 41 +++++++++++--------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 8a8d9ea5039e..b39df0a4d475 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -1369,18 +1369,15 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="EditButton.AutomationProperties.Name" xml:space="preserve">
     <value>Edit</value>
   </data>
-  <data name="Cancel" xml:space="preserve">
-    <value>Cancel</value>
+  <data name="No" xml:space="preserve">
+    <value>No</value>
     <comment>Label of a cancel button</comment>
   </data>
   <data name="Delete_Dialog_Description" xml:space="preserve">
-    <value>You are about to delete this item</value>
+    <value>Are you sure you want to delete this item?</value>
   </data>
-  <data name="Delete_Dialog_Title" xml:space="preserve">
-    <value>Are you sure?</value>
-  </data>
-  <data name="OK" xml:space="preserve">
-    <value>OK</value>
+  <data name="Yes" xml:space="preserve">
+    <value>Yes</value>
     <comment>Label of a confirmation button</comment>
   </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index bc9ba90d0bf2..a5eb8502d112 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -11,7 +11,7 @@
     xmlns:toolkitconverters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-    AutomationProperties.LandmarkType="Main">
+    AutomationProperties.LandmarkType="Main" x:Name="RootPage">
 
     <Page.Resources>
         <converters:ImageResizerFitToStringConverter x:Key="ImageResizerFitToStringConverter" />
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
index 56cc49db2525..0b542c01987e 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs
@@ -36,30 +36,35 @@ public ImageResizerPage()
 
         public async void DeleteCustomSize(object sender, RoutedEventArgs e)
         {
-            MessageDialog dialog = new MessageDialog(ResourceLoader.GetForCurrentView().GetString("Delete_Dialog_Description"), ResourceLoader.GetForCurrentView().GetString("Delete_Dialog_Title"));
+            Button deleteRowButton = (Button)sender;
 
-#pragma warning disable CS1998 // Async method lacks 'await' operators and will run synchronously
-#pragma warning disable SA1130 // Use lambda syntax
-            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("OK"), async delegate(IUICommand command)
-#pragma warning restore SA1130 // Use lambda syntax
-#pragma warning restore CS1998 // Async method lacks 'await' operators and will run synchronously
+            if (deleteRowButton != null)
             {
-                Button deleteRowButton = (Button)sender;
+                ImageSize x = (ImageSize)deleteRowButton.DataContext;
+                ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView();
 
+                ContentDialog dialog = new ContentDialog();
+                dialog.XamlRoot = RootPage.XamlRoot;
+                dialog.Title = x.Name;
+                dialog.PrimaryButtonText = resourceLoader.GetString("Yes");
+                dialog.CloseButtonText = resourceLoader.GetString("No");
+                dialog.DefaultButton = ContentDialogButton.Primary;
+                dialog.Content = new TextBlock() { Text = resourceLoader.GetString("Delete_Dialog_Description") };
+                dialog.PrimaryButtonClick += (s, args) =>
+                {
                 // Using InvariantCulture since this is internal and expected to be numerical
                 bool success = int.TryParse(deleteRowButton?.CommandParameter?.ToString(), NumberStyles.Integer, CultureInfo.InvariantCulture, out int rowNum);
                 if (success)
-                {
-                    ViewModel.DeleteImageSize(rowNum);
-                }
-                else
-                {
-                    Logger.LogError("Failed to delete custom image size.");
-                }
-            }));
-
-            dialog.Commands.Add(new UICommand(ResourceLoader.GetForCurrentView().GetString("Cancel")));
-            await dialog.ShowAsync();
+                    {
+                        ViewModel.DeleteImageSize(rowNum);
+                    }
+                    else
+                    {
+                        Logger.LogError("Failed to delete custom image size.");
+                    }
+                };
+                var result = await dialog.ShowAsync();
+            }
         }
 
         [SuppressMessage("Design", "CA1031:Do not catch general exception types", Justification = "JSON exceptions from saving new settings should be caught and logged.")]

From 138b684244f1df266f2c4fc484d24dea538be264 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Sun, 25 Jul 2021 14:42:00 +0200
Subject: [PATCH 09/11] Fixes

---
 .../Strings/en-us/Resources.resw                             | 3 ++-
 .../Views/ImageResizerPage.xaml                              | 5 +----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 5613b38ec1af..cbf53ddc88bc 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -1376,9 +1376,10 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="Delete_Dialog_Description" xml:space="preserve">
     <value>Are you sure you want to delete this item?</value>
   </data>
-  <data name="Yes" xml:space="preserve">
+	<data name="Yes" xml:space="preserve">
     <value>Yes</value>
     <comment>Label of a confirmation button</comment>
+	  </data>
   <data name="Learn_More_Description.AutomationProperties.Name" xml:space="preserve">
     <value>Learn more</value>
   </data>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index a5eb8502d112..05d8205e579b 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -51,10 +51,7 @@
                                         <ColumnDefinition Width="52" />
                                     </Grid.ColumnDefinitions>
 
-                                    <FontIcon Glyph="&#xE1D8;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
-                                <TextBlock>
-
-                                </TextBlock>
+                                <FontIcon Glyph="&#xE73F;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
                                 <StackPanel Orientation="Vertical" Grid.Column="1" Margin="0,0,16,0">
                                     <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="18" />
                                     <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0" >

From 34ba2b3bbe57ed65b922fb756b3b45088cf1a13e Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Sun, 25 Jul 2021 14:47:16 +0200
Subject: [PATCH 10/11] Focus fix

---
 .../Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index 05d8205e579b..a624c5e0d74b 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -36,7 +36,7 @@
                       ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
                       Padding="-12,0,0,0"
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      SelectionMode="Single"
+                      SelectionMode="None"
                       ScrollViewer.HorizontalScrollMode="Enabled"
                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
                       ScrollViewer.IsHorizontalRailEnabled="True"

From f7bdab868f73dabc7d5b3f8a7ae4f57c51654edd Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Mon, 26 Jul 2021 14:06:20 +0200
Subject: [PATCH 11/11] Accesibility fix

---
 .../Views/ImageResizerPage.xaml                               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index a624c5e0d74b..5770c7634082 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -57,7 +57,7 @@
                                     <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0" >
                                         <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
                                         <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"/>
-                                        <TextBlock Text="&#xE947;" FontFamily="Segoe MDL2 Assets" FontSize="11" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"/>
+                                        <TextBlock Text="&#xE947;" FontFamily="Segoe MDL2 Assets" FontSize="11" AutomationProperties.AccessibilityView="Raw" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"/>
                                         <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"/>
                                         <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
                                     </StackPanel>
@@ -229,7 +229,7 @@
                             x:Uid="ImageResizer_FilenameFormatHeader"
                             Margin="0,0,0,0"
                             Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                            <TextBlock Text="&#xE946;"
+                            <TextBlock Text="&#xE946;" AutomationProperties.AccessibilityView="Raw"
                            FontFamily="Segoe MDL2 Assets"
                            Margin="4,4,0,0"/>
                         </StackPanel>