Added wooting layout images

Added timeline (WIP)

src/Artemis.UI/Artemis.UI.csproj

@@ -159,10 +159,19 @@
       <DependentUpon>LayerPropertiesView.xaml</DependentUpon>
     </Compile>
     <Compile Include="Screens\Module\ProfileEditor\LayerProperties\LayerPropertiesViewModel.cs" />
+    <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\Controls\TimelineTime.cs" />
     <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\LayerPropertiesTimelineView.xaml.cs">
       <DependentUpon>LayerPropertiesTimelineView.xaml</DependentUpon>
     </Compile>
     <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\LayerPropertiesTimelineViewModel.cs" />
+    <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\TimelineKeyframeView.xaml.cs">
+      <DependentUpon>TimelineKeyframeView.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\TimelineKeyframeViewModel.cs" />
+    <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\TimelinePropertyRailView.xaml.cs">
+      <DependentUpon>TimelinePropertyRailView.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\TimelinePropertyRailViewModel.cs" />
     <Compile Include="Screens\Module\ProfileEditor\Visualization\CanvasViewModel.cs" />
     <Compile Include="Screens\Module\ProfileEditor\Visualization\ProfileLayerView.xaml.cs">
       <DependentUpon>ProfileLayerView.xaml</DependentUpon>
@@ -301,6 +310,14 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\TimelineKeyframeView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Screens\Module\ProfileEditor\LayerProperties\Timeline\TimelinePropertyRailView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Screens\Module\ProfileEditor\ProfileTree\TreeItem\FolderView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -4,9 +4,10 @@
              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"
+             xmlns:s="https://github.com/canton7/Stylet"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
     <Grid>
-            
+        <ContentControl s:View.Model="{Binding Timeline}" />
     </Grid>
 </UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerPropertiesViewModel.cs

@@ -1,12 +1,14 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties
 {
     public class LayerPropertiesViewModel : ProfileEditorPanelViewModel
     {
+        public LayerPropertiesViewModel()
+        {
+            Timeline = new LayerPropertiesTimelineViewModel();
+        }
+
+        public LayerPropertiesTimelineViewModel Timeline { get; set; }
     }
-}
+}

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/Controls/TimelineTime.cs

@@ -0,0 +1,148 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.Controls
+{
+    public class TimelineTime : FrameworkElement
+    {
+        public static readonly DependencyProperty FillProperty = DependencyProperty.Register(nameof(Fill), typeof(Brush), typeof(TimelineTime),
+            new FrameworkPropertyMetadata(default(Brush), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static readonly DependencyProperty FontFamilyProperty = DependencyProperty.Register(nameof(FontFamily), typeof(FontFamily), typeof(TimelineTime),
+            new FrameworkPropertyMetadata(TextBlock.FontFamilyProperty.DefaultMetadata.DefaultValue, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static readonly DependencyProperty PixelsPerSecondProperty = DependencyProperty.Register(nameof(PixelsPerSecond), typeof(int), typeof(TimelineTime),
+            new FrameworkPropertyMetadata(default(int), FrameworkPropertyMetadataOptions.AffectsRender));
+
+
+        public static readonly DependencyProperty FrameStartProperty = DependencyProperty.Register(nameof(FrameStart), typeof(int), typeof(TimelineTime),
+            new FrameworkPropertyMetadata(default(int), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        private double _subd1;
+        private double _subd2;
+        private double _subd3;
+
+        public Brush Fill
+        {
+            get => (Brush) GetValue(FillProperty);
+            set => SetValue(FillProperty, value);
+        }
+
+        public FontFamily FontFamily
+        {
+            get => (FontFamily) GetValue(FontFamilyProperty);
+            set => SetValue(FontFamilyProperty, value);
+        }
+
+        public int PixelsPerSecond
+        {
+            get => (int) GetValue(PixelsPerSecondProperty);
+            set => SetValue(PixelsPerSecondProperty, value);
+        }
+
+        public int FrameStart
+        {
+            get => (int) GetValue(FrameStartProperty);
+            set => SetValue(FrameStartProperty, value);
+        }
+
+        // TODO: Does this get called when the size changes?
+        protected override void OnRender(DrawingContext drawingContext)
+        {
+            base.OnRender(drawingContext);
+            UpdateTimeScale();
+
+            var linePen = new Pen(Fill, 1);
+            var width = RenderSize.Width;
+
+            var units = PixelsPerSecond / _subd1;
+            var offsetUnits = FrameStart * PixelsPerSecond % units;
+
+            // Labels
+            var count = (width + offsetUnits) / units;
+            for (var i = 0; i < count; i++)
+            {
+                var x = i * units - offsetUnits;
+                var t = TimeSpan.FromSeconds((i * units - offsetUnits) / PixelsPerSecond + FrameStart);
+                if (PixelsPerSecond > 200)
+                    RenderLabel(drawingContext, $"{Math.Floor(t.TotalSeconds):00}.{t.Milliseconds:000}", x);
+                else if (PixelsPerSecond > 60)
+                    RenderLabel(drawingContext, $"{Math.Floor(t.TotalSeconds):00}.{t.Milliseconds:000}", x);
+                else
+                    RenderLabel(drawingContext, $"{Math.Floor(t.TotalMinutes):0}:{t.Seconds:00}", x);
+            }
+
+            // Large ticks
+            units = PixelsPerSecond / _subd2;
+            count = (width + offsetUnits) / units;
+            for (var i = 0; i < count; i++)
+            {
+                var x = i * units - offsetUnits;
+                drawingContext.DrawLine(linePen, new Point(x, 15), new Point(x, 30));
+            }
+
+            // Small ticks
+            var mul = _subd3 / _subd2;
+            units = PixelsPerSecond / _subd3;
+            count = (width + offsetUnits) / units;
+            for (var i = 0; i < count; i++)
+            {
+                if (Math.Abs(i % mul) < 0.001) continue;
+                var x = i * units - offsetUnits;
+                drawingContext.DrawLine(linePen, new Point(x, 22), new Point(x, 30));
+            }
+        }
+
+        private void RenderLabel(DrawingContext drawingContext, string text, double x)
+        {
+            var typeFace = new Typeface(FontFamily, new FontStyle(), new FontWeight(), new FontStretch());
+            var formattedText = new FormattedText(text, CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, typeFace, 9, Fill, null, VisualTreeHelper.GetDpi(this).PixelsPerDip);
+            drawingContext.DrawText(formattedText, new Point(x, 0));
+        }
+
+        private void UpdateTimeScale()
+        {
+            object[] subds;
+            if (PixelsPerSecond > 350)
+                subds = new object[] {12d, 12d, 60d};
+            else if (PixelsPerSecond > 250)
+                subds = new object[] {6d, 12d, 60d};
+            else if (PixelsPerSecond > 200)
+                subds = new object[] {6d, 6d, 30d};
+            else if (PixelsPerSecond > 150)
+                subds = new object[] {4d, 4d, 20d};
+            else if (PixelsPerSecond > 100)
+                subds = new object[] {4d, 4d, 8d};
+            else if (PixelsPerSecond > 90)
+                subds = new object[] {4d, 4d, 8d};
+            else if (PixelsPerSecond > 60)
+                subds = new object[] {2d, 4d, 8d};
+            else if (PixelsPerSecond > 40)
+                subds = new object[] {1d, 2d, 10d};
+            else if (PixelsPerSecond > 30)
+                subds = new object[] {1d, 2d, 10d};
+            else if (PixelsPerSecond > 10)
+                subds = new object[] {1d / 2d, 1d / 2d, 1d / 2d};
+            else if (PixelsPerSecond > 4)
+                subds = new object[] {1d / 5d, 1d / 5d, 1d / 5d};
+            else if (PixelsPerSecond > 3)
+                subds = new object[] {1d / 10d, 1d / 10d, 1d / 5d};
+            else if (PixelsPerSecond > 1)
+                subds = new object[] {1d / 20d, 1d / 20d, 1d / 10d};
+            else if (PixelsPerSecond >= 1)
+                subds = new object[] {1d / 30d, 1d / 30d, 1d / 15d};
+            else
+            {
+                // 1s per pixel
+                subds = new object[] {1d / 60d, 1d / 60d, 1d / 15d};
+            }
+
+            _subd1 = (double) subds[0]; // big ticks / labels
+            _subd2 = (double) subds[1]; // medium ticks
+            _subd3 = (double) subds[2]; // small ticks
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/LayerPropertiesTimelineView.xaml

@@ -1,12 +1,83 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.LayerPropertiesTimelineView"
              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.Timeline"
-             mc:Ignorable="d" 
-             d:DesignHeight="450" d:DesignWidth="800">
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:timeline="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:controls="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.Controls"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance timeline:LayerPropertiesTimelineViewModel}">
+    <UserControl.Resources>
+        <Style x:Key="ItemsControlVirtualizedStyle" TargetType="ItemsControl">
+            <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />
+            <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
+            <Setter Property="ItemsPanel">
+                <Setter.Value>
+                    <ItemsPanelTemplate>
+                        <VirtualizingStackPanel />
+                    </ItemsPanelTemplate>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ItemsControl">
+                        <Border
+                            BorderThickness="{TemplateBinding Border.BorderThickness}"
+                            Padding="{TemplateBinding Control.Padding}"
+                            BorderBrush="{TemplateBinding Border.BorderBrush}"
+                            Background="{TemplateBinding Panel.Background}"
+                            SnapsToDevicePixels="True">
+                            <ScrollViewer Padding="{TemplateBinding Control.Padding}" Focusable="False">
+                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
+                            </ScrollViewer>
+                        </Border>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </UserControl.Resources>
+
     <Grid>
-            
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <ScrollViewer x:Name="Keyframes"
+                      Grid.Row="0"
+                      HorizontalScrollBarVisibility="Visible"
+                      VerticalScrollBarVisibility="Hidden"
+                      Padding="5 0 5 0">
+            <StackPanel>
+                <controls:TimelineTime Height="30" Fill="{StaticResource MaterialDesignBody}" PixelsPerSecond="{Binding PixelsPerSecond}"/>
+
+                <ItemsControl ItemsSource="{Binding TimelinePropertyRailViewModels}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <ContentControl s:View.Model="{Binding}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </StackPanel>
+        </ScrollViewer>
+
+        <StackPanel Grid.Row="1"
+                    Orientation="Horizontal"
+                    HorizontalAlignment="Right">
+            <TextBlock Text="{Binding PixelsPerSecond}" />
+            <Slider Grid.Row="2"
+                    Orientation="Horizontal"
+                    HorizontalAlignment="Right"
+                    Margin="10"
+                    TickFrequency="5"
+                    Minimum="1"
+                    Maximum="600"
+                    Value="{Binding PixelsPerSecond}"
+                    Width="600" />
+        </StackPanel>
+
+
     </Grid>
-</UserControl>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/LayerPropertiesTimelineView.xaml.cs

@@ -25,4 +25,4 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             InitializeComponent();
         }
     }
-}
+}

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

@@ -1,12 +1,45 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
+using System.Collections.Generic;
+using Stylet;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 {
-    class LayerPropertiesTimelineViewModel
+    public class LayerPropertiesTimelineViewModel : PropertyChangedBase
     {
+        private int _pixelsPerSecond = 1;
+
+        public LayerPropertiesTimelineViewModel()
+        {
+            TimelinePropertyRailViewModels = new BindableCollection<TimelinePropertyRailViewModel>();
+
+            CreateTestValues();
+            Update();
+        }
+
+        public int PixelsPerSecond
+        {
+            get => _pixelsPerSecond;
+            set
+            {
+                _pixelsPerSecond = value;
+                Update();
+            }
+        }
+
+        public BindableCollection<TimelinePropertyRailViewModel> TimelinePropertyRailViewModels { get; set; }
+
+        private void CreateTestValues()
+        {
+            var propertyRailViewModels = new List<TimelinePropertyRailViewModel>();
+            for (var i = 0; i < 20; i++)
+                propertyRailViewModels.Add(new TimelinePropertyRailViewModel());
+
+            TimelinePropertyRailViewModels.AddRange(propertyRailViewModels);
+        }
+
+        public void Update()
+        {
+            foreach (var timelinePropertyRailViewModel in TimelinePropertyRailViewModels)
+                timelinePropertyRailViewModel.Update(PixelsPerSecond);
+        }
     }
-}
+}

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineKeyframeView.xaml

@@ -0,0 +1,11 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.TimelineKeyframeView"
+             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.Timeline"
+             mc:Ignorable="d" 
+             d:DesignHeight="50" d:DesignWidth="50"
+             d:DataContext="{d:DesignInstance local:TimelineKeyframeViewModel}">
+    <Ellipse Fill="{StaticResource PrimaryHueMidBrush}" Width="10" Height="10" Margin="-5,6,0,0" ToolTip="{Binding Timestamp}"></Ellipse>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineKeyframeView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
+{
+    /// <summary>
+    /// Interaction logic for TimelineKeyframeView.xaml
+    /// </summary>
+    public partial class TimelineKeyframeView : UserControl
+    {
+        public TimelineKeyframeView()
+        {
+            InitializeComponent();
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+using System;
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
+{
+    public class TimelineKeyframeViewModel : PropertyChangedBase
+    {
+        private const double BaseSize = 60.0;
+
+        public TimeSpan Position { get; set; }
+        
+        public double X { get; set; }
+        public string Timestamp { get; set; }
+
+        public void Update(int pixelsPerSecond)
+        {
+//            var timelinePartWidth = pixelsPerSecond % BaseSize + BaseSize;
+//            var millisecondsPerPart = extraParts > 0 ? BaseSize * 1000 / extraParts : BaseSize * 1000;
+            X = pixelsPerSecond * Position.TotalSeconds;
+            Timestamp = $"{Math.Floor(Position.TotalSeconds):00}.{Position.Milliseconds:000}";
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyRailView.xaml

@@ -0,0 +1,31 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.TimelinePropertyRailView"
+             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.Timeline"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:TimelinePropertyRailViewModel}">
+    <Border BorderThickness="0,1" BorderBrush="{StaticResource MaterialDesignTextAreaBorder}" Height="25" Margin="0,0,0,-1">
+        <ItemsControl ItemsSource="{Binding TimelineKeyframeViewModels}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <Canvas />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemContainerStyle>
+                <Style TargetType="{x:Type ContentPresenter}">
+                    <Setter Property="Canvas.Left" Value="{Binding X}" />
+                </Style>
+            </ItemsControl.ItemContainerStyle>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <ContentControl s:View.Model="{Binding}"/>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+    </Border>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyRailView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
+{
+    /// <summary>
+    /// Interaction logic for TimelinePropertyRailView.xaml
+    /// </summary>
+    public partial class TimelinePropertyRailView : UserControl
+    {
+        public TimelinePropertyRailView()
+        {
+            InitializeComponent();
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+using System;
+using System.Collections.Generic;
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
+{
+    public class TimelinePropertyRailViewModel : PropertyChangedBase
+    {
+        public TimelinePropertyRailViewModel()
+        {
+            TimelineKeyframeViewModels = new BindableCollection<TimelineKeyframeViewModel>();
+            CreateTestValues();
+        }
+
+        public BindableCollection<TimelineKeyframeViewModel> TimelineKeyframeViewModels { get; set; }
+
+        public void CreateTestValues()
+        {
+            var keyframeViewModels = new List<TimelineKeyframeViewModel>();
+            for (var i = 0; i < 20; i++)
+            {
+                keyframeViewModels.Add(new TimelineKeyframeViewModel());
+                keyframeViewModels[i].Position = TimeSpan.FromSeconds(i);
+            }
+
+            TimelineKeyframeViewModels.AddRange(keyframeViewModels);
+        }
+
+        public void Update(int pixelsPerSecond)
+        {
+            foreach (var timelineKeyframeViewModel in TimelineKeyframeViewModels)
+                timelineKeyframeViewModel.Update(pixelsPerSecond);
+
+            if (pixelsPerSecond == 10)
+                Console.WriteLine();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileEditorView.xaml

@@ -61,25 +61,8 @@
 
             <!-- Bottom panels -->
             <Grid Grid.Row="3">
-                <Grid.ColumnDefinitions>
-                    <!-- Layer elements -->
-                    <ColumnDefinition Width="*" MinWidth="100" />
-                    <!-- Element properties resize -->
-                    <ColumnDefinition Width="Auto" />
-                    <!-- Element properties -->
-                    <ColumnDefinition Width="{Binding ElementPropertiesWidth.Value, Mode=TwoWay}" MinWidth="100" />
-                </Grid.ColumnDefinitions>
-
                 <!-- Layer elements -->
                 <materialDesign:Card Grid.Column="0" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                    <ContentControl s:View.Model="{Binding LayerElementsViewModel}" />
-                </materialDesign:Card>
-
-                <!-- Element properties resize -->
-                <GridSplitter Grid.Column="1" Width="5" Margin="5 0" HorizontalAlignment="Stretch" Cursor="SizeWE" />
-
-                <!-- Element properties -->
-                <materialDesign:Card Grid.Column="2" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
                     <ContentControl s:View.Model="{Binding LayerPropertiesViewModel}" />
                 </materialDesign:Card>
             </Grid>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileViewModel.cs

@@ -156,6 +156,13 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
                         profileLayerViewModel.Dispose();
                         CanvasViewModels.Remove(profileLayerViewModel);
                     }
+
+                    // Sort the devices by ZIndex
+                    Execute.PostToUIThread(() =>
+                    {
+                        foreach (var device in Devices.ToList())
+                            CanvasViewModels.Move(CanvasViewModels.IndexOf(device), device.Device.ZIndex - 1);
+                    });
                 }
             });
         }
@@ -169,7 +176,11 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
             foreach (var surfaceDeviceConfiguration in devices)
             {
                 // Create VMs for missing devices
-                var viewModel = Devices.FirstOrDefault(vm => vm.Device.RgbDevice == surfaceDeviceConfiguration.RgbDevice);
+                ProfileDeviceViewModel viewModel;
+                lock (CanvasViewModels)
+                {
+                    viewModel = Devices.FirstOrDefault(vm => vm.Device.RgbDevice == surfaceDeviceConfiguration.RgbDevice);
+                }
                 if (viewModel == null)
                 {
                     // Create outside the UI thread to avoid slowdowns as much as possible