Profile editor - Moved layer property input to the Shared UI project

src/Artemis.UI/PropertyInput/BrushPropertyInputView.xaml

@@ -0,0 +1,25 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.BrushPropertyInputView"
+             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:propertyInput="clr-namespace:Artemis.UI.PropertyInput"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance {x:Type propertyInput:BrushPropertyInputViewModel}}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <ComboBox Width="132"
+                  Margin="0 2"
+                  Padding="0 -1"
+                  Height="15"
+                  materialDesign:ValidationAssist.UsePopup="True"
+                  HorizontalAlignment="Left"
+                  ItemsSource="{Binding Path=ComboboxValues}"
+                  SelectedValuePath="Value"
+                  DisplayMemberPath="Description"
+                  SelectedValue="{Binding Path=InputValue}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/BrushPropertyInputViewModel.cs

@@ -0,0 +1,69 @@
+using System.Collections.Generic;
+using System.Linq;
+using Artemis.Core.Events;
+using Artemis.Core.Models.Profile;
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.Core.Plugins.LayerBrush;
+using Artemis.Core.Services.Interfaces;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using Artemis.UI.Shared.Utilities;
+using Stylet;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class BrushPropertyInputViewModel : PropertyInputViewModel<LayerBrushReference>
+    {
+        private readonly ILayerService _layerService;
+        private readonly IPluginService _pluginService;
+
+        public BrushPropertyInputViewModel(LayerProperty<LayerBrushReference> layerProperty, IProfileEditorService profileEditorService,
+            ILayerService layerService, IPluginService pluginService) : base(layerProperty, profileEditorService)
+        {
+            _layerService = layerService;
+            _pluginService = pluginService;
+            ComboboxValues = new BindableCollection<ValueDescription>();
+
+            _pluginService.PluginLoaded += PluginServiceOnPluginLoaded;
+            UpdateEnumValues();
+        }
+
+        public BindableCollection<ValueDescription> ComboboxValues { get; }
+
+        public void UpdateEnumValues()
+        {
+            var layerBrushProviders = _pluginService.GetPluginsOfType<LayerBrushProvider>();
+            var descriptors = layerBrushProviders.SelectMany(l => l.LayerBrushDescriptors).ToList();
+
+            var enumValues = new List<ValueDescription>();
+            foreach (var layerBrushDescriptor in descriptors)
+            {
+                var brushName = layerBrushDescriptor.LayerBrushType.Name;
+                var brushGuid = layerBrushDescriptor.LayerBrushProvider.PluginInfo.Guid;
+                if (InputValue != null && InputValue.BrushType == brushName && InputValue.BrushPluginGuid == brushGuid)
+                    enumValues.Add(new ValueDescription {Description = layerBrushDescriptor.DisplayName, Value = InputValue});
+                else
+                    enumValues.Add(new ValueDescription {Description = layerBrushDescriptor.DisplayName, Value = new LayerBrushReference {BrushType = brushName, BrushPluginGuid = brushGuid}});
+            }
+
+            ComboboxValues.Clear();
+            ComboboxValues.AddRange(enumValues);
+        }
+
+        public override void Dispose()
+        {
+            _pluginService.PluginLoaded -= PluginServiceOnPluginLoaded;
+            base.Dispose();
+        }
+
+        protected override void OnInputValueApplied()
+        {
+            _layerService.InstantiateLayerBrush(LayerProperty.Layer);
+        }
+
+        private void PluginServiceOnPluginLoaded(object sender, PluginEventArgs e)
+        {
+            UpdateEnumValues();
+        }
+    }
+}

src/Artemis.UI/PropertyInput/ColorGradientPropertyInputView.xaml

@@ -0,0 +1,22 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.ColorGradientPropertyInputView"
+             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:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             xmlns:propertyInput="clr-namespace:Artemis.UI.PropertyInput"
+             xmlns:s="https://github.com/canton7/Stylet"
+             mc:Ignorable="d"
+             d:DesignHeight="25" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance propertyInput:ColorGradientPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <controls:GradientPicker Width="132"
+                                 Margin="0 2"
+                                 Padding="0 -1"
+                                 ColorGradient="{Binding InputValue}"
+                                 DialogClosed="{s:Action DialogClosed}"
+                                 DialogHost="PropertyTreeDialogHost" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/ColorGradientPropertyInputViewModel.cs

@@ -0,0 +1,21 @@
+using System;
+using Artemis.Core.Models.Profile.Colors;
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class ColorGradientPropertyInputViewModel : PropertyInputViewModel<ColorGradient>
+    {
+        public ColorGradientPropertyInputViewModel(LayerProperty<ColorGradient> layerProperty, IProfileEditorService profileEditorService) 
+            : base(layerProperty, profileEditorService)
+        {
+        }
+
+        public void DialogClosed(object sender, EventArgs e)
+        {
+            ApplyInputValue();
+        }
+    }
+}

src/Artemis.UI/PropertyInput/EnumPropertyInputView.xaml

@@ -0,0 +1,23 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.EnumPropertyInputView"
+             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <ComboBox Width="132"
+                  Margin="0 2"
+                  Padding="0 -1"
+                  Height="15"
+                  materialDesign:ValidationAssist.UsePopup="True"
+                  HorizontalAlignment="Left"
+                  ItemsSource="{Binding Path=EnumValues}"
+                  SelectedValuePath="Value"
+                  DisplayMemberPath="Description"
+                  SelectedValue="{Binding Path=InputValue}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/EnumPropertyInputViewModel.cs

@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using Artemis.UI.Shared.Utilities;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class EnumPropertyInputViewModel<T> : PropertyInputViewModel<T> where T : Enum
+    {
+        public EnumPropertyInputViewModel(LayerProperty<T> layerProperty, IProfileEditorService profileEditorService) : base(layerProperty, profileEditorService)
+        {
+            EnumValues = EnumUtilities.GetAllValuesAndDescriptions(typeof(T));
+        }
+
+        public IEnumerable<ValueDescription> EnumValues { get; }
+    }
+}

src/Artemis.UI/PropertyInput/FloatPropertyInputView.xaml

@@ -0,0 +1,24 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.FloatPropertyInputView"
+             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:Artemis.UI.PropertyInput"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             xmlns:propertyInput="clr-namespace:Artemis.UI.PropertyInput"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance propertyInput:FloatPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <controls:DraggableFloat Value="{Binding InputValue}"
+                                 materialDesign:ValidationAssist.UsePopup="True"
+                                 StepSize="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                 DragStarted="{s:Action InputDragStarted}"
+                                 DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/FloatPropertyInputViewModel.cs

@@ -0,0 +1,30 @@
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using FluentValidation;
+using Stylet;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class FloatPropertyInputViewModel : PropertyInputViewModel<float>
+    {
+        public FloatPropertyInputViewModel(LayerProperty<float> layerProperty, IProfileEditorService profileEditorService, IModelValidator<FloatPropertyInputViewModel> validator)
+            : base(layerProperty, profileEditorService, validator)
+        {
+        }
+    }
+
+    public class FloatPropertyInputViewModelValidator : AbstractValidator<FloatPropertyInputViewModel>
+    {
+        public FloatPropertyInputViewModelValidator()
+        {
+            RuleFor(vm => vm.InputValue)
+                .LessThanOrEqualTo(vm => (float) vm.LayerProperty.PropertyDescription.MaxInputValue)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is float);
+
+            RuleFor(vm => vm.InputValue)
+                .GreaterThanOrEqualTo(vm => (float) vm.LayerProperty.PropertyDescription.MinInputValue)
+                .When(vm => vm.LayerProperty.PropertyDescription.MinInputValue is float);
+        }
+    }
+}

src/Artemis.UI/PropertyInput/IntPropertyInputView.xaml

@@ -0,0 +1,24 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.IntPropertyInputView"
+             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:Artemis.UI.PropertyInput"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             xmlns:propertyInput="clr-namespace:Artemis.UI.PropertyInput"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance propertyInput:IntPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <controls:DraggableFloat Value="{Binding InputValue}"
+                                 materialDesign:ValidationAssist.UsePopup="True"
+                                 StepSize="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                 DragStarted="{s:Action InputDragStarted}"
+                                 DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/IntPropertyInputViewModel.cs

@@ -0,0 +1,30 @@
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using FluentValidation;
+using Stylet;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class IntPropertyInputViewModel : PropertyInputViewModel<int>
+    {
+        public IntPropertyInputViewModel(LayerProperty<int> layerProperty, IProfileEditorService profileEditorService, IModelValidator<IntPropertyInputViewModel> validator)
+            : base(layerProperty, profileEditorService, validator)
+        {
+        }
+    }
+
+    public class IntPropertyInputViewModelValidator : AbstractValidator<IntPropertyInputViewModel>
+    {
+        public IntPropertyInputViewModelValidator()
+        {
+            RuleFor(vm => vm.InputValue)
+                .LessThanOrEqualTo(vm => (int) vm.LayerProperty.PropertyDescription.MaxInputValue)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is int);
+
+            RuleFor(vm => vm.InputValue)
+                .GreaterThanOrEqualTo(vm => (int) vm.LayerProperty.PropertyDescription.MinInputValue)
+                .When(vm => vm.LayerProperty.PropertyDescription.MinInputValue is int);
+        }
+    }
+}

src/Artemis.UI/PropertyInput/SKColorPropertyInputView.xaml

@@ -0,0 +1,25 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.SKColorPropertyInputView"
+             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:Artemis.UI.PropertyInput"
+             xmlns:artemis="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
+             xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters;assembly=Artemis.UI.Shared"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             xmlns:propertyInput="clr-namespace:Artemis.UI.PropertyInput"
+             mc:Ignorable="d"
+             d:DesignHeight="25" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance propertyInput:SKColorPropertyInputViewModel}">
+    <UserControl.Resources>
+        <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
+    </UserControl.Resources>
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <controls:ColorPicker Width="132"
+                             Margin="0 -2 0 3"
+                             Padding="0 -1"
+                             Color="{Binding InputValue, Converter={StaticResource SKColorToColorConverter}}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/SKColorPropertyInputViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using SkiaSharp;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class SKColorPropertyInputViewModel : PropertyInputViewModel<SKColor>
+    {
+        public SKColorPropertyInputViewModel(LayerProperty<SKColor> layerProperty, IProfileEditorService profileEditorService) : base(layerProperty, profileEditorService)
+        {
+        }
+    }
+}

src/Artemis.UI/PropertyInput/SKPointPropertyInputView.xaml

@@ -0,0 +1,29 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.SKPointPropertyInputView"
+             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:Artemis.UI.PropertyInput"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             xmlns:propertyInput="clr-namespace:Artemis.UI.PropertyInput"
+             mc:Ignorable="d"
+             d:DesignHeight="25" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance propertyInput:SKPointPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal" KeyboardNavigation.IsTabStop="True">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <controls:DraggableFloat ToolTip="X-coordinate (horizontal)"
+                               Value="{Binding X}"
+                               StepSize="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Margin="5 0" VerticalAlignment="Bottom">,</TextBlock>
+        <controls:DraggableFloat ToolTip="Y-coordinate (vertical)"
+                               Value="{Binding Y}"
+                               StepSize="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/SKPointPropertyInputViewModel.cs

@@ -0,0 +1,59 @@
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using FluentValidation;
+using PropertyChanged;
+using SkiaSharp;
+using Stylet;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class SKPointPropertyInputViewModel : PropertyInputViewModel<SKPoint>
+    {
+        public SKPointPropertyInputViewModel(LayerProperty<SKPoint> layerProperty, IProfileEditorService profileEditorService,
+            IModelValidator<SKPointPropertyInputViewModel> validator) : base(layerProperty, profileEditorService, validator)
+        {
+        }
+
+        // Since SKPoint is immutable we need to create properties that replace the SKPoint entirely
+        [DependsOn(nameof(InputValue))]
+        public float X
+        {
+            get => InputValue.X;
+            set => InputValue = new SKPoint(value, Y);
+        }
+
+        [DependsOn(nameof(InputValue))]
+        public float Y
+        {
+            get => InputValue.Y;
+            set => InputValue = new SKPoint(X, value);
+        }
+
+        protected override void OnInputValueChanged()
+        {
+            NotifyOfPropertyChange(nameof(X));
+            NotifyOfPropertyChange(nameof(Y));
+        }
+    }
+
+    public class SKPointPropertyInputViewModelValidator : AbstractValidator<SKPointPropertyInputViewModel>
+    {
+        public SKPointPropertyInputViewModelValidator()
+        {
+            RuleFor(vm => vm.X)
+                .LessThanOrEqualTo(vm => ((SKPoint) vm.LayerProperty.PropertyDescription.MaxInputValue).X)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKPoint);
+            RuleFor(vm => vm.X)
+                .GreaterThanOrEqualTo(vm => ((SKPoint) vm.LayerProperty.PropertyDescription.MaxInputValue).X)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKPoint);
+
+            RuleFor(vm => vm.Y)
+                .LessThanOrEqualTo(vm => ((SKPoint) vm.LayerProperty.PropertyDescription.MaxInputValue).Y)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKPoint);
+            RuleFor(vm => vm.Y)
+                .GreaterThanOrEqualTo(vm => ((SKPoint) vm.LayerProperty.PropertyDescription.MaxInputValue).Y)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKPoint);
+        }
+    }
+}

src/Artemis.UI/PropertyInput/SKSizePropertyInputView.xaml

@@ -0,0 +1,28 @@
+<UserControl x:Class="Artemis.UI.PropertyInput.SKSizePropertyInputView"
+             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:Artemis.UI.PropertyInput"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:SKSizePropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputPrefix}" />
+        <controls:DraggableFloat ToolTip="Height"
+                               Value="{Binding Height}"
+                               StepSize="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Margin="5 0" VerticalAlignment="Bottom">,</TextBlock>
+        <controls:DraggableFloat ToolTip="Width"
+                               Value="{Binding Width}"
+                               StepSize="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Width="10" Text="{Binding LayerProperty.PropertyDescription.InputAffix}" />
+    </StackPanel>
+</UserControl>

src/Artemis.UI/PropertyInput/SKSizePropertyInputViewModel.cs

@@ -0,0 +1,59 @@
+using Artemis.Core.Models.Profile.LayerProperties;
+using Artemis.UI.Shared.PropertyInput;
+using Artemis.UI.Shared.Services.Interfaces;
+using FluentValidation;
+using PropertyChanged;
+using SkiaSharp;
+using Stylet;
+
+namespace Artemis.UI.PropertyInput
+{
+    public class SKSizePropertyInputViewModel : PropertyInputViewModel<SKSize>
+    {
+        public SKSizePropertyInputViewModel(LayerProperty<SKSize> layerProperty, IProfileEditorService profileEditorService,
+            IModelValidator<SKSizePropertyInputViewModel> validator) : base(layerProperty, profileEditorService, validator)
+        {
+        }
+
+        // Since SKSize is immutable we need to create properties that replace the SKSize entirely
+        [DependsOn(nameof(InputValue))]
+        public float Width
+        {
+            get => InputValue.Width;
+            set => InputValue = new SKSize(value, Height);
+        }
+
+        [DependsOn(nameof(InputValue))]
+        public float Height
+        {
+            get => InputValue.Height;
+            set => InputValue = new SKSize(Width, value);
+        }
+
+        protected override void OnInputValueChanged()
+        {
+            NotifyOfPropertyChange(nameof(Width));
+            NotifyOfPropertyChange(nameof(Height));
+        }
+    }
+
+    public class SKSizePropertyInputViewModelValidator : AbstractValidator<SKSizePropertyInputViewModel>
+    {
+        public SKSizePropertyInputViewModelValidator()
+        {
+            RuleFor(vm => vm.Width)
+                .LessThanOrEqualTo(vm => ((SKSize) vm.LayerProperty.PropertyDescription.MaxInputValue).Width)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKSize);
+            RuleFor(vm => vm.Width)
+                .GreaterThanOrEqualTo(vm => ((SKSize) vm.LayerProperty.PropertyDescription.MaxInputValue).Width)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKSize);
+
+            RuleFor(vm => vm.Height)
+                .LessThanOrEqualTo(vm => ((SKSize) vm.LayerProperty.PropertyDescription.MaxInputValue).Height)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKSize);
+            RuleFor(vm => vm.Height)
+                .GreaterThanOrEqualTo(vm => ((SKSize) vm.LayerProperty.PropertyDescription.MaxInputValue).Height)
+                .When(vm => vm.LayerProperty.PropertyDescription.MaxInputValue is SKSize);
+        }
+    }
+}