UI - Further restructuring

2026-11-12 11:56:30 +00:00 · 2020-05-14 21:58:30 +02:00
1 parent a9c9d06354
commit 678fad95d1
@@ -0,0 +1,23 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.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=BrushInputValue}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,83 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Artemis.Core.Events;
+using Artemis.Core.Models.Profile;
+using Artemis.Core.Plugins.LayerBrush;
+using Artemis.Core.Services.Interfaces;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree.PropertyInput;
+using Artemis.UI.Services.Interfaces;
+using Artemis.UI.Shared.Utilities;
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class BrushPropertyInputViewModel : PropertyInputViewModel<LayerBrushReference>
+    {
+        private readonly ILayerService _layerService;
+        private readonly IPluginService _pluginService;
+
+        public BrushPropertyInputViewModel(LayerPropertyViewModel<LayerBrushReference> layerPropertyViewModel, ILayerService layerService, IPluginService pluginService)
+            : base(layerPropertyViewModel)
+        {
+            _layerService = layerService;
+            _pluginService = pluginService;
+            EnumValues = new BindableCollection<ValueDescription>();
+
+            _pluginService.PluginLoaded += PluginServiceOnPluginLoaded;
+        }
+
+        public BindableCollection<ValueDescription> EnumValues { get; }
+        
+        public LayerBrushReference BrushInputValue
+        {
+            get => (LayerBrushReference) InputValue;
+            set
+            {
+                InputValue = value;
+                _layerService.InstantiateLayerBrush(LayerPropertyViewModel.LayerProperty.Layer);
+            }
+        }
+
+        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 (BrushInputValue != null && BrushInputValue.BrushType == brushName && BrushInputValue.BrushPluginGuid == brushGuid)
+                    enumValues.Add(new ValueDescription {Description = layerBrushDescriptor.DisplayName, Value = BrushInputValue});
+                else
+                    enumValues.Add(new ValueDescription {Description = layerBrushDescriptor.DisplayName, Value = new LayerBrushReference {BrushType = brushName, BrushPluginGuid = brushGuid}});
+            }
+            EnumValues.Clear();
+            EnumValues.AddRange(enumValues);
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => BrushInputValue);
+        }
+
+        public override void Dispose()
+        {
+            _pluginService.PluginLoaded -= PluginServiceOnPluginLoaded;
+            base.Dispose();
+        }
+
+        protected override void OnInitialized()
+        {
+            UpdateEnumValues();
+            base.OnInitialized();
+        }
+
+        private void PluginServiceOnPluginLoaded(object sender, PluginEventArgs e)
+        {
+            UpdateEnumValues();
+        }
+    }
+}
@@ -0,0 +1,22 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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"
+             mc:Ignorable="d"
+             d:DesignHeight="25" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:ColorGradientPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
+        <controls:GradientPicker Width="132"
+                                Margin="0 2"
+                                Padding="0 -1"
+                                ColorGradient="{Binding ColorGradientInputValue}" 
+                                DialogHost="PropertyTreeDialogHost"/>
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using Artemis.Core.Models.Profile;
+using Artemis.Core.Models.Profile.Colors;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class ColorGradientPropertyInputViewModel : PropertyInputViewModel
+    {
+        public ColorGradientPropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(ColorGradient)};
+
+        public ColorGradient ColorGradientInputValue
+        {
+            get => (ColorGradient) InputValue ?? new ColorGradient();
+            set => InputValue = value;
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => ColorGradientInputValue);
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:EnumPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.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=EnumInputValue}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,41 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Artemis.UI.Services.Interfaces;
+using Artemis.UI.Shared.Utilities;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class EnumPropertyInputViewModel : PropertyInputViewModel
+    {
+        public EnumPropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public IEnumerable<ValueDescription> EnumValues { get; private set; }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(Enum)};
+
+        public object EnumInputValue
+        {
+            get => InputValue ?? Enum.GetValues(GetLayerPropertyEnumType()).Cast<object>().First();
+            set => InputValue = value;
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => EnumInputValue);
+        }
+
+        protected override void OnInitialized()
+        {
+            EnumValues = EnumUtilities.GetAllValuesAndDescriptions(GetLayerPropertyEnumType());
+        }
+
+
+        private Type GetLayerPropertyEnumType()
+        {
+            return LayerPropertyViewModel.BaseLayerProperty.GetType().GetGenericTypeDefinition();
+        }
+    }
+}
@@ -0,0 +1,21 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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:FloatPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
+        <controls:DraggableFloat Value="{Binding FloatInputValue}"
+                               StepSize="{Binding LayerPropertyViewModel.LayerProperty.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,39 @@
+using System;
+using System.Collections.Generic;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class FloatPropertyInputViewModel : PropertyInputViewModel
+    {
+        public FloatPropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(float)};
+
+
+        public float FloatInputValue
+        {
+            get => (float?) InputValue ?? 0f;
+            set => InputValue = ApplyInputValue(value);
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => FloatInputValue);
+        }
+
+        private float ApplyInputValue(float value)
+        {
+            if (LayerPropertyViewModel.LayerProperty.MaxInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MaxInputValue is float maxFloat)
+                value = Math.Min(value, maxFloat);
+            if (LayerPropertyViewModel.LayerProperty.MinInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MinInputValue is float minFloat)
+                value = Math.Max(value, minFloat);
+
+            return value;
+        }
+    }
+}
@@ -0,0 +1,21 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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:IntPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
+        <controls:DraggableFloat Value="{Binding IntInputValue}"
+                               StepSize="{Binding LayerPropertyViewModel.LayerProperty.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,38 @@
+using System;
+using System.Collections.Generic;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class IntPropertyInputViewModel : PropertyInputViewModel
+    {
+        public IntPropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(int)};
+
+        public int IntInputValue
+        {
+            get => (int?) InputValue ?? 0;
+            set => InputValue = ApplyInputValue(value);
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => IntInputValue);
+        }
+
+        private int ApplyInputValue(int value)
+        {
+            if (LayerPropertyViewModel.LayerProperty.MaxInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MaxInputValue is int maxInt)
+                value = Math.Min(value, maxInt);
+            if (LayerPropertyViewModel.LayerProperty.MinInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MinInputValue is int minInt)
+                value = Math.Max(value, minInt);
+
+            return value;
+        }
+    }
+}
@@ -0,0 +1,51 @@
+using System;
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree.PropertyInput
+{
+    public abstract class PropertyInputViewModel<T> : PropertyChangedBase, IDisposable
+    {
+        protected PropertyInputViewModel(LayerPropertyViewModel<T> layerPropertyViewModel)
+        {
+            LayerPropertyViewModel = layerPropertyViewModel;
+            LayerPropertyViewModel.LayerProperty.Updated += LayerPropertyOnUpdated;
+        }
+
+        public LayerPropertyViewModel<T> LayerPropertyViewModel { get; }
+
+        public bool InputDragging { get; private set; }
+
+        protected T InputValue
+        {
+            get => LayerPropertyViewModel.LayerProperty.CurrentValue;
+            set => LayerPropertyViewModel.SetCurrentValue(value, !InputDragging);
+        }
+
+        public abstract void Update();
+
+        private void LayerPropertyOnUpdated(object? sender, EventArgs e)
+        {
+            Update();
+        }
+
+        #region Event handlers
+
+        public void InputDragStarted(object sender, EventArgs e)
+        {
+            InputDragging = true;
+        }
+
+        public void InputDragEnded(object sender, EventArgs e)
+        {
+            InputDragging = false;
+            LayerPropertyViewModel.ProfileEditorService.UpdateSelectedProfileElement();
+        }
+
+        #endregion
+
+        public void Dispose()
+        {
+            LayerPropertyViewModel.LayerProperty.Updated -= LayerPropertyOnUpdated;
+        }
+    }
+}
@@ -0,0 +1,24 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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"
+             mc:Ignorable="d"
+             d:DesignHeight="25" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:SKColorPropertyInputViewModel}">
+    <UserControl.Resources>
+        <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
+    </UserControl.Resources>
+    <StackPanel Orientation="Horizontal">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
+        <controls:ColorPicker Width="132"
+                             Margin="0 -2 0 3"
+                             Padding="0 -1"
+                             Color="{Binding SKColorInputValue, Converter={StaticResource SKColorToColorConverter}}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,27 @@
+using System;
+using System.Collections.Generic;
+using Artemis.UI.Services.Interfaces;
+using SkiaSharp;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class SKColorPropertyInputViewModel : PropertyInputViewModel
+    {
+        public SKColorPropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(SKColor)};
+
+        public SKColor SKColorInputValue
+        {
+            get => (SKColor?) InputValue ?? new SKColor();
+            set => InputValue = value;
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => SKColorInputValue);
+        }
+    }
+}
@@ -0,0 +1,28 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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="25" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:SKPointPropertyInputViewModel}">
+    <StackPanel Orientation="Horizontal" KeyboardNavigation.IsTabStop="True">
+        <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
+        <controls:DraggableFloat ToolTip="X-coordinate (horizontal)"
+                               Value="{Binding X}"
+                               StepSize="{Binding LayerPropertyViewModel.LayerProperty.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 LayerPropertyViewModel.LayerProperty.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,50 @@
+using System;
+using System.Collections.Generic;
+using Artemis.UI.Services.Interfaces;
+using PropertyChanged;
+using SkiaSharp;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class SKPointPropertyInputViewModel : PropertyInputViewModel
+    {
+        public SKPointPropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(SKPoint)};
+
+        // Since SKPoint is immutable we need to create properties that replace the SKPoint entirely
+        [DependsOn(nameof(InputValue))]
+        public float X
+        {
+            get => ((SKPoint?) InputValue)?.X ?? 0;
+            set => InputValue = new SKPoint(ApplyInputValue(value), Y);
+        }
+
+        [DependsOn(nameof(InputValue))]
+        public float Y
+        {
+            get => ((SKPoint?) InputValue)?.Y ?? 0;
+            set => InputValue = new SKPoint(X, ApplyInputValue(value));
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => X);
+            NotifyOfPropertyChange(() => Y);
+        }
+
+        private float ApplyInputValue(float value)
+        {
+            if (LayerPropertyViewModel.LayerProperty.MaxInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MaxInputValue is float maxFloat)
+                value = Math.Min(value, maxFloat);
+            if (LayerPropertyViewModel.LayerProperty.MinInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MinInputValue is float minFloat)
+                value = Math.Max(value, minFloat);
+
+            return value;
+        }
+    }
+}
@@ -0,0 +1,28 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.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 Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
+        <controls:DraggableFloat ToolTip="Height"
+                               Value="{Binding Height}"
+                               StepSize="{Binding LayerPropertyViewModel.LayerProperty.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 LayerPropertyViewModel.LayerProperty.InputStepSize}"
+                               DragStarted="{s:Action InputDragStarted}"
+                               DragEnded="{s:Action InputDragEnded}" />
+        <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,50 @@
+using System;
+using System.Collections.Generic;
+using Artemis.UI.Services.Interfaces;
+using PropertyChanged;
+using SkiaSharp;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput
+{
+    public class SKSizePropertyInputViewModel : PropertyInputViewModel
+    {
+        public SKSizePropertyInputViewModel(IProfileEditorService profileEditorService) : base(profileEditorService)
+        {
+        }
+
+        public sealed override List<Type> CompatibleTypes { get; } = new List<Type> {typeof(SKSize)};
+
+        // Since SKSize is immutable we need to create properties that replace the SKPoint entirely
+        [DependsOn(nameof(InputValue))]
+        public float Width
+        {
+            get => ((SKSize?) InputValue)?.Width ?? 0;
+            set => InputValue = new SKSize(ApplyInputValue(value), Height);
+        }
+
+        [DependsOn(nameof(InputValue))]
+        public float Height
+        {
+            get => ((SKSize?) InputValue)?.Height ?? 0;
+            set => InputValue = new SKSize(Width, ApplyInputValue(value));
+        }
+
+        public override void Update()
+        {
+            NotifyOfPropertyChange(() => Width);
+            NotifyOfPropertyChange(() => Height);
+        }
+
+        private float ApplyInputValue(float value)
+        {
+            if (LayerPropertyViewModel.LayerProperty.MaxInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MaxInputValue is float maxFloat)
+                value = Math.Min(value, maxFloat);
+            if (LayerPropertyViewModel.LayerProperty.MinInputValue != null &&
+                LayerPropertyViewModel.LayerProperty.MinInputValue is float minFloat)
+                value = Math.Max(value, minFloat);
+
+            return value;
+        }
+    }
+}
@@ -0,0 +1,14 @@
+using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Abstract;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree
+{
+    public class TreePropertyGroupViewModel
+    {
+        public TreePropertyGroupViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel)
+        {
+            LayerPropertyGroupViewModel = (LayerPropertyGroupViewModel)layerPropertyBaseViewModel;
+        }
+
+        public LayerPropertyGroupViewModel LayerPropertyGroupViewModel { get; }
+    }
+}
@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Exceptions;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Abstract;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.PropertyInput;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree.PropertyInput;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree
+{
+    public class TreePropertyViewModel<T> : TreePropertyViewModel
+    {
+        public TreePropertyViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel) : base(layerPropertyBaseViewModel)
+        {
+            LayerPropertyViewModel = (LayerPropertyViewModel<T>) layerPropertyBaseViewModel;
+            PropertyInputViewModel = CreatePropertyInputViewModel();
+        }
+
+        public LayerPropertyViewModel<T> LayerPropertyViewModel { get; }
+        public PropertyInputViewModel<T> PropertyInputViewModel { get; set; }
+
+        public override void Dispose()
+        {
+            PropertyInputViewModel.Dispose();
+        }
+
+        private PropertyInputViewModel<T> CreatePropertyInputViewModel()
+        {
+            if (!IsPropertySupported(typeof(T)))
+                throw new ArtemisUIException($"Failed to create a property input view model, type {typeof(T).Name} is not supported.");
+
+            return (PropertyInputViewModel<T>) Activator.CreateInstance(SupportedTypes[typeof(T)], this);
+        }
+    }
+
+    public abstract class TreePropertyViewModel : IDisposable
+    {
+        public static ReadOnlyDictionary<Type, Type> SupportedTypes = new ReadOnlyDictionary<Type, Type>(new Dictionary<Type, Type>
+        {
+            {typeof(LayerBrushReference), typeof(BrushPropertyInputViewModel)},
+            {typeof(LayerBrushReference), typeof(BrushPropertyInputViewModel)},
+            {typeof(LayerBrushReference), typeof(BrushPropertyInputViewModel)},
+            {typeof(LayerBrushReference), typeof(BrushPropertyInputViewModel)}
+        });
+
+        public static void RegisterPropertyInputViewModel()
+        {
+
+        }
+
+        public static bool IsPropertySupported(Type type)
+        {
+            return SupportedTypes.ContainsKey(type);
+        }
+
+        protected TreePropertyViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel)
+        {
+            LayerPropertyBaseViewModel = layerPropertyBaseViewModel;
+        }
+
+        public LayerPropertyBaseViewModel LayerPropertyBaseViewModel { get; }
+        public abstract void Dispose();
+    }
+}
@@ -0,0 +1,112 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree.TreeView"
+             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.Screens.Module.ProfileEditor.LayerProperties.Tree"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:converters="clr-namespace:Artemis.UI.Converters"
+             xmlns:abstract="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Abstract"
+             xmlns:layerProperties="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance {x:Type local:TreeViewModel}}">
+    <UserControl.Resources>
+        <Style x:Key="PropertyTreeStyle" TargetType="{x:Type TreeViewItem}">
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="BorderBrush" Value="{x:Null}" />
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+            <Setter Property="ScrollViewer.PanningMode" Value="Both" />
+            <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
+                        <ControlTemplate.Resources>
+                            <converters:LeftMarginMultiplierConverter Length="19" x:Key="lengthConverter" />
+                        </ControlTemplate.Resources>
+                        <StackPanel>
+                            <Border Name="Bd"
+                                    Background="{TemplateBinding Background}"
+                                    BorderBrush="{DynamicResource MaterialDesignDivider}"
+                                    BorderThickness="0,0,0,1"
+                                    Height="25"
+                                    Padding="{TemplateBinding Padding}">
+                                <Grid
+                                    Margin="{Binding Converter={StaticResource lengthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="19" />
+                                        <ColumnDefinition />
+                                    </Grid.ColumnDefinitions>
+                                    <ToggleButton x:Name="Expander"
+                                                  Foreground="{DynamicResource MaterialDesignBody}"
+                                                  Style="{StaticResource MaterialDesignExpandCollapseToggleStyle}"
+                                                  IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
+                                                  ClickMode="Press" />
+
+                                    <ContentPresenter x:Name="PART_Header"
+                                                      Grid.Column="1"
+                                                      ContentSource="Header"
+                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
+                                </Grid>
+                            </Border>
+                            <ItemsPresenter x:Name="ItemsHost" />
+                        </StackPanel>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsExpanded" Value="false">
+                                <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
+                            </Trigger>
+                            <Trigger Property="HasItems" Value="false">
+                                <Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
+                            </Trigger>
+                            <MultiTrigger>
+                                <MultiTrigger.Conditions>
+                                    <Condition Property="HasHeader" Value="false" />
+                                    <Condition Property="Width" Value="Auto" />
+                                </MultiTrigger.Conditions>
+                                <Setter TargetName="PART_Header" Property="MinWidth" Value="75" />
+                            </MultiTrigger>
+                            <MultiTrigger>
+                                <MultiTrigger.Conditions>
+                                    <Condition Property="HasHeader" Value="false" />
+                                    <Condition Property="Height" Value="Auto" />
+                                </MultiTrigger.Conditions>
+                                <Setter TargetName="PART_Header" Property="MinHeight" Value="19" />
+                            </MultiTrigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+    <TreeView ItemsSource="{Binding LayerPropertyGroups}"
+              HorizontalContentAlignment="Stretch"
+              Background="{DynamicResource MaterialDesignToolBarBackground}"
+              PreviewMouseWheel="{s:Action PropertyTreePreviewMouseWheel}"
+              Margin="0 -1">
+        <TreeView.ItemContainerStyle>
+            <Style TargetType="TreeViewItem" BasedOn="{StaticResource PropertyTreeStyle}">
+                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
+                <Setter Property="Visibility" Value="{Binding IsVisible}" />
+            </Style>
+        </TreeView.ItemContainerStyle>
+        <TreeView.Resources>
+            <HierarchicalDataTemplate DataType="{x:Type layerProperties:LayerPropertyGroupViewModel}"
+                                      ItemsSource="{Binding Children}">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Text="{Binding PropertyGroupDescription.Name}"
+                               ToolTip="{Binding PropertyGroupDescription.Description}" Margin="5 0"
+                               VerticalAlignment="Center" />
+                </StackPanel>
+            </HierarchicalDataTemplate>
+            <DataTemplate DataType="{x:Type layerProperties:LayerPropertyViewModel}">
+                <!-- <ContentControl s:View.Model="{Binding TreePropertyBaseViewModel}" /> -->
+                <TextBlock Text="{Binding PropertyDescription.Name}"
+                           ToolTip="{Binding PropertyDescription.Description}" Margin="5 0" VerticalAlignment="Center" />
+            </DataTemplate>
+        </TreeView.Resources>
+    </TreeView>
+</UserControl>
@@ -0,0 +1,14 @@
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree
+{
+    public class TreeViewModel
+    {
+        public TreeViewModel(BindableCollection<LayerPropertyGroupViewModel> layerPropertyGroups)
+        {
+            LayerPropertyGroups = layerPropertyGroups;
+        }
+
+        public BindableCollection<LayerPropertyGroupViewModel> LayerPropertyGroups { get; }
+    }
+}