Added a view mode that helps test UI size responsiveness and also improved overall UI size responsiveness (also added increased risk of UI looking weird)

src/PixiEditor/Localization/LocalizedString.cs

@@ -20,6 +20,7 @@ public struct LocalizedString
             {
                 LocalizationKeyShowMode.Key => Key,
                 LocalizationKeyShowMode.ValueKey => $"{GetValue(value)} ({Key})",
+                LocalizationKeyShowMode.LALALA => $"#~{GetLongString(GetValue(value).Count(x => x == ' ') + 1)}{Math.Abs(Key.GetHashCode()).ToString()[..2]}~#",
                 _ => GetValue(value)
             };
             #endif
@@ -74,6 +75,8 @@ public struct LocalizedString
         return ApplyParameters(ILocalizationProvider.Current.CurrentLanguage.Locale[localizationKey]);
     }
 
+    private string GetLongString(int length) => string.Join(' ', Enumerable.Repeat("LaLaLaLaLa", length));
+
     private string ApplyParameters(string value)
     {
         if (Parameters == null || Parameters.Length == 0)

src/PixiEditor/Models/Enums/LocalizationKeyShowMode.cs

@@ -15,5 +15,10 @@ internal enum LocalizationKeyShowMode
     /// <summary>
     /// Shows just the key e.g. OPEN
     /// </summary>
-    Key
+    Key,
+    
+    /// <summary>
+    /// Shows a long string ensuring responsive layout
+    /// </summary>
+    LALALA,
 }

src/PixiEditor/Styles/ThemeStyle.xaml

@@ -22,6 +22,8 @@
         <Setter Property="Foreground" Value="White" />
         <Setter Property="Focusable" Value="False" />
         <Setter Property="FontSize" Value="15" />
+        <Setter Property="MinWidth" Value="70"/>
+        <Setter Property="Padding" Value="10,0"/>
         <Setter Property="SnapsToDevicePixels" Value="True" />
         <Setter Property="Template">
             <Setter.Value>
@@ -131,7 +133,8 @@
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Height" Value="28"/>
-        <Setter Property="Width" Value="70"/>
+        <Setter Property="MinWidth" Value="70"/>
+        <Setter Property="Padding" Value="5,0"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
@@ -165,7 +168,8 @@
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Height" Value="28"/>
-        <Setter Property="Width" Value="70"/>
+        <Setter Property="MinWidth" Value="70"/>
+        <Setter Property="Padding" Value="5,0"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
@@ -281,6 +285,7 @@
         <Setter Property="FontSize" Value="18"/>
         <Setter Property="Height" Value="50"/>
         <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="MinWidth" Value="0"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
@@ -311,6 +316,7 @@
         <Setter Property="TextBlock.FontFamily" Value="Segoe MDL2 Assets"/>
         <Setter Property="TextBlock.FontSize" Value="15"/>
         <Setter Property="Width" Value="30"/>
+        <Setter Property="MinWidth" Value="0"/>
 
         <Style.Triggers>
             <Trigger Property="IsEnabled" Value="True">

src/PixiEditor/Views/Dialogs/ExportFilePopup.xaml

@@ -11,7 +11,8 @@
         xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
         xmlns:helpers="clr-namespace:PixiEditor.Helpers"
         mc:Ignorable="d" BorderBrush="Black" BorderThickness="1"
-        Title="SaveFilePopup" WindowStyle="None" Height="330" Width="310" MinHeight="330" MinWidth="310"
+        Title="SaveFilePopup" WindowStyle="None" MinHeight="330" MinWidth="310" Width="310"
+        SizeToContent="Height"
         WindowStartupLocation="CenterScreen" Name="saveFilePopup"
         FlowDirection="{helpers:Localization FlowDirection}">
     <WindowChrome.WindowChrome>
@@ -33,20 +34,28 @@
         <dial:DialogTitleBar DockPanel.Dock="Top"
             TitleText="EXPORT_IMAGE" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
 
-        <Button DockPanel.Dock="Bottom" Width="70" HorizontalAlignment="Center" IsDefault="True"
+        <Button DockPanel.Dock="Bottom" HorizontalAlignment="Center" IsDefault="True"
                     Margin="15" Style="{StaticResource DarkRoundButton}" local:Translator.Key="EXPORT" Command="{Binding OkCommand}"
                     CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
 
-        <Grid HorizontalAlignment="Center" Margin="0,30,0,0" Background="{StaticResource MainColor}"
-                    VerticalAlignment="Top" Grid.Row="1" Width="240" Height="205">
-            <userControls:SizePicker Width="240" Height="180" Margin="0,0,0,25"
-                x:Name="sizePicker"
-                SizeUnitSelectionVisibility="Visible"
-                ChosenHeight="{Binding Path=SaveHeight, Mode=TwoWay, ElementName=saveFilePopup}"
-                ChosenWidth="{Binding Path=SaveWidth, Mode=TwoWay, ElementName=saveFilePopup}" />
-            <TextBlock Foreground="Snow" Margin="10,5" TextWrapping="Wrap" VerticalAlignment="Bottom" TextAlignment="Center" 
+        <Border HorizontalAlignment="Center" Margin="15,30,15,0" Background="{StaticResource MainColor}"
+                    VerticalAlignment="Stretch" CornerRadius="10">
+            <Grid MinHeight="205" MinWidth="240">
+                <Grid.RowDefinitions>
+                    <RowDefinition/>
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+                    <userControls:SizePicker Margin="0,15,0,0"
+                                             x:Name="sizePicker"
+                                             SizeUnitSelectionVisibility="Visible"
+                                             VerticalAlignment="Top"
+                                             ChosenHeight="{Binding Path=SaveHeight, Mode=TwoWay, ElementName=saveFilePopup}"
+                                             ChosenWidth="{Binding Path=SaveWidth, Mode=TwoWay, ElementName=saveFilePopup}" />
+            <TextBlock Grid.Row="1" Foreground="Snow" Margin="5,0,5,10" TextWrapping="Wrap" VerticalAlignment="Bottom" TextAlignment="Center" 
+                       Width="200"
                        d:Text="If you want to share the image, try 400% for the best clarity" Text="{Binding SizeHint, ElementName=saveFilePopup}"/>
-        </Grid>
+            </Grid>
+        </Border>
 
     </DockPanel>
 </Window>

src/PixiEditor/Views/Dialogs/HelloTherePopup.xaml

@@ -65,9 +65,9 @@
                 </StackPanel>
 
                 <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
-                    <Button Style="{StaticResource DarkRoundButton}" Command="{Binding OpenFileCommand}" Width="150" Margin="10"
+                    <Button Style="{StaticResource DarkRoundButton}" Command="{Binding OpenFileCommand}" MinWidth="150" Margin="10"
                             views:Translator.Key="OPEN_FILE"/>
-                    <Button Style="{StaticResource DarkRoundButton}" Command="{Binding OpenNewFileCommand}" Width="150" Margin="10"
+                    <Button Style="{StaticResource DarkRoundButton}" Command="{Binding OpenNewFileCommand}" MinWidth="150" Margin="10"
                             views:Translator.Key="NEW_FILE"/>
                 </StackPanel>
 
@@ -92,6 +92,7 @@
                                     <StackPanel Margin="8,5,8,0">
                                         <Button Margin="0,10,0,0" HorizontalAlignment="Center"
                                                 Width="100" Height="100"
+                                                Padding="0"
                                                 Command="{Binding DataContext.OpenRecentCommand, RelativeSource={RelativeSource AncestorType=uc:AlignableWrapPanel}}"
                                                 CommandParameter="{Binding FilePath}"
                                                 Style="{StaticResource DarkRoundButton}"

src/PixiEditor/Views/Dialogs/NewFilePopup.xaml

@@ -15,7 +15,8 @@
         DataContext="{DynamicResource NewFileMenuViewModel}" 
         WindowStyle="None" 
         WindowStartupLocation="CenterScreen" 
-        MinHeight="250" MinWidth="300" Height="250" Width="300" 
+        MinHeight="250" Height="250"
+        SizeToContent="Width"
         Name="newFilePopup" 
         BorderBrush="Black" BorderThickness="1"
         FlowDirection="{helpers:Localization FlowDirection}">
@@ -40,13 +41,13 @@
         <dial:DialogTitleBar DockPanel.Dock="Top"
             TitleText="CREATE_NEW_IMAGE" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}" />
 
-        <Button DockPanel.Dock="Bottom" Width="70" Margin="0,15,0,15" HorizontalAlignment="Center"
+        <Button DockPanel.Dock="Bottom" Margin="0,15,0,15" HorizontalAlignment="Center"
                 IsDefault="True" local:Translator.Key="CREATE" x:Name="createButton"
                 Style="{StaticResource DarkRoundButton}" 
                 Command="{Binding OkCommand}"
                 CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />
 
-        <userControls:SizePicker HorizontalAlignment="Center" Width="230" Height="125" Margin="0,30,0,0"
+        <userControls:SizePicker HorizontalAlignment="Center" MinWidth="230" Height="125" Margin="15,30,15,0"
                               PreserveAspectRatio="False"
                               ChosenHeight="{Binding FileHeight, Mode=TwoWay, ElementName=newFilePopup}"
                               ChosenWidth="{Binding FileWidth, Mode=TwoWay, ElementName=newFilePopup}" 

src/PixiEditor/Views/Dialogs/NewFilePopup.xaml.cs

@@ -23,6 +23,7 @@ internal partial class NewFilePopup : Window
 
     private void OnDialogShown(object sender, RoutedEventArgs e)
     {
+        MinWidth = Width;
         sizePicker.FocusWidthPicker();
     }
 

src/PixiEditor/Views/Dialogs/SettingGroups/ShortcutsBinder.xaml

@@ -11,6 +11,7 @@
              xmlns:commands1="clr-namespace:PixiEditor.Models.Commands.Commands"
              mc:Ignorable="d"
              d:DesignHeight="600" d:DesignWidth="400">
+    <Grid>
     <ScrollViewer x:Name="commandScroll" FocusVisualStyle="{x:Null}">
                     <ScrollViewer.Template>
                         <ControlTemplate TargetType="{x:Type ScrollViewer}">
@@ -55,4 +56,15 @@
                         </ItemsControl>
                     </Grid>
                 </ScrollViewer>
+        <Grid Height="10" VerticalAlignment="Top"
+              Visibility="{Binding VerticalOffset, ElementName=commandScroll, Mode=OneWay, Converter={converters:EqualityBoolToVisibilityConverter Invert=True}, ConverterParameter=0}"
+              Margin="-10,0">
+            <Grid.Background>
+                <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
+                    <GradientStop Color="#22000000" Offset="0"/>
+                    <GradientStop Color="#00000000" Offset="1.0"/>
+                </LinearGradientBrush>
+            </Grid.Background>
+        </Grid>
+        </Grid>
 </UserControl>

src/PixiEditor/Views/Dialogs/SettingsWindow.xaml

@@ -51,7 +51,7 @@
             TitleText="SETTINGS" CloseCommand="{x:Static SystemCommands.CloseWindowCommand}"/>
 
         <ListBox DockPanel.Dock="Left" x:Name="pages" ItemsSource="{Binding Pages}"
-                 Background="Transparent" BorderThickness="0" Width="150" ItemContainerStyle="{StaticResource PixiListBoxItemStyle}"
+                 Background="Transparent" BorderThickness="0" Width="180" ItemContainerStyle="{StaticResource PixiListBoxItemStyle}"
                  SelectedIndex="{Binding CurrentPage}">
             <ListBox.ItemTemplate>
                 <DataTemplate>
@@ -224,7 +224,7 @@
                     <StackPanel.Resources>
                         <Style TargetType="Button" BasedOn="{StaticResource DarkRoundButton}">
                             <Setter Property="HorizontalAlignment" Value="Stretch"/>
-                            <Setter Property="Width" Value="115"/>
+                            <Setter Property="MinWidth" Value="115"/>
                             <Setter Property="Height" Value="Auto"/>
                             <Setter Property="Margin" Value="5,0"/>
                             <Setter Property="FontSize" Value="12"/>
@@ -248,17 +248,6 @@
                 </TextBox>
 
                 <settingGroups:ShortcutsBinder Grid.Row="2"/>
-
-                <Grid Grid.Row="2" Height="10" VerticalAlignment="Top"
-                      Visibility="{Binding VerticalOffset, ElementName=commandScroll, Mode=OneWay, Converter={converters:EqualityBoolToVisibilityConverter Invert=True}, ConverterParameter=0}"
-                      Margin="-10,0">
-                    <Grid.Background>
-                        <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
-                            <GradientStop Color="#22000000" Offset="0"/>
-                            <GradientStop Color="#00000000" Offset="1.0"/>
-                        </LinearGradientBrush>
-                    </Grid.Background>
-                </Grid>
             </Grid>
         </StackPanel>
     </DockPanel>

src/PixiEditor/Views/UserControls/SizePicker.xaml

@@ -26,32 +26,31 @@
             <Setter Property="Height" Value="25"/>
         </Style>
     </UserControl.Resources>
-    <Border Background="{StaticResource MainColor}" VerticalAlignment="Stretch" CornerRadius="10">
+    <Border Background="{StaticResource MainColor}" VerticalAlignment="Stretch" CornerRadius="10" Padding="15,0">
         <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
-            <Grid Height="60" HorizontalAlignment="Center" DockPanel.Dock="Top"
+            <Grid Height="60" HorizontalAlignment="Stretch" DockPanel.Dock="Top"
                   Visibility="{Binding SizeUnitSelectionVisibility, ElementName=uc}">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="120"/>
-                    <ColumnDefinition/>
-                </Grid.ColumnDefinitions>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="30"/>
                     <RowDefinition Height="30"/>
                 </Grid.RowDefinitions>
 
-                <RadioButton Grid.Row="0" Grid.Column="0"
+                <Grid HorizontalAlignment="Stretch">
+                <RadioButton Grid.Row="0"
                              x:Name="PercentageRb" 
                              Foreground="White" 
                              FontSize="12"
                              GroupName="Unit"
-                             Checked="PercentageRb_Checked"   
+                             Margin="0,0,5,0"
+                             Checked="PercentageRb_Checked"
+                             HorizontalAlignment="Left"
                              VerticalAlignment="Center"
                              IsChecked="{Binding Path=SelectedUnit,  
                                               ElementName=uc, 
                                               Converter={converters:EnumBooleanConverter}, 
                                               ConverterParameter=Percentage
                                               }" local:Translator.Key="PERCENTAGE"/>
-                <userControls:SizeInput Grid.Column="1" Grid.Row="0" 
+                <userControls:SizeInput Grid.Row="0" 
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Right"
                                      x:Name="PercentageSizePicker"
@@ -67,6 +66,7 @@
                         </i:EventTrigger>
                     </i:Interaction.Triggers>
                 </userControls:SizeInput>
+                </Grid>
 
                 <RadioButton Grid.Row="1" Grid.Column="0"  
                              x:Name="AbsoluteRb" 
@@ -119,7 +119,7 @@
                     </i:Interaction.Triggers>
                 </userControls:SizeInput>
 
-                <CheckBox 
+                <CheckBox
                   Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2"
                   Name="aspectRatio" 
                   IsChecked="{Binding ElementName=uc, Path=PreserveAspectRatio}"