Color brush - Fixed gradient picker not appearing

Gradient picker - Use dialog instead of a popup window

src/Artemis.Core/Artemis.Core.csproj

@@ -22,13 +22,13 @@
   <ItemGroup>
     <PackageReference Include="Ben.Demystifier" Version="0.1.6" />
     <PackageReference Include="Castle.Core" Version="4.4.0" />
-    <PackageReference Include="LiteDB" Version="5.0.4" />
+    <PackageReference Include="LiteDB" Version="5.0.7" />
-    <PackageReference Include="McMaster.NETCore.Plugins" Version="1.1.0" />
+    <PackageReference Include="McMaster.NETCore.Plugins" Version="1.2.0" />
     <PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
     <PackageReference Include="Ninject" Version="3.3.4" />
     <PackageReference Include="Ninject.Extensions.ChildKernel" Version="3.3.0" />
     <PackageReference Include="Ninject.Extensions.Conventions" Version="3.3.0" />
-    <PackageReference Include="PropertyChanged.Fody" Version="3.2.6" />
+    <PackageReference Include="PropertyChanged.Fody" Version="3.2.8" />
     <PackageReference Include="Serilog" Version="2.9.0" />
     <PackageReference Include="Serilog.Enrichers.Demystify" Version="1.0.0-dev-00019" />
     <PackageReference Include="Serilog.Sinks.Debug" Version="1.0.1" />

src/Artemis.Core/FodyWeavers.xsd

@@ -31,6 +31,16 @@
                 <xs:documentation>Used to control if equality checks should use the static Equals method resolved from the base class.</xs:documentation>
               </xs:annotation>
             </xs:attribute>
+            <xs:attribute name="SuppressWarnings" type="xs:boolean">
+              <xs:annotation>
+                <xs:documentation>Used to turn off build warnings from this weaver.</xs:documentation>
+              </xs:annotation>
+            </xs:attribute>
+            <xs:attribute name="SuppressOnPropertyNameChangedWarning" type="xs:boolean">
+              <xs:annotation>
+                <xs:documentation>Used to turn off build warnings about mismatched On_PropertyName_Changed methods.</xs:documentation>
+              </xs:annotation>
+            </xs:attribute>
           </xs:complexType>
         </xs:element>
       </xs:all>

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

@@ -47,7 +47,10 @@ namespace Artemis.Core.Models.Profile
 
         public SKColor GetColor(float position)
         {
-            var point = Stops.SingleOrDefault(f => f.Position == position);
+            if (!Stops.Any())
+                return SKColor.Empty;
+
+            var point = Stops.FirstOrDefault(f => f.Position == position);
             if (point != null) return point.Color;
 
             var before = Stops.First(w => w.Position == Stops.Min(m => m.Position));

src/Artemis.Storage/Artemis.Storage.csproj

@@ -5,6 +5,6 @@
     <LangVersion>7</LangVersion>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="LiteDB" Version="5.0.4" />
+    <PackageReference Include="LiteDB" Version="5.0.7" />
   </ItemGroup>
 </Project>

src/Artemis.UI.Shared/Artemis.UI.Shared.csproj

@@ -22,7 +22,7 @@
     <PackageReference Include="AvalonEdit" Version="6.0.1" />
     <PackageReference Include="Humanizer.Core" Version="2.7.9" />
     <PackageReference Include="MaterialDesignExtensions" Version="3.0.0" />
-    <PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
+    <PackageReference Include="MaterialDesignThemes" Version="3.1.0" />
     <PackageReference Include="Ninject" Version="3.3.4" />
     <PackageReference Include="Ninject.Extensions.Conventions" Version="3.3.0" />
     <PackageReference Include="SkiaSharp" Version="1.68.2-preview.29" />

src/Artemis.UI.Shared/Controls/DeviceVisualizer.cs

@@ -21,14 +21,28 @@ namespace Artemis.UI.Shared.Controls
         private readonly DrawingGroup _backingStore;
         private readonly List<DeviceVisualizerLed> _deviceVisualizerLeds;
         private BitmapImage _deviceImage;
+        private bool _subscribed;
 
         public DeviceVisualizer()
         {
             _backingStore = new DrawingGroup();
             _deviceVisualizerLeds = new List<DeviceVisualizerLed>();
 
-            RGBSurface.Instance.Updated += RgbSurfaceOnUpdated;
+            Loaded += (sender, args) => SubscribeToUpdate(true);
-            Unloaded += (sender, args) => Dispose();
+            Unloaded += (sender, args) => SubscribeToUpdate(false);
+        }
+
+        private void SubscribeToUpdate(bool subscribe)
+        {
+            if (_subscribed == subscribe)
+                return;
+
+            if (subscribe)
+                RGBSurface.Instance.Updated += RgbSurfaceOnUpdated;
+            else
+                RGBSurface.Instance.Updated -= RgbSurfaceOnUpdated;
+
+            _subscribed = subscribe;
         }
 
         public ArtemisDevice Device
@@ -131,7 +145,7 @@ namespace Artemis.UI.Shared.Controls
             bitmapBrush.Freeze();
             _backingStore.OpacityMask = bitmapBrush;
         }
-        
+
         private void RgbSurfaceOnUpdated(UpdatedEventArgs e)
         {
             Dispatcher.Invoke(() =>

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

@@ -46,6 +46,15 @@ namespace Artemis.UI.Shared.Controls
             set => SetValue(ColorGradientProperty, value);
         }
 
+        /// <summary>
+        ///     Gets or sets the currently selected color gradient
+        /// </summary>
+        public string DialogHost
+        {
+            get => (string) GetValue(DialogHostProperty);
+            set => SetValue(DialogHostProperty, value);
+        }
+
         public event PropertyChangedEventHandler PropertyChanged;
 
         [NotifyPropertyChangedInvocator]
@@ -67,7 +76,7 @@ namespace Artemis.UI.Shared.Controls
 
         private void UIElement_OnMouseUp(object sender, MouseButtonEventArgs e)
         {
-            GradientPickerService.ShowGradientPicker(ColorGradient);
+            GradientPickerService.ShowGradientPicker(ColorGradient, DialogHost);
         }
 
         #region Static WPF fields
@@ -75,6 +84,9 @@ namespace Artemis.UI.Shared.Controls
         public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientPicker),
             new FrameworkPropertyMetadata(default(ColorGradient), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, ColorGradientPropertyChangedCallback));
 
+        public static readonly DependencyProperty DialogHostProperty = DependencyProperty.Register(nameof(DialogHost), typeof(string), typeof(GradientPicker),
+            new FrameworkPropertyMetadata(default(string)));
+
         public static readonly RoutedEvent ColorGradientChangedEvent =
             EventManager.RegisterRoutedEvent(nameof(ColorGradient), RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler<ColorGradient>), typeof(GradientPicker));
 

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

@@ -42,7 +42,7 @@
                     <DataTrigger.ExitActions>
                         <BeginStoryboard>
                             <Storyboard TargetProperty="StrokeThickness">
-                                <DoubleAnimation To="0" Duration="0:0:0.1" />
+                                <DoubleAnimation To="1" Duration="0:0:0.1" />
                             </Storyboard>
                         </BeginStoryboard>
                     </DataTrigger.ExitActions>
@@ -53,7 +53,7 @@
     <Path Style="{StaticResource ColorStopStyle}"
           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="{DynamicResource MaterialDesignBody}"
-          StrokeThickness="0"
+          StrokeThickness="1"
           Cursor="Hand"
           MouseDown="{s:Action StopMouseDown}"
           MouseUp="{s:Action StopMouseUp}"

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

@@ -1,43 +1,42 @@
-<controls:MaterialWindow x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorView"
+<UserControl x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorView"
-                         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-                         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-                         xmlns:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
+             xmlns:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
-                         xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
+             xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
-                         xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
+             xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
-                         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-                         xmlns:shared="clr-namespace:Artemis.UI.Shared"
+             xmlns:shared="clr-namespace:Artemis.UI.Shared"
-                         xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:s="https://github.com/canton7/Stylet"
-                         xmlns:controls1="clr-namespace:Artemis.UI.Shared.Controls"
+             xmlns:controls1="clr-namespace:Artemis.UI.Shared.Controls"
-                         mc:Ignorable="d"
+             mc:Ignorable="d"
-                         Title="Gradient Editor"
+             Background="{DynamicResource MaterialDesignPaper}"
-                         Background="{DynamicResource MaterialDesignPaper}"
+             FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
-                         FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
+             Width="500"
-                         Width="500"
+             Height="500"
-                         Height="500"
+             d:DesignHeight="450"
-                         ResizeMode="NoResize"
+             d:DesignWidth="800"
-                         Icon="/Resources/Images/Logo/logo-512.png"
+             d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
-                         FadeContentIfInactive="False"
+    <UserControl.Resources>
-                         d:DesignHeight="450"
-                         d:DesignWidth="800"
-                         d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
-    <controls:MaterialWindow.Resources>
         <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
         <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
-    </controls:MaterialWindow.Resources>
+    </UserControl.Resources>
-    <Grid>
+    <Grid  Margin="16">
         <Grid.RowDefinitions>
-            <RowDefinition Height="*"/>
+            <RowDefinition Height="*" />
-            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <materialDesign:Card Grid.Row="0" Margin="15 15 15 7" Padding="15" >
+        <materialDesign:Card Grid.Row="0" Margin="15 15 15 7" >
             <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="16">
                 <materialDesign:PackIcon Kind="Crane" Width="80" Height="80" HorizontalAlignment="Center" />
-                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
+                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap"
+                           HorizontalAlignment="Center">
                     Gradient saving not implemented yet
                 </TextBlock>
-                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
+                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap"
+                           HorizontalAlignment="Center">
                     Soon you'll be able to store different gradients for usage throughout your profiles and quickly select them
                 </TextBlock>
             </StackPanel>
@@ -50,14 +49,16 @@
 
                 <Rectangle x:Name="Preview" Width="440" Height="40" Margin="15 0">
                     <Rectangle.Fill>
-                        <LinearGradientBrush GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
+                        <LinearGradientBrush
+                            GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
                     </Rectangle.Fill>
                 </Rectangle>
 
-                <ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0" MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
+                <ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0"
+                              MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent"/>
+                            <Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemContainerStyle>
@@ -85,31 +86,39 @@
                     </Grid.ColumnDefinitions>
 
                     <Label Grid.Column="0" HorizontalAlignment="Right">Color:</Label>
-                    <controls1:ColorPicker 
+                    <controls1:ColorPicker
                         Grid.Row="0"
                         Grid.Column="1"
                         x:Name="CurrentColor"
-                        Width="85" 
+                        Width="85"
                         Color="{Binding Path=SelectedColorStopViewModel.ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}"
-                        IsEnabled="{Binding HasSelectedColorStopViewModel}"/>
+                        IsEnabled="{Binding HasSelectedColorStopViewModel}" />
 
                     <Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right">Location:</Label>
                     <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Horizontal">
-                        <TextBox Width="40" Text="{Binding SelectedColorStopViewModel.OffsetPercent}" IsEnabled="{Binding HasSelectedColorStopViewModel}" materialDesign:HintAssist.Hint="0"/>
+                        <TextBox Width="40" Text="{Binding SelectedColorStopViewModel.OffsetPercent}"
+                                 IsEnabled="{Binding HasSelectedColorStopViewModel}" materialDesign:HintAssist.Hint="0" />
                         <Label>%</Label>
                     </StackPanel>
 
-                    <Button Grid.Row="0" Grid.Column="4" 
+                    <Button Grid.Row="0" Grid.Column="4"
-                            Style="{StaticResource MaterialDesignRaisedButton}" 
+                            Style="{StaticResource MaterialDesignRaisedButton}"
-                            Width="80" 
+                            Width="80"
-                            Height="25" 
+                            Height="25"
                             IsEnabled="{Binding HasSelectedColorStopViewModel}"
-                            Command="{s:Action RemoveColorStop}" 
+                            Command="{s:Action RemoveColorStop}"
                             CommandParameter="{Binding SelectedColorStopViewModel}">
                         Delete
                     </Button>
                 </Grid>
             </StackPanel>
-        </materialDesign:Card >
+        </materialDesign:Card>
+
+        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
+            <Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0"
+                    Command="{s:Action Cancel}" Content="Cancel" />
+            <Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True" Margin="0 8 0 0"
+                    Command="{s:Action Confirm}" Content="Accept" />
+        </StackPanel>
     </Grid>
-</controls:MaterialWindow>
+</UserControl>

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

@@ -1,23 +1,29 @@
-using System.ComponentModel;
+using System.Collections.Generic;
+using System.ComponentModel;
 using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using Artemis.Core.Models.Profile;
+using Artemis.UI.Shared.Services.Dialog;
 using Artemis.UI.Shared.Utilities;
+using SkiaSharp;
 using Stylet;
 
 namespace Artemis.UI.Shared.Screens.GradientEditor
 {
-    public class GradientEditorViewModel : Screen
+    public class GradientEditorViewModel : DialogViewModelBase
     {
         private ColorStopViewModel _selectedColorStopViewModel;
+        private readonly List<ColorGradientStop> _originalStops;
 
         public GradientEditorViewModel(ColorGradient colorGradient)
         {
             ColorGradient = colorGradient;
             ColorStopViewModels = new BindableCollection<ColorStopViewModel>();
 
+            _originalStops = ColorGradient.Stops.Select(s => new ColorGradientStop(s.Color, s.Position)).ToList();
+
             foreach (var colorStop in ColorGradient.Stops.OrderBy(s => s.Position))
                 ColorStopViewModels.Add(new ColorStopViewModel(this, colorStop));
         }
@@ -37,7 +43,8 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
         public bool HasSelectedColorStopViewModel => SelectedColorStopViewModel != null;
 
         public ColorGradient ColorGradient { get; }
-        public double PreviewWidth => 437.5;
+        // TODO: Find the width out from view
+        public double PreviewWidth => 408;
 
         public void AddColorStop(object sender, MouseEventArgs e)
         {
@@ -75,5 +82,22 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
             foreach (var stopViewModel in ColorStopViewModels)
                 stopViewModel.IsSelected = stopViewModel == SelectedColorStopViewModel;
         }
+
+        public void Confirm()
+        {
+            if (!Session.IsEnded)
+                Session.Close(true);
+        }
+
+        public void Cancel()
+        {
+            // Restore the saved state
+            ColorGradient.Stops.Clear();
+            ColorGradient.Stops.AddRange(_originalStops);
+            ColorGradient.OnColorValuesUpdated();
+
+            if (!Session.IsEnded)
+                Session.Close(false);
+        }
     }
 }

src/Artemis.UI.Shared/Services/GradientPickerService.cs

@@ -1,7 +1,9 @@
-using Artemis.Core.Models.Profile;
+using System.Collections.Generic;
+using Artemis.Core.Models.Profile;
 using Artemis.UI.Shared.Ninject.Factories;
 using Artemis.UI.Shared.Screens.GradientEditor;
 using Artemis.UI.Shared.Services.Interfaces;
+using LiteDB.Engine;
 using Ninject;
 using Stylet;
 
@@ -10,17 +12,21 @@ namespace Artemis.UI.Shared.Services
     public class GradientPickerService : IGradientPickerService
     {
         private readonly IGradientEditorVmFactory _gradientEditorVmFactory;
+        private readonly IDialogService _dialogService;
         private readonly IWindowManager _windowManager;
 
-        public GradientPickerService(IGradientEditorVmFactory gradientEditorVmFactory, IWindowManager windowManager)
+        public GradientPickerService(IGradientEditorVmFactory gradientEditorVmFactory, IDialogService dialogService)
         {
             _gradientEditorVmFactory = gradientEditorVmFactory;
-            _windowManager = windowManager;
+            _dialogService = dialogService;
         }
 
-        public void ShowGradientPicker(ColorGradient colorGradient)
+        public void ShowGradientPicker(ColorGradient colorGradient, string dialogHost)
         {
-            _windowManager.ShowDialog(_gradientEditorVmFactory.Create(colorGradient));
+            if (!string.IsNullOrWhiteSpace(dialogHost))
+                _dialogService.ShowDialogAt<GradientEditorViewModel>(dialogHost, new Dictionary<string, object> {{"colorGradient", colorGradient}});
+            else
+                _dialogService.ShowDialog<GradientEditorViewModel>(new Dictionary<string, object> {{"colorGradient", colorGradient}});
         }
     }
 }

src/Artemis.UI.Shared/Services/Interfaces/IGradientPickerService.cs

@@ -4,6 +4,6 @@ namespace Artemis.UI.Shared.Services.Interfaces
 {
     public interface IGradientPickerService : IArtemisSharedUIService
     {
-        void ShowGradientPicker(ColorGradient colorGradient);
+        void ShowGradientPicker(ColorGradient colorGradient, string dialogHost);
     }
 }

src/Artemis.UI/Artemis.UI.csproj

@@ -116,17 +116,17 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Castle.Core" Version="4.4.0" />
-    <PackageReference Include="FluentValidation" Version="8.6.1" />
+    <PackageReference Include="FluentValidation" Version="8.6.2" />
     <PackageReference Include="gong-wpf-dragdrop" Version="2.2.0" />
     <PackageReference Include="Hardcodet.NotifyIcon.Wpf.NetCore" Version="1.0.10" />
     <PackageReference Include="Humanizer.Core" Version="2.7.9" />
     <PackageReference Include="MaterialDesignExtensions" Version="3.0.0" />
-    <PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
+    <PackageReference Include="MaterialDesignThemes" Version="3.1.0" />
     <PackageReference Include="Microsoft.Win32.Registry" Version="4.7.0" />
     <PackageReference Include="Microsoft.Xaml.Behaviors.Wpf" Version="1.1.19" />
     <PackageReference Include="Ninject" Version="3.3.4" />
     <PackageReference Include="Ninject.Extensions.Conventions" Version="3.3.0" />
-    <PackageReference Include="PropertyChanged.Fody" Version="3.2.6" />
+    <PackageReference Include="PropertyChanged.Fody" Version="3.2.8" />
     <PackageReference Include="Serilog" Version="2.9.0" />
     <PackageReference Include="SkiaSharp.Views.WPF" Version="1.68.2-preview.29" />
     <PackageReference Include="Stylet" Version="1.3.1" />

src/Artemis.UI/FodyWeavers.xsd

@@ -31,6 +31,16 @@
                 <xs:documentation>Used to control if equality checks should use the static Equals method resolved from the base class.</xs:documentation>
               </xs:annotation>
             </xs:attribute>
+            <xs:attribute name="SuppressWarnings" type="xs:boolean">
+              <xs:annotation>
+                <xs:documentation>Used to turn off build warnings from this weaver.</xs:documentation>
+              </xs:annotation>
+            </xs:attribute>
+            <xs:attribute name="SuppressOnPropertyNameChangedWarning" type="xs:boolean">
+              <xs:annotation>
+                <xs:documentation>Used to turn off build warnings about mismatched On_PropertyName_Changed methods.</xs:documentation>
+              </xs:annotation>
+            </xs:attribute>
           </xs:complexType>
         </xs:element>
       </xs:all>

src/Artemis.UI/Screens/Home/HomeView.xaml

@@ -88,7 +88,7 @@
                                                 x:Name="GitHubButton" Command="{s:Action OpenUrl}"
                                                 CommandParameter="https://github.com/SpoinkyNL/Artemis">
                                             <StackPanel Orientation="Horizontal">
-                                                <materialDesign:PackIcon Kind="GithubCircle" />
+                                                <materialDesign:PackIcon Kind="Github" />
                                                 <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">GitHub</TextBlock>
                                             </StackPanel>
                                         </Button>
@@ -134,7 +134,7 @@
                                 <ColumnDefinition Width="200" />
                                 <ColumnDefinition Width="*" />
                             </Grid.ColumnDefinitions>
-                            <materialDesign:PackIcon Kind="GithubCircle" Width="160" Height="160"
+                            <materialDesign:PackIcon Kind="Github" Width="160" Height="160"
                                                      HorizontalAlignment="Center" VerticalAlignment="Center" />
                             <StackPanel Grid.Row="0" Grid.Column="1">
                                 <TextBlock Style="{StaticResource MaterialDesignHeadline5TextBlock}" Margin="16 16 16 8">Open Source</TextBlock>
@@ -178,7 +178,7 @@
             --><!-- add the visibility binding https://github.com/ButchersBoy/MaterialDesignInXamlToolkit/issues/723 --><!--
             <StackPanel Visibility="{Binding Path=IsPopupOpen, ElementName=MyPopupBox, Converter={StaticResource BoolToVisibilityConverter}}">
                 <Button ToolTip="GitHub" Command="{s:Action OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis">
-                    <materialDesign:PackIcon Kind="GithubCircle" Height="20" Width="20" />
+                    <materialDesign:PackIcon Kind="Github" Height="20" Width="20" />
                 </Button>
                 <Button ToolTip="Twitter" Command="{s:Action OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis"
                         Background="{DynamicResource PrimaryHueMidBrush}"

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerPropertiesView.xaml

@@ -77,25 +77,34 @@
             <!-- Misc controls & time display -->
             <DockPanel Grid.Row="0" VerticalAlignment="Center">
                 <StackPanel Orientation="Horizontal">
-                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Play from start (Shift+Space)" Command="{s:Action PlayFromStart}" Focusable="False">
+                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}"
+                            ToolTip="Play from start (Shift+Space)" Command="{s:Action PlayFromStart}"
+                            Focusable="False">
                         <materialDesign:PackIcon Kind="StepForward" />
                     </Button>
-                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Toggle play/pause (Space)" Command="{s:Action Play}" Focusable="False">
+                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}"
+                            ToolTip="Toggle play/pause (Space)" Command="{s:Action Play}" Focusable="False">
                         <StackPanel>
-                            <materialDesign:PackIcon Kind="Play" Visibility="{Binding Playing, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}, Mode=OneWay}" />
+                            <materialDesign:PackIcon Kind="Play"
-                            <materialDesign:PackIcon Kind="Pause" Visibility="{Binding Playing, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                                     Visibility="{Binding Playing, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}, Mode=OneWay}" />
+                            <materialDesign:PackIcon Kind="Pause"
+                                                     Visibility="{Binding Playing, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
                         </StackPanel>
                     </Button>
-                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Go to start" Command="{s:Action GoToStart}" Focusable="False">
+                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Go to start"
+                            Command="{s:Action GoToStart}" Focusable="False">
                         <materialDesign:PackIcon Kind="SkipBackward" />
                     </Button>
-                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Go to end" Command="{s:Action GoToEnd}" Focusable="False">
+                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Go to end"
+                            Command="{s:Action GoToEnd}" Focusable="False">
                         <materialDesign:PackIcon Kind="SkipForward" />
                     </Button>
-                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Previous frame" Command="{s:Action GoToPreviousFrame}" Focusable="False">
+                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Previous frame"
+                            Command="{s:Action GoToPreviousFrame}" Focusable="False">
                         <materialDesign:PackIcon Kind="SkipPrevious" />
                     </Button>
-                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Next frame" Command="{s:Action GoToNextFrame}" Focusable="False">
+                    <Button Style="{StaticResource MaterialDesignIconForegroundButton}" ToolTip="Next frame"
+                            Command="{s:Action GoToNextFrame}" Focusable="False">
                         <materialDesign:PackIcon Kind="SkipNext" />
                     </Button>
                     <ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}"
@@ -106,20 +115,22 @@
                     </ToggleButton>
                 </StackPanel>
                 <StackPanel VerticalAlignment="Center">
-                    <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="{Binding FormattedCurrentTime}" HorizontalAlignment="Right" Margin="0 0 20 0" />
+                    <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}"
+                               Text="{Binding FormattedCurrentTime}" HorizontalAlignment="Right" Margin="0 0 20 0" />
                 </StackPanel>
             </DockPanel>
 
             <!-- Properties tree -->
-            <ScrollViewer x:Name="PropertyTreeScrollViewer"
+            <materialDesign:DialogHost Identifier="PropertyTreeDialogHost" CloseOnClickAway="True" Grid.Row="1">
-                          Grid.Row="1"
+                <ScrollViewer x:Name="PropertyTreeScrollViewer"
-                          HorizontalScrollBarVisibility="Hidden"
+                              HorizontalScrollBarVisibility="Hidden"
-                          VerticalScrollBarVisibility="Hidden"
+                              VerticalScrollBarVisibility="Hidden"
-                          ScrollChanged="TimelineScrollChanged">
+                              ScrollChanged="TimelineScrollChanged">
-                <Border BorderThickness="0,0,1,0" BorderBrush="{DynamicResource MaterialDesignDivider}">
+                    <Border BorderThickness="0,0,1,0" BorderBrush="{DynamicResource MaterialDesignDivider}">
-                    <ContentControl s:View.Model="{Binding PropertyTree}" />
+                        <ContentControl s:View.Model="{Binding PropertyTree}" />
-                </Border>
+                    </Border>
-            </ScrollViewer>
+                </ScrollViewer>
+            </materialDesign:DialogHost>
         </Grid>
 
         <!-- Right side -->
@@ -131,7 +142,8 @@
             </Grid.RowDefinitions>
 
             <!-- Timeline header -->
-            <ScrollViewer Grid.Row="0" x:Name="TimelineHeaderScrollViewer" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ScrollChanged="TimelineScrollChanged">
+            <ScrollViewer Grid.Row="0" x:Name="TimelineHeaderScrollViewer" HorizontalScrollBarVisibility="Hidden"
+                          VerticalScrollBarVisibility="Hidden" ScrollChanged="TimelineScrollChanged">
                 <Grid Background="{DynamicResource MaterialDesignCardBackground}">
                     <!-- Caret -->
                     <Canvas ZIndex="1"
@@ -141,7 +153,8 @@
                             MouseUp="{s:Action TimelineMouseUp}"
                             MouseMove="{s:Action TimelineMouseMove}">
                         <Polygon Points="-10,0 0,20, 10,00" Fill="{StaticResource SecondaryAccentBrush}" />
-                        <Line X1="0" X2="0" Y1="0" Y2="{Binding ActualHeight, ElementName=ContainerGrid}" StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
+                        <Line X1="0" X2="0" Y1="0" Y2="{Binding ActualHeight, ElementName=ContainerGrid}"
+                              StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
                     </Canvas>
                     <!-- Time -->
                     <timeline:PropertyTimelineHeader Margin="0 25 0 0"
@@ -167,7 +180,8 @@
                             MouseDown="{s:Action TimelineMouseDown}"
                             MouseUp="{s:Action TimelineMouseUp}"
                             MouseMove="{s:Action TimelineMouseMove}">
-                        <Line X1="0" X2="0" Y1="0" Y2="{Binding ActualHeight, ElementName=ContainerGrid}" StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
+                        <Line X1="0" X2="0" Y1="0" Y2="{Binding ActualHeight, ElementName=ContainerGrid}"
+                              StrokeThickness="2" Stroke="{StaticResource SecondaryAccentBrush}" />
                     </Canvas>
                     <ContentControl x:Name="PropertyTimeLine" s:View.Model="{Binding PropertyTimeline}" />
                 </Grid>

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

@@ -15,7 +15,8 @@
         <controls:GradientPicker Width="132"
                                 Margin="0 2"
                                 Padding="0 -1"
-                                ColorGradient="{Binding ColorGradientInputValue}" />
+                                ColorGradient="{Binding ColorGradientInputValue}" 
+                                DialogHost="PropertyTreeDialogHost"/>
         <TextBlock Margin="5 0 0 4" Width="10" VerticalAlignment="Bottom" Text="{Binding LayerPropertyViewModel.LayerProperty.InputAffix}" />
     </StackPanel>
 </UserControl>

src/Plugins/Artemis.Plugins.Devices.DMX/Artemis.Plugins.Devices.DMX.csproj

@@ -24,7 +24,7 @@
     </None>
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
+    <PackageReference Include="MaterialDesignThemes" Version="3.1.0" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\..\Artemis.Core\Artemis.Core.csproj">

src/Plugins/Artemis.Plugins.Devices.WS281X/Artemis.Plugins.Devices.WS281X.csproj

@@ -24,7 +24,7 @@
     </None>
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
+    <PackageReference Include="MaterialDesignThemes" Version="3.1.0" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\..\Artemis.Core\Artemis.Core.csproj">

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

@@ -28,9 +28,9 @@ namespace Artemis.Plugins.LayerBrushes.Color
 
         private void UpdateColorProperties()
         {
-            Layer.Properties.RemoveLayerProperty(ColorProperty);
+            UnRegisterLayerProperty(ColorProperty);
             ColorProperty = null;
-            Layer.Properties.RemoveLayerProperty(GradientProperty);
+            UnRegisterLayerProperty(GradientProperty);
             GradientProperty = null;
 
             if (GradientTypeProperty.Value == GradientType.Solid)

src/Plugins/Artemis.Plugins.LayerBrushes.Noise/NoiseBrush.cs

@@ -180,9 +180,11 @@ namespace Artemis.Plugins.LayerBrushes.Noise
 
         private void CreateColorMap(object sender, EventArgs e)
         {
-            _colorMap = new SKColor[101];
+            var colorMap = new SKColor[101];
             for (var i = 0; i < 101; i++)
-                _colorMap[i] = GradientColorProperty.Value.GetColor(i / 100f);
+                colorMap[i] = GradientColorProperty.Value.GetColor(i / 100f);
+
+            _colorMap = colorMap;
         }
     }