#130 (hopefully) merged

PixiEditor/App.xaml

@@ -17,6 +17,7 @@
                 <ResourceDictionary Source="Styles/DarkCheckboxStyle.xaml" />
                 <ResourceDictionary Source="Styles/ListSwitchButtonStyle.xaml" />
                 <ResourceDictionary Source="Styles/LabelStyles.xaml" />
+                <ResourceDictionary Source="Styles/PixiListBoxItemStyle.xaml" />
                 <ResourceDictionary Source="Styles/AvalonDock/DarkBrushes.xaml" />
                 <ResourceDictionary Source="Styles/AvalonDock/Themes/Menu/DarkBrushes.xaml" />
                 <ResourceDictionary Source="Styles/AvalonDock/Themes/OverlayButtons.xaml" />
@@ -28,4 +29,4 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
-</Application>
+</Application>

PixiEditor/Exceptions/CorruptedFileException.cs

@@ -6,7 +6,7 @@ namespace PixiEditor.Exceptions
     public class CorruptedFileException : Exception
     {
         public CorruptedFileException()
-            : base("Selected file is invalid or corrupted.")
+            : base("The file you've chosen might be corrupted.")
         {
         }
 

PixiEditor/Helpers/Behaviours/TextBoxFocusBehavior.cs

@@ -1,5 +1,4 @@
-using System.Text.RegularExpressions;
-using System.Windows;
+using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Interactivity;
@@ -8,27 +7,42 @@ namespace PixiEditor.Helpers.Behaviours
 {
     internal class TextBoxFocusBehavior : Behavior<TextBox>
     {
-        // Using a DependencyProperty as the backing store for FillSize.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty SelectOnFocusProperty =
+        public static readonly DependencyProperty SelectOnMouseClickProperty =
             DependencyProperty.Register(
-                nameof(SelectOnFocus),
+                nameof(SelectOnMouseClick),
                 typeof(bool),
                 typeof(TextBoxFocusBehavior),
-                new PropertyMetadata(true));
+                new PropertyMetadata(false));
 
-        public static readonly DependencyProperty NextControlProperty =
-            DependencyProperty.Register(nameof(NextControl), typeof(FrameworkElement), typeof(TextBoxFocusBehavior));
+        public static readonly DependencyProperty ConfirmOnEnterProperty =
+            DependencyProperty.Register(
+                nameof(ConfirmOnEnter),
+                typeof(bool),
+                typeof(TextBoxFocusBehavior),
+                new PropertyMetadata(false));
 
-        public FrameworkElement NextControl
+        public static readonly DependencyProperty DeselectOnFocusLossProperty =
+            DependencyProperty.Register(
+                nameof(DeselectOnFocusLoss),
+                typeof(bool),
+                typeof(TextBoxFocusBehavior),
+                new PropertyMetadata(false));
+
+        public bool SelectOnMouseClick
         {
-            get => (FrameworkElement)GetValue(NextControlProperty);
-            set => SetValue(NextControlProperty, value);
+            get => (bool)GetValue(SelectOnMouseClickProperty);
+            set => SetValue(SelectOnMouseClickProperty, value);
         }
 
-        public bool SelectOnFocus
+        public bool ConfirmOnEnter
+        {
+            get => (bool)GetValue(ConfirmOnEnterProperty);
+            set => SetValue(ConfirmOnEnterProperty, value);
+        }
+        public bool DeselectOnFocusLoss
         {
-            get => (bool)GetValue(SelectOnFocusProperty);
-            set => SetValue(SelectOnFocusProperty, value);
+            get => (bool)GetValue(DeselectOnFocusLossProperty);
+            set => SetValue(DeselectOnFocusLossProperty, value);
         }
 
         protected override void OnAttached()
@@ -36,6 +50,7 @@ namespace PixiEditor.Helpers.Behaviours
             base.OnAttached();
             AssociatedObject.GotKeyboardFocus += AssociatedObjectGotKeyboardFocus;
             AssociatedObject.GotMouseCapture += AssociatedObjectGotMouseCapture;
+            AssociatedObject.LostFocus += AssociatedObject_LostFocus;
             AssociatedObject.PreviewMouseLeftButtonDown += AssociatedObjectPreviewMouseLeftButtonDown;
             AssociatedObject.KeyUp += AssociatedObject_KeyUp;
         }
@@ -45,6 +60,7 @@ namespace PixiEditor.Helpers.Behaviours
             base.OnDetaching();
             AssociatedObject.GotKeyboardFocus -= AssociatedObjectGotKeyboardFocus;
             AssociatedObject.GotMouseCapture -= AssociatedObjectGotMouseCapture;
+            AssociatedObject.LostFocus -= AssociatedObject_LostFocus;
             AssociatedObject.PreviewMouseLeftButtonDown -= AssociatedObjectPreviewMouseLeftButtonDown;
             AssociatedObject.KeyUp -= AssociatedObject_KeyUp;
         }
@@ -52,10 +68,8 @@ namespace PixiEditor.Helpers.Behaviours
         // Converts number to proper format if enter is clicked and moves focus to next object
         private void AssociatedObject_KeyUp(object sender, KeyEventArgs e)
         {
-            if (e.Key != Key.Enter)
-            {
+            if (e.Key != Key.Enter || !ConfirmOnEnter)
                 return;
-            }
 
             RemoveFocus();
         }
@@ -63,13 +77,6 @@ namespace PixiEditor.Helpers.Behaviours
         private void RemoveFocus()
         {
             DependencyObject scope = FocusManager.GetFocusScope(AssociatedObject);
-
-            if (NextControl != null)
-            {
-                FocusManager.SetFocusedElement(scope, NextControl);
-                return;
-            }
-
             FrameworkElement parent = (FrameworkElement)AssociatedObject.Parent;
 
             while (parent != null && parent is IInputElement element && !element.Focusable)
@@ -78,13 +85,14 @@ namespace PixiEditor.Helpers.Behaviours
             }
 
             FocusManager.SetFocusedElement(scope, parent);
+            Keyboard.ClearFocus();
         }
 
         private void AssociatedObjectGotKeyboardFocus(
             object sender,
             KeyboardFocusChangedEventArgs e)
         {
-            if (SelectOnFocus)
+            if (SelectOnMouseClick || e.KeyboardDevice.IsKeyDown(Key.Tab))
                 AssociatedObject.SelectAll();
         }
 
@@ -92,12 +100,21 @@ namespace PixiEditor.Helpers.Behaviours
             object sender,
             MouseEventArgs e)
         {
-            if (SelectOnFocus)
+            if (SelectOnMouseClick)
                 AssociatedObject.SelectAll();
         }
 
+        private void AssociatedObject_LostFocus(object sender, RoutedEventArgs e)
+        {
+            if (DeselectOnFocusLoss)
+                AssociatedObject.Select(0, 0);
+        }
+
         private void AssociatedObjectPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
+            if (!SelectOnMouseClick)
+                return;
+
             if (!AssociatedObject.IsKeyboardFocusWithin)
             {
                 AssociatedObject.Focus();

PixiEditor/Helpers/Converters/EqualityBoolToVisibilityConverter.cs

@@ -9,7 +9,9 @@ namespace PixiEditor.Helpers.Converters
     {
         public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
+            if (value == null)
+                return false;
             return value.Equals(parameter) ? Visibility.Visible : Visibility.Collapsed;
         }
     }
-}
+}

PixiEditor/Helpers/Converters/KeyToStringConverter.cs

@@ -11,7 +11,11 @@ namespace PixiEditor.Helpers.Converters
         {
             if (value is Key key)
             {
-                return InputKeyHelpers.GetCharFromKey(key);
+                return key switch
+                {
+                    Key.Space => "Space",
+                    _ => InputKeyHelpers.GetCharFromKey(key),
+                };
             }
             else if (value is ModifierKeys)
             {
@@ -23,4 +27,4 @@ namespace PixiEditor.Helpers.Converters
             }
         }
     }
-}
+}

PixiEditor/Models/Dialogs/ConfirmationDialog.cs

@@ -11,8 +11,7 @@ namespace PixiEditor.Models.Dialogs
         {
             ConfirmationPopup popup = new ConfirmationPopup
             {
-                Body = message,
-                Topmost = true
+                Body = message
             };
             if (popup.ShowDialog().GetValueOrDefault())
             {
@@ -38,4 +37,4 @@ namespace PixiEditor.Models.Dialogs
             return ConfirmationType.Canceled;
         }
     }
-}
+}

PixiEditor/Models/Dialogs/ExportFileDialog.cs

@@ -1,5 +1,5 @@
-using System.Windows;
-using PixiEditor.Views;
+using PixiEditor.Views;
+using System.Windows;
 
 namespace PixiEditor.Models.Dialogs
 {
@@ -58,7 +58,7 @@ namespace PixiEditor.Models.Dialogs
 
         public override bool ShowDialog()
         {
-            SaveFilePopup popup = new SaveFilePopup
+            ExportFilePopup popup = new ExportFilePopup
             {
                 SaveWidth = FileWidth,
                 SaveHeight = FileHeight
@@ -74,4 +74,4 @@ namespace PixiEditor.Models.Dialogs
             return (bool)popup.DialogResult;
         }
     }
-}
+}

PixiEditor/Models/Dialogs/NoticeDialog.cs

@@ -4,28 +4,15 @@ namespace PixiEditor.Models.Dialogs
 {
     public static class NoticeDialog
     {
-        public static void Show(string message)
-        {
-            NoticePopup popup = new ()
-            {
-                Body = message,
-                Title = string.Empty,
-                Topmost = true
-            };
-
-            popup.ShowDialog();
-        }
-
         public static void Show(string message, string title)
         {
-            NoticePopup popup = new ()
+            NoticePopup popup = new()
             {
                 Body = message,
-                Title = title,
-                Topmost = true
+                Title = title
             };
 
             popup.ShowDialog();
         }
     }
-}
+}

PixiEditor/Models/IO/Exporter.cs

@@ -60,13 +60,6 @@ namespace PixiEditor.Models.IO
             // If OK on dialog has been clicked
             if (info.ShowDialog())
             {
-                // If sizes are incorrect
-                if (info.FileWidth < bitmap.Width || info.FileHeight < bitmap.Height)
-                {
-                    MessageBox.Show("Incorrect height or width value", "Error", MessageBoxButton.OK, MessageBoxImage.Error);
-                    return;
-                }
-
                 SaveAsPng(info.FilePath, info.FileWidth, info.FileHeight, bitmap);
             }
         }
@@ -119,7 +112,7 @@ namespace PixiEditor.Models.IO
             }
             catch (Exception err)
             {
-                MessageBox.Show(err.ToString(), "Error", MessageBoxButton.OK, MessageBoxImage.Error);
+                NoticeDialog.Show(err.ToString(), "Error");
             }
         }
     }

PixiEditor/Styles/DarkCheckboxStyle.xaml

@@ -11,9 +11,9 @@
                 <ControlTemplate TargetType="CheckBox">
                     <BulletDecorator Background="Transparent">
                         <BulletDecorator.Bullet>
-                            <Border x:Name="Border" Width="20" Height="20" CornerRadius="2" Background="#FF1B1B1B"
+                            <Border x:Name="Border" Width="18" Height="18" CornerRadius="2" Background="#FF1B1B1B"
                                     BorderThickness="1">
-                                <Path Width="9" Height="9" x:Name="CheckMark" SnapsToDevicePixels="False" Stroke="#FF0077C9" StrokeThickness="2" Data="M 0 4 L 3 8 8 0" />
+                                <Path Width="9" Height="9" x:Name="CheckMark" SnapsToDevicePixels="False" Stroke="#FF0077C9" StrokeThickness="1.5" Data="M 0 4 L 3 8 8 0" />
                             </Border>
                         </BulletDecorator.Bullet>
                         <ContentPresenter Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"/>
@@ -43,4 +43,4 @@
             </Setter.Value>
         </Setter>
     </Style>
-</ResourceDictionary>
+</ResourceDictionary>

PixiEditor/Styles/LabelStyles.xaml

@@ -5,7 +5,20 @@
     <Style TargetType="Label" x:Key="BaseLabel">
         <Setter Property="Foreground" Value="White"/>
     </Style>
-    
+
+    <Style x:Key="SettingsHeader" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+        <Setter Property="FontSize" Value="15"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="FontWeight" Value="DemiBold"/>
+    </Style>
+
+    <Style x:Key="SettingsText" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+        <Setter Property="FontSize" Value="12"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+    </Style>
+
     <Style x:Key="Header1" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
         <Setter Property="FontSize" Value="36"/>
         <Setter Property="Margin" Value="20"/>
@@ -19,4 +32,4 @@
     <Style x:Key="Paragraph" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
         <Setter Property="Margin" Value="0 10 0 10"/>
     </Style>
-</ResourceDictionary>
+</ResourceDictionary>

PixiEditor/Styles/PixiListBoxItemStyle.xaml

@@ -0,0 +1,26 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style TargetType="ListBoxItem" x:Key="PixiListBoxItemStyle">
+        <Setter Property="OverridesDefaultStyle" Value="True"/>
+        <Setter Property="Foreground" Value="White"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="FontSize" Value="15"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ListBoxItem">
+                    <Border x:Name="Border" Padding="15,7" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
+                        <ContentPresenter Content="{TemplateBinding Content}"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="Background" Value="{StaticResource AlmostLightModeAccentColor}"/>
+                        </Trigger>
+                        <Trigger Property="IsSelected" Value="True">
+                            <Setter Property="Background" Value="#B00022"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

PixiEditor/Styles/ThemeColors.xaml

@@ -7,4 +7,5 @@
     <SolidColorBrush x:Key="DarkerAccentColor" Color="#202020" />
     <SolidColorBrush x:Key="BrighterAccentColor" Color="#3F3F46" />
     <SolidColorBrush x:Key="AlmostLightModeAccentColor" Color="#4F4F4F" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="SelectionColor" Color="#999" />
+</ResourceDictionary>

PixiEditor/Styles/ThemeStyle.xaml

@@ -8,7 +8,7 @@
     <Style TargetType="Button" x:Key="BaseDarkButton">
         <Setter Property="Background" Value="#404040" />
         <Setter Property="Foreground" Value="White" />
-        <Setter Property="FontSize" Value="22" />
+        <Setter Property="FontSize" Value="15" />
         <Setter Property="SnapsToDevicePixels" Value="True" />
         <Setter Property="Template">
             <Setter.Value>
@@ -41,6 +41,8 @@
     <Style TargetType="Button" x:Key="DarkRoundButton" BasedOn="{StaticResource BaseDarkButton}">
         <Setter Property="OverridesDefaultStyle" Value="True" />
         <Setter Property="Background" Value="#303030" />
+        <Setter Property="Height" Value="28"/>
+        <Setter Property="Width" Value="70"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
@@ -143,6 +145,7 @@
     <Style TargetType="TextBox" x:Key="DarkTextBoxStyle">
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Foreground" Value="Snow" />
+        <Setter Property="SelectionBrush" Value="{StaticResource SelectionColor}" />
 
         <Setter Property="Template">
             <Setter.Value>
@@ -261,4 +264,4 @@
             </Setter.Value>
         </Setter>
     </Style>
-</ResourceDictionary>
+</ResourceDictionary>

PixiEditor/ViewModels/ImportFilePopupViewModel.cs

@@ -1,5 +1,4 @@
-using Microsoft.Win32;
-using PixiEditor.Exceptions;
+using PixiEditor.Exceptions;
 using PixiEditor.Helpers;
 using System;
 using System.IO;
@@ -15,53 +14,19 @@ namespace PixiEditor.ViewModels
         private int importHeight = 16;
 
         private int importWidth = 16;
-
-        private string pathButtonBorder = "#f08080";
-
-        private bool pathIsCorrect;
-
         public ImportFilePopupViewModel()
         {
             CloseButtonCommand = new RelayCommand(CloseWindow);
             DragMoveCommand = new RelayCommand(MoveWindow);
-            ChoosePathCommand = new RelayCommand(ChoosePath);
-            OkCommand = new RelayCommand(OkButton, CanClickOk);
+            OkCommand = new RelayCommand(OkButton);
         }
 
         public RelayCommand CloseButtonCommand { get; set; }
 
         public RelayCommand DragMoveCommand { get; set; }
 
-        public RelayCommand ChoosePathCommand { get; set; }
-
         public RelayCommand OkCommand { get; set; }
 
-        public string PathButtonBorder
-        {
-            get => pathButtonBorder;
-            set
-            {
-                if (pathButtonBorder != value)
-                {
-                    pathButtonBorder = value;
-                    RaisePropertyChanged("PathButtonBorder");
-                }
-            }
-        }
-
-        public bool PathIsCorrect
-        {
-            get => pathIsCorrect;
-            set
-            {
-                if (pathIsCorrect != value)
-                {
-                    pathIsCorrect = value;
-                    RaisePropertyChanged("PathIsCorrect");
-                }
-            }
-        }
-
         public string FilePath
         {
             get => filePath;
@@ -71,7 +36,7 @@ namespace PixiEditor.ViewModels
                 {
                     filePath = value;
                     CheckForPath(value);
-                    RaisePropertyChanged("FilePath");
+                    RaisePropertyChanged(nameof(FilePath));
                 }
             }
         }
@@ -84,7 +49,7 @@ namespace PixiEditor.ViewModels
                 if (importWidth != value)
                 {
                     importWidth = value;
-                    RaisePropertyChanged("ImportWidth");
+                    RaisePropertyChanged(nameof(ImportWidth));
                 }
             }
         }
@@ -97,33 +62,7 @@ namespace PixiEditor.ViewModels
                 if (importHeight != value)
                 {
                     importHeight = value;
-                    RaisePropertyChanged("ImportHeight");
-                }
-            }
-        }
-
-        /// <summary>
-        ///     Command that handles Path choosing to save file.
-        /// </summary>
-        /// <param name="parameter">Binding parameter.</param>
-        private void ChoosePath(object parameter)
-        {
-            OpenFileDialog path = new OpenFileDialog
-            {
-                Title = "Import path",
-                CheckPathExists = true,
-                Filter = "Image Files|*.png;*.jpeg;*.jpg"
-            };
-            if (path.ShowDialog() == true)
-            {
-                if (string.IsNullOrEmpty(path.FileName) == false)
-                {
-                    CheckForPath(path.FileName);
-                }
-                else
-                {
-                    PathButtonBorder = "#f08080";
-                    PathIsCorrect = false;
+                    RaisePropertyChanged(nameof(ImportHeight));
                 }
             }
         }
@@ -134,8 +73,6 @@ namespace PixiEditor.ViewModels
             {
                 try
                 {
-                    PathButtonBorder = "#b8f080";
-                    PathIsCorrect = true;
                     filePath = path;
                     BitmapImage bitmap = new BitmapImage(new Uri(path));
                     ImportHeight = bitmap.PixelHeight;
@@ -168,10 +105,5 @@ namespace PixiEditor.ViewModels
             ((Window)parameter).DialogResult = true;
             CloseButton(parameter);
         }
-
-        private bool CanClickOk(object property)
-        {
-            return PathIsCorrect;
-        }
     }
-}
+}

PixiEditor/ViewModels/SaveFilePopupViewModel.cs

@@ -8,51 +8,17 @@ namespace PixiEditor.ViewModels
     {
         private string _filePath;
 
-
-        private string _pathButtonBorder = "#f08080";
-
-
-        private bool _pathIsCorrect;
-
         public SaveFilePopupViewModel()
         {
             CloseButtonCommand = new RelayCommand(CloseWindow);
             DragMoveCommand = new RelayCommand(MoveWindow);
-            ChoosePathCommand = new RelayCommand(ChoosePath);
-            OkCommand = new RelayCommand(OkButton, CanClickOk);
+            OkCommand = new RelayCommand(OkButton);
         }
 
         public RelayCommand CloseButtonCommand { get; set; }
         public RelayCommand DragMoveCommand { get; set; }
-        public RelayCommand ChoosePathCommand { get; set; }
         public RelayCommand OkCommand { get; set; }
 
-        public string PathButtonBorder
-        {
-            get => _pathButtonBorder;
-            set
-            {
-                if (_pathButtonBorder != value)
-                {
-                    _pathButtonBorder = value;
-                    RaisePropertyChanged("PathButtonBorder");
-                }
-            }
-        }
-
-        public bool PathIsCorrect
-        {
-            get => _pathIsCorrect;
-            set
-            {
-                if (_pathIsCorrect != value)
-                {
-                    _pathIsCorrect = value;
-                    RaisePropertyChanged("PathIsCorrect");
-                }
-            }
-        }
-
         public string FilePath
         {
             get => _filePath;
@@ -69,7 +35,7 @@ namespace PixiEditor.ViewModels
         /// <summary>
         ///     Command that handles Path choosing to save file
         /// </summary>
-        private void ChoosePath(object parameter)
+        private string ChoosePath()
         {
             SaveFileDialog path = new SaveFileDialog
             {
@@ -82,16 +48,10 @@ namespace PixiEditor.ViewModels
             {
                 if (string.IsNullOrEmpty(path.FileName) == false)
                 {
-                    PathButtonBorder = "#b8f080";
-                    PathIsCorrect = true;
-                    FilePath = path.FileName;
-                }
-                else
-                {
-                    PathButtonBorder = "#f08080";
-                    PathIsCorrect = false;
+                    return path.FileName;
                 }
             }
+            return null;
         }
 
         private void CloseWindow(object parameter)
@@ -107,13 +67,12 @@ namespace PixiEditor.ViewModels
 
         private void OkButton(object parameter)
         {
+            string path = ChoosePath();
+            if (path == null)
+                return;
+            FilePath = path;
             ((Window)parameter).DialogResult = true;
             CloseButton(parameter);
         }
-
-        private bool CanClickOk(object property)
-        {
-            return PathIsCorrect;
-        }
     }
 }

PixiEditor/ViewModels/SettingsWindowViewModel.cs

@@ -10,20 +10,6 @@ namespace PixiEditor.ViewModels
 {
     public class SettingsWindowViewModel : ViewModelBase
     {
-        public RelayCommand SelectCategoryCommand { get; set; }
-
-        private string selectedCategory = "General";
-
-        public string SelectedCategory
-        {
-            get => selectedCategory;
-            set
-            {
-                selectedCategory = value;
-                RaisePropertyChanged(nameof(SelectedCategory));
-            }
-        }
-
         public bool ShowUpdateTab
         {
             get
@@ -41,15 +27,6 @@ namespace PixiEditor.ViewModels
         public SettingsWindowViewModel()
         {
             SettingsSubViewModel = new SettingsViewModel(this);
-            SelectCategoryCommand = new RelayCommand(SelectCategory);
-        }
-
-        private void SelectCategory(object parameter)
-        {
-            if (parameter is not null && parameter is string value)
-            {
-                SelectedCategory = value;
-            }
         }
     }
-}
+}

PixiEditor/ViewModels/SubViewModels/Main/DocumentViewModel.cs

@@ -8,7 +8,8 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
 {
     public class DocumentViewModel : SubViewModel<ViewModelMain>
     {
-        public const string ConfirmationDialogMessage = "Document was modified. Do you want to save changes?";
+        public const string ConfirmationDialogTitle = "Unsaved changes";
+        public const string ConfirmationDialogMessage = "The document has been modified. Do you want to save changes?";
 
         public RelayCommand CenterContentCommand { get; set; }
 
@@ -61,7 +62,7 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
         {
             if (!document.ChangesSaved)
             {
-                ConfirmationType result = ConfirmationDialog.Show(ConfirmationDialogMessage);
+                ConfirmationType result = ConfirmationDialog.Show(ConfirmationDialogMessage, ConfirmationDialogTitle);
                 if (result == ConfirmationType.Yes)
                 {
                     Owner.FileSubViewModel.SaveDocument(false);

PixiEditor/ViewModels/SubViewModels/Main/FileViewModel.cs

@@ -80,7 +80,7 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
 
             if (!File.Exists(path))
             {
-                NoticeDialog.Show("The file does no longer exist at that path");
+                NoticeDialog.Show("The file does not exist", "Failed to open the file");
                 RecentlyOpened.Remove(path);
                 return;
             }
@@ -176,7 +176,7 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             }
             catch (CorruptedFileException ex)
             {
-                NoticeDialog.Show(ex.Message, "Failed to open file.");
+                NoticeDialog.Show(ex.Message, "Failed to open the file");
             }
             catch (OldFileFormatException)
             {

PixiEditor/ViewModels/SubViewModels/Main/UpdateViewModel.cs

@@ -127,11 +127,9 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             }
             catch (Win32Exception)
             {
-                MessageBox.Show(
+                NoticeDialog.Show(
                     "Couldn't update without administrator rights.",
-                    "Insufficient permissions",
-                    MessageBoxButton.OK,
-                    MessageBoxImage.Error);
+                    "Insufficient permissions");
             }
         }
 
@@ -185,7 +183,7 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
                 }
                 catch (System.Net.Http.HttpRequestException)
                 {
-                    NoticeDialog.Show("Could not check if there's an update available");
+                    NoticeDialog.Show("Could not check if there is an update available", "Update check failed");
                 }
 
                 AskToInstall();
@@ -210,4 +208,4 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             return selectedChannel;
         }
     }
-}
+}

PixiEditor/ViewModels/ViewModelMain.cs

@@ -163,45 +163,45 @@ namespace PixiEditor.ViewModels
             ShortcutController = new ShortcutController(
                     new ShortcutGroup(
                         "Tools",
-                        CreateToolShortcut<PenTool>(Key.B, "Select Pen Tool"),
-                        CreateToolShortcut<EraserTool>(Key.E, "Select Eraser Tool"),
-                        CreateToolShortcut<ColorPickerTool>(Key.O, "Select Color Picker Tool"),
-                        CreateToolShortcut<RectangleTool>(Key.R, "Select Rectangle Tool"),
-                        CreateToolShortcut<CircleTool>(Key.C, "Select Circle Tool"),
-                        CreateToolShortcut<LineTool>(Key.L, "Select Line Tool"),
-                        CreateToolShortcut<FloodFillTool>(Key.G, "Select Flood Fill Tool"),
-                        CreateToolShortcut<BrightnessTool>(Key.U, "Select Brightness Tool"),
-                        CreateToolShortcut<MoveTool>(Key.V, "Select Move Tool"),
-                        CreateToolShortcut<SelectTool>(Key.M, "Select Select Tool"),
-                        CreateToolShortcut<ZoomTool>(Key.Z, "Select Zoom Tool"),
-                        CreateToolShortcut<MoveViewportTool>(Key.Space, "Select Viewport Move Tool"),
-                        CreateToolShortcut<MagicWandTool>(Key.W, "Select Magic Wand Tool"),
+                        CreateToolShortcut<PenTool>(Key.B, "Pen"),
+                        CreateToolShortcut<EraserTool>(Key.E, "Eraser"),
+                        CreateToolShortcut<ColorPickerTool>(Key.O, "Color picker"),
+                        CreateToolShortcut<RectangleTool>(Key.R, "Rectangle"),
+                        CreateToolShortcut<CircleTool>(Key.C, "Ellipse"),
+                        CreateToolShortcut<LineTool>(Key.L, "Line"),
+                        CreateToolShortcut<FloodFillTool>(Key.G, "Flood fill"),
+                        CreateToolShortcut<BrightnessTool>(Key.U, "Brightness"),
+                        CreateToolShortcut<MoveTool>(Key.V, "Move selection"),
+                        CreateToolShortcut<SelectTool>(Key.M, "Select"),
+                        CreateToolShortcut<ZoomTool>(Key.Z, "Zoom"),
+                        CreateToolShortcut<MoveViewportTool>(Key.Space, "Move viewport"),
+                        CreateToolShortcut<MagicWandTool>(Key.W, "Magic wand"),
                         new Shortcut(Key.OemPlus, ViewportSubViewModel.ZoomCommand, "Zoom in", 1),
                         new Shortcut(Key.OemMinus, ViewportSubViewModel.ZoomCommand, "Zoom out", -1),
-                        new Shortcut(Key.OemOpenBrackets, ToolsSubViewModel.ChangeToolSizeCommand, "Decrease Tool Size", -1),
-                        new Shortcut(Key.OemCloseBrackets, ToolsSubViewModel.ChangeToolSizeCommand, "Increase Tool Size", 1)),
+                        new Shortcut(Key.OemOpenBrackets, ToolsSubViewModel.ChangeToolSizeCommand, "Decrease tool size", -1),
+                        new Shortcut(Key.OemCloseBrackets, ToolsSubViewModel.ChangeToolSizeCommand, "Increase tool size", 1)),
                     new ShortcutGroup(
                         "Editor",
-                        new Shortcut(Key.X, ColorsSubViewModel.SwapColorsCommand, "Swap primary and secondary color"),
+                        new Shortcut(Key.X, ColorsSubViewModel.SwapColorsCommand, "Swap primary and secondary colors"),
                         new Shortcut(Key.Y, UndoSubViewModel.RedoCommand, "Redo", modifier: ModifierKeys.Control),
                         new Shortcut(Key.Z, UndoSubViewModel.UndoCommand, "Undo", modifier: ModifierKeys.Control),
-                        new Shortcut(Key.D, SelectionSubViewModel.DeselectCommand, "Deselect all command", modifier: ModifierKeys.Control),
-                        new Shortcut(Key.A, SelectionSubViewModel.SelectAllCommand, "Select all command", modifier: ModifierKeys.Control),
+                        new Shortcut(Key.D, SelectionSubViewModel.DeselectCommand, "Clear selection", modifier: ModifierKeys.Control),
+                        new Shortcut(Key.A, SelectionSubViewModel.SelectAllCommand, "Select all", modifier: ModifierKeys.Control),
                         new Shortcut(Key.C, ClipboardSubViewModel.CopyCommand, "Copy", modifier: ModifierKeys.Control),
                         new Shortcut(Key.V, ClipboardSubViewModel.PasteCommand, "Paste", modifier: ModifierKeys.Control),
                         new Shortcut(Key.J, ClipboardSubViewModel.DuplicateCommand, "Duplicate", modifier: ModifierKeys.Control),
                         new Shortcut(Key.X, ClipboardSubViewModel.CutCommand, "Cut", modifier: ModifierKeys.Control),
-                        new Shortcut(Key.Delete, DocumentSubViewModel.DeletePixelsCommand, "Delete selected pixels"),
-                        new Shortcut(Key.I, DocumentSubViewModel.OpenResizePopupCommand, "Resize document", modifier: ModifierKeys.Control | ModifierKeys.Shift),
+                        new Shortcut(Key.Delete, DocumentSubViewModel.DeletePixelsCommand, "Clear selected area"),
+                        new Shortcut(Key.I, DocumentSubViewModel.OpenResizePopupCommand, "Resize image", modifier: ModifierKeys.Control | ModifierKeys.Shift),
                         new Shortcut(Key.C, DocumentSubViewModel.OpenResizePopupCommand, "Resize canvas", "canvas", ModifierKeys.Control | ModifierKeys.Shift),
-                        new Shortcut(Key.F11, SystemCommands.MaximizeWindowCommand, "Maximize")),
+                        new Shortcut(Key.F11, SystemCommands.MaximizeWindowCommand, "Maximize window")),
                     new ShortcutGroup(
                         "File",
-                        new Shortcut(Key.O, FileSubViewModel.OpenFileCommand, "Open a Document", modifier: ModifierKeys.Control),
-                        new Shortcut(Key.S, FileSubViewModel.ExportFileCommand, "Export as image", modifier: ModifierKeys.Control | ModifierKeys.Shift | ModifierKeys.Alt),
-                        new Shortcut(Key.S, FileSubViewModel.SaveDocumentCommand, "Save Document", modifier: ModifierKeys.Control),
-                        new Shortcut(Key.S, FileSubViewModel.SaveDocumentCommand, "Save Document As New", "AsNew", ModifierKeys.Control | ModifierKeys.Shift),
-                        new Shortcut(Key.N, FileSubViewModel.OpenNewFilePopupCommand, "Create new Document", modifier: ModifierKeys.Control)),
+                        new Shortcut(Key.O, FileSubViewModel.OpenFileCommand, "Open image", modifier: ModifierKeys.Control),
+                        new Shortcut(Key.S, FileSubViewModel.ExportFileCommand, "Export image", modifier: ModifierKeys.Control | ModifierKeys.Shift | ModifierKeys.Alt),
+                        new Shortcut(Key.S, FileSubViewModel.SaveDocumentCommand, "Save", modifier: ModifierKeys.Control),
+                        new Shortcut(Key.S, FileSubViewModel.SaveDocumentCommand, "Save as new", "AsNew", ModifierKeys.Control | ModifierKeys.Shift),
+                        new Shortcut(Key.N, FileSubViewModel.OpenNewFilePopupCommand, "Create new image", modifier: ModifierKeys.Control)),
                     new ShortcutGroup(
                         "Layers",
                         new Shortcut(Key.F2, LayersSubViewModel.RenameLayerCommand, "Rename active layer", BitmapManager.ActiveDocument?.ActiveLayerGuid)),
@@ -215,7 +215,7 @@ namespace PixiEditor.ViewModels
             ShortcutController.ShortcutGroups.Add(
                     new ShortcutGroup(
                         "Misc",
-                        new Shortcut(Key.F1, MiscSubViewModel.OpenShortcutWindowCommand, "Open the shortcut window", true)));
+                        new Shortcut(Key.F1, MiscSubViewModel.OpenShortcutWindowCommand, "Open shortcuts window", true)));
 
             BitmapManager.PrimaryColor = ColorsSubViewModel.PrimaryColor;
         }
@@ -321,7 +321,7 @@ namespace PixiEditor.ViewModels
 
             if (!BitmapManager.ActiveDocument.ChangesSaved)
             {
-                result = ConfirmationDialog.Show(DocumentViewModel.ConfirmationDialogMessage);
+                result = ConfirmationDialog.Show(DocumentViewModel.ConfirmationDialogMessage, DocumentViewModel.ConfirmationDialogTitle);
                 if (result == ConfirmationType.Yes)
                 {
                     FileSubViewModel.SaveDocument(false);

PixiEditor/Views/Dialogs/ConfirmationPopup.xaml

@@ -3,9 +3,13 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:system="clr-namespace:System;assembly=System.Runtime" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
-        mc:Ignorable="d"
-        Title="ConfirmationPopup" Name="popup" WindowStartupLocation="CenterScreen" Height="200" Width="500"
+        xmlns:system="clr-namespace:System;assembly=System.Runtime" 
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
+        mc:Ignorable="d" d:Title="Unsaved changes"
+        Name="popup" WindowStartupLocation="CenterScreen" 
+        Height="180" Width="400" MinHeight="180" MinWidth="400"
         WindowStyle="None">
 
     <WindowChrome.WindowChrome>
@@ -13,40 +17,40 @@
                       ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
     </WindowChrome.WindowChrome>
 
-    <Grid Background="{StaticResource AccentColor}" Focusable="True">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition Height="34*" />
-            <RowDefinition Height="21*" />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource AccentColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviours:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        <TextBlock Grid.Row="1" Text="{Binding Body, ElementName=popup}" HorizontalAlignment="Center"
-                   VerticalAlignment="Center" FontSize="18" Foreground="White" />
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{Binding DataContext.CancelCommand, ElementName=popup}" />
-        </DockPanel>
-        <StackPanel Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center"
-                    Margin="0,0,10,10">
-            <Button Margin="10,0,10,0" Height="30" Width="60"
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="{Binding ElementName=popup, Path=Title}" CloseCommand="{Binding DataContext.CancelCommand, ElementName=popup}" />
+
+        <StackPanel DockPanel.Dock="Bottom" Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center"
+                    Margin="0,0,10,15">
+            <Button Margin="10,0,10,0" Width="70" IsDefault="True"
                     Command="{Binding Path=DataContext.SetResultAndCloseCommand, ElementName=popup}"
                     Style="{StaticResource DarkRoundButton}" Content="Yes">
                 <Button.CommandParameter>
                     <system:Boolean>True</system:Boolean>
                 </Button.CommandParameter>
             </Button>
-            <Button Height="30" Width="60"
+            <Button Width="70"
                     Command="{Binding Path=DataContext.SetResultAndCloseCommand, ElementName=popup}"
                     Style="{StaticResource DarkRoundButton}" Content="No">
                 <Button.CommandParameter>
                     <system:Boolean>False</system:Boolean>
                 </Button.CommandParameter>
             </Button>
-            <Button Margin="10,0,10,0" Height="30" Width="80" Style="{StaticResource DarkRoundButton}" Content="Cancel"
+            <Button Margin="10,0,10,0" Width="70" Style="{StaticResource DarkRoundButton}" Content="Cancel"
                     Command="{Binding DataContext.CancelCommand, ElementName=popup}" />
         </StackPanel>
-    </Grid>
-</Window>
+
+        <TextBlock Grid.Row="1" 
+                   Text="{Binding Body, ElementName=popup}" 
+                   HorizontalAlignment="Center" Margin="20,0" 
+                   TextWrapping="WrapWithOverflow" 
+                   TextTrimming="WordEllipsis"
+                   TextAlignment="Center"
+                   VerticalAlignment="Center" FontSize="15" Foreground="White" d:Text="The document has been modified. Do you want to save changes?"/>
+    </DockPanel>
+</Window>

PixiEditor/Views/Dialogs/DialogTitleBar.xaml

@@ -0,0 +1,26 @@
+<UserControl x:Class="PixiEditor.Views.Dialogs.DialogTitleBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:PixiEditor.Views.Dialogs"
+             mc:Ignorable="d"
+             x:Name="uc"
+             Height="35" d:DesignWidth="300">
+    <Grid Grid.Row="0" Background="{StaticResource MainColor}">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition/>
+            <ColumnDefinition/>
+        </Grid.ColumnDefinitions>
+        <TextBlock 
+            TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" 
+            Text="{Binding ElementName=uc, Path=TitleText}"
+            Foreground="White" 
+            FontSize="15" 
+            Margin="5,0,0,0" 
+            Grid.Column="0" Grid.ColumnSpan="2"/>
+        <Button Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
+                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
+                    Command="{Binding ElementName=uc, Path=CloseCommand}" />
+    </Grid>
+</UserControl>

PixiEditor/Views/Dialogs/DialogTitleBar.xaml.cs

@@ -0,0 +1,32 @@
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace PixiEditor.Views.Dialogs
+{
+    public partial class DialogTitleBar : UserControl
+    {
+        public static readonly DependencyProperty TitleTextProperty =
+            DependencyProperty.Register(nameof(TitleText), typeof(string), typeof(DialogTitleBar), new PropertyMetadata(""));
+
+        public static readonly DependencyProperty CloseCommandProperty =
+            DependencyProperty.Register(nameof(CloseCommand), typeof(ICommand), typeof(DialogTitleBar), new PropertyMetadata(null));
+
+        public ICommand CloseCommand
+        {
+            get { return (ICommand)GetValue(CloseCommandProperty); }
+            set { SetValue(CloseCommandProperty, value); }
+        }
+
+        public string TitleText
+        {
+            get { return (string)GetValue(TitleTextProperty); }
+            set { SetValue(TitleTextProperty, value); }
+        }
+
+        public DialogTitleBar()
+        {
+            InitializeComponent();
+        }
+    }
+}

PixiEditor/Views/Dialogs/ExportFilePopup.xaml

@@ -0,0 +1,42 @@
+<Window x:Class="PixiEditor.Views.ExportFilePopup"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:PixiEditor.Views"
+        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
+        mc:Ignorable="d" BorderBrush="Black" BorderThickness="1"
+        Title="SaveFilePopup" Height="250" Width="300" WindowStyle="None" MinHeight="250" MinWidth="300"
+        WindowStartupLocation="CenterScreen" Name="saveFilePopup">
+    <WindowChrome.WindowChrome>
+        <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
+                      ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
+    </WindowChrome.WindowChrome>
+
+    <Window.CommandBindings>
+        <CommandBinding Command="{x:Static SystemCommands.CloseWindowCommand}" CanExecute="CommandBinding_CanExecute"
+                        Executed="CommandBinding_Executed_Close" />
+    </Window.CommandBindings>
+
+    <DockPanel Background="{StaticResource AccentColor}" Focusable="True">
+        <i:Interaction.Behaviors>
+            <behaviours:ClearFocusOnClickBehavior/>
+        </i:Interaction.Behaviors>
+
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Export image" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
+
+        <Button DockPanel.Dock="Bottom" Width="70" HorizontalAlignment="Center" IsDefault="True"
+                    Margin="15" Style="{StaticResource DarkRoundButton}" Content="Export" Command="{Binding OkCommand}"
+                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
+
+        <local:SizePicker Width="230" Height="125" Margin="0,30,0,0"
+            x:Name="sizePicker"
+            ChosenHeight="{Binding Path=SaveHeight, Mode=TwoWay, ElementName=saveFilePopup}"
+            ChosenWidth="{Binding Path=SaveWidth, Mode=TwoWay, ElementName=saveFilePopup}" />
+
+    </DockPanel>
+</Window>

PixiEditor/Views/Dialogs/SaveFilePopup.xaml.cs → PixiEditor/Views/Dialogs/ExportFilePopup.xaml.cs

@@ -1,23 +1,20 @@
 using PixiEditor.ViewModels;
 using System.Windows;
-using System.Windows.Input;
-
+using System.Windows.Input;
+
 namespace PixiEditor.Views
 {
-    /// <summary>
-    ///     Interaction logic for SaveFilePopup.xaml
-    /// </summary>
-    public partial class SaveFilePopup : Window
+    public partial class ExportFilePopup : Window
     {
         public static readonly DependencyProperty SaveHeightProperty =
-            DependencyProperty.Register("SaveHeight", typeof(int), typeof(SaveFilePopup), new PropertyMetadata(32));
+            DependencyProperty.Register("SaveHeight", typeof(int), typeof(ExportFilePopup), new PropertyMetadata(32));
 
 
         public static readonly DependencyProperty SaveWidthProperty =
-            DependencyProperty.Register("SaveWidth", typeof(int), typeof(SaveFilePopup), new PropertyMetadata(32));
+            DependencyProperty.Register("SaveWidth", typeof(int), typeof(ExportFilePopup), new PropertyMetadata(32));
+
+        private readonly SaveFilePopupViewModel dataContext = new SaveFilePopupViewModel();
 
-        private readonly SaveFilePopupViewModel dataContext = new SaveFilePopupViewModel();
-
         private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
         {
             e.CanExecute = true;
@@ -28,11 +25,12 @@ namespace PixiEditor.Views
             SystemCommands.CloseWindow(this);
         }
 
-        public SaveFilePopup()
+        public ExportFilePopup()
         {
             InitializeComponent();
             Owner = Application.Current.MainWindow;
             DataContext = dataContext;
+            Loaded += (_, _) => sizePicker.FocusWidthPicker();
         }
 
 

PixiEditor/Views/Dialogs/HelloTherePopup.xaml

@@ -8,7 +8,7 @@
         xmlns:uc="clr-namespace:PixiEditor.Views.UserControls"
         xmlns:local="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d" ShowInTaskbar="False"
-        Title="Hello there!" Height="662" Width="632"
+        Title="Hello there!" Height="662" Width="632" MinHeight="500" MinWidth="500"
         d:DataContext="{d:DesignInstance local:HelloTherePopup}"
         WindowStyle="None" WindowStartupLocation="CenterScreen">
 
@@ -72,7 +72,7 @@
                     Command="{x:Static SystemCommands.CloseWindowCommand}" />
         </DockPanel>
 
-        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" Margin="3,0">
             <Grid Grid.Row="1" Margin="0,30,0,0">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="90"/>

PixiEditor/Views/Dialogs/ImportFilePopup.xaml

@@ -4,9 +4,16 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:PixiEditor.Views"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         xmlns:vm="clr-namespace:PixiEditor.ViewModels"
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         mc:Ignorable="d" BorderBrush="Black" BorderThickness="1"
-        Title="ImportFilePopup" Topmost="True" ShowInTaskbar="False" Height="350" Width="300" WindowStyle="None" WindowStartupLocation="CenterScreen" Name="importFilePopup" MinHeight="350" MinWidth="300"
+        Title="ImportFilePopup" ShowInTaskbar="False" 
+        MinHeight="250" MinWidth="300" Height="250" Width="300" 
+        WindowStyle="None" 
+        WindowStartupLocation="CenterScreen" 
+        Name="importFilePopup"
         DataContext="{DynamicResource ImportFilePopupViewModel}">
     <Window.Resources>
         <vm:ImportFilePopupViewModel x:Key="ImportFilePopupViewModel" />
@@ -21,31 +28,19 @@
                         Executed="CommandBinding_Executed_Close" />
     </Window.CommandBindings>
 
-    <Grid Background="{StaticResource AccentColor}">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource AccentColor}">
+        <i:Interaction.Behaviors>
+            <behaviours:ClearFocusOnClickBehavior/>
+        </i:Interaction.Behaviors>
 
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <StackPanel Grid.Row="1">
-            <Label Height="40" Width="120" VerticalAlignment="Top" Content="Open" Foreground="Snow"
-                       HorizontalContentAlignment="Center" FontSize="24" Margin="0,10,0,0" />
-            <Button Grid.Row="1" BorderThickness="1" Foreground="Snow" Height="40" Width="160" Margin="0,30,0,0"
-                        Content="File Path" Background="#303030" BorderBrush="{Binding PathButtonBorder}"
-                        Command="{Binding ChoosePathCommand}" />
-            <StackPanel Background="{StaticResource MainColor}" Height="120" Width="225" Margin="0,30,0,0">
-                <local:SizePicker EditingEnabled="{Binding PathIsCorrect}"
-                                      ChosenWidth="{Binding ImportWidth, Mode=TwoWay}"
-                                      ChosenHeight="{Binding ImportHeight,Mode=TwoWay}" />
-            </StackPanel>
-        </StackPanel>
-        <Button Grid.Row="1" Height="30" Width="60" VerticalAlignment="Bottom" HorizontalAlignment="Right"
-                    Margin="10" Style="{StaticResource DarkRoundButton}" Content="OK" Command="{Binding OkCommand}"
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Import image" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
+        <Button DockPanel.Dock="Bottom" Width="70" HorizontalAlignment="Center" IsDefault="True"
+                    Margin="15" Style="{StaticResource DarkRoundButton}" Content="Import" Command="{Binding OkCommand}"
                     CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
-    </Grid>
-</Window>
+        <local:SizePicker x:Name="sizePicker" Width="230" Height="125" Margin="0,30,0,0"
+                                  ChosenWidth="{Binding ImportWidth, Mode=TwoWay}"
+                                  ChosenHeight="{Binding ImportHeight, Mode=TwoWay}" />
+
+    </DockPanel>
+</Window>

PixiEditor/Views/Dialogs/ImportFilePopup.xaml.cs

@@ -1,12 +1,9 @@
-using System.Windows;
+using PixiEditor.ViewModels;
+using System.Windows;
 using System.Windows.Input;
-using PixiEditor.ViewModels;
 
 namespace PixiEditor.Views
 {
-    /// <summary>
-    ///     Interaction logic for ImportFilePopup.xaml
-    /// </summary>
     public partial class ImportFilePopup : Window
     {
         private readonly ImportFilePopupViewModel dc = new ImportFilePopupViewModel();
@@ -15,6 +12,7 @@ namespace PixiEditor.Views
         {
             InitializeComponent();
             DataContext = dc;
+            Loaded += (_, _) => sizePicker.FocusWidthPicker();
         }
 
 
@@ -48,4 +46,4 @@ namespace PixiEditor.Views
             SystemCommands.CloseWindow(this);
         }
     }
-}
+}

PixiEditor/Views/Dialogs/NewFilePopup.xaml

@@ -6,9 +6,15 @@
         xmlns:local="clr-namespace:PixiEditor.Views"
         xmlns:vm="clr-namespace:PixiEditor.ViewModels"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d"
-        d:DesignHeight="600" Topmost="True" ShowInTaskbar="False" d:DesignWidth="450"
-        DataContext="{DynamicResource NewFileMenuViewModel}" WindowStyle="None" WindowStartupLocation="CenterScreen" MinHeight="300" MinWidth="400" Height="600" Width="450" Name="newFilePopup" BorderBrush="Black" BorderThickness="1">
+        ShowInTaskbar="False"
+        DataContext="{DynamicResource NewFileMenuViewModel}" 
+        WindowStyle="None" 
+        WindowStartupLocation="CenterScreen" 
+        MinHeight="250" MinWidth="300" Height="250" Width="300" 
+        Name="newFilePopup" 
+        BorderBrush="Black" BorderThickness="1">
     <Window.Resources>
         <vm:NewFileMenuViewModel x:Key="NewFileMenuViewModel" />
     </Window.Resources>
@@ -22,34 +28,24 @@
                         Executed="CommandBinding_Executed_Close" />
     </Window.CommandBindings>
 
-    <Grid Background="{StaticResource AccentColor}" Focusable="True">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource AccentColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviors:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
 
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <Label Content="New File" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Center"
-                   VerticalAlignment="Top" Foreground="White" FontSize="24" />
-        <StackPanel HorizontalAlignment="Center" Margin="0,60,0,0" Background="{StaticResource MainColor}"
-                        VerticalAlignment="Top" Grid.Row="1" Width="350" Height="150">
-            <local:SizePicker Margin="0,20" HorizontalAlignment="Center" Height="110"
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Create a new image" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}" />
+
+        <Button DockPanel.Dock="Bottom" Width="70" Margin="0,15,0,15" HorizontalAlignment="Center"
+                IsDefault="True" Content="Create" x:Name="createButton"
+                Style="{StaticResource DarkRoundButton}" 
+                Command="{Binding OkCommand}"
+                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
+
+        <local:SizePicker HorizontalAlignment="Center" Width="230" Height="125" Margin="0,30,0,0"
+                              PreserveAspectRatio="False"
                               ChosenHeight="{Binding FileHeight, Mode=TwoWay, ElementName=newFilePopup}"
                               ChosenWidth="{Binding FileWidth, Mode=TwoWay, ElementName=newFilePopup}" 
-                              x:Name="sizePicker"
-                              NextControl="{Binding ElementName=createButton}"/>
-        </StackPanel>
-        <Button VerticalAlignment="Bottom" HorizontalAlignment="Right" FontSize="20" Height="30" Width="120"
-                Style="{StaticResource DarkRoundButton}" Content="Create" Margin="0,0,10,10" Grid.Row="1"
-                Command="{Binding OkCommand}"
-                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" 
-                x:Name="createButton"/>
-    </Grid>
+                              x:Name="sizePicker"/>
+    </DockPanel>
 </Window>

PixiEditor/Views/Dialogs/NewFilePopup.xaml.cs

@@ -18,9 +18,14 @@ namespace PixiEditor.Views
         {
             InitializeComponent();
             Owner = Application.Current.MainWindow;
-            sizePicker.FocusWidthPicker();
-        }
-
+            Loaded += OnDialogShown;
+        }
+
+        private void OnDialogShown(object sender, RoutedEventArgs e)
+        {
+            sizePicker.FocusWidthPicker();
+        }
+
         public int FileHeight
         {
             get => (int)GetValue(FileHeightProperty);
@@ -43,4 +48,4 @@ namespace PixiEditor.Views
             SystemCommands.CloseWindow(this);
         }
     }
-}
+}

PixiEditor/Views/Dialogs/NoticePopup.xaml

@@ -3,9 +3,13 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:system="clr-namespace:System;assembly=System.Runtime" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
+        xmlns:system="clr-namespace:System;assembly=System.Runtime" 
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d" WindowStyle="None"
-        Title="NoticePopup" Height="200" Width="500"
+        d:Title="Notice" Height="180" Width="400" MinHeight="180" MinWidth="400"
+        WindowStartupLocation="CenterScreen"
         x:Name="popup">
 
     <WindowChrome.WindowChrome>
@@ -13,32 +17,21 @@
                       ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
     </WindowChrome.WindowChrome>
 
-    <Grid Background="{StaticResource AccentColor}" Focusable="True">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition Height="34*" />
-            <RowDefinition Height="21*" />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource AccentColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviours:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        <TextBlock Grid.Row="1" Text="{Binding Body, ElementName=popup}" TextAlignment="Center"
-                   VerticalAlignment="Center" FontSize="18" Foreground="White"
-                       TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis" />
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <TextBlock Text="{Binding Title, ElementName=popup}" 
-                       FontSize="18" Foreground="White"
-                       VerticalAlignment="Center" Margin="5,0,0,0"/>
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{Binding DataContext.CancelCommand, ElementName=popup}" />
-        </DockPanel>
-        <StackPanel Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center"
-                    Margin="0,0,10,10">
-            <Button Height="30" Width="60"
-                    Click="OkButton_Close"
-                    Style="{StaticResource DarkRoundButton}" Content="Ok">
-            </Button>
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="{Binding ElementName=popup, Path=Title}" CloseCommand="{Binding DataContext.CancelCommand, ElementName=popup}" />
+
+        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,15">
+            <Button Width="70" IsDefault="True" Click="OkButton_Close" Style="{StaticResource DarkRoundButton}" Content="Close"/>
         </StackPanel>
-    </Grid>
+
+        <TextBlock 
+            Grid.Row="1" Text="{Binding Body, ElementName=popup}" TextAlignment="Center"
+            VerticalAlignment="Center" FontSize="15" Foreground="White" Margin="20,0" d:Text="The file does not exist"
+            TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis" />
+    </DockPanel>
 </Window>

PixiEditor/Views/Dialogs/PopupTemplate.xaml

@@ -1,35 +0,0 @@
-<Window x:Class="PixiEditor.Views.PopupTemplate"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:local="clr-namespace:PixiEditor.Views"
-        mc:Ignorable="d" BorderBrush="Black" BorderThickness="1"
-        Title="ResizeDocumentPopup" WindowStartupLocation="CenterScreen" Height="200" Width="400" WindowStyle="None">
-
-    <WindowChrome.WindowChrome>
-        <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
-                      ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
-    </WindowChrome.WindowChrome>
-
-    <Window.CommandBindings>
-        <CommandBinding Command="{x:Static SystemCommands.CloseWindowCommand}" CanExecute="CommandBinding_CanExecute"
-                        Executed="CommandBinding_Executed_Close" />
-    </Window.CommandBindings>
-
-    <Grid Background="{StaticResource AccentColor}">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <Button Grid.Row="1" Height="30" Width="60" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10"
-                Style="{StaticResource DarkRoundButton}" Content="OK" Command="{Binding OkCommand}"
-                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
-    </Grid>
-</Window>

PixiEditor/Views/Dialogs/PopupTemplate.xaml.cs

@@ -1,26 +0,0 @@
-using System.Windows;
-using System.Windows.Input;
-
-namespace PixiEditor.Views
-{
-    /// <summary>
-    ///     Interaction logic for PopupTemplate.xaml
-    /// </summary>
-    public partial class PopupTemplate : Window
-    {
-        public PopupTemplate()
-        {
-            InitializeComponent();
-        }
-
-        private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
-        {
-            e.CanExecute = true;
-        }
-
-        private void CommandBinding_Executed_Close(object sender, ExecutedRoutedEventArgs e)
-        {
-            SystemCommands.CloseWindow(this);
-        }
-    }
-}

PixiEditor/Views/Dialogs/ResizeCanvasPopup.xaml

@@ -6,10 +6,14 @@
         xmlns:local="clr-namespace:PixiEditor.Views"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
-        mc:Ignorable="d" x:Name="window"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         xmlns:base="clr-namespace:PixiEditor.Views"
-        Title="ResizeCanvasPopup" Topmost="True" ShowInTaskbar="False" WindowStartupLocation="CenterScreen"
-        Height="450" Width="400" WindowStyle="None">
+        mc:Ignorable="d" 
+        x:Name="window"
+        Title="ResizeCanvasPopup" ShowInTaskbar="False" WindowStartupLocation="CenterScreen"
+        Height="420" Width="320" MinHeight="380" MinWidth="300" 
+        WindowStyle="None"
+        >
 
     <WindowChrome.WindowChrome>
         <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
@@ -21,38 +25,37 @@
                         Executed="CommandBinding_Executed_Close" />
     </Window.CommandBindings>
 
-    <Grid Background="{StaticResource AccentColor}" Focusable="True">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource AccentColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviors:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <Label Grid.Row="1" VerticalAlignment="Top" Foreground="White" FontSize="24" HorizontalAlignment="Center"
-               Content="Resize Canvas" />
-        <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0" Background="{StaticResource MainColor}"
-                    VerticalAlignment="Top" Grid.Row="1" Width="300" Height="310">
-            <local:SizePicker Margin="0,10,0,0" Width="300" Height="180"
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Resize canvas" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}" />
+
+        <Button DockPanel.Dock="Bottom" Width="70" HorizontalAlignment="Center" Margin="15"
+                Style="{StaticResource DarkRoundButton}" Content="Resize" Click="Button_Click" IsDefault="True" />
+
+        <StackPanel HorizontalAlignment="Center" Margin="0,30,0,0" Background="{StaticResource MainColor}"
+                    VerticalAlignment="Top" Grid.Row="1" Width="250" Height="300">
+            <local:SizePicker Margin="0,18,0,0" 
+                              Width="240"
+                              Height="170"
+                              x:Name="sizePicker"
                               ChosenHeight="{Binding NewAbsoluteHeight, Mode=TwoWay, ElementName=window}"
-                              ChosenWidth="{Binding NewAbsoluteWidth, Mode=TwoWay, ElementName=window}"
+                              ChosenWidth="{Binding NewAbsoluteWidth, Mode=TwoWay, ElementName=window}" 
                               ChosenPercentageSize="{Binding NewPercentageSize, Mode=TwoWay, ElementName=window}"
                               SelectedUnit="{ Binding NewSelectedUnit, Mode=TwoWay, ElementName=window}"
                               SizeUnitSelectionVisibility="Visible"
                               />
-            <Separator Margin="10,20,10,0" Background="{StaticResource AccentColor}" Height="1" />
-            <Label Content="Anchor point:" Foreground="White" Margin="10,5,0,0" HorizontalAlignment="Left"
-                   FontSize="16" />
-            <local:AnchorPointPicker AnchorPoint="{Binding Path=SelectedAnchorPoint, Mode=TwoWay, ElementName=window}"
-                                     Width="78" Margin="45,-25,0,0" Height="78" />
+            <Separator Margin="10,5,10,0" Background="{StaticResource AccentColor}" Height="1" />
+            <DockPanel>
+                <Label Content="Anchor point:" Foreground="White" Margin="25,5,0,0" HorizontalAlignment="Left"
+                       FontSize="12" />
+                <local:AnchorPointPicker AnchorPoint="{Binding Path=SelectedAnchorPoint, Mode=TwoWay, ElementName=window}"
+                                         HorizontalAlignment="Right"
+                                         Width="78" Margin="0,10,30,0" Height="78" />
+            </DockPanel>
         </StackPanel>
-        <Button Grid.Row="1" Height="30" Width="60" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10"
-                Style="{StaticResource DarkRoundButton}" Content="OK" Click="Button_Click" />
-    </Grid>
-</base:ResizeablePopup>
+    </DockPanel>
+</base:ResizeablePopup>

PixiEditor/Views/Dialogs/ResizeCanvasPopup.xaml.cs

@@ -19,6 +19,7 @@ namespace PixiEditor.Views
         {
             InitializeComponent();
             Owner = Application.Current.MainWindow;
+            Loaded += (_, _) => sizePicker.FocusWidthPicker();
         }
 
         public AnchorPoint SelectedAnchorPoint

PixiEditor/Views/Dialogs/ResizeDocumentPopup.xaml

@@ -6,10 +6,12 @@
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         xmlns:local="clr-namespace:PixiEditor.Views" 
         xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d" x:Name="window"
+        Title="ResizeDocumentPopup" ShowInTaskbar="False" WindowStartupLocation="CenterScreen"
+        Height="300" Width="320" MaxHeight="300" MaxWidth="300"
         xmlns:base="clr-namespace:PixiEditor.Views"
-        Title="ResizeDocumentPopup" Topmost="True" ShowInTaskbar="False" WindowStartupLocation="CenterScreen"
-        Height="400" Width="400" WindowStyle="None">
+        WindowStyle="None">
 
     <WindowChrome.WindowChrome>
         <WindowChrome CaptionHeight="32" GlassFrameThickness="0.1"
@@ -21,33 +23,26 @@
                         Executed="CommandBinding_Executed_Close" />
     </Window.CommandBindings>
 
-    <Grid Background="{StaticResource AccentColor}" Focusable="True">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource AccentColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviors:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <Label Grid.Row="1" VerticalAlignment="Top" Foreground="White" FontSize="24" HorizontalAlignment="Center"
-               Content="Resize document" />
-        <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0" Background="{StaticResource MainColor}"
-                    VerticalAlignment="Top" Grid.Row="1" Width="350" Height="250">
-            <local:SizePicker Margin="0,20" Width="300" Height="180"
-                              ChosenHeight="{Binding NewAbsoluteHeight, Mode=TwoWay, ElementName=window}"
-                              ChosenWidth="{Binding NewAbsoluteWidth, Mode=TwoWay, ElementName=window}"
-                              ChosenPercentageSize="{Binding NewPercentageSize, Mode=TwoWay, ElementName=window}"
-                              SelectedUnit="{ Binding NewSelectedUnit, Mode=TwoWay, ElementName=window}"
-                              SizeUnitSelectionVisibility="Visible"
-                              />
-        </StackPanel>
-        <Button Grid.Row="1" Height="30" Width="60" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10"
-                Style="{StaticResource DarkRoundButton}" Content="OK" Click="Button_Click" />
-    </Grid>
-</base:ResizeablePopup>
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Resize image" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
+
+        <Button DockPanel.Dock="Bottom" Width="70" HorizontalAlignment="Center" Margin="15"
+                Style="{StaticResource DarkRoundButton}" Content="Resize" Click="Button_Click" IsDefault="True" />
+
+        <local:SizePicker HorizontalAlignment="Center" Width="240" Height="180" Margin="0,30,0,0"
+            x:Name="sizePicker"
+            PreserveAspectRatio="True"
+            ChosenHeight="{Binding NewAbsoluteHeight, Mode=TwoWay, ElementName=window}"
+            ChosenWidth="{Binding NewAbsoluteWidth, Mode=TwoWay, ElementName=window}" 
+            ChosenPercentageSize="{Binding NewPercentageSize, Mode=TwoWay, ElementName=window}"
+            SelectedUnit="{ Binding NewSelectedUnit, Mode=TwoWay, ElementName=window}"
+            SizeUnitSelectionVisibility="Visible"
+            />
+
+    </DockPanel>
+    </base:ResizeablePopup>

PixiEditor/Views/Dialogs/ResizeDocumentPopup.xaml.cs

@@ -13,6 +13,7 @@ namespace PixiEditor.Views
             InitializeComponent();
             Owner = Application.Current.MainWindow;
             DataContext = this;
+            Loaded += (_, _) => sizePicker.FocusWidthPicker();
         }
 
         private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)

PixiEditor/Views/Dialogs/SaveFilePopup.xaml

@@ -1,52 +0,0 @@
-<Window x:Class="PixiEditor.Views.SaveFilePopup"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:local="clr-namespace:PixiEditor.Views"
-        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
-        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
-        mc:Ignorable="d" BorderBrush="Black" BorderThickness="1"
-        Title="SaveFilePopup" Height="300" Width="400" WindowStyle="None" MinHeight="300" MinWidth="400"
-        WindowStartupLocation="CenterScreen" Name="saveFilePopup">
-    <WindowChrome.WindowChrome>
-        <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
-                      ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
-    </WindowChrome.WindowChrome>
-
-    <Window.CommandBindings>
-        <CommandBinding Command="{x:Static SystemCommands.CloseWindowCommand}" CanExecute="CommandBinding_CanExecute"
-                        Executed="CommandBinding_Executed_Close" />
-    </Window.CommandBindings>
-
-    <Grid Background="{StaticResource AccentColor}" Focusable="True">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
-        <i:Interaction.Behaviors>
-            <behaviours:ClearFocusOnClickBehavior/>
-        </i:Interaction.Behaviors>
-
-        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        
-        <TextBlock Grid.Row="1" Foreground="Snow" VerticalAlignment="Top" HorizontalAlignment="Center"
-                       Text="File settings" TextAlignment="Center" Margin="0,10,0,0" FontSize="24" />
-            <StackPanel Orientation="Vertical" Grid.Row="1" Margin="0,50,0,0">
-                <local:SizePicker Width="250" Height="120"
-                                  ChosenHeight="{Binding Path=SaveHeight, Mode=TwoWay, ElementName=saveFilePopup}"
-                                  ChosenWidth="{Binding Path=SaveWidth, Mode=TwoWay, ElementName=saveFilePopup}" 
-                                  />
-                <Button Foreground="Snow" Height="40" Width="160" Margin="0,10,0,0" Content="Path"
-                        Background="{StaticResource MainColor}" BorderBrush="{Binding PathButtonBorder}"
-                        Command="{Binding ChoosePathCommand}" />
-            </StackPanel>
-        <Button Grid.Row="1" Height="30" Width="60" VerticalAlignment="Bottom" HorizontalAlignment="Right"
-                    Margin="10" Style="{StaticResource DarkRoundButton}" Content="OK" Command="{Binding OkCommand}"
-                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
-    </Grid>
-</Window>

PixiEditor/Views/Dialogs/SettingsWindow.xaml

@@ -3,17 +3,27 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:local="clr-namespace:PixiEditor.Views.Dialogs" xmlns:viewmodels="clr-namespace:PixiEditor.ViewModels" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:views="clr-namespace:PixiEditor.Views" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls"
+        xmlns:local="clr-namespace:PixiEditor.Views.Dialogs" 
+        xmlns:sys="clr-namespace:System;assembly=System.Runtime"
+        xmlns:viewmodels="clr-namespace:PixiEditor.ViewModels" 
+        xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" 
+        xmlns:views="clr-namespace:PixiEditor.Views" 
+        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls"
+        xmlns:dial="clr-namespace:PixiEditor.Views.Dialogs"
         mc:Ignorable="d"
         Title="Settings" Name="window" 
-        Height="600" Width="800"
-        MinHeight="350" MinWidth="600"
+        Height="500" Width="640"
+        MinHeight="500" MinWidth="640"
         WindowStyle="None" DataContext="{DynamicResource SettingsWindowViewModel}"
+        WindowStartupLocation="CenterScreen"
         BorderBrush="Black" BorderThickness="1">
     <Window.Resources>
         <viewmodels:SettingsWindowViewModel x:Key="SettingsWindowViewModel"/>
         <BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
     </Window.Resources>
+
     <WindowChrome.WindowChrome>
         <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
                       ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
@@ -24,88 +34,126 @@
                         Executed="CommandBinding_Executed_Close" />
     </Window.CommandBindings>
 
-    <Grid Background="{StaticResource MainColor}" Focusable="True">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="200"/>
-            <ColumnDefinition Width="147*"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="35" />
-            <RowDefinition />
-        </Grid.RowDefinitions>
+    <DockPanel Background="{StaticResource MainColor}" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviours:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        
-        <DockPanel Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Background="{StaticResource MainColor}">
-            <Label Foreground="White" FontSize="16">Settings</Label>
-            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
-                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
-                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
-        </DockPanel>
-        <StackPanel Grid.Row="1" Grid.Column="0">
-            <Button Style="{StaticResource AccentDarkRoundButton}" Margin="10 5 10 5"
-                    Command="{Binding SelectCategoryCommand}" CommandParameter="General">General</Button>
-            <Button Style="{StaticResource AccentDarkRoundButton}" Margin="10 5 10 5" 
-                    Command="{Binding SelectCategoryCommand}" CommandParameter="Updates"
-                    Visibility="{Binding ShowUpdateTab, Converter={StaticResource BoolToVisibilityConverter}}">Updates</Button>
-            <Button Style="{StaticResource AccentDarkRoundButton}" Margin="10 5 10 5" 
-                    Command="{Binding SelectCategoryCommand}" CommandParameter="Discord">Discord</Button>
-        </StackPanel>
+
+        <dial:DialogTitleBar DockPanel.Dock="Top"
+            TitleText="Settings" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
+
+        <ListBox DockPanel.Dock="Left" SelectedIndex="0" x:Name="pages" 
+                 Background="Transparent" BorderThickness="0" Width="150" ItemContainerStyle="{StaticResource PixiListBoxItemStyle}">
+            <ListBox.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock Margin="10 5 10 5" FontSize="15" Foreground="White" Text="{Binding}"/>
+                </DataTemplate>
+            </ListBox.ItemTemplate>
+            <ListBox.ItemsSource>
+                <x:Array Type="{x:Type sys:String}">
+                    <sys:String>General</sys:String>
+                    <sys:String>Discord</sys:String>
+                </x:Array>
+            </ListBox.ItemsSource>
+        </ListBox>
+
         <Grid Grid.Row="1" Grid.Column="1" Background="{StaticResource AccentColor}">
-            <Grid Visibility="{Binding SelectedCategory, Converter={converters:EqualityBoolToVisibilityConverter},
-            ConverterParameter='General'}">
-                <StackPanel Orientation="Vertical">
-                    <CheckBox Content="Show Document Preview in Taskbar" Margin="25,30,0,0"
-                                  IsChecked="{Binding SettingsSubViewModel.General.ImagePreviewInTaskbar}"/>
-                    <Label Content="File" Style="{StaticResource Header1}"/>
-                    <StackPanel Orientation="Vertical" Margin="50 0 50 0">
-                        <CheckBox Content="Show Startup Window" 
-                                  IsChecked="{Binding SettingsSubViewModel.File.ShowStartupWindow}"/>
-                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
-                            <Label Content="Max Saved Opened Recently:" ToolTip="How many documents are shown under File > Recent. Default: 8" Style="{StaticResource BaseLabel}"/>
-                            <views:NumberInput Min="0" FontSize="16" Value="{Binding SettingsSubViewModel.File.MaxOpenedRecently, Mode=TwoWay}" Width="40"/>
-                        </StackPanel>
-                        <Label Content="Default new file size:" Style="{StaticResource Header2}" Margin="0 20 0 20"/>
-                        <StackPanel Orientation="Horizontal" Margin="40,0,0,0">
-                            <Label Content="Width:" Style="{StaticResource BaseLabel}"/>
-                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" 
-                                             Width="70" Height="25" MaxSize="9999"/>
-                            <Label Content="Height:" Style="{StaticResource BaseLabel}"/>
-                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" 
-                                             Width="70" Height="25" MaxSize="9999"/>
-                        </StackPanel>
-                    </StackPanel>
-                </StackPanel>
-            </Grid>
-            <Grid Visibility="{Binding SelectedCategory, Converter={converters:EqualityBoolToVisibilityConverter},
-            ConverterParameter='Updates'}">
-                <StackPanel Orientation="Vertical">
-                    <Label Style="{StaticResource Header1}" Content="Auto-updates"/>
-                    <StackPanel Orientation="Vertical" Margin="50 0 50 0">
-                        <CheckBox IsChecked="{Binding SettingsSubViewModel.Update.CheckUpdatesOnStartup}" Content="Check updates on startup"/>
-                        <StackPanel Orientation="Horizontal">
-                        <Label VerticalAlignment="Center" Content="Update source" Style="{StaticResource BaseLabel}"/>
-                            <ComboBox Width="110" Margin="0 10 0 10" HorizontalAlignment="Left" 
-                                      ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
-                                      SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
-                        </StackPanel>
-                    </StackPanel>
-                </StackPanel>
-            </Grid>
-            <Grid Visibility="{Binding SelectedCategory, Converter={converters:EqualityBoolToVisibilityConverter},
-            ConverterParameter='Discord'}">
-                <StackPanel Orientation="Vertical">
-                    <Label Style="{StaticResource Header1}" Content="Rich Presence"/>
-                    <StackPanel Orientation="Vertical" Margin="50 0 50 0">
-                        <CheckBox Margin="5" IsChecked="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" Content="Enabled"/>
-                        <CheckBox Margin="5" IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentName}" Content="Show Document Name"/>
-                        <CheckBox Margin="5" IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentSize}" Content="Show Document Size"/>
-                        <CheckBox Margin="5" IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}" Content="Show Layer Count"/>
-                        <usercontrols:DiscordRPPreview Margin="5" State="{Binding SettingsSubViewModel.Discord.StatePreview}" Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}" Width="280" IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
-                    </StackPanel>
-                </StackPanel>
+            <Grid Visibility="{Binding SelectedItem, ElementName=pages, Converter={converters:EqualityBoolToVisibilityConverter},
+            ConverterParameter='General'}" Margin="15,10" Tag="27">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="15"/>
+                    <ColumnDefinition Width="230"/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                </Grid.RowDefinitions>
+
+                <Label Grid.Row="0" Grid.ColumnSpan="2" Style="{StaticResource SettingsHeader}">Misc</Label>
+
+                <CheckBox Grid.Row="1" Grid.Column="1"
+                          VerticalAlignment="Center"
+                          IsChecked="{Binding SettingsSubViewModel.File.ShowStartupWindow}">Show startup window</CheckBox>
+
+                <CheckBox Grid.Row="2" Grid.Column="1"
+                          VerticalAlignment="Center"
+                          IsChecked="{Binding SettingsSubViewModel.General.ImagePreviewInTaskbar}">Show image preview in taskbar</CheckBox>
+
+                <Label Grid.Row="3" Grid.Column="1" Style="{StaticResource SettingsText}"
+                       ToolTip="How many documents are shown under File > Recent. Default: 8">Recent file list length</Label>
+                <views:NumberInput Grid.Row="3" Grid.Column="2" 
+                                   Min="0" FontSize="12" HorizontalAlignment="Left"
+                                   Value="{Binding SettingsSubViewModel.File.MaxOpenedRecently, Mode=TwoWay}" Height="19" Width="40"/>
+
+                <Label Grid.Row="4" Grid.ColumnSpan="2"  Style="{StaticResource SettingsHeader}">Default new file size</Label>
+
+                <Label Grid.Row="5" Grid.Column="1" Style="{StaticResource SettingsText}">Width</Label>
+                <views:SizeInput Grid.Row="5" Grid.Column="2" 
+                                 Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" 
+                                 Width="70" Height="21" MaxSize="9999" HorizontalAlignment="Left"/>
+
+                <Label Grid.Row="6" Grid.Column="1" Style="{StaticResource SettingsText}">Height</Label>
+                <views:SizeInput Grid.Row="6" Grid.Column="2" 
+                                 Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" 
+                                 Width="70" Height="21" MaxSize="9999" HorizontalAlignment="Left"/>
+
+                <Label Grid.Row="7" Grid.ColumnSpan="2" Style="{StaticResource SettingsHeader}">Automatic updates</Label>
+
+                <CheckBox Grid.Row="8" Grid.Column="1" VerticalAlignment="Center"
+                    IsChecked="{Binding SettingsSubViewModel.Update.CheckUpdatesOnStartup}">Check updates on startup</CheckBox>
+
+                <Label Grid.Row="9" Grid.Column="1" Style="{StaticResource SettingsText}">Update stream</Label>
+                <ComboBox Grid.Row="9" Grid.Column="2" VerticalAlignment="Center"
+                    Width="110" Height="22" HorizontalAlignment="Left"
+                    ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
+                    SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
             </Grid>
+
+            <StackPanel Visibility="{Binding SelectedItem, ElementName=pages, Converter={converters:EqualityBoolToVisibilityConverter},
+            ConverterParameter='Discord'}" Margin="15,10">
+                <Grid Tag="27">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="15"/>
+                        <ColumnDefinition/>
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                        <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                        <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                        <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                        <RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=Tag}"/>
+                    </Grid.RowDefinitions>
+
+                    <Label Grid.Row="0" Grid.ColumnSpan="2" Style="{StaticResource SettingsHeader}">Rich Presence</Label>
+
+                    <CheckBox Grid.Row="1" Grid.Column="1" VerticalAlignment="Center"
+                    IsChecked="{Binding SettingsSubViewModel.Discord.EnableRichPresence}">Enabled</CheckBox>
+                    <CheckBox Grid.Row="2" Grid.Column="1" VerticalAlignment="Center"
+                    IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
+                    IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentName}">Show image name</CheckBox>
+                    <CheckBox Grid.Row="3" Grid.Column="1" VerticalAlignment="Center"
+                    IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
+                    IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentSize}">Show image size</CheckBox>
+                    <CheckBox Grid.Row="4" Grid.Column="1" VerticalAlignment="Center"
+                    IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
+                    IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}">Show layer count</CheckBox>
+                </Grid>
+                <usercontrols:DiscordRPPreview 
+                    Margin="15"
+                    Width="280"
+                    State="{Binding SettingsSubViewModel.Discord.StatePreview}" 
+                    Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}" 
+                    IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
+            </StackPanel>
         </Grid>
-    </Grid>
+    </DockPanel>
 </Window>

PixiEditor/Views/Dialogs/ShortcutPopup.xaml

@@ -8,11 +8,12 @@
         xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
         xmlns:shortcuts="clr-namespace:PixiEditor.Models.Controllers.Shortcuts" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls"
         mc:Ignorable="d"
-        Title="ShortcutPopup" Height="815" Width="620" WindowStyle="None"
-        MinHeight="400" MinWidth="350" Topmost="{Binding IsTopmost}">
+        WindowStartupLocation="CenterScreen"
+        Title="ShortcutPopup" Height="770" Width="620" WindowStyle="None"
+        MinHeight="770" MinWidth="620" Topmost="{Binding IsTopmost}">
     <Window.Resources>
         <BoolToVisibilityConverter x:Key="BoolToVisibility"/>
-        
+
         <Style TargetType="Border" x:Key="KeyBorder">
             <Setter Property="BorderThickness" Value="1"/>
             <Setter Property="BorderBrush" Value="{StaticResource BrighterAccentColor}"/>
@@ -23,7 +24,7 @@
         <Style TargetType="Border" x:Key="KeyBorderLast" BasedOn="{StaticResource KeyBorder}">
             <Setter Property="Margin" Value="0,3,0,3"/>
         </Style>
-        
+
         <Style TargetType="TextBlock">
             <Setter Property="Foreground" Value="White"/>
             <Setter Property="FontSize" Value="16"/>
@@ -71,7 +72,7 @@
                           WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Makes this window always on top"/>
         </DockPanel>
 
-        <TextBlock Grid.Row="1" Margin="5,0,0,0" FontSize="25" HorizontalAlignment="Center">Shortcuts</TextBlock>
+        <TextBlock Grid.Row="0" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center">Shortcuts</TextBlock>
 
         <ScrollViewer Grid.Row="3" VerticalScrollBarVisibility="Auto">
             <WrapPanel HorizontalAlignment="Center">
@@ -79,7 +80,7 @@
                     <ItemsControl.ItemTemplate>
                         <DataTemplate DataType="{x:Type shortcuts:ShortcutGroup}">
                             <StackPanel Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibility}}">
-                                <TextBlock Text="{Binding Name}" Foreground="White" FontSize="18" FontWeight="Medium" Margin="10,8,0,0"/>
+                                <TextBlock Text="{Binding Name}" Foreground="White" FontSize="15" FontWeight="Medium" Margin="10,8,0,5"/>
                                 <ItemsControl ItemsSource="{Binding Shortcuts}">
                                     <ItemsControl.ItemTemplate>
                                         <DataTemplate DataType="{x:Type shortcuts:Shortcut}">
@@ -102,7 +103,7 @@
                                                     <TextBlock Text="{Binding ShortcutKey, Converter={converters:KeyToStringConverter}}" Style="{StaticResource KeyBorderText}"/>
                                                 </Border>
 
-                                                <TextBlock Text="{Binding Description}" Foreground="#FFEEEEEE"  FontSize="14" Margin="8,0,0,0"/>
+                                                <TextBlock Text="{Binding Description}" Foreground="#FFEEEEEE" VerticalAlignment="Center" FontSize="14" Margin="8,0,0,0"/>
                                             </StackPanel>
                                         </DataTemplate>
                                     </ItemsControl.ItemTemplate>

PixiEditor/Views/Dialogs/ShortcutPopup.xaml.cs

@@ -1,8 +1,7 @@
-using System.ComponentModel;
+using PixiEditor.Models.Controllers.Shortcuts;
+using System.ComponentModel;
 using System.Windows;
-using System.Windows.Controls;
 using System.Windows.Input;
-using PixiEditor.Models.Controllers.Shortcuts;
 
 namespace PixiEditor.Views.Dialogs
 {
@@ -60,4 +59,4 @@ namespace PixiEditor.Views.Dialogs
             SystemCommands.RestoreWindow(this);
         }
     }
-}
+}

PixiEditor/Views/MainWindow.xaml

@@ -12,8 +12,13 @@
         xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
         xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
         xmlns:avalondock="https://github.com/Dirkster99/AvalonDock"
-        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
-        xmlns:avalonDockTheme="clr-namespace:PixiEditor.Styles.AvalonDock" xmlns:layerUserControls="clr-namespace:PixiEditor.Views.UserControls.Layers" xmlns:sys="clr-namespace:System;assembly=System.Runtime" d:DataContext="{d:DesignInstance Type=vm:ViewModelMain}"
+        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker" 
+        xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls" 
+        xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:avalonDockTheme="clr-namespace:PixiEditor.Styles.AvalonDock" 
+        xmlns:layerUserControls="clr-namespace:PixiEditor.Views.UserControls.Layers" 
+        xmlns:sys="clr-namespace:System;assembly=System.Runtime" 
+        d:DataContext="{d:DesignInstance Type=vm:ViewModelMain}"
         mc:Ignorable="d" WindowStyle="None" Initialized="MainWindow_Initialized"
         Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="{StaticResource MainColor}"
         WindowStartupLocation="CenterScreen" WindowState="Maximized">
@@ -125,8 +130,8 @@
                     <MenuItem Header="_Select All" Command="{Binding SelectionSubViewModel.SelectAllCommand}" InputGestureText="Ctrl+A" />
                     <MenuItem Header="_Deselect" Command="{Binding SelectionSubViewModel.DeselectCommand}" InputGestureText="Ctrl+D" />
                 </MenuItem>
-                <MenuItem Header="_Document">
-                    <MenuItem Header="_Resize Document..." Command="{Binding DocumentSubViewModel.OpenResizePopupCommand}"
+                <MenuItem Header="_Image">
+                    <MenuItem Header="Resize _Image..." Command="{Binding DocumentSubViewModel.OpenResizePopupCommand}"
                               InputGestureText="Ctrl+Shift+I" />
                     <MenuItem Header="_Resize Canvas..." Command="{Binding DocumentSubViewModel.OpenResizePopupCommand}"
                               CommandParameter="canvas" InputGestureText="Ctrl+Shift+C" />

PixiEditor/Views/UserControls/NumberInput.xaml

@@ -9,10 +9,10 @@
              d:DesignHeight="20" d:DesignWidth="40" x:Name="numberInput">
     <TextBox TextAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Focusable="True"
              InputScope="Number" MouseWheel="TextBox_MouseWheel"
-             PreviewTextInput="TextBox_PreviewTextInput" Text="{Binding ElementName=numberInput, Path=Value}">
+             PreviewTextInput="TextBox_PreviewTextInput" Text="{Binding ElementName=numberInput, Path=Value}" Padding="0" VerticalContentAlignment="Center">
         <i:Interaction.Behaviors>
-            <behaviours:TextBoxFocusBehavior/>
+            <behaviours:TextBoxFocusBehavior SelectOnMouseClick="True" ConfirmOnEnter="True"/>
             <behaviours:GlobalShortcutFocusBehavior/>
         </i:Interaction.Behaviors>
     </TextBox>
-</UserControl>
+</UserControl>

PixiEditor/Views/UserControls/SizeInput.xaml

@@ -8,7 +8,7 @@
              xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
              xmlns:validators="clr-namespace:PixiEditor.Helpers.Validators"
              mc:Ignorable="d" Foreground="White" Focusable="True"
-             d:DesignHeight="30" d:DesignWidth="160" Name="uc" LayoutUpdated="UserControlLayoutUpdated">
+             d:DesignHeight="30" d:DesignWidth="160" Name="uc">
 
     <Border BorderThickness="1" CornerRadius="3.5"
             x:Name="border"
@@ -36,6 +36,7 @@
             </Grid.ColumnDefinitions>
             <TextBox IsEnabled="{Binding IsEnabled, ElementName=uc}" HorizontalContentAlignment="Right"
                      InputScope="Number" BorderThickness="0" Background="Transparent"
+                     SelectionBrush="{StaticResource SelectionColor}"
                      Foreground="{Binding Foreground, ElementName=uc}" Focusable="True" CaretBrush="{Binding Foreground, ElementName=uc}"
                      Margin="0,0,5,0" VerticalAlignment="Center"
                      x:Name="textBox"
@@ -45,13 +46,16 @@
                      >
                 <i:Interaction.Behaviors>
                     <behaviors:GlobalShortcutFocusBehavior/>
-                    <behaviors:TextBoxFocusBehavior SelectOnFocus="{Binding SelectOnFocus, ElementName=uc}" NextControl="{Binding NextControl, ElementName=uc}"/>
+                    <behaviors:TextBoxFocusBehavior 
+                        SelectOnMouseClick="{Binding BehaveLikeSmallEmbeddedField, ElementName=uc}" 
+                        ConfirmOnEnter="{Binding BehaveLikeSmallEmbeddedField, ElementName=uc}"
+                        DeselectOnFocusLoss="True"/>
                 </i:Interaction.Behaviors>
             </TextBox>
             <Grid Grid.Column="1" Background="{Binding BorderBrush, ElementName=border}"
                   d:Background="{StaticResource BrighterAccentColor}"/>
                       <TextBlock Text="{Binding Unit, ElementName=uc, Converter={converters:EnumToStringConverter}}" TextAlignment="Right"
-                       Grid.Column="2" Margin="5,0" VerticalAlignment="Center" d:Text="%"
+                       Grid.Column="2" Margin="5,0" VerticalAlignment="Center" d:Text="px"
                        
                        />
         </Grid>

PixiEditor/Views/UserControls/SizeInput.xaml.cs

@@ -14,57 +14,20 @@ namespace PixiEditor.Views
         public static readonly DependencyProperty SizeProperty =
             DependencyProperty.Register(nameof(Size), typeof(int), typeof(SizeInput), new PropertyMetadata(1, InputSizeChanged));
 
-        public static readonly DependencyProperty PreserveAspectRatioProperty =
-            DependencyProperty.Register(
-                nameof(PreserveAspectRatio),
-                typeof(bool),
-                typeof(SizeInput));
-
-        public static readonly DependencyProperty AspectRatioValueProperty =
-            DependencyProperty.Register(
-                nameof(AspectRatioValue),
-                typeof(int),
-                typeof(SizeInput),
-                new PropertyMetadata(1));
-
-        public SizeInput AspectRatioControl
-        {
-            get { return (SizeInput)GetValue(AspectRatioControlProperty); }
-            set { SetValue(AspectRatioControlProperty, value); }
-        }
-
-        public static readonly DependencyProperty AspectRatioControlProperty =
-            DependencyProperty.Register(nameof(AspectRatioControl), typeof(SizeInput), typeof(SizeInput), new PropertyMetadata(default));
-
         public static readonly DependencyProperty MaxSizeProperty =
             DependencyProperty.Register(nameof(MaxSize), typeof(int), typeof(SizeInput), new PropertyMetadata(int.MaxValue));
 
-        public static readonly DependencyProperty SelectOnFocusProperty =
-            DependencyProperty.Register(nameof(SelectOnFocus), typeof(bool), typeof(SizeInput), new PropertyMetadata(true));
-
-        private int loadedAspectRatioSize = -1;
-
-        private int loadedSize = -1;
-        private bool blockUpdate = false;
-
-        public static readonly DependencyProperty NextControlProperty =
-            DependencyProperty.Register(nameof(NextControl), typeof(FrameworkElement), typeof(SizeInput));
+        public static readonly DependencyProperty BehaveLikeSmallEmbeddedFieldProperty =
+            DependencyProperty.Register(nameof(BehaveLikeSmallEmbeddedField), typeof(bool), typeof(SizeInput), new PropertyMetadata(true));
 
         public static readonly DependencyProperty UnitProperty =
-            DependencyProperty.Register(nameof(Unit), typeof(SizeUnit), typeof(SizeInput));
+            DependencyProperty.Register(nameof(Unit), typeof(SizeUnit), typeof(SizeInput), new PropertyMetadata(SizeUnit.Pixel));
 
         public SizeInput()
         {
-            GotKeyboardFocus += SizeInput_GotKeyboardFocus;
             InitializeComponent();
         }
 
-        public bool SelectOnFocus
-        {
-            get => (bool)GetValue(SelectOnFocusProperty);
-            set => SetValue(SelectOnFocusProperty, value);
-        }
-
         private void SizeInput_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
         {
             textBox.Focus();
@@ -82,22 +45,31 @@ namespace PixiEditor.Views
             set => SetValue(MaxSizeProperty, value);
         }
 
-        public bool PreserveAspectRatio
+        public bool BehaveLikeSmallEmbeddedField
         {
-            get => (bool)GetValue(PreserveAspectRatioProperty);
-            set => SetValue(PreserveAspectRatioProperty, value);
+            get => (bool)GetValue(BehaveLikeSmallEmbeddedFieldProperty);
+            set => SetValue(BehaveLikeSmallEmbeddedFieldProperty, value);
         }
-
-        public int AspectRatioValue
+                
+        public void FocusAndSelect()
         {
-            get => (int)GetValue(AspectRatioValueProperty);
-            set => SetValue(AspectRatioValueProperty, value);
+            textBox.Focus();
+            textBox.SelectAll();
         }
 
-        public FrameworkElement NextControl
+        private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
-            get => (FrameworkElement)GetValue(NextControlProperty);
-            set => SetValue(NextControlProperty, value);
+            if (!textBox.IsFocused)
+                textBox.Focus();
+            Point pos = Mouse.GetPosition(textBox);
+            int charIndex = textBox.GetCharacterIndexFromPoint(pos, true);
+            var charRect = textBox.GetRectFromCharacterIndex(charIndex);
+            double middleX = (charRect.Left + charRect.Right) / 2;
+            if (pos.X > middleX)
+                textBox.CaretIndex = charIndex + 1;
+            else
+                textBox.CaretIndex = charIndex;
+            e.Handled = true;
         }
 
         public SizeUnit Unit
@@ -123,44 +95,9 @@ namespace PixiEditor.Views
 
                 return;
             }
-
-            SizeInput input = ((SizeInput)d).AspectRatioControl;
-            if (input == null)
-            {
-                return;
-            }
-
-            int newVal = (int)e.NewValue;
-            if (input.PreserveAspectRatio && !input.IsFocused && !input.blockUpdate)
-            {
-                float ratio = newVal / Math.Clamp(input.loadedAspectRatioSize, 1f, float.MaxValue);
-                int newSize = (int)(input.loadedSize * ratio);
-                input.AspectRatioControl.blockUpdate = true; // Block update is used to prevent infinite feedback loop.
-                input.Size = newSize;
-            }
-
-            if (input.blockUpdate)
-            {
-                input.blockUpdate = false;
-            }
-        }
-
-        private void UserControlLayoutUpdated(object sender, EventArgs e)
-        {
-            if (loadedSize == -1)
-            {
-                loadedSize = Size;
-                loadedAspectRatioSize = AspectRatioValue;
-            }
-        }
-
-        private void Border_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
-        {
-            textBox.Focus();
-            e.Handled = true;
         }
 
-        private void Border_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
+        private void Border_MouseWheel(object sender, MouseWheelEventArgs e)
         {
             int step = e.Delta / 100;
 

PixiEditor/Views/UserControls/SizePicker.xaml

@@ -3,31 +3,46 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
              xmlns:local="clr-namespace:PixiEditor.Views"
              xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
              xmlns:enums="clr-namespace:PixiEditor.Models.Enums"
              mc:Ignorable="d"
-             d:DesignHeight="220" d:DesignWidth="300" Name="uc" Loaded="OnLoad">
+             d:DesignHeight="180" d:DesignWidth="240" Name="uc">
+    <i:Interaction.Triggers>
+        <i:EventTrigger EventName="Loaded">
+            <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=LoadedCommand}"/>
+        </i:EventTrigger>
+    </i:Interaction.Triggers>
     <UserControl.Resources>
         <Style TargetType="local:SizeInput">
             <Setter Property="HorizontalAlignment" Value="Left"/>
             <Setter Property="MaxSize" Value="9999"/>
-            <Setter Property="SelectOnFocus" Value="False"/>
-            <Setter Property="FontSize" Value="16"/>
+            <Setter Property="BehaveLikeSmallEmbeddedField" Value="False"/>
+            <Setter Property="FontSize" Value="12"/>
             <Setter Property="Margin" Value="10,0,0,0"/>
-            <Setter Property="Width" Value="130"/>
+            <Setter Property="Width" Value="120"/>
             <Setter Property="Height" Value="30"/>
         </Style>
     </UserControl.Resources>
-    <DockPanel Background="{StaticResource MainColor}">
-        
-       <DockPanel DockPanel.Dock="Top" Margin="5,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Center" 
-                   Visibility="{Binding SizeUnitSelectionVisibility, ElementName=uc}">
-            <StackPanel x:Name="UnitSelectionPanel" Orientation="Vertical" >
-                <StackPanel Orientation="Horizontal" x:Name="PercentagePanel">
-                    <RadioButton  x:Name="PercentageRb" 
+    <Border Background="{StaticResource MainColor}" VerticalAlignment="Stretch">
+        <DockPanel>
+            <Grid Height="50" HorizontalAlignment="Center" DockPanel.Dock="Top"
+                  Margin="0,20,0,0"
+                  Visibility="{Binding SizeUnitSelectionVisibility, ElementName=uc}"> 
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="100"/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition />
+                    <RowDefinition Height="20"/>
+                </Grid.RowDefinitions>
+
+                <RadioButton    Grid.Row="0" Grid.Column="0"  
+                                x:Name="PercentageRb" 
                                   Foreground="White" 
-                                  FontSize="16"
+                                  FontSize="12"
                                   GroupName="Unit"
                                   Checked="PercentageRb_Checked"
                                   VerticalContentAlignment="Center"
@@ -37,16 +52,24 @@
                                               ConverterParameter=Percentage
                                               }"
                                   >Percentage:</RadioButton>
-                    <local:SizeInput x:Name="PercentageSizePicker"
-                                    Unit="Percentage"
-                                    Size="{Binding Path=ChosenPercentageSize, ElementName=uc, Mode=TwoWay}" 
-                                     
-                                    />
-                </StackPanel>
-                <Separator Margin="10,20,10,10" Background="{StaticResource AccentColor}" Height="1" />
-                <RadioButton  x:Name="AbsoluteRb" 
+                <local:SizeInput Grid.Column="1" Grid.Row="0"
+                             x:Name="PercentageSizePicker"
+                             IsEnabled="{Binding EditingEnabled, ElementName=uc}"
+                             Size="{Binding Path=ChosenPercentageSize, ElementName=uc, Mode=TwoWay}"
+                             Unit="Percentage"
+                             >
+
+                    <i:Interaction.Triggers>
+                        <i:EventTrigger EventName="LostFocus">
+                            <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=WidthLostFocusCommand}"/>
+                        </i:EventTrigger>
+                    </i:Interaction.Triggers>
+                </local:SizeInput>
+
+                <RadioButton Grid.Row="1" Grid.Column="0"  
+                              x:Name="AbsoluteRb" 
                               Foreground="White" 
-                              FontSize="16"
+                              FontSize="12"
                               GroupName="Unit"
                               Checked="AbsoluteRb_Checked"
                               VerticalContentAlignment="Center"
@@ -55,36 +78,53 @@
                                               Converter={converters:EnumBooleanConverter}, 
                                               ConverterParameter=Pixel}"
                               >Absolute:</RadioButton>
-            </StackPanel>
-        </DockPanel>
+               
+            </Grid>
 
-        <DockPanel DockPanel.Dock="Top" Margin="5,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
-            <TextBlock Height="20" Foreground="Snow" Text="Width:" TextAlignment="Center" FontSize="16"
-                       HorizontalAlignment="Center" VerticalAlignment="Center" />
-            <local:SizeInput x:Name="WidthPicker"
-                             PreserveAspectRatio="{Binding Path=IsChecked, ElementName=aspectRatio}"
-                             AspectRatioValue="{Binding Path=ChosenHeight, ElementName=uc}"
-                             AspectRatioControl="{Binding ElementName=HeightPicker}"
-                             NextControl="{Binding ElementName=HeightPicker}"
-                             Size="{Binding Path=ChosenWidth, ElementName=uc, Mode=TwoWay}" 
-                             Unit="Pixel"
-                             />
-        </DockPanel>
-        <DockPanel DockPanel.Dock="Top" Margin="5,10,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
-            <TextBlock Height="20" Foreground="Snow" Text="Height:" TextAlignment="Center" FontSize="16"
-                       HorizontalAlignment="Center" VerticalAlignment="Center" />
-            <local:SizeInput x:Name="HeightPicker" 
-                             Margin="5,0,0,0"
-                             PreserveAspectRatio="{Binding Path=IsChecked, ElementName=aspectRatio}"
-                             AspectRatioValue="{Binding Path=ChosenWidth, ElementName=uc}"
-                             AspectRatioControl="{Binding ElementName=WidthPicker}"
-                             NextControl="{Binding NextControl, ElementName=uc}"
-                             Size="{Binding ChosenHeight, ElementName=uc, Mode=TwoWay}"
-                             Unit="Pixel"
-                             />
-        </DockPanel>
-        <DockPanel DockPanel.Dock="Top">
-            <CheckBox Name="aspectRatio" Content="Preserve aspect ratio" Foreground="White" HorizontalAlignment="Left" Margin="50,10,0,0" />
+            <Grid Height="90" HorizontalAlignment="Center" DockPanel.Dock="Top">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="40"/>
+                <ColumnDefinition/>
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+
+            <TextBlock Grid.Column="0" Grid.Row="0" Foreground="Snow" Text="Width:" VerticalAlignment="Center" HorizontalAlignment="Left" />
+            <local:SizeInput Grid.Column="1" Grid.Row="0"
+                             x:Name="WidthPicker"
+                             IsEnabled="{Binding EditingEnabled, ElementName=uc}"
+                             Size="{Binding Path=ChosenWidth, ElementName=uc, Mode=TwoWay}">
+                <i:Interaction.Triggers>
+                    <i:EventTrigger EventName="LostFocus">
+                        <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=WidthLostFocusCommand}"/>
+                    </i:EventTrigger>
+                </i:Interaction.Triggers>
+            </local:SizeInput>
+
+            <TextBlock Grid.Column="0" Grid.Row="1" Foreground="Snow" Text="Height:" VerticalAlignment="Center" HorizontalAlignment="Left"/>
+            <local:SizeInput Grid.Column="1" Grid.Row="1"
+                             x:Name="HeightPicker" 
+                             IsEnabled="{Binding EditingEnabled, ElementName=uc}"
+                             Size="{Binding ChosenHeight, ElementName=uc, Mode=TwoWay}">
+                <i:Interaction.Triggers>
+                    <i:EventTrigger EventName="LostFocus">
+                        <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=HeightLostFocusCommand}"/>
+                    </i:EventTrigger>
+                </i:Interaction.Triggers>
+            </local:SizeInput>
+
+            <CheckBox 
+                  Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2"
+                  Name="aspectRatio" 
+                  IsChecked="{Binding ElementName=uc, Path=PreserveAspectRatio}"
+                  Content="Preserve aspect ratio" 
+                  Foreground="White" 
+                  HorizontalAlignment="Left" 
+                  VerticalAlignment="Center" />
+        </Grid>
         </DockPanel>
-    </DockPanel>
+    </Border>
 </UserControl>

PixiEditor/Views/UserControls/SizePicker.xaml.cs

@@ -1,19 +1,20 @@
 using PixiEditor.Helpers;
 using PixiEditor.Models.Enums;
 using PixiEditor.ViewModels;
+using System;
 using System.Windows;
 using System.Windows.Controls;
 
 namespace PixiEditor.Views
 {
-    /// <summary>
-    ///     Interaction logic for SizePicker.xaml.
-    /// </summary>
     public partial class SizePicker : UserControl
     {
         public static readonly DependencyProperty EditingEnabledProperty =
             DependencyProperty.Register(nameof(EditingEnabled), typeof(bool), typeof(SizePicker), new PropertyMetadata(true));
 
+        public static readonly DependencyProperty PreserveAspectRatioProperty =
+            DependencyProperty.Register(nameof(PreserveAspectRatio), typeof(bool), typeof(SizePicker), new PropertyMetadata(true));
+
         public static readonly DependencyProperty ChosenWidthProperty =
             DependencyProperty.Register(nameof(ChosenWidth), typeof(int), typeof(SizePicker), new PropertyMetadata(1));
 
@@ -33,20 +34,7 @@ namespace PixiEditor.Views
             DependencyProperty.Register(nameof(SizeUnitSelectionVisibility), typeof(Visibility), typeof(SizePicker), new PropertyMetadata(Visibility.Collapsed));
 
         System.Drawing.Size? initSize = null;
-
-        public SizePicker()
-        {
-            InitializeComponent();
-
-            EnableSizeEditors();
-        }
-
-        void OnLoad(object sender, RoutedEventArgs e)
-        {
-            var sizePicker = sender as SizePicker;
-            sizePicker.initSize = new System.Drawing.Size(sizePicker.ChosenWidth, sizePicker.ChosenHeight);
-        }
-
+               
         private static void InputSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var sizePicker = d as SizePicker;
@@ -99,16 +87,58 @@ namespace PixiEditor.Views
             get => (Visibility)GetValue(SizeUnitSelectionVisibilityProperty);
             set => SetValue(SizeUnitSelectionVisibilityProperty, value);
         }
-        
+
         public FrameworkElement NextControl
         {
             get => (FrameworkElement)GetValue(NextControlProperty);
             set => SetValue(NextControlProperty, value);
         }
 
+        public bool PreserveAspectRatio
+        {
+            get => (bool)GetValue(PreserveAspectRatioProperty);
+            set => SetValue(PreserveAspectRatioProperty, value);
+        }
+
+        public RelayCommand LoadedCommand { get; private set; }
+        public RelayCommand WidthLostFocusCommand { get; private set; }
+        public RelayCommand HeightLostFocusCommand { get; private set; }
+                        
+        public SizePicker()
+        {
+            LoadedCommand = new(AfterLoaded);
+            WidthLostFocusCommand = new(WidthLostFocus);
+            HeightLostFocusCommand = new(HeightLostFocus);
+            InitializeComponent();
+        }
+
         public void FocusWidthPicker()
         {
-            WidthPicker.Focus();
+            PercentageSizePicker.FocusAndSelect();
+        }
+
+        private void AfterLoaded(object parameter)
+        {
+            initSize = new System.Drawing.Size(ChosenWidth, ChosenHeight);
+            EnableSizeEditors();
+        }
+
+        private void WidthLostFocus(object param) => OnSizeUpdate(true);
+        private void HeightLostFocus(object param) => OnSizeUpdate(false);
+
+        private void OnSizeUpdate(bool widthUpdated)
+        {
+            if (!initSize.HasValue || !PreserveAspectRatio)
+                return;
+
+            if (widthUpdated)
+            {
+                ChosenHeight = Math.Clamp(ChosenWidth * initSize.Value.Height / initSize.Value.Width, 1, HeightPicker.MaxSize);
+            }
+            else
+            {
+                ChosenWidth = Math.Clamp(ChosenHeight * initSize.Value.Width / initSize.Value.Height, 1, WidthPicker.MaxSize);
+            }
         }
                 
         private void PercentageRb_Checked(object sender, RoutedEventArgs e)
@@ -123,12 +153,12 @@ namespace PixiEditor.Views
 
         private void EnableSizeEditors()
         {
-            if (PercentageSizePicker != null)
+            if(PercentageSizePicker != null)
                 PercentageSizePicker.IsEnabled = EditingEnabled && PercentageRb.IsChecked.Value;
             if (WidthPicker != null)
                 WidthPicker.IsEnabled = EditingEnabled && !PercentageRb.IsChecked.Value;
-            if (HeightPicker != null)
+            if(HeightPicker != null)
                 HeightPicker.IsEnabled = EditingEnabled && !PercentageRb.IsChecked.Value;
         }
     }
-}
+}