UI - Added gradient editor dialog

src/Artemis.Core/Models/Profile/ColorGradient.cs

@@ -1,17 +1,50 @@
-using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Runtime.CompilerServices;
+using Artemis.Core.Annotations;
+using PropertyChanged;
 using SkiaSharp;
+using Stylet;
 
 namespace Artemis.Core.Models.Profile
 {
-    public class ColorGradient
+    [DoNotNotify]
+    public class ColorGradient : INotifyPropertyChanged
     {
+        private float _rotation;
+
         public ColorGradient()
         {
-            Colors = new List<ColorGradientColor>();
+            Colors = new BindableCollection<ColorGradientColor>();
         }
 
-        public List<ColorGradientColor> Colors { get; }
+        public BindableCollection<ColorGradientColor> Colors { get; }
-        public float Rotation { get; set; }
+
+        public float Rotation
+        {
+            get => _rotation;
+            set
+            {
+                if (_rotation != value)
+                {
+                    _rotation = value;
+                    OnPropertyChanged(nameof(Rotation));
+                }
+            }
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        [NotifyPropertyChangedInvocator]
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        public SKColor[] GetColorsArray()
+        {
+            return Colors.Select(c => c.Color).ToArray();
+        }
     }
 
     public struct ColorGradientColor

src/Artemis.UI.Shared/ColorPicker.xaml

@@ -68,14 +68,8 @@
                                 <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
                             </Track.IncreaseRepeatButton>
                             <Track.Thumb>
-                                <Thumb
+                                <Thumb x:Name="Thumb" Width="20" Height="20" VerticalAlignment="Center" Focusable="False" OverridesDefaultStyle="True"
-                                    x:Name="Thumb"
+                                       Template="{StaticResource MaterialDesignColorSliderThumb}">
-                                    Width="20"
-                                    Height="20"
-                                    VerticalAlignment="Center"
-                                    Focusable="False"
-                                    OverridesDefaultStyle="True"
-                                    Template="{StaticResource MaterialDesignColorSliderThumb}">
                                     <Thumb.Foreground>
                                         <SolidColorBrush
                                             Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Mode=OneWay, Converter={StaticResource ColorToSolidColorConverter}}" />
@@ -97,7 +91,6 @@
                  MinWidth="95"
                  MaxLength="9"
                  Margin="0"
-                 Padding="-1"
                  HorizontalAlignment="Stretch" />
 
         <Border Width="15"

src/Artemis.UI.Shared/GradientPicker.xaml.cs

@@ -47,18 +47,18 @@ namespace Artemis.UI.Shared
 
         private static void ColorGradientPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
-            var colorPicker = (GradientPicker) d;
+            var gradientPicker = (GradientPicker) d;
-            if (colorPicker._inCallback)
+            if (gradientPicker._inCallback)
                 return;
 
-            colorPicker._inCallback = true;
+            gradientPicker._inCallback = true;
-            colorPicker.OnPropertyChanged(nameof(ColorGradient));
+            gradientPicker.OnPropertyChanged(nameof(ColorGradient));
-            colorPicker._inCallback = false;
+            gradientPicker._inCallback = false;
         }
 
         private void UIElement_OnMouseUp(object sender, MouseButtonEventArgs e)
         {
-            var gradientEditor = new GradientEditor(ColorGradientProperty);
+            var gradientEditor = new GradientEditor(ColorGradient);
             gradientEditor.ShowDialog();
         }
     }

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml

@@ -8,22 +8,27 @@
                          xmlns:s="https://github.com/canton7/Stylet"
                          xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
                          xmlns:shared="clr-namespace:Artemis.UI.Shared"
+                         xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
                          mc:Ignorable="d"
                          Title="Gradient Editor"
                          Background="{DynamicResource MaterialDesignPaper}"
                          FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
                          UseLayoutRounding="True"
-                         Width="800"
+                         Width="500"
-                         Height="450"
+                         Height="600"
                          ResizeMode="NoResize"
                          Icon="/Resources/Images/Logo/logo-512.png"
+                         FadeContentIfInactive="False"
                          d:DesignHeight="450"
                          d:DesignWidth="800">
+    <controls:MaterialWindow.Resources>
+        <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
+    </controls:MaterialWindow.Resources>
     <StackPanel>
-        <materialDesign:Card >
+        <materialDesign:Card Margin="15 15 15 7" Padding="15">
             <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Margin="16">
                 <materialDesign:PackIcon Kind="Crane" Width="80" Height="80" HorizontalAlignment="Center" />
-                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="0 15">
+                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
                     Gradient saving not implemented yet
                 </TextBlock>
                 <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
@@ -32,28 +37,69 @@
             </StackPanel>
         </materialDesign:Card>
 
-        <materialDesign:Card>
+        <materialDesign:Card Margin="15 7 15 15" ClipToBounds="False">
-            <Grid>
+            <StackPanel ClipToBounds="False">
-                <Grid.RowDefinitions>
+                <TextBlock Margin="15 15 0 0">Gradient</TextBlock>
-                    <RowDefinition />
+                <Separator Margin="15 5" />
-                    <RowDefinition />
-                    <RowDefinition />
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition />
-                    <ColumnDefinition />
-                    <ColumnDefinition />
-                    <ColumnDefinition />
-                </Grid.ColumnDefinitions>
 
-                <Separator Grid.Row="1" Grid.ColumnSpan="4" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="8 0 8 0" />
+                <ItemsControl ItemsSource="{Binding ColorGradient.Colors, Mode=OneWay}" ClipToBounds="False" Margin="15 0">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Canvas Height="60" Width="435" x:Name="PreviewCanvas" >
+                                <Canvas.Background>
+                                    <VisualBrush Stretch="None" AlignmentY="Top">
+                                        <VisualBrush.Visual>
+                                            <Border Width="{Binding ActualWidth, ElementName=PreviewCanvas}" Height="50">
+                                                <Rectangle x:Name="Preview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                                                    <Rectangle.Fill>
+                                                        <LinearGradientBrush GradientStops="{Binding ColorGradient, Mode=OneWay, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
+                                                    </Rectangle.Fill>
+                                                </Rectangle>
+                                            </Border>
+                                        </VisualBrush.Visual>
+                                    </VisualBrush>
+                                </Canvas.Background>
+                            </Canvas>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemContainerStyle>
+                        <Style TargetType="ContentPresenter">
+                            <Setter Property="Canvas.Top" Value="50" />
+                        </Style>
+                    </ItemsControl.ItemContainerStyle>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <local:GradientEditorColor GradientColor="{Binding}"></local:GradientEditorColor>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                
+                <TextBlock Margin="15 15 0 0">Stops</TextBlock>
+                <Separator Margin="15 5" />
 
-                <Label Grid.Row="0" Grid.Column="0">Color:</Label>
+                <Grid Margin="15">
-                <shared:ColorPicker x:Name="CurrentColor" Grid.Row="0" Grid.Column="1" />
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="70" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="70" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="140" />
+                    </Grid.ColumnDefinitions>
 
-                <Label Grid.Row="0" Grid.Column="2">Location:</Label>
+                    <Label Grid.Column="0" HorizontalAlignment="Right">Color:</Label>
-                <TextBox x:Name="CurrentLocation" Grid.Row="0" Grid.Column="3" />
+                    <shared:ColorPicker Grid.Row="0" Grid.Column="1" x:Name="CurrentColor" Width="85" />
-            </Grid>
+
+                    <Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right">Location:</Label>
+                    <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Horizontal">
+                        <TextBox x:Name="CurrentLocation" Width="40" />
+                        <Label>%</Label>
+                    </StackPanel>
+
+                    <Button Grid.Row="0" Grid.Column="4" Style="{StaticResource MaterialDesignRaisedButton}" Width="80" Height="25">
+                        Delete
+                    </Button>
+                </Grid>
+            </StackPanel>
         </materialDesign:Card>
     </StackPanel>
 </controls:MaterialWindow>

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml.cs

@@ -1,5 +1,8 @@
-using System.Windows;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using System.Windows;
 using Artemis.Core.Models.Profile;
+using Artemis.UI.Shared.Annotations;
 using MaterialDesignExtensions.Controls;
 
 namespace Artemis.UI.Shared.Screens.GradientEditor
@@ -7,20 +10,50 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
     /// <summary>
     ///     Interaction logic for GradientEditor.xaml
     /// </summary>
-    public partial class GradientEditor : MaterialWindow
+    public partial class GradientEditor : MaterialWindow, INotifyPropertyChanged
     {
-        public GradientEditor(DependencyProperty colorGradientProperty)
+        public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientEditor),
-        {
+            new FrameworkPropertyMetadata(default(ColorGradient), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, ColorGradientPropertyChangedCallback));
-            ColorGradientProperty = colorGradientProperty;
-            InitializeComponent();
-        }
 
-        public DependencyProperty ColorGradientProperty { get; }
+        public static readonly RoutedEvent ColorGradientChangedEvent =
+            EventManager.RegisterRoutedEvent(
+                nameof(ColorGradient),
+                RoutingStrategy.Bubble,
+                typeof(RoutedPropertyChangedEventHandler<ColorGradient>),
+                typeof(GradientEditor));
+
+        private bool _inCallback;
+
+        public GradientEditor(ColorGradient colorGradient)
+        {
+            InitializeComponent();
+            DataContext = this;
+            ColorGradient = colorGradient;
+        }
 
         public ColorGradient ColorGradient
         {
             get => (ColorGradient) GetValue(ColorGradientProperty);
             set => SetValue(ColorGradientProperty, value);
         }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        [NotifyPropertyChangedInvocator]
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private static void ColorGradientPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var editor = (GradientEditor) d;
+            if (editor._inCallback)
+                return;
+
+            editor._inCallback = true;
+            editor.OnPropertyChanged(nameof(ColorGradient));
+            editor._inCallback = false;
+        }
     }
 }

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorColor.xaml

@@ -0,0 +1,25 @@
+<UserControl
+    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.Shared.Screens.GradientEditor"
+    x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorColor"
+    mc:Ignorable="d"
+    d:DesignHeight="450" d:DesignWidth="800">
+    <Canvas>
+        <Path x:Name="ColorStop"
+              Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
+              Stroke="White"
+              StrokeThickness="2"
+              Cursor="Hand">
+            <Path.RenderTransform>
+                <TransformGroup>
+                    <RotateTransform Angle="180" />
+                    <TranslateTransform X="14" Y="33" />
+                    <ScaleTransform ScaleX="0.5" ScaleY="0.5" />
+                </TransformGroup>
+            </Path.RenderTransform>
+        </Path>
+    </Canvas>
+</UserControl>

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorColor.xaml.cs

@@ -0,0 +1,71 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Shared.Annotations;
+
+namespace Artemis.UI.Shared.Screens.GradientEditor
+{
+    /// <summary>
+    ///     Interaction logic for GradientEditorColor.xaml
+    /// </summary>
+    public partial class GradientEditorColor : UserControl, INotifyPropertyChanged
+    {
+        public static readonly DependencyProperty ColorGradientColorProperty = DependencyProperty.Register(nameof(GradientColor), typeof(ColorGradientColor), typeof(GradientEditorColor),
+            new FrameworkPropertyMetadata(default(ColorGradientColor), ColorGradientColorPropertyChangedCallback));
+
+        private bool _inCallback;
+
+        public GradientEditorColor()
+        {
+            InitializeComponent();
+        }
+
+        public ColorGradientColor GradientColor
+        {
+            get => (ColorGradientColor) GetValue(ColorGradientColorProperty);
+            set => SetValue(ColorGradientColorProperty, value);
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        [NotifyPropertyChangedInvocator]
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private static void ColorGradientColorPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var self = (GradientEditorColor) d;
+            if (self._inCallback)
+                return;
+
+            self._inCallback = true;
+            self.OnPropertyChanged(nameof(GradientColor));
+
+            // Get the parent canvas
+            DependencyObject parent = null;
+            DependencyObject current = self;
+            while (current != null && !(parent is Canvas))
+            {
+                parent = VisualTreeHelper.GetParent(current);
+                current = parent;
+            }
+
+            if (parent is Canvas canvas)
+                self.ColorStop.SetValue(Canvas.LeftProperty, (double) 435f * self.GradientColor.Position);
+
+            self.ColorStop.Fill = new SolidColorBrush(Color.FromArgb(
+                self.GradientColor.Color.Alpha,
+                self.GradientColor.Color.Red,
+                self.GradientColor.Color.Green,
+                self.GradientColor.Color.Blue
+            ));
+
+            self._inCallback = false;
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/PropertyTree/PropertyInput/BrushPropertyInputViewModel.cs

@@ -43,16 +43,19 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree.P
         {
             var layerBrushProviders = _pluginService.GetPluginsOfType<LayerBrushProvider>();
             var descriptors = layerBrushProviders.SelectMany(l => l.LayerBrushDescriptors).ToList();
-            EnumValues.Clear();
+            
+            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});
+                    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.Add(new ValueDescription {Description = layerBrushDescriptor.DisplayName, Value = new LayerBrushReference {BrushType = brushName, BrushPluginGuid = brushGuid}});
             }
+            EnumValues.Clear();
+            EnumValues.AddRange(enumValues);
         }
 
         public override void Update()

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/PropertyTree/PropertyInput/SKColorPropertyInputView.xaml

@@ -15,7 +15,7 @@
     <StackPanel Orientation="Horizontal">
         <TextBlock Margin="0 0 5 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputPrefix}" />
         <artemis:ColorPicker Width="132"
-                             Margin="0 2"
+                             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}" />

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/PropertyTree/PropertyTreeParentViewModel.cs

@@ -18,6 +18,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree
                 child.Update(forceUpdate);
         }
 
+        // TODO: Change this to not add one by one, this raises far too many events
         public override void AddLayerProperty(LayerPropertyViewModel layerPropertyViewModel)
         {
             if (layerPropertyViewModel.Parent == LayerPropertyViewModel)
@@ -40,6 +41,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree
             }
         }
 
+        // TODO: Change this to not remove one by one, this raises far too many events
         public override void RemoveLayerProperty(LayerPropertyViewModel layerPropertyViewModel)
         {
             foreach (var child in Children.ToList())

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/PropertyTree/PropertyTreeViewModel.cs

@@ -36,6 +36,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree
                 propertyTreeItemViewModel.Dispose();
         }
 
+        // TODO: Change this to not add one by one, this raises far too many events
         public void AddLayerProperty(LayerPropertyViewModel layerPropertyViewModel)
         {
             // Add as a root VM
@@ -49,6 +50,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.PropertyTree
             }
         }
 
+        // TODO: Change this to not remove one by one, this raises far too many events
         public void RemoveLayerProperty(LayerPropertyViewModel layerPropertyViewModel)
         {
             // Remove a root VM

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTimelineViewModel.cs

@@ -60,10 +60,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
         public void PopulateProperties(List<LayerPropertyViewModel> properties)
         {
-            PropertyTrackViewModels.Clear();
+            var newViewModels = new List<PropertyTrackViewModel>();
             foreach (var property in properties)
-                CreateViewModels(property);
+                newViewModels.AddRange(CreateViewModels(property));
 
+            PropertyTrackViewModels.Clear();
+            PropertyTrackViewModels.AddRange(newViewModels);
             UpdateEndTime();
         }
 
@@ -112,11 +114,13 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             UpdateKeyframePositions();
         }
 
-        private void CreateViewModels(LayerPropertyViewModel property)
+        private List<PropertyTrackViewModel> CreateViewModels(LayerPropertyViewModel property)
         {
-            PropertyTrackViewModels.Add(_propertyTrackVmFactory.Create(this, property));
+            var result = new List<PropertyTrackViewModel> {_propertyTrackVmFactory.Create(this, property)};
             foreach (var child in property.Children)
-                CreateViewModels(child);
+                result.AddRange(CreateViewModels(child));
+
+            return result;
         }
 
         #region Keyframe movement

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTrackKeyframeViewModel.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using System.Windows;
 using System.Windows.Input;
@@ -125,8 +126,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
         private void CreateEasingViewModels()
         {
-            foreach (Easings.Functions value in Enum.GetValues(typeof(Easings.Functions)))
+            EasingViewModels.AddRange(Enum.GetValues(typeof(Easings.Functions)).Cast<Easings.Functions>().Select(v => new PropertyTrackEasingViewModel(this, v)));
-                EasingViewModels.Add(new PropertyTrackEasingViewModel(this, value));
         }
 
         public void SelectEasingMode(PropertyTrackEasingViewModel easingViewModel)

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTrackViewModel.cs

@@ -1,4 +1,5 @@
-using System.Linq;
+using System.Collections.Generic;
+using System.Linq;
 using Artemis.UI.Ninject.Factories;
 using Stylet;
 
@@ -28,20 +29,14 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         public void PopulateKeyframes()
         {
             // Remove old keyframes
-            foreach (var viewModel in KeyframeViewModels.ToList())
+            KeyframeViewModels.RemoveRange(KeyframeViewModels.ToList().Where(vm => !LayerPropertyViewModel.LayerProperty.UntypedKeyframes.Contains(vm.Keyframe)));
-            {
-                if (!LayerPropertyViewModel.LayerProperty.UntypedKeyframes.Contains(viewModel.Keyframe))
-                    KeyframeViewModels.Remove(viewModel);
-            }
 
             // Add new keyframes
-            foreach (var keyframe in LayerPropertyViewModel.LayerProperty.UntypedKeyframes)
+            KeyframeViewModels.AddRange(
-            {
+                LayerPropertyViewModel.LayerProperty.UntypedKeyframes
-                if (KeyframeViewModels.Any(k => k.Keyframe == keyframe))
+                    .Where(k => KeyframeViewModels.All(vm => vm.Keyframe != k))
-                    continue;
+                    .Select(k => _propertyTrackKeyframeVmFactory.Create(this, k))
-                KeyframeViewModels.Add(_propertyTrackKeyframeVmFactory.Create(this, keyframe));
+            );
-            }
-
             UpdateKeyframes(PropertyTimelineViewModel.LayerPropertiesViewModel.PixelsPerSecond);
         }
 

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileTree/TreeItem/TreeItemViewModel.cs

@@ -174,27 +174,31 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.ProfileTree.TreeItem
             }
 
             // Ensure every child element has an up-to-date VM
-            if (ProfileElement.Children != null)
+            if (ProfileElement.Children == null) 
-            {
+                return;
-                foreach (var profileElement in ProfileElement.Children.OrderBy(c => c.Order))
-                {
-                    TreeItemViewModel existing = null;
-                    if (profileElement is Folder folder)
-                    {
-                        existing = Children.FirstOrDefault(p => p is FolderViewModel vm && vm.ProfileElement == folder);
-                        if (existing == null)
-                            Children.Add(_folderVmFactory.Create((FolderViewModel) this, folder));
-                    }
-                    else if (profileElement is Layer layer)
-                    {
-                        existing = Children.FirstOrDefault(p => p is LayerViewModel vm && vm.ProfileElement == layer);
-                        if (existing == null)
-                            Children.Add(_layerVmFactory.Create((FolderViewModel) this, layer));
-                    }
 
-                    existing?.UpdateProfileElements();
+            var newChildren = new List<TreeItemViewModel>();
+            foreach (var profileElement in ProfileElement.Children.OrderBy(c => c.Order))
+            {
+                if (profileElement is Folder folder)
+                {
+                    if (Children.FirstOrDefault(p => p is FolderViewModel vm && vm.ProfileElement == folder) == null)
+                        newChildren.Add(_folderVmFactory.Create((FolderViewModel) this, folder));
+                }
+                else if (profileElement is Layer layer)
+                {
+                    if (Children.FirstOrDefault(p => p is LayerViewModel vm && vm.ProfileElement == layer) == null)
+                        newChildren.Add(_layerVmFactory.Create((FolderViewModel) this, layer));
                 }
             }
+
+            if (!newChildren.Any()) 
+                return;
+
+            // Add the new children in one call, prevent extra UI events
+            Children.AddRange(newChildren);
+            foreach (var treeItemViewModel in newChildren)
+                treeItemViewModel.UpdateProfileElements();
         }
     }
 }

src/Artemis.UI/Screens/Settings/SettingsViewModel.cs

@@ -184,13 +184,11 @@ namespace Artemis.UI.Screens.Settings
             Task.Run(ApplyAutorun);
 
             DeviceSettingsViewModels.Clear();
-            foreach (var device in _surfaceService.ActiveSurface.Devices)
+            DeviceSettingsViewModels.AddRange(_surfaceService.ActiveSurface.Devices.Select(d => _deviceSettingsVmFactory.Create(d)));
-                DeviceSettingsViewModels.Add(_deviceSettingsVmFactory.Create(device));
+            
-
             Plugins.Clear();
-            foreach (var pluginInfo in _pluginService.GetAllPluginInfo())
+            Plugins.AddRange(_pluginService.GetAllPluginInfo().Select(p => new PluginSettingsViewModel(p.Instance, _windowManager, _dialogService, _pluginService)));
-                Plugins.Add(new PluginSettingsViewModel(pluginInfo.Instance, _windowManager, _dialogService, _pluginService));
+            
-
             base.OnInitialActivate();
         }
 

src/Artemis.sln.DotSettings

@@ -1,5 +1,6 @@
 <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 	<s:Boolean x:Key="/Default/CodeEditing/Intellisense/CodeCompletion/IntelliSenseCompletingCharacters/CSharpCompletingCharacters/UpgradedFromVSSettings/@EntryValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/CodeInspection/CodeAnnotations/NamespacesWithAnnotations/=Artemis_002ECore_002EAnnotations/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/CodeInspection/CodeAnnotations/NamespacesWithAnnotations/=Artemis_002EUI_002EShared_002EAnnotations/@EntryIndexedValue">True</s:Boolean>
 	<s:String x:Key="/Default/CodeStyle/CodeCleanup/RecentlyUsedProfile/@EntryValue">Built-in: Full Cleanup</s:String>
 	<s:String x:Key="/Default/CodeStyle/CodeFormatting/CSharpCodeStyle/BRACES_FOR_FOR/@EntryValue">RequiredForMultiline</s:String>

src/Plugins/Artemis.Plugins.LayerBrushes.Color/ColorBrush.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.ComponentModel;
+using System.Linq;
 using Artemis.Core.Models.Profile;
 using Artemis.Core.Models.Profile.LayerProperties;
 using Artemis.Core.Plugins.LayerBrush;
@@ -10,7 +11,6 @@ namespace Artemis.Plugins.LayerBrushes.Color
 {
     public class ColorBrush : LayerBrush
     {
-        private readonly List<SKColor> _testColors;
         private SKColor _color;
         private SKPaint _paint;
         private SKShader _shader;
@@ -18,28 +18,23 @@ namespace Artemis.Plugins.LayerBrushes.Color
 
         public ColorBrush(Layer layer, LayerBrushDescriptor descriptor) : base(layer, descriptor)
         {
-            ColorProperty = RegisterLayerProperty("Brush.Color", "Color", "The color of the brush", new SKColor(255,0,0));
+            ColorProperty = RegisterLayerProperty("Brush.Color", "Color", "The color of the brush", new SKColor(255, 0, 0));
             GradientProperty = RegisterLayerProperty("Brush.Gradient", "Gradient", "The gradient of the brush", new ColorGradient());
             GradientTypeProperty = RegisterLayerProperty<GradientType>("Brush.GradientType", "Gradient type", "The type of color brush to draw");
             GradientTypeProperty.CanUseKeyframes = false;
 
-            _testColors = new List<SKColor>();
-            for (var i = 0; i < 9; i++)
-            {
-                if (i != 8)
-                    _testColors.Add(SKColor.FromHsv(i * 32, 100, 100));
-                else
-                    _testColors.Add(SKColor.FromHsv(0, 100, 100));
-            }
-
             CreateShader(_shaderBounds);
             Layer.RenderPropertiesUpdated += (sender, args) => CreateShader(_shaderBounds);
             GradientTypeProperty.ValueChanged += (sender, args) => CreateShader(_shaderBounds);
-        }
 
-        private void GradientTypePropertyOnValueChanged(object sender, EventArgs e)
+            if (!GradientProperty.Value.Colors.Any())
-        {
+            {
-            throw new NotImplementedException();
+                for (var i = 0; i < 9; i++)
+                {
+                    var color = i != 8 ? SKColor.FromHsv(i * 32, 100, 100) : SKColor.FromHsv(0, 100, 100);
+                    GradientProperty.Value.Colors.Add(new ColorGradientColor(color, 0.125f * i));
+                }
+            }
         }
 
         public LayerProperty<SKColor> ColorProperty { get; set; }
@@ -77,13 +72,13 @@ namespace Artemis.Plugins.LayerBrushes.Color
                     shader = SKShader.CreateColor(_color);
                     break;
                 case GradientType.LinearGradient:
-                    shader = SKShader.CreateLinearGradient(new SKPoint(0, 0), new SKPoint(pathBounds.Width, 0), _testColors.ToArray(), SKShaderTileMode.Repeat);
+                    shader = SKShader.CreateLinearGradient(new SKPoint(0, 0), new SKPoint(pathBounds.Width, 0), GradientProperty.Value.GetColorsArray(), SKShaderTileMode.Repeat);
                     break;
                 case GradientType.RadialGradient:
-                    shader = SKShader.CreateRadialGradient(center, Math.Min(pathBounds.Width, pathBounds.Height), _testColors.ToArray(), SKShaderTileMode.Repeat);
+                    shader = SKShader.CreateRadialGradient(center, Math.Min(pathBounds.Width, pathBounds.Height), GradientProperty.Value.GetColorsArray(), SKShaderTileMode.Repeat);
                     break;
                 case GradientType.SweepGradient:
-                    shader = SKShader.CreateSweepGradient(center, _testColors.ToArray(), null, SKShaderTileMode.Clamp, 0, 360);
+                    shader = SKShader.CreateSweepGradient(center, GradientProperty.Value.GetColorsArray(), null, SKShaderTileMode.Clamp, 0, 360);
                     break;
                 default:
                     throw new ArgumentOutOfRangeException();