Added profile hierarchy creation and editing (doesn't save yet)

2026-11-12 20:06:33 +00:00 · 2019-11-23 23:56:07 +01:00
1 parent ff959b6f9c
commit 1bb2d4a4f2
@@ -12,9 +12,9 @@
            Add a new profile
        </TextBlock>

-        <TextBox materialDesign:HintAssist.Hint="Profile name" 
-                 Margin="0 8 0 16" 
-                 Style="{StaticResource MaterialDesignFloatingHintTextBox}" 
+        <TextBox materialDesign:HintAssist.Hint="Profile name"
+                 Margin="0 8 0 16"
+                 Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                 Text="{Binding ProfileName, UpdateSourceTrigger=PropertyChanged}" />

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
@@ -1,12 +1,10 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions.DisplayConditionView"
             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: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.DisplayConditions"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
+    <Grid />
+</UserControl>
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
+namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
 {
    public class DisplayConditionViewModel
    {
    }
-}
+}
@@ -1,12 +1,10 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions.DisplayConditionsView"
             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: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.DisplayConditions"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
+    <Grid />
+</UserControl>
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
+namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
 {
    public class DisplayConditionsViewModel : ProfileEditorPanelViewModel
    {
    }
-}
+}
@@ -1,12 +1,10 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.ElementProperties.ElementPropertiesView"
             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: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.ElementProperties"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
+    <Grid />
+</UserControl>
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.ElementProperties
+namespace Artemis.UI.Screens.Module.ProfileEditor.ElementProperties
 {
    public class ElementPropertiesViewModel : ProfileEditorPanelViewModel
    {
    }
-}
+}
@@ -1,12 +1,10 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.ElementProperties.ElementPropertyView"
             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: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.ElementProperties"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
+    <Grid />
+</UserControl>
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.ElementProperties
+namespace Artemis.UI.Screens.Module.ProfileEditor.ElementProperties
 {
    public class ElementPropertyViewModel
    {
    }
-}
+}
@@ -1,12 +1,10 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerElements.LayerElementView"
             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: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.LayerElements"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
+    <Grid />
+</UserControl>
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.LayerElements
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerElements
 {
    public class LayerElementViewModel
    {
    }
-}
+}
@@ -1,12 +1,10 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerElements.LayerElementsView"
             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: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.LayerElements"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
+    <Grid />
+</UserControl>
@@ -1,12 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.LayerElements
+namespace Artemis.UI.Screens.Module.ProfileEditor.LayerElements
 {
    public class LayerElementsViewModel : ProfileEditorPanelViewModel
    {
    }
-}
+}
@@ -1,12 +0,0 @@
-<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Layers.LayersView"
-             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.Layers"
-             mc:Ignorable="d" 
-             d:DesignHeight="450" d:DesignWidth="800">
-    <Grid>
-            
-    </Grid>
-</UserControl>
@@ -1,12 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Artemis.UI.Screens.Module.ProfileEditor.Layers
-{
-    public class LayersViewModel : ProfileEditorPanelViewModel
-    {
-    }
-}
@@ -1,8 +1,14 @@
-using Stylet;
+using Artemis.Core.Models.Profile;
+using Stylet;

 namespace Artemis.UI.Screens.Module.ProfileEditor
 {
    public class ProfileEditorPanelViewModel : Screen
    {
+        public Profile Profile { get; set; }
+
+        public virtual void OnProfileChanged()
+        {
+        }
    }
 }
@@ -45,11 +45,11 @@
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
-            <ComboBox Name="LocaleCombo" 
+            <ComboBox Name="LocaleCombo"
                      Height="26"
-                      VerticalAlignment="Top" 
-                      ItemsSource="{Binding Profiles}" 
-                      SelectedItem="{Binding SelectedProfile}" 
+                      VerticalAlignment="Top"
+                      ItemsSource="{Binding Profiles}"
+                      SelectedItem="{Binding SelectedProfile}"
                      DisplayMemberPath="Name">
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
@@ -57,19 +57,19 @@
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
            </ComboBox>
-            <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}" 
-                    Margin="10 0" 
-                    Grid.Column="1" 
-                    Width="26" 
-                    Height="26" 
+            <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
+                    Margin="10 0"
+                    Grid.Column="1"
+                    Width="26"
+                    Height="26"
                    VerticalAlignment="Top"
                    Command="{s:Action AddProfile}">
                <materialDesign:PackIcon Kind="Add" Height="14" Width="14" />
            </Button>
-            <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" 
+            <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"
                    Grid.Column="2"
-                    Width="26" 
-                    Height="26" 
+                    Width="26"
+                    Height="26"
                    VerticalAlignment="Top"
                    Command="{s:Action DeleteActiveProfile}">
                <materialDesign:PackIcon Kind="TrashCanOutline" Height="14" Width="14" />
@@ -92,7 +92,7 @@
            </Grid.RowDefinitions>

            <materialDesign:Card Grid.Row="0" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <ContentControl s:View.Model="{Binding LayersViewModel}" />
+                <ContentControl s:View.Model="{Binding ProfileElementsViewModel}" />
            </materialDesign:Card>

            <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" Cursor="SizeNS" Margin="0 5" />
@@ -9,7 +9,7 @@ using Artemis.UI.Screens.Module.ProfileEditor.Dialogs;
 using Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions;
 using Artemis.UI.Screens.Module.ProfileEditor.ElementProperties;
 using Artemis.UI.Screens.Module.ProfileEditor.LayerElements;
-using Artemis.UI.Screens.Module.ProfileEditor.Layers;
+using Artemis.UI.Screens.Module.ProfileEditor.ProfileElements;
 using Artemis.UI.Screens.Module.ProfileEditor.Visualization;
 using Artemis.UI.Services.Interfaces;
 using Stylet;
@@ -18,8 +18,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
 {
    public class ProfileEditorViewModel : Conductor<ProfileEditorPanelViewModel>.Collection.AllActive
    {
-        private readonly IProfileService _profileService;
        private readonly IDialogService _dialogService;
+        private readonly IProfileService _profileService;

        public ProfileEditorViewModel(ProfileModule module, ICollection<ProfileEditorPanelViewModel> viewModels, IProfileService profileService, IDialogService dialogService)
        {
@@ -32,29 +32,32 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
            DisplayConditionsViewModel = (DisplayConditionsViewModel) viewModels.First(vm => vm is DisplayConditionsViewModel);
            ElementPropertiesViewModel = (ElementPropertiesViewModel) viewModels.First(vm => vm is ElementPropertiesViewModel);
            LayerElementsViewModel = (LayerElementsViewModel) viewModels.First(vm => vm is LayerElementsViewModel);
-            LayersViewModel = (LayersViewModel) viewModels.First(vm => vm is LayersViewModel);
+            ProfileElementsViewModel = (ProfileElementsViewModel) viewModels.First(vm => vm is ProfileElementsViewModel);
            ProfileViewModel = (ProfileViewModel) viewModels.First(vm => vm is ProfileViewModel);
            Profiles = new BindableCollection<Profile>();

            Items.AddRange(viewModels);

-            module.ActiveProfileChanged += ModuleOnActiveProfileChanged;            
+            module.ActiveProfileChanged += ModuleOnActiveProfileChanged;
        }

        public ProfileModule Module { get; }
        public DisplayConditionsViewModel DisplayConditionsViewModel { get; }
        public ElementPropertiesViewModel ElementPropertiesViewModel { get; }
        public LayerElementsViewModel LayerElementsViewModel { get; }
-        public LayersViewModel LayersViewModel { get; }
+        public ProfileElementsViewModel ProfileElementsViewModel { get; }
        public ProfileViewModel ProfileViewModel { get; }

        public BindableCollection<Profile> Profiles { get; set; }
+
        public Profile SelectedProfile
        {
            get => Module.ActiveProfile;
            set => ChangeSelectedProfile(value);
        }

+        public bool CanDeleteActiveProfile => SelectedProfile != null && Profiles.Count > 1;
+
        private void ChangeSelectedProfile(Profile profile)
        {
            if (profile == Module.ActiveProfile)
@@ -63,14 +66,18 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
            var oldProfile = Module.ActiveProfile;
            Module.ChangeActiveProfile(profile);

+            foreach (var panelViewModel in Items)
+            {
+                panelViewModel.Profile = profile;
+                panelViewModel.OnProfileChanged();
+            }
+
            if (oldProfile != null)
                _profileService.UpdateProfile(oldProfile, false);
            if (profile != null)
                _profileService.UpdateProfile(profile, false);
        }

-        public bool CanDeleteActiveProfile => SelectedProfile != null && Profiles.Count > 1;
-
        public Profile CreateProfile(string name)
        {
            var profile = _profileService.CreateProfile(Module, name);
@@ -130,11 +137,11 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
                activeProfile = CreateProfile("Default");
                profiles.Add(activeProfile);
            }
-            
+
            // GetActiveProfile can return a duplicate because inactive profiles aren't kept in memory, make sure it's unique in the profiles list
            profiles = profiles.Where(p => p.EntityId != activeProfile.EntityId).ToList();
            profiles.Add(activeProfile);
-            
+
            Execute.PostToUIThread(() =>
            {
                // Populate the UI collection
@@ -0,0 +1,55 @@
+using System.Linq;
+using Artemis.Core.Models.Profile.Abstract;
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.Abstract
+{
+    public abstract class ProfileElementViewModel : PropertyChangedBase
+    {
+        protected ProfileElementViewModel()
+        {
+            Children = new BindableCollection<ProfileElementViewModel>();
+        }
+
+        public FolderViewModel Parent { get; set; }
+        public ProfileElement ProfileElement { get; set; }
+        public BindableCollection<ProfileElementViewModel> Children { get; set; }
+
+        public virtual void UpdateProfileElements()
+        {
+            // Order the children
+            var vmsList = Children.OrderBy(v => v.ProfileElement.Order).ToList();
+            for (var index = 0; index < vmsList.Count; index++)
+            {
+                var profileElementViewModel = vmsList[index];
+                Children.Move(Children.IndexOf(profileElementViewModel), index);
+            }
+        }
+
+        public void SetElementInFront(ProfileElementViewModel source)
+        {
+            if (source.Parent != Parent)
+            {
+                source.Parent.RemoveExistingElement(source);
+                Parent.AddExistingElement(source);
+            }
+
+            Parent.Folder.RemoveChild(source.ProfileElement);
+            Parent.Folder.AddChild(source.ProfileElement, ProfileElement.Order);
+            Parent.UpdateProfileElements();
+        }
+
+        public void SetElementBehind(ProfileElementViewModel source)
+        {
+            if (source.Parent != Parent)
+            {
+                source.Parent.RemoveExistingElement(source);
+                Parent.AddExistingElement(source);
+            }
+
+            Parent.Folder.RemoveChild(source.ProfileElement);
+            Parent.Folder.AddChild(source.ProfileElement, ProfileElement.Order + 1);
+            Parent.UpdateProfileElements();
+        }
+    }
+}
@@ -0,0 +1,38 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.FolderView"
+             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.ProfileElements"
+             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 {x:Type local:FolderViewModel}}">
+    <StackPanel>
+        <StackPanel.ContextMenu>
+            <ContextMenu>
+                <MenuItem Header="Rename" Command="{s:Action Rename}">
+                    <MenuItem.Icon>
+                        <materialDesign:PackIcon Kind="RenameBox" />
+                    </MenuItem.Icon>
+                </MenuItem>
+                <Separator />
+                <MenuItem Header="Add new folder" Command="{s:Action AddFolder}">
+                    <MenuItem.Icon>
+                        <materialDesign:PackIcon Kind="CreateNewFolder" />
+                    </MenuItem.Icon>
+                </MenuItem>
+                <MenuItem Header="Add new layer" Command="{s:Action AddLayer}">
+                    <MenuItem.Icon>
+                        <materialDesign:PackIcon Kind="LayersPlus" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </ContextMenu>
+        </StackPanel.ContextMenu>
+        <StackPanel Orientation="Horizontal">
+            <materialDesign:PackIcon Kind="Folder" />
+            <TextBlock Text="{Binding Folder.Name}" Margin="10 0 0 0" />
+        </StackPanel>
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,15 @@
+using System.Windows.Controls;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.ProfileElements
+{
+    /// <summary>
+    ///     Interaction logic for FolderView.xaml
+    /// </summary>
+    public partial class FolderView : UserControl
+    {
+        public FolderView()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,76 @@
+using System.Linq;
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.Abstract;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.ProfileElements
+{
+    public class FolderViewModel : ProfileElementViewModel
+    {
+        public FolderViewModel(Folder folder, FolderViewModel parent)
+        {
+            Folder = folder;
+            Parent = parent;
+            ProfileElement = folder;
+        }
+
+        public Folder Folder { get; }
+
+        public void AddFolder()
+        {
+            Folder.AddFolder("New folder");
+            UpdateProfileElements();
+        }
+
+        public void AddLayer()
+        {
+            Folder.AddLayer("New layer");
+            UpdateProfileElements();
+        }
+
+        public void RemoveExistingElement(ProfileElementViewModel element)
+        {
+            Folder.RemoveChild(element.ProfileElement);
+            Children.Remove(element);
+            element.Parent = null;
+
+            UpdateProfileElements();
+        }
+
+        public void AddExistingElement(ProfileElementViewModel element)
+        {
+            Folder.AddChild(element.ProfileElement);
+            Children.Add(element);
+            element.Parent = this;
+
+            UpdateProfileElements();
+        }
+
+        public override void UpdateProfileElements()
+        {
+            // Ensure every child element has an up-to-date VM
+            if (Folder.Children != null)
+            {
+                foreach (var profileElement in Folder.Children.OrderBy(c => c.Order))
+                {
+                    ProfileElementViewModel existing = null;
+                    if (profileElement is Folder folder)
+                    {
+                        existing = Children.FirstOrDefault(p => p is FolderViewModel vm && vm.Folder == folder);
+                        if (existing == null)
+                            Children.Add(new FolderViewModel(folder, this));
+                    }
+                    else if (profileElement is Layer layer)
+                    {
+                        existing = Children.FirstOrDefault(p => p is LayerViewModel vm && vm.Layer == layer);
+                        if (existing == null)
+                            Children.Add(new LayerViewModel(layer, this));
+                    }
+
+                    existing?.UpdateProfileElements();
+                }
+            }
+
+            base.UpdateProfileElements();
+        }
+    }
+}
@@ -0,0 +1,27 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.LayerView"
+             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.ProfileElements"
+             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 {x:Type local:LayerViewModel}}">
+    <StackPanel>
+        <StackPanel.ContextMenu>
+            <ContextMenu>
+                <MenuItem Header="Rename" Command="{s:Action Rename}">
+                    <MenuItem.Icon>
+                        <materialDesign:PackIcon Kind="RenameBox" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </ContextMenu>
+        </StackPanel.ContextMenu>
+        <StackPanel Orientation="Horizontal">
+            <materialDesign:PackIcon Kind="Layers" />
+            <TextBlock Text="{Binding Layer.Name}" Margin="10 0 0 0" />
+        </StackPanel>
+    </StackPanel>
+</UserControl>
@@ -0,0 +1,17 @@
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.Abstract;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.ProfileElements
+{
+    public class LayerViewModel : ProfileElementViewModel
+    {
+        public LayerViewModel(Layer layer, FolderViewModel parent)
+        {
+            Layer = layer;
+            Parent = parent;
+            ProfileElement = layer;
+        }
+
+        public Layer Layer { get; }
+    }
+}
@@ -0,0 +1,55 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.ProfileElementsView"
+             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:profileEditor="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.ProfileElements"
+             xmlns:models="clr-namespace:Artemis.Core.Models.Profile.Abstract;assembly=Artemis.Core"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:dd="urn:gong-wpf-dragdrop"
+             xmlns:profileElements="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.ProfileElements"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance {x:Type profileElements:ProfileElementsViewModel}}">
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+        <TreeView Grid.Row="0"
+                  ItemsSource="{Binding RootFolder.Children}"
+                  HorizontalContentAlignment="Stretch"
+                  dd:DragDrop.IsDragSource="True"
+                  dd:DragDrop.IsDropTarget="True"
+                  dd:DragDrop.DropHandler="{Binding}">
+            <TreeView.Resources>
+                <HierarchicalDataTemplate DataType="{x:Type profileEditor:FolderViewModel}" ItemsSource="{Binding Children}">
+                    <ContentControl s:View.Model="{Binding}" />
+                </HierarchicalDataTemplate>
+                <HierarchicalDataTemplate DataType="{x:Type profileEditor:LayerViewModel}" ItemsSource="{Binding Children}">
+                    <ContentControl s:View.Model="{Binding}" AllowDrop="False" />
+                </HierarchicalDataTemplate>
+            </TreeView.Resources>
+        </TreeView>
+
+        <StackPanel HorizontalAlignment="Right" Grid.Row="1" Orientation="Horizontal" Margin="8">
+            <Button Style="{StaticResource MaterialDesignToolButton}"
+                    Width="30"
+                    Padding="2 0 2 0"
+                    materialDesign:RippleAssist.IsCentered="True"
+                    ToolTip="Add new folder"
+                    Command="{s:Action AddFolder}">
+                <materialDesign:PackIcon Kind="CreateNewFolder" />
+            </Button>
+            <Button Style="{StaticResource MaterialDesignToolButton}"
+                    Width="30"
+                    Padding="2 0 2 0"
+                    materialDesign:RippleAssist.IsCentered="True"
+                    ToolTip="Add new layer"
+                    Command="{s:Action AddLayer}">
+                <materialDesign:PackIcon Kind="LayersPlus" />
+            </Button>
+        </StackPanel>
+    </Grid>
+</UserControl>
@@ -0,0 +1,124 @@
+using System.Linq;
+using System.Windows;
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Screens.Module.ProfileEditor.ProfileElements.Abstract;
+using GongSolutions.Wpf.DragDrop;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.ProfileElements
+{
+    public class ProfileElementsViewModel : ProfileEditorPanelViewModel, IDropTarget
+    {
+        public ProfileElementsViewModel()
+        {
+            CreateRootFolderViewModel();
+        }
+
+        public FolderViewModel RootFolder { get; set; }
+
+        public void DragOver(IDropInfo dropInfo)
+        {
+            var dragDropType = GetDragDropType(dropInfo);
+
+            switch (dragDropType)
+            {
+                case DragDropType.FolderAdd:
+                    dropInfo.DropTargetAdorner = DropTargetAdorners.Highlight;
+                    dropInfo.Effects = DragDropEffects.Move;
+                    break;
+                case DragDropType.FolderInsertBefore:
+                case DragDropType.FolderInsertAfter:
+                case DragDropType.LayerInsertBefore:
+                case DragDropType.LayerInsertAfter:
+                    dropInfo.DropTargetAdorner = DropTargetAdorners.Insert;
+                    dropInfo.Effects = DragDropEffects.Move;
+                    break;
+            }
+        }
+
+        public void Drop(IDropInfo dropInfo)
+        {
+            var source = (ProfileElementViewModel) dropInfo.Data;
+            var target = (ProfileElementViewModel) dropInfo.TargetItem;
+
+            var dragDropType = GetDragDropType(dropInfo);
+            switch (dragDropType)
+            {
+                case DragDropType.FolderAdd:
+                    source.Parent.RemoveExistingElement(source);
+                    ((FolderViewModel) target).AddExistingElement(source);
+                    break;
+                case DragDropType.FolderInsertBefore:
+                case DragDropType.LayerInsertBefore:
+                    target.SetElementInFront(source);
+                    break;
+                case DragDropType.FolderInsertAfter:
+                case DragDropType.LayerInsertAfter:
+                    target.SetElementBehind(source);
+                    break;
+            }
+        }
+
+        public void AddFolder()
+        {
+            RootFolder?.AddFolder();
+        }
+
+        public void AddLayer()
+        {
+            RootFolder?.AddLayer();
+        }
+
+        public override void OnProfileChanged()
+        {
+            CreateRootFolderViewModel();
+            base.OnProfileChanged();
+        }
+
+        private void CreateRootFolderViewModel()
+        {
+            if (!(Profile?.Children?.FirstOrDefault() is Folder folder))
+            {
+                RootFolder = null;
+                return;
+            }
+
+            RootFolder = new FolderViewModel(folder, null);
+        }
+
+        private DragDropType GetDragDropType(IDropInfo dropInfo)
+        {
+            var source = dropInfo.Data as ProfileElementViewModel;
+            var target = dropInfo.TargetItem as ProfileElementViewModel;
+            if (source == target)
+                return DragDropType.None;
+
+            if (target is FolderViewModel)
+            {
+                if (dropInfo.InsertPosition >= RelativeInsertPosition.TargetItemCenter)
+                    return DragDropType.FolderAdd;
+                if (dropInfo.InsertPosition == RelativeInsertPosition.BeforeTargetItem)
+                    return DragDropType.FolderInsertBefore;
+                return DragDropType.FolderInsertAfter;
+            }
+
+            if (target is LayerViewModel)
+            {
+                if (dropInfo.InsertPosition == RelativeInsertPosition.BeforeTargetItem)
+                    return DragDropType.LayerInsertBefore;
+                return DragDropType.LayerInsertAfter;
+            }
+
+            return DragDropType.None;
+        }
+    }
+
+    public enum DragDropType
+    {
+        None,
+        FolderAdd,
+        FolderInsertBefore,
+        FolderInsertAfter,
+        LayerInsertBefore,
+        LayerInsertAfter
+    }
+}
@@ -65,7 +65,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization

        private void CreateRectangleGeometry()
        {
-
            DisplayGeometry = new RectangleGeometry(new Rect(0.5, 0.5, Width - 1, Height - 1));
        }

@@ -1,12 +1,12 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileView"
             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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:profileEditor="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileViewModel}}">
    <UserControl.Resources>
@@ -36,12 +36,12 @@
        </Style>
    </UserControl.Resources>
    <Grid ClipToBounds="True"
-                  KeyUp="{s:Action EditorGridKeyUp}"
-                  KeyDown="{s:Action EditorGridKeyDown}"
-                  MouseWheel="{s:Action EditorGridMouseWheel}"
-                  MouseUp="{s:Action EditorGridMouseClick}"
-                  MouseDown="{s:Action EditorGridMouseClick}"
-                  MouseMove="{s:Action EditorGridMouseMove}">
+          KeyUp="{s:Action EditorGridKeyUp}"
+          KeyDown="{s:Action EditorGridKeyDown}"
+          MouseWheel="{s:Action EditorGridMouseWheel}"
+          MouseUp="{s:Action EditorGridMouseClick}"
+          MouseDown="{s:Action EditorGridMouseClick}"
+          MouseMove="{s:Action EditorGridMouseMove}">
        <Grid.Background>
            <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
                <VisualBrush.Visual>
@@ -109,29 +109,29 @@

        <!-- Multi-selection rectangle -->
        <Path Data="{Binding SelectionRectangle}" Opacity="0"
-                      Stroke="{DynamicResource PrimaryHueLightBrush}"
-                      StrokeThickness="1"
-                      Name="MultiSelectionPath"
-                      IsHitTestVisible="False">
+              Stroke="{DynamicResource PrimaryHueLightBrush}"
+              StrokeThickness="1"
+              Name="MultiSelectionPath"
+              IsHitTestVisible="False">
            <Path.Fill>
                <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
            </Path.Fill>
        </Path>

        <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
-                            Margin="0, 0, 15, 15">
+                    Margin="0, 0, 15, 15">
            <Slider Margin="0,0,14,0"
-                            Orientation="Vertical"
-                            Minimum="10"
-                            Maximum="400"
-                            Height="100"
-                            FocusVisualStyle="{x:Null}"
-                            Value="{Binding PanZoomViewModel.ZoomPercentage}"
-                            Style="{StaticResource MaterialDesignDiscreteSlider}" />
+                    Orientation="Vertical"
+                    Minimum="10"
+                    Maximum="400"
+                    Height="100"
+                    FocusVisualStyle="{x:Null}"
+                    Value="{Binding PanZoomViewModel.ZoomPercentage}"
+                    Style="{StaticResource MaterialDesignDiscreteSlider}" />
            <Button Command="{s:Action ResetZoomAndPan}"
-                            Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
-                            HorizontalAlignment="Right"
-                            ToolTip="Reset zoom &amp; position">
+                    Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
+                    HorizontalAlignment="Right"
+                    ToolTip="Reset zoom &amp; position">
                <materialDesign:PackIcon Kind="ImageFilterCenterFocus" Height="24" Width="24" />
            </Button>
        </StackPanel>
@@ -140,10 +140,10 @@
        <Grid Background="{StaticResource MaterialDesignPaper}" Style="{StaticResource InitializingFade}">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
-                            Initializing LED visualization...
+                    Initializing LED visualization...
                </TextBlock>
                <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" IsIndeterminate="True" />
            </StackPanel>
        </Grid>
    </Grid>
-</UserControl>
+</UserControl>
@@ -7,7 +7,6 @@ using System.Windows.Media;
 using Artemis.Core.Events;
 using Artemis.Core.Models.Surface;
 using Artemis.Core.Services;
-using Artemis.Core.Services.Storage;
 using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.UI.Screens.Shared;
 using Artemis.UI.Screens.SurfaceEditor;
@@ -94,8 +93,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
            lock (Devices)
            {
                if (IsInitializing)
-                IsInitializing = Devices.Any(d => !d.AddedLeds);
-            
+                    IsInitializing = Devices.Any(d => !d.AddedLeds);
+
                foreach (var profileDeviceViewModel in Devices)
                    profileDeviceViewModel.Update();
            }
@@ -116,7 +115,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
        #region Selection

        private MouseDragStatus _mouseDragStatus;
-        private System.Windows.Point _mouseDragStartPoint;
+        private Point _mouseDragStartPoint;

        // ReSharper disable once UnusedMember.Global - Called from view
        public void EditorGridMouseClick(object sender, MouseEventArgs e)
@@ -124,7 +123,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
            if (IsPanKeyDown())
                return;

-            var position = e.GetPosition((IInputElement)sender);
+            var position = e.GetPosition((IInputElement) sender);
            var relative = PanZoomViewModel.GetRelativeMousePosition(sender, e);
            if (e.LeftButton == MouseButtonState.Pressed)
                StartMouseDrag(position, relative);
@@ -142,12 +141,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
                return;
            }

-            var position = e.GetPosition((IInputElement)sender);
+            var position = e.GetPosition((IInputElement) sender);
            if (_mouseDragStatus == MouseDragStatus.Selecting)
                UpdateSelection(position);
        }

-        private void StartMouseDrag(System.Windows.Point position, System.Windows.Point relative)
+        private void StartMouseDrag(Point position, Point relative)
        {
            _mouseDragStatus = MouseDragStatus.Selecting;
            _mouseDragStartPoint = position;
@@ -156,7 +155,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
            SelectionRectangle.Rect = new Rect();
        }

-        private void StopMouseDrag(System.Windows.Point position)
+        private void StopMouseDrag(Point position)
        {
            var selectedRect = new Rect(_mouseDragStartPoint, position);
            // TODO: Select LEDs