Added Image Resizer Settings (#2324)

* added image resizer settings

* updated string resource and binding

* added tests and removed sett advanced settings from image resizer

* fixed string resource spacing

* moved conbo box strings to string resource

* updated name of contributor

* Capitalized size names

* updated fallback encoder and sizers configs

* removed interence between settings | used static resource binding

* fixed build error

src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -154,7 +154,7 @@
     <comment>Navigation view item name for FancyZones</comment>
   </data>
   <data name="Shell_ImageResizer.Content" xml:space="preserve">
-    <value>Image Resizer  [Not Functional]</value>
+    <value>Image Resizer</value>
     <comment>Navigation view item name for Image Resizer</comment>
   </data>
   <data name="Shell_KeyboardManager.Content" xml:space="preserve">
@@ -425,4 +425,103 @@
   <data name="ShortcutGuide_OverlayOpacity.Header" xml:space="preserve">
     <value>Opacity of the Shortcut Guide's overlay background (%)</value>
   </data>
+  <data name="ImageResizer_CustomSizes.Text" xml:space="preserve">
+    <value>Image Sizes</value>
+  </data>
+  <data name="ImageResizer_Description.Text" xml:space="preserve">
+    <value>Lets you resize images by right-clicking.</value>
+  </data>
+  <data name="ImageResizer_EnableGroupSettingsHeader.Text" xml:space="preserve">
+    <value>Enable</value>
+  </data>
+  <data name="ImageResizer_EnableToggle.Header" xml:space="preserve">
+    <value>Enable Image Resizer</value>
+  </data>
+  <data name="ImageResizer_AddSizeButton.Label" xml:space="preserve">
+    <value>Add Size</value>
+  </data>
+  <data name="ImageResizer_SaveSizeButton.Label" xml:space="preserve">
+    <value>Save Sizes</value>
+  </data>
+  <data name="ImageResizer_Encoding.Text" xml:space="preserve">
+    <value>JPEG Quality level</value>
+  </data>
+  <data name="ImageResizer_PNGInterlacing.Header" xml:space="preserve">
+    <value>PNG interlacing</value>
+  </data>
+  <data name="ImageResizer_TIFFCompression.Header" xml:space="preserve">
+    <value>TIFF Compression</value>
+  </data>
+  <data name="File.Text" xml:space="preserve">
+    <value>File</value>
+  </data>
+  <data name="Default.Content" xml:space="preserve">
+    <value>Default</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_CCITT3.Content" xml:space="preserve">
+    <value>CCITT3</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_CCITT4.Content" xml:space="preserve">
+    <value>CCITT4</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_Default.Content" xml:space="preserve">
+    <value>Default</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_LZW.Content" xml:space="preserve">
+    <value>LZW</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_None.Content" xml:space="preserve">
+    <value>None</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_RLE.Content" xml:space="preserve">
+    <value>RLE</value>
+  </data>
+  <data name="ImageResizer_ENCODER_TIFF_Zip.Content" xml:space="preserve">
+    <value>Zip</value>
+  </data>
+  <data name="ImageResizer_FallbackEncoder_BMP.Content" xml:space="preserve">
+    <value>BMP Encoder</value>
+  </data>
+  <data name="ImageResizer_FallbackEncoder_GIF.Content" xml:space="preserve">
+    <value>GIF Encoder</value>
+  </data>
+  <data name="ImageResizer_FallbackEncoder_JPEG.Content" xml:space="preserve">
+    <value>JPEG Encoder</value>
+  </data>
+  <data name="ImageResizer_FallbackEncoder_PNG.Content" xml:space="preserve">
+    <value>PNG Encoder</value>
+  </data>
+  <data name="ImageResizer_FallbackEncoder_TIFF.Content" xml:space="preserve">
+    <value>TIFF Encoder</value>
+  </data>
+  <data name="ImageResizer_FallbackEncoder_WMPhoto.Content" xml:space="preserve">
+    <value>WMPhoto Encoder</value>
+  </data>
+  <data name="ImageResizer_Sizes_Fit_Fill.Content" xml:space="preserve">
+    <value>Fill</value>
+  </data>
+  <data name="ImageResizer_Sizes_Fit_Fit.Content" xml:space="preserve">
+    <value>Fit</value>
+  </data>
+  <data name="ImageResizer_Sizes_Fit_Stretch.Content" xml:space="preserve">
+    <value>Stretch</value>
+  </data>
+  <data name="ImageResizer_Sizes_Units_CM.Content" xml:space="preserve">
+    <value>Centimeters</value>
+  </data>
+  <data name="ImageResizer_Sizes_Units_Inches.Content" xml:space="preserve">
+    <value>Inches</value>
+  </data>
+  <data name="ImageResizer_Sizes_Units_Percent.Content" xml:space="preserve">
+    <value>Percent</value>
+  </data>
+  <data name="ImageResizer_Sizes_Units_Pixels.Content" xml:space="preserve">
+    <value>Pixels</value>
+  </data>
+  <data name="Off.Content" xml:space="preserve">
+    <value>Off</value>
+  </data>
+  <data name="On.Content" xml:space="preserve">
+    <value>On</value>
+  </data>
 </root>

src/core/Microsoft.PowerToys.Settings.UI/ViewModels/ImageResizerViewModel.cs

@@ -2,14 +2,375 @@
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using System.ComponentModel;
+using System.Linq;
+using System.Text.RegularExpressions;
+using System.Windows.Input;
 using Microsoft.PowerToys.Settings.UI.Helpers;
+using Microsoft.PowerToys.Settings.UI.Lib;
+using Microsoft.PowerToys.Settings.UI.Views;
+using Windows.UI.Popups;
 
 namespace Microsoft.PowerToys.Settings.UI.ViewModels
 {
     public class ImageResizerViewModel : Observable
     {
+        private ImageResizerSettings Settings { get; set; }
+
+        private const string ModuleName = "ImageResizer";
+
         public ImageResizerViewModel()
         {
+            try
+            {
+                Settings = SettingsUtils.GetSettings<ImageResizerSettings>(ModuleName);
+            }
+            catch
+            {
+                Settings = new ImageResizerSettings();
+                SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+            }
+
+            GeneralSettings generalSettings;
+
+            try
+            {
+                generalSettings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
+            }
+            catch
+            {
+                generalSettings = new GeneralSettings();
+                SettingsUtils.SaveSettings(generalSettings.ToJsonString(), string.Empty);
+            }
+
+            this._isEnabled = generalSettings.Enabled.ImageResizer;
+            this._advancedSizes = Settings.Properties.ImageresizerSizes.Value;
+            this._jpegQualityLevel = Settings.Properties.ImageresizerJpegQualityLevel.Value;
+            this._pngInterlaceOption = Settings.Properties.ImageresizerPngInterlaceOption.Value;
+            this._tiffCompressOption = Settings.Properties.ImageresizerTiffCompressOption.Value;
+            this._fileName = Settings.Properties.ImageresizerFileName.Value;
+            this._keepDateModified = Settings.Properties.ImageresizerKeepDateModified.Value;
+            this._encoderGuidId = GetEncoderIndex(Settings.Properties.ImageresizerFallbackEncoder.Value);
+
+            int i = 0;
+            foreach (ImageSize size in _advancedSizes)
+            {
+                size.Id = i;
+                i++;
+                size.PropertyChanged += Size_PropertyChanged;
+            }
+        }
+
+        private bool _isEnabled = false;
+        private ObservableCollection<ImageSize> _advancedSizes = new ObservableCollection<ImageSize>();
+        private int _jpegQualityLevel = 0;
+        private int _pngInterlaceOption;
+        private int _tiffCompressOption;
+        private string _fileName;
+        private bool _keepDateModified;
+        private int _encoderGuidId = 0;
+
+        public bool IsEnabled
+        {
+            get
+            {
+                return _isEnabled;
+            }
+
+            set
+            {
+                if (value != _isEnabled)
+                {
+                    _isEnabled = value;
+                    GeneralSettings generalSettings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
+                    generalSettings.Enabled.ImageResizer = value;
+                    OutGoingGeneralSettings snd = new OutGoingGeneralSettings(generalSettings);
+                    ShellPage.DefaultSndMSGCallback(snd.ToString());
+                    OnPropertyChanged("IsEnabled");
+                }
+            }
+        }
+
+        public ObservableCollection<ImageSize> Sizes
+        {
+            get
+            {
+                return _advancedSizes;
+            }
+
+            set
+            {
+                SettingsUtils.SaveSettings(Settings.Properties.ImageresizerSizes.ToJsonString(), ModuleName, "sizes.json");
+                _advancedSizes = value;
+                Settings.Properties.ImageresizerSizes = new ImageresizerSizes(value);
+                SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                OnPropertyChanged("Sizes");
+            }
+        }
+
+        public int JPEGQualityLevel
+        {
+            get
+            {
+                return _jpegQualityLevel;
+            }
+
+            set
+            {
+                if (_jpegQualityLevel != value)
+                {
+                    _jpegQualityLevel = value;
+                    Settings.Properties.ImageresizerJpegQualityLevel.Value = value;
+                    SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                    OnPropertyChanged("JPEGQualityLevel");
+                }
+            }
+        }
+
+        public int PngInterlaceOption
+        {
+            get
+            {
+                return _pngInterlaceOption;
+            }
+
+            set
+            {
+                if (_pngInterlaceOption != value)
+                {
+                    _pngInterlaceOption = value;
+                    Settings.Properties.ImageresizerPngInterlaceOption.Value = value;
+                    SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                    OnPropertyChanged("PngInterlaceOption");
+                }
+            }
+        }
+
+        public int TiffCompressOption
+        {
+            get
+            {
+                return _tiffCompressOption;
+            }
+
+            set
+            {
+                if (_tiffCompressOption != value)
+                {
+                    _tiffCompressOption = value;
+                    Settings.Properties.ImageresizerTiffCompressOption.Value = value;
+                    SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                    OnPropertyChanged("TiffCompressOption");
+                }
+            }
+        }
+
+        public string FileName
+        {
+            get
+            {
+                return _fileName;
+            }
+
+            set
+            {
+                var regex = @"[%]{1}[1-6]{1} [(]{1}[%]{1}[1-6]{1}[)]{1}";
+                Match match = Regex.Match(value.Trim(), regex);
+
+                if (!string.IsNullOrWhiteSpace(value) && match.Success)
+                {
+                    _fileName = value;
+                    Settings.Properties.ImageresizerFileName.Value = value;
+                    SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                    OnPropertyChanged("FileName");
+                }
+            }
+        }
+
+        public bool KeepDateModified
+        {
+            get
+            {
+                return _keepDateModified;
+            }
+
+            set
+            {
+                _keepDateModified = value;
+                Settings.Properties.ImageresizerKeepDateModified.Value = value;
+                SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                OnPropertyChanged("KeepDateModified");
+            }
+        }
+
+        public int Encoder
+        {
+            get
+            {
+                return _encoderGuidId;
+            }
+
+            set
+            {
+                if (_encoderGuidId != value)
+                {
+                    _encoderGuidId = value;
+                    SettingsUtils.SaveSettings(Settings.Properties.ImageresizerSizes.ToJsonString(), ModuleName, "sizes.json");
+                    Settings.Properties.ImageresizerFallbackEncoder.Value = GetEncoderGuid(value);
+                    SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+                    OnPropertyChanged("Encoder");
+                }
+            }
+        }
+
+        public ICommand SaveSizesEventHandler
+        {
+            get
+            {
+                return new RelayCommand(SavesImageSizes);
+            }
+        }
+
+        public ICommand DeleteImageSizeEventHandler
+        {
+            get
+            {
+                return new RelayCommand<int>(DeleteImageSize);
+            }
+        }
+
+        public ICommand AddImageSizeEventHandler
+        {
+            get
+            {
+                return new RelayCommand(AddRow);
+            }
+        }
+
+        public void AddRow()
+        {
+            ObservableCollection<ImageSize> imageSizes = Sizes;
+            ImageSize maxSize = imageSizes.OrderBy(x => x.Id).Last();
+            ImageSize newSize = new ImageSize(maxSize.Id + 1);
+            newSize.PropertyChanged += Size_PropertyChanged;
+            imageSizes.Add(newSize);
+            Sizes = imageSizes;
+            OnPropertyChanged("Sizes");
+        }
+
+        public void DeleteImageSize(int id)
+        {
+            try
+            {
+                ImageSize size = Sizes.Where<ImageSize>(x => x.Id == id).First();
+                ObservableCollection<ImageSize> imageSizes = Sizes;
+                imageSizes.Remove(size);
+                Sizes = imageSizes;
+                OnPropertyChanged("Sizes");
+            }
+            catch
+            {
+            }
+        }
+
+        public void SavesImageSizes()
+        {
+            SettingsUtils.SaveSettings(Settings.ToJsonString(), ModuleName);
+        }
+
+        public string GetEncoderGuid(int value)
+        {
+            // PNG Encoder guid
+            if (value == 0)
+            {
+                return "1b7cfaf4-713f-473c-bbcd-6137425faeaf";
+            }
+
+            // Bitmap Encoder guid
+            else if (value == 1)
+            {
+                return "0af1d87e-fcfe-4188-bdeb-a7906471cbe3";
+            }
+
+            // JPEG Encoder guid
+            else if (value == 2)
+            {
+                return "19e4a5aa-5662-4fc5-a0c0-1758028e1057";
+            }
+
+            // Tiff encoder guid.
+            else if (value == 3)
+            {
+                return "163bcc30-e2e9-4f0b-961d-a3e9fdb788a3";
+            }
+
+            // Tiff encoder guid.
+            else if (value == 4)
+            {
+                return "57a37caa-367a-4540-916b-f183c5093a4b";
+            }
+
+            // Gif encoder guid.
+            else if (value == 5)
+            {
+                return "1f8a5601-7d4d-4cbd-9c82-1bc8d4eeb9a5";
+            }
+
+            return null;
+        }
+
+        public int GetEncoderIndex(string guid)
+        {
+            // PNG Encoder guid
+            if (guid == "1b7cfaf4-713f-473c-bbcd-6137425faeaf")
+            {
+                return 0;
+            }
+
+            // Bitmap Encoder guid
+            else if (guid == "0af1d87e-fcfe-4188-bdeb-a7906471cbe3")
+            {
+                return 1;
+            }
+
+            // JPEG Encoder guid
+            else if (guid == "19e4a5aa-5662-4fc5-a0c0-1758028e1057")
+            {
+                return 2;
+            }
+
+            // Tiff encoder guid.
+            else if (guid == "163bcc30-e2e9-4f0b-961d-a3e9fdb788a3")
+            {
+                return 3;
+            }
+
+            // Tiff encoder guid.
+            else if (guid == "57a37caa-367a-4540-916b-f183c5093a4b")
+            {
+                return 4;
+            }
+
+            // Gif encoder guid.
+            else if (guid == "1f8a5601-7d4d-4cbd-9c82-1bc8d4eeb9a5")
+            {
+                return 5;
+            }
+
+            return -1;
+        }
+
+        public void Size_PropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            ImageSize modifiedSize = (ImageSize)sender;
+            ObservableCollection<ImageSize> imageSizes = Sizes;
+            imageSizes.Where<ImageSize>(x => x.Id == modifiedSize.Id).First().Update(modifiedSize);
+            Sizes = imageSizes;
+            OnPropertyChanged("Sizes");
         }
     }
 }

src/core/Microsoft.PowerToys.Settings.UI/ViewModels/PowerPreviewViewModel.cs

@@ -11,7 +11,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 {
     public class PowerPreviewViewModel : Observable
     {
-        private const string ModuleName = "File Explorer Preview";
+        private const string ModuleName = "File Explorer";
 
         private PowerPreviewSettings Settings { get; set; }
 

src/core/Microsoft.PowerToys.Settings.UI/ViewModels/ShortcutGuideViewModel.cs

@@ -81,9 +81,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                     GeneralSettings generalSettings = SettingsUtils.GetSettings<GeneralSettings>(string.Empty);
                     generalSettings.Enabled.ShortcutGuide = value;
                     OutGoingGeneralSettings snd = new OutGoingGeneralSettings(generalSettings);
-
                     ShellPage.DefaultSndMSGCallback(snd.ToString());
-                    RaisePropertyChanged();
+                    OnPropertyChanged("IsEnabled");
                 }
             }
         }

src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

@@ -2,13 +2,18 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Views.ImageResizerPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
+    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
+    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Lib"
     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"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
+    <Page.Resources>
+        <viewModel:ImageResizerViewModel x:Key="ViewModel"/>
+    </Page.Resources>
+
     <Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
@@ -40,107 +45,182 @@
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical">
-            <TextBlock Text="Lets you resize images by right-clicking."
+        <StackPanel Orientation="Vertical" x:Name="ImageResizerView">
+
+            <TextBlock x:Uid="ImageResizer_Description"
                        TextWrapping="Wrap"/>
 
-            <ToggleSwitch Header="Enable Image Resizer"
-                          IsOn="True"
-                          Margin="{StaticResource SmallTopMargin}" />
-
-            <TextBlock Text="Sizes" 
+            <TextBlock x:Uid="ImageResizer_EnableGroupSettingsHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <!-- TO DO: Don't know if a listview with these items is the best solution here. Maybe a data grid is better? -->
-            <!--<ListView Margin="{StaticResource SmallTopMargin}" Padding="-12,0,0,0" SelectionMode="None" ItemsSource="{x:Bind Sizes, Mode=OneWay}">
+            <!--x:Uid="ImageResizer_EnableToggle"-->
+            <ToggleSwitch IsOn="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
+                          Margin="{StaticResource SmallTopMargin}" />
+
+            <TextBlock x:Uid="ImageResizer_CustomSizes"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+
+            <ListView x:Name="ImagesSizesListView" 
+                      ItemsSource="{Binding Sizes, Mode=TwoWay, Source={StaticResource ViewModel}}"
+                      Padding="0"
+                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
+                      Margin="0"
+                      >
+
+                <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:DataType="local:ResizeSize">
-                        <StackPanel Orientation="Horizontal" Spacing="4">
-                            <TextBox Text="{x:Bind Title}" Width="68"/>
-                            <ComboBox SelectedIndex="1" Width="88">
-                                <ComboBoxItem>Fill</ComboBoxItem>
-                                <ComboBoxItem>Fit</ComboBoxItem>
-                                <ComboBoxItem>Stretch</ComboBoxItem>
+                    <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize" >
+                        <StackPanel Orientation="Horizontal" Padding="0" Spacing="4">
+                            <TextBox Text="{x:Bind Path=Name, Mode=TwoWay}" 
+                                     Width="90" 
+                                     Height="35" 
+                                     Margin="{StaticResource SmallTopMargin}"/>
+
+                            <ComboBox SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}"
+                                      Width="90" 
+                                      Height="35"
+                                      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>
-                            <muxc:NumberBox Value="{x:Bind Width}"/>
-                            <TextBlock Text="x" FontWeight="SemiBold" Margin="0,4,0,0"/>
-                            <muxc:NumberBox Value="{x:Bind Height}"/>
-                            <ComboBox SelectedIndex="3">
-                                <ComboBoxItem>Centimeters</ComboBoxItem>
-                                <ComboBoxItem>Inches</ComboBoxItem>
-                                <ComboBoxItem>Percent</ComboBoxItem>
-                                <ComboBoxItem>Pixels</ComboBoxItem>
+
+                            <muxc:NumberBox Value="{x:Bind Path=Width, Mode=TwoWay}" 
+                                            Width="68"
+                                            Height="34"
+                                            Margin="{StaticResource SmallTopMargin}"/>
+
+                            <TextBlock Text="x" 
+                                       FontWeight="SemiBold" 
+                                       TextAlignment="Center" 
+                                       Margin="{StaticResource SmallTopMargin}" 
+                                       Width="25" 
+                                       Height="35"/>
+
+                            <muxc:NumberBox Value="{x:Bind Path=Height, Mode=TwoWay}" 
+                                            Width="68" 
+                                            Height="34"
+                                            Margin="{StaticResource SmallTopMargin}"/>
+
+                            <ComboBox SelectedIndex="{Binding Path=Unit, Mode=TwoWay}"
+                                      Width="90" 
+                                      Height="35"
+                                      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" Background="Transparent" Click="RemoveButton_Click">
-                                <Button.Content>
-                                    <FontIcon Opacity="0.8" Glyph="&#xE74D;"/>
-                                </Button.Content>
-                            </Button>
+                            <AppBarButton x:Name="RemoveButton" 
+                                          Background="Transparent" 
+                                          Command = "{Binding DeleteImageSizeEventHandler, Source={StaticResource ViewModel}}"
+                                          CommandParameter="{Binding Id}"                                          
+                                          Icon="Delete" 
+                                          Width="52" 
+                                          Height="32"
+                                          Margin="{StaticResource SmallTopMargin}" Padding="0,0,50,100" UseLayoutRounding="False"/>
                         </StackPanel>
                     </DataTemplate>
                 </ListView.ItemTemplate>
-            </ListView>-->
+            </ListView>
 
-            <Button x:Name="AddSizeButton" Content="Add new size" Margin="{StaticResource SmallTopMargin}"/>
+
+            <StackPanel Orientation="Horizontal">
+                <AppBarButton Icon="Add"
+                              x:Name="AddSizeButton"
+                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}" 
+                              Label="Add Size"
+                              Margin="{StaticResource SmallTopMargin}"
+                              Command = "{Binding AddImageSizeEventHandler, Source={StaticResource ViewModel}}"
+                          />
+            </StackPanel>
 
             <TextBlock Text="Encoding" 
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
             <ComboBox Header="Fallback encoder"
-                          SelectedIndex="1"
+                          SelectedIndex="{Binding Path=Encoder, Mode=TwoWay, Source={StaticResource ViewModel}}"
                           MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}">
-                <ComboBoxItem>BMP Encoder</ComboBoxItem>
-                <ComboBoxItem>GIF Encoder</ComboBoxItem>
-                <ComboBoxItem>JPEG Encoder</ComboBoxItem>
-                <ComboBoxItem>PNG Encoder</ComboBoxItem>
-                <ComboBoxItem>TIFF Encoder</ComboBoxItem>
-                <ComboBoxItem>WMPhoto Encoder</ComboBoxItem>
+                          Margin="{StaticResource SmallTopMargin}"
+                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}">
+                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_PNG" />
+                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_BMP" />
+                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_JPEG" />
+                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_TIFF" />
+                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_WMPhoto" />
+                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_GIF" />
             </ComboBox>
 
+
             <muxc:NumberBox Header="JPEG Quality level"
                             Minimum="0"
                             Maximum="100"
-                            Value="90"
+                            Value="{ Binding Mode=TwoWay, Path=JPEGQualityLevel, Source={StaticResource ViewModel}}"
                             MinWidth="240"
                             SpinButtonPlacementMode="Inline"
                             HorizontalAlignment="Left"
-                            Margin="{StaticResource SmallTopMargin}" />
+                            Margin="{StaticResource SmallTopMargin}" 
+                            IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"/>
 
             <ComboBox Header="PNG interlacing"
-                          SelectedIndex="0"
+                          SelectedIndex="{ Binding Mode=TwoWay, Path=PngInterlaceOption, Source={StaticResource ViewModel}}"
                           MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}">
-                <ComboBoxItem>Default</ComboBoxItem>
-                <ComboBoxItem>On</ComboBoxItem>
-                <ComboBoxItem>Off</ComboBoxItem>
+                          Margin="{StaticResource SmallTopMargin}"
+                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}">
+                <ComboBoxItem x:Uid="Default"/>
+                <ComboBoxItem x:Uid="On"/>
+                <ComboBoxItem x:Uid="Off"/>
             </ComboBox>
 
             <ComboBox Header="TIFF Compression"
-                          SelectedIndex="0"
+                          SelectedIndex="{ Binding Mode=TwoWay, Path=TiffCompressOption, Source={StaticResource ViewModel}}"
                           MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}">
-                <ComboBoxItem>Default</ComboBoxItem>
-                <ComboBoxItem>None</ComboBoxItem>
-                <ComboBoxItem>CCITT3</ComboBoxItem>
-                <ComboBoxItem>CCITT4</ComboBoxItem>
-                <ComboBoxItem>LZW</ComboBoxItem>
-                <ComboBoxItem>RLE</ComboBoxItem>
-                <ComboBoxItem>Zip</ComboBoxItem>
+                          Margin="{StaticResource SmallTopMargin}"
+                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}">
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Default"/>
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_None"/>
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT3"/>
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT4"/>
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_LZW"/>
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_RLE"/>
+                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Zip"/>
             </ComboBox>
 
             <TextBlock Text="File" 
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-
-            <TextBox  Header="Filename format"
-                      Text="%1 (%2)"
-                      HorizontalAlignment="Left"
-                      MinWidth="240"
-                      Margin="{StaticResource SmallTopMargin}"/>
-
             <TextBlock Text="The following parameters can be used:"
-                       Margin="{StaticResource SmallTopBottomMargin}"/>
+                           Margin="{StaticResource SmallTopBottomMargin}"/>
 
             <TextBlock FontSize="12">
                 <Run FontWeight="Bold">%1</Run>
@@ -167,11 +247,20 @@
                 <Run>  -  Actual width</Run>
             </TextBlock>
 
-            <CheckBox Content="Use original date modified" 
+            <TextBox  Header="Filename format"
+                      Text="{ Binding Mode=TwoWay, Path=FileName, Source={StaticResource ViewModel}}"
+                      HorizontalAlignment="Left"
+                      MinWidth="240"
+                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
                       Margin="{StaticResource SmallTopMargin}"/>
+
+            <CheckBox Content="Use original date modified"
+                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
+                      Margin="{StaticResource SmallTopMargin}"
+                      IsChecked="{Binding Mode=TwoWay, Path=KeepDateModified, Source={StaticResource ViewModel}}"/>
         </StackPanel>
 
-        <StackPanel
+        <StackPanel 
             x:Name="SidePanel"
             Orientation="Vertical"
             HorizontalAlignment="Left"
@@ -179,19 +268,26 @@
             Grid.Column="1">
 
             <TextBlock 
-                Text="About this feature"
+                x:Uid="About_This_Feature"
                 Style="{StaticResource SettingsGroupTitleStyle}"
                 Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <HyperlinkButton Content="Module overview"/>
+            <HyperlinkButton 
+                x:Uid="Module_overview"
+                NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/imageresizer/README.md"/>
+
+            <HyperlinkButton x:Uid="Give_Feedback"
+                             NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
 
             <TextBlock 
-                Text="Attribution"
+                x:Uid="AttributionTitle"
                 Style="{StaticResource SettingsGroupTitleStyle}" />
 
             <HyperlinkButton 
-                Content="Brice Lams's Image Resizer" 
+                Content="Brice Lambson" 
                 NavigateUri="https://github.com/bricelam/ImageResizer/" />
+
         </StackPanel>
+
     </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml.cs

@@ -9,11 +9,12 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 {
     public sealed partial class ImageResizerPage : Page
     {
-        public ImageResizerViewModel ViewModel { get; } = new ImageResizerViewModel();
+        public ImageResizerViewModel ViewModel { get; set;  }
 
         public ImageResizerPage()
         {
             InitializeComponent();
+            ViewModel = new ImageResizerViewModel();
         }
     }
 }

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -43,7 +43,8 @@
         </Grid.RowDefinitions>
 
         <StackPanel Orientation="Vertical">
-            <TextBlock x:Uid="PowerLauncher_Description" Style="{StaticResource BodyTextBlockStyle}"
+            <TextBlock x:Uid="PowerLauncher_Description"
+                       Style="{StaticResource BodyTextBlockStyle}"
                        TextWrapping="Wrap"/>
 
             <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher"