Changed text box style and checkbox style and fixed max size

PixiEditor/Helpers/Converters/ToolSizeToIntConverter.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Globalization;
-using System.Linq;
 using System.Text.RegularExpressions;
 using System.Windows.Data;
 
@@ -12,24 +11,24 @@ namespace PixiEditor.Helpers.Converters
     {
         public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            return string.Format("{0} {1}", value, "px");
+            return value.ToString();
         }
 
         public override object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            if (string.IsNullOrWhiteSpace(value as string))
+            if (value is not string s)
             {
                 return null;
             }
 
-            string slicedString = value.ToString().Split(' ').First();
-            slicedString = Regex.Replace(slicedString, "\\p{L}", string.Empty);
-            if (slicedString == string.Empty)
+            Match match = Regex.Match(s, @"\d+");
+
+            if (!match.Success)
             {
                 return null;
             }
 
-            return int.Parse(slicedString);
+            return int.Parse(match.Groups[0].ValueSpan);
         }
     }
 }

PixiEditor/Helpers/Validators/SizeValidationRule.cs

@@ -7,7 +7,9 @@ namespace PixiEditor.Helpers.Validators
     {
         public override ValidationResult Validate(object value, CultureInfo cultureInfo)
         {
-            return new ValidationResult(int.Parse(((string)value).Split(' ')[0]) > 0, null); // Size is greater than 0
+            int i = int.Parse(((string)value).Split(' ')[0]);
+
+            return new ValidationResult(i > 0, null); // Size is greater than 0
         }
     }
 }

PixiEditor/Models/Tools/ToolSettings/Settings/BoolSetting.cs

@@ -2,17 +2,15 @@
 using System.Windows.Controls;
 using System.Windows.Controls.Primitives;
 using System.Windows.Data;
-
+using System.Windows.Media;
+
 namespace PixiEditor.Models.Tools.ToolSettings.Settings
 {
     public class BoolSetting : Setting<bool>
     {
         public BoolSetting(string name, string label = "")
-            : base(name)
+            : this(name, false, label)
         {
-            Label = label;
-            Value = false;
-            SettingControl = GenerateCheckBox();
         }
 
         public BoolSetting(string name, bool isChecked, string label = "")

PixiEditor/Models/Tools/ToolSettings/Settings/SizeSetting.cs

@@ -22,9 +22,10 @@ namespace PixiEditor.Models.Tools.ToolSettings.Settings
         {
             SizeInput tb = new SizeInput
             {
-                Width = 40,
+                Width = 65,
                 Height = 20,
-                FontSize = 12,
+                VerticalAlignment = VerticalAlignment.Center,
+                MaxSize = 9999
             };
 
             Binding binding = new Binding("Value")

PixiEditor/Styles/DarkCheckboxStyle.xaml

@@ -11,13 +11,18 @@
                 <ControlTemplate TargetType="CheckBox">
                     <BulletDecorator Background="Transparent">
                         <BulletDecorator.Bullet>
-                            <Border x:Name="Border" Width="20" Height="20" CornerRadius="2" Background="#FF1B1B1B" BorderThickness="0">
+                            <Border x:Name="Border" Width="20" Height="20" 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" />
                             </Border>
                         </BulletDecorator.Bullet>
                         <ContentPresenter Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"/>
                     </BulletDecorator>
                     <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="False">
+                            <Setter TargetName="Border" Property="Background" Value="#252525" />
+                            <Setter TargetName="Border" Property="BorderBrush" Value="#3F3F46"/>
+                        </Trigger>
                         <Trigger Property="IsChecked" Value="false">
                             <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
                         </Trigger>
@@ -25,11 +30,13 @@
                             <Setter TargetName="CheckMark" Property="Data" Value="M 0 8 L 8 0" />
                         </Trigger>
                         <Trigger Property="IsMouseOver" Value="true">
-                            <Setter TargetName="Border" Property="Background" Value="#FF131313" />
+                            <Setter TargetName="Border" Property="Background" Value="#202020" />
+                            <Setter TargetName="Border" Property="BorderBrush" Value="#4F4F4F"/>
                         </Trigger>
                         <Trigger Property="IsEnabled" Value="false">
                             <Setter TargetName="CheckMark" Property="Stroke" Value="#FF6C6C6C"/>
                             <Setter Property="Foreground" Value="Gray"/>
+                            <Setter TargetName="Border" Property="BorderBrush" Value="#202020"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>

PixiEditor/Styles/ThemeColors.xaml

@@ -1,8 +1,10 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
+    <SolidColorBrush x:Key="PixiRed" Color="#e3002d" />
     <SolidColorBrush x:Key="MainColor" Color="#2D2D30" />
     <SolidColorBrush x:Key="AccentColor" Color="#252525" />
     <SolidColorBrush x:Key="DarkerAccentColor" Color="#202020" />
     <SolidColorBrush x:Key="BrighterAccentColor" Color="#3F3F46" />
+    <SolidColorBrush x:Key="AlmostLightModeAccentColor" Color="#4F4F4F" />
 </ResourceDictionary>

PixiEditor/Styles/ThemeStyle.xaml

@@ -138,13 +138,40 @@
             </Trigger>
         </Style.Triggers>
     </Style>
-    
+
 
     <Style TargetType="TextBox" x:Key="DarkTextBoxStyle">
-        <Setter Property="Background" Value="#202020" />
         <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="BorderBrush" Value="#404040" />
         <Setter Property="Foreground" Value="Snow" />
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="TextBox">
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}">
+                        <ScrollViewer Name="PART_ContentHost"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+
+        <Style.Resources>
+            <Style TargetType="Border">
+                <Setter Property="CornerRadius" Value="5"/>
+            </Style>
+        </Style.Resources>
+
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="False">
+                <Setter Property="Background" Value="{StaticResource AccentColor}"/>
+                <Setter Property="BorderBrush" Value="{StaticResource BrighterAccentColor}"/>
+            </Trigger>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Background" Value="{StaticResource DarkerAccentColor}"/>
+                <Setter Property="BorderBrush" Value="{StaticResource AlmostLightModeAccentColor}"/>
+            </Trigger>
+        </Style.Triggers>
     </Style>
 
     <Style TargetType="Button" x:Key="OpacityButtonStyle">

PixiEditor/Views/Dialogs/SettingsWindow.xaml

@@ -69,9 +69,9 @@
                         <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="60" Height="25"/>
+                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" Width="70" Height="25"/>
                             <Label Content="Height:" Style="{StaticResource BaseLabel}"/>
-                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" Width="60" Height="25"/>
+                            <views:SizeInput FontSize="16" Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" Width="70" Height="25"/>
                         </StackPanel>
                     </StackPanel>
                 </StackPanel>

PixiEditor/Views/UserControls/SizeInput.xaml

@@ -7,22 +7,56 @@
              xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
              xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
              xmlns:validators="clr-namespace:PixiEditor.Helpers.Validators"
-             mc:Ignorable="d"
+             mc:Ignorable="d" Foreground="White"
              d:DesignHeight="30" d:DesignWidth="160" Name="uc" LayoutUpdated="UserControlLayoutUpdated">
-    <TextBox IsEnabled="{Binding IsEnabled, ElementName=uc}" HorizontalContentAlignment="Center"
-             Style="{StaticResource DarkTextBoxStyle}" MaxLength="4" InputScope="Number">
-        <TextBox.Text>
-            <Binding ElementName="uc"
-                     Path="Size" Mode="TwoWay"
-                     Converter="{converters:ToolSizeToIntConverter}">
-                <Binding.ValidationRules>
-                    <validators:SizeValidationRule ValidatesOnTargetUpdated="True" />
-                </Binding.ValidationRules>
-            </Binding>
-        </TextBox.Text>
-        <i:Interaction.Behaviors>
-            <behaviors:GlobalShortcutFocusBehavior/>
-            <behaviors:TextBoxFocusBehavior FillSize="True" />
-        </i:Interaction.Behaviors>
-    </TextBox>
+
+    <Border BorderThickness="1" CornerRadius="3.5"
+            x:Name="border"
+            Cursor="IBeam" MouseLeftButtonDown="Border_MouseLeftButtonDown">
+        <Border.Style>
+            <Style TargetType="Border">
+                <Style.Triggers>
+                    <Trigger Property="IsMouseOver" Value="False">
+                        <Setter Property="Background" Value="{StaticResource AccentColor}"/>
+                        <Setter Property="BorderBrush" Value="{StaticResource BrighterAccentColor}"/>
+                    </Trigger>
+                    <Trigger Property="IsMouseOver" Value="True">
+                        <Setter Property="Background" Value="{StaticResource DarkerAccentColor}"/>
+                        <Setter Property="BorderBrush" Value="{StaticResource AlmostLightModeAccentColor}"/>
+                    </Trigger>
+                </Style.Triggers>
+            </Style>
+        </Border.Style>
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition/>
+                <ColumnDefinition Width="2"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+            <TextBox IsEnabled="{Binding IsEnabled, ElementName=uc}" HorizontalContentAlignment="Right"
+                     InputScope="Number" BorderThickness="0" Background="{x:Null}"
+                     Foreground="{Binding Foreground, ElementName=uc}" Focusable="True"
+                     Margin="0,0,5,0" VerticalAlignment="Center"
+                     x:Name="textBox">
+                <TextBox.Text>
+                    <Binding ElementName="uc"
+                             Path="Size" Mode="TwoWay"
+                             Converter="{converters:ToolSizeToIntConverter}">
+                        <Binding.ValidationRules>
+                            <validators:SizeValidationRule ValidatesOnTargetUpdated="True" />
+                        </Binding.ValidationRules>
+                    </Binding>
+                </TextBox.Text>
+                <d:TextBox.Text>22</d:TextBox.Text>
+                <i:Interaction.Behaviors>
+                    <behaviors:GlobalShortcutFocusBehavior/>
+                    <behaviors:TextBoxFocusBehavior FillSize="True" />
+                </i:Interaction.Behaviors>
+            </TextBox>
+            <Grid Grid.Column="1" Background="{Binding BorderBrush, ElementName=border}"
+                  d:Background="{StaticResource BrighterAccentColor}"/>
+            <TextBlock Text="px" TextAlignment="Right"
+                       Grid.Column="2" Margin="5,0" VerticalAlignment="Center"/>
+        </Grid>
+    </Border>
 </UserControl>

PixiEditor/Views/UserControls/SizeInput.xaml.cs

@@ -10,22 +10,19 @@ namespace PixiEditor.Views
     /// </summary>
     public partial class SizeInput : UserControl
     {
-        // Using a DependencyProperty as the backing store for Size.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty SizeProperty =
-            DependencyProperty.Register("Size", typeof(int), typeof(SizeInput), new PropertyMetadata(1, InputSizeChanged));
+            DependencyProperty.Register(nameof(Size), typeof(int), typeof(SizeInput), new PropertyMetadata(1, InputSizeChanged));
 
-        // Using a DependencyProperty as the backing store for PreserveAspectRatio.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty PreserveAspectRatioProperty =
             DependencyProperty.Register(
-                "PreserveAspectRatio",
+                nameof(PreserveAspectRatio),
                 typeof(bool),
                 typeof(SizeInput),
                 new PropertyMetadata(false));
 
-        // Using a DependencyProperty as the backing store for AspectRatioValue.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty AspectRatioValueProperty =
             DependencyProperty.Register(
-                "AspectRatioValue",
+                nameof(AspectRatioValue),
                 typeof(int),
                 typeof(SizeInput),
                 new PropertyMetadata(1));
@@ -36,9 +33,11 @@ namespace PixiEditor.Views
             set { SetValue(AspectRatioControlProperty, value); }
         }
 
-        // Using a DependencyProperty as the backing store for AspectRatioControl.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty AspectRatioControlProperty =
-            DependencyProperty.Register("AspectRatioControl", typeof(SizeInput), typeof(SizeInput), new PropertyMetadata(default));
+            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));
 
         private int loadedAspectRatioSize = -1;
 
@@ -56,6 +55,12 @@ namespace PixiEditor.Views
             set => SetValue(SizeProperty, value);
         }
 
+        public int MaxSize
+        {
+            get => (int)GetValue(MaxSizeProperty);
+            set => SetValue(MaxSizeProperty, value);
+        }
+
         public bool PreserveAspectRatio
         {
             get => (bool)GetValue(PreserveAspectRatioProperty);
@@ -70,6 +75,22 @@ namespace PixiEditor.Views
 
         private static void InputSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
+            if ((int)e.NewValue > (int)d.GetValue(MaxSizeProperty))
+            {
+                int? oldValue = e.OldValue as int?;
+
+                if (oldValue is null)
+                {
+                    d.SetValue(SizeProperty, 0);
+                }
+                else
+                {
+                    d.SetValue(SizeProperty, oldValue.Value);
+                }
+
+                return;
+            }
+
             SizeInput input = ((SizeInput)d).AspectRatioControl;
             if (input == null)
             {
@@ -99,5 +120,10 @@ namespace PixiEditor.Views
                 loadedAspectRatioSize = AspectRatioValue;
             }
         }
+
+        private void Border_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
+        {
+            textBox.Focus();
+        }
     }
 }