Design

src/Artemis.Core/Models/ProfileConfiguration/ConfigurationSection.cs

@@ -16,15 +16,6 @@ public class ConfigurationSection : CorePropertyChanged
         set => SetAndNotify(ref field, value);
     }
 
-    /// <summary>
-    /// Gets or sets the slot number of the configuration section.
-    /// </summary>
-    public int Slot
-    {
-        get;
-        set => SetAndNotify(ref field, value);
-    }
-
     /// <summary>
     /// Gets the collection of configuration items in this section.
     /// </summary>

src/Artemis.Core/Models/ProfileConfiguration/ProfileConfiguration.cs

@@ -307,18 +307,15 @@ public class ProfileConfiguration : BreakableModel, IStorageModel, IDisposable,
         ConfigurationSections.Clear();
         ConfigurationSections.Add(new ConfigurationSection()
         {
-            Name = "General (slot 0)",
+            Name = "General",
-            Slot = 2,
         });
         ConfigurationSections.Add(new ConfigurationSection()
         {
-            Name = "Other (slot 1)",
+            Name = "Other",
-            Slot = 2
         });
         ConfigurationSections.Add(new ConfigurationSection()
         {
-            Name = "Something else (slot 2)",
+            Name = "Something else",
-            Slot = 2
         });
         ConfigurationSections[0].Items.Add(new ConfigurationTextItem() {Text = "This is a placeholder text item in the General section."});
         ConfigurationSections[0].Items.Add(new ConfigurationNumericItem() {Name = "Numeric item", Description = "This one also has a description"});

src/Artemis.UI/Artemis.UI.csproj

@@ -35,15 +35,4 @@
     <ItemGroup>
         <AvaloniaResource Include="Assets\**" />
     </ItemGroup>
-
-    <ItemGroup>
-      <Folder Include="Screens\ProfileEditor\DesignPanels\" />
-    </ItemGroup>
-
-    <ItemGroup>
-      <Compile Update="Screens\ProfileEditor\DesignProfileView.axaml.cs">
-        <DependentUpon>DesignProfileView.axaml</DependentUpon>
-        <SubType>Code</SubType>
-      </Compile>
-    </ItemGroup>
 </Project>

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationBooleanItemView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public partial class ConfigurationBooleanItemView : ReactiveUserControl<ConfigurationStringItemViewModel>
-{
-    public ConfigurationBooleanItemView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationBooleanItemViewModel.cs

@@ -1,14 +0,0 @@
-using Artemis.Core;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public class ConfigurationBooleanItemViewModel : ActivatableViewModelBase
-{
-    public ConfigurationBooleanItem Item { get; }
-
-    public ConfigurationBooleanItemViewModel(ConfigurationBooleanItem item)
-    {
-        Item = item;
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationColorGradientItemView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public partial class ConfigurationColorGradientItemView : ReactiveUserControl<ConfigurationColorGradientItemViewModel>
-{
-    public ConfigurationColorGradientItemView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationColorGradientItemViewModel.cs

@@ -1,14 +0,0 @@
-using Artemis.Core;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public class ConfigurationColorGradientItemViewModel : ActivatableViewModelBase
-{
-    public ConfigurationColorGradientItemViewModel(ConfigurationColorGradientItem item)
-    {
-        Item = item;
-    }
-
-    public ConfigurationColorGradientItem Item { get; }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationNumericItemView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public partial class ConfigurationNumericItemView : ReactiveUserControl<ConfigurationStringItemViewModel>
-{
-    public ConfigurationNumericItemView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationNumericItemViewModel.cs

@@ -1,14 +0,0 @@
-using Artemis.Core;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public class ConfigurationNumericItemViewModel : ActivatableViewModelBase
-{
-    public ConfigurationNumericItem Item { get; }
-
-    public ConfigurationNumericItemViewModel(ConfigurationNumericItem item)
-    {
-        Item = item;
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationSKColorItemView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public partial class ConfigurationSKColorItemView : ReactiveUserControl<ConfigurationStringItemViewModel>
-{
-    public ConfigurationSKColorItemView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationSKColorItemViewModel.cs

@@ -1,14 +0,0 @@
-using Artemis.Core;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public class ConfigurationSKColorItemViewModel : ActivatableViewModelBase
-{
-    public ConfigurationSKColorItemViewModel(ConfigurationSKColorItem item)
-    {
-        Item = item;
-    }
-
-    public ConfigurationSKColorItem Item { get; }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationSectionView.axaml.cs

@@ -1,7 +1,4 @@
-using Avalonia;
+using ReactiveUI.Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
 
 namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
 

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationSectionViewModel.cs

@@ -1,5 +1,6 @@
 using System.Collections.ObjectModel;
 using Artemis.Core;
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
 using Artemis.UI.Shared;
 
 namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationStringItemView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public partial class ConfigurationStringItemView : ReactiveUserControl<ConfigurationStringItemViewModel>
-{
-    public ConfigurationStringItemView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationStringItemViewModel.cs

@@ -1,14 +0,0 @@
-using Artemis.Core;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public class ConfigurationStringItemViewModel : ActivatableViewModelBase
-{
-    public ConfigurationStringItem Item { get; }
-
-    public ConfigurationStringItemViewModel(ConfigurationStringItem item)
-    {
-        Item = item;
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationTextItemView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using ReactiveUI.Avalonia;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public partial class ConfigurationTextItemView : ReactiveUserControl<ConfigurationTextItemViewModel>
-{
-    public ConfigurationTextItemView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigurationPanels/Section/ConfigurationTextItemViewModel.cs

@@ -1,14 +0,0 @@
-using Artemis.Core;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
-
-public class ConfigurationTextItemViewModel : ActivatableViewModelBase
-{
-    public ConfigurationTextItem Item { get; }
-
-    public ConfigurationTextItemViewModel(ConfigurationTextItem item)
-    {
-        Item = item;
-    }
-}

src/Artemis.UI/Screens/ProfileEditor/ConfigureProfileView.axaml

@@ -7,25 +7,10 @@
              x:Class="Artemis.UI.Screens.ProfileEditor.ConfigureProfileView"
              x:DataType="profileEditor:ConfigureProfileViewModel">
     <Border Classes="router-container" Padding="8">
-        <Grid RowDefinitions="0.6*, Auto" ColumnDefinitions="0.3*, 0.3*, Auto" ColumnSpacing="8" RowSpacing="8">
+        <Grid RowDefinitions="*" ColumnDefinitions="0.6*, Auto" ColumnSpacing="8" RowSpacing="8">
-            <ContentControl Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="{CompiledBinding PreviewViewModel}" />
+            <ContentControl Grid.Column="0" Grid.Row="0" Content="{CompiledBinding PreviewViewModel}" />
-            
+            <ScrollViewer Grid.Column="1" Grid.Row="0">
-            <ItemsControl Grid.Column="0" Grid.Row="1" ItemsSource="{CompiledBinding BottomLeftSections}">
+                <ItemsControl ItemsSource="{CompiledBinding Sections}">
-                <ItemsControl.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <StackPanel Spacing="8"></StackPanel>
-                    </ItemsPanelTemplate>
-                </ItemsControl.ItemsPanel>
-            </ItemsControl>
-            <ItemsControl Grid.Column="1" Grid.Row="1" ItemsSource="{CompiledBinding BottomRightSections}">
-                <ItemsControl.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <StackPanel Spacing="8"></StackPanel>
-                    </ItemsPanelTemplate>
-                </ItemsControl.ItemsPanel>
-            </ItemsControl>
-            <ScrollViewer Grid.Column="2" Grid.Row="0" Grid.RowSpan="2">
-            <ItemsControl  ItemsSource="{CompiledBinding SideSections}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
                             <StackPanel Spacing="8"></StackPanel>

src/Artemis.UI/Screens/ProfileEditor/ConfigureProfileViewModel.cs

@@ -33,30 +33,15 @@ public partial class ConfigureProfileViewModel : RoutableScreen<ProfileViewModel
 
         _configurationSections = new SourceList<ConfigurationSection>();
         _configurationSections.Connect()
-            .Filter(s => s.Slot == 0)
             .Transform(getConfigurationSectionViewModel)
-            .Bind(out ReadOnlyObservableCollection<ConfigurationSectionViewModel> bottomLeftSections)
+            .Bind(out ReadOnlyObservableCollection<ConfigurationSectionViewModel> sections)
-            .Subscribe();
-        _configurationSections.Connect()
-            .Filter(s => s.Slot == 1)
-            .Transform(getConfigurationSectionViewModel)
-            .Bind(out ReadOnlyObservableCollection<ConfigurationSectionViewModel> bottomRightSections)
-            .Subscribe();
-        _configurationSections.Connect()
-            .Filter(s => s.Slot == 2)
-            .Transform(getConfigurationSectionViewModel)
-            .Bind(out ReadOnlyObservableCollection<ConfigurationSectionViewModel> sideSections)
             .Subscribe();
         
-        BottomLeftSections = bottomLeftSections;
+        Sections = sections;
-        BottomRightSections = bottomRightSections;
-        SideSections = sideSections;
     }
 
     public PreviewViewModel PreviewViewModel { get; }
-    public ReadOnlyObservableCollection<ConfigurationSectionViewModel> BottomLeftSections { get; private set; }
+    public ReadOnlyObservableCollection<ConfigurationSectionViewModel> Sections { get; private set; }
-    public ReadOnlyObservableCollection<ConfigurationSectionViewModel> BottomRightSections { get; private set; }
-    public ReadOnlyObservableCollection<ConfigurationSectionViewModel> SideSections { get; private set; }
 
     /// <inheritdoc />
     public override async Task OnNavigating(ProfileViewModelParameters parameters, NavigationArguments args, CancellationToken cancellationToken)

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationBooleanItemDesignView.axaml

@@ -2,10 +2,10 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section"
+             xmlns:items="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Items"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section.ConfigurationBooleanItemView"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Items.ConfigurationBooleanItemDesignView"
-             x:DataType="section:ConfigurationBooleanItemViewModel">
+             x:DataType="items:ConfigurationBooleanItemDesignViewModel">
     <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
         <StackPanel Grid.Column="0" VerticalAlignment="Center">
             <TextBlock Text="{CompiledBinding Item.Name}" TextWrapping="Wrap" />

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationBooleanItemDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public partial class ConfigurationBooleanItemDesignView : ReactiveUserControl<ConfigurationStringItemDesignViewModel>
+{
+    public ConfigurationBooleanItemDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationBooleanItemDesignViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public class ConfigurationBooleanItemDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationBooleanItem Item { get; }
+
+    public ConfigurationBooleanItemDesignViewModel(ConfigurationBooleanItem item)
+    {
+        Item = item;
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationColorGradientItemDesignView.axaml

@@ -2,11 +2,11 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section"
              xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.Controls.GradientPicker;assembly=Artemis.UI.Shared"
+             xmlns:items="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Items"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section.ConfigurationColorGradientItemView"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Items.ConfigurationColorGradientItemDesignView"
-             x:DataType="section:ConfigurationColorGradientItemViewModel">
+             x:DataType="items:ConfigurationColorGradientItemDesignViewModel">
     <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
         <StackPanel Grid.Column="0" VerticalAlignment="Center">
             <TextBlock Text="{CompiledBinding Item.Name}" TextWrapping="Wrap" />

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationColorGradientItemDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public partial class ConfigurationColorGradientItemDesignView : ReactiveUserControl<ConfigurationColorGradientItemDesignViewModel>
+{
+    public ConfigurationColorGradientItemDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationColorGradientItemDesignViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public class ConfigurationColorGradientItemDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationColorGradientItemDesignViewModel(ConfigurationColorGradientItem item)
+    {
+        Item = item;
+    }
+
+    public ConfigurationColorGradientItem Item { get; }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationNumericItemDesignView.axaml

@@ -2,12 +2,12 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section"
              xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              xmlns:behaviors="clr-namespace:Artemis.UI.Shared.Behaviors;assembly=Artemis.UI.Shared"
+             xmlns:items="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Items"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section.ConfigurationNumericItemView"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Items.ConfigurationNumericItemDesignView"
-             x:DataType="section:ConfigurationNumericItemViewModel">
+             x:DataType="items:ConfigurationNumericItemDesignViewModel">
     <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
         <StackPanel Grid.Column="0" VerticalAlignment="Center">
             <TextBlock Text="{CompiledBinding Item.Name}" TextWrapping="Wrap" />

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationNumericItemDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public partial class ConfigurationNumericItemDesignView : ReactiveUserControl<ConfigurationStringItemDesignViewModel>
+{
+    public ConfigurationNumericItemDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationNumericItemDesignViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public class ConfigurationNumericItemDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationNumericItem Item { get; }
+
+    public ConfigurationNumericItemDesignViewModel(ConfigurationNumericItem item)
+    {
+        Item = item;
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationSKColorItemDesignView.axaml

@@ -2,12 +2,11 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section"
-             xmlns:behaviors="clr-namespace:Artemis.UI.Shared.Behaviors;assembly=Artemis.UI.Shared"
              xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             xmlns:items="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Items"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section.ConfigurationSKColorItemView"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Items.ConfigurationSKColorItemDesignView"
-             x:DataType="section:ConfigurationSKColorItemViewModel">
+             x:DataType="items:ConfigurationSKColorItemDesignViewModel">
     <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
         <StackPanel Grid.Column="0" VerticalAlignment="Center">
             <TextBlock Text="{CompiledBinding Item.Name}" TextWrapping="Wrap" />

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationSKColorItemDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public partial class ConfigurationSKColorItemDesignView : ReactiveUserControl<ConfigurationStringItemDesignViewModel>
+{
+    public ConfigurationSKColorItemDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationSKColorItemDesignViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public class ConfigurationSKColorItemDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationSKColorItemDesignViewModel(ConfigurationSKColorItem item)
+    {
+        Item = item;
+    }
+
+    public ConfigurationSKColorItem Item { get; }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationStringItemDesignView.axaml

@@ -2,10 +2,10 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section"
+             xmlns:items="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Items"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section.ConfigurationStringItemView"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Items.ConfigurationStringItemDesignView"
-             x:DataType="section:ConfigurationStringItemViewModel">
+             x:DataType="items:ConfigurationStringItemDesignViewModel">
     <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
         <StackPanel Grid.Column="0" VerticalAlignment="Center">
             <TextBlock Text="{CompiledBinding Item.Name}" TextWrapping="Wrap" />

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationStringItemDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public partial class ConfigurationStringItemDesignView : ReactiveUserControl<ConfigurationStringItemDesignViewModel>
+{
+    public ConfigurationStringItemDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationStringItemDesignViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public class ConfigurationStringItemDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationStringItem Item { get; }
+
+    public ConfigurationStringItemDesignViewModel(ConfigurationStringItem item)
+    {
+        Item = item;
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationTextItemDesignDesignView.axaml

@@ -2,9 +2,9 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section"
+             xmlns:items="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Items"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section.ConfigurationTextItemView"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Items.ConfigurationTextItemDesignDesignView"
-             x:DataType="section:ConfigurationTextItemViewModel">
+             x:DataType="items:ConfigurationTextItemDesignViewModel">
-    <TextBlock Text="{CompiledBinding Item.Text}"></TextBlock>
+    <TextBox Text="{CompiledBinding Item.Text}" />
 </UserControl>

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationTextItemDesignDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Items;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public partial class ConfigurationTextItemDesignDesignView : ReactiveUserControl<ConfigurationTextItemDesignViewModel>
+{
+    public ConfigurationTextItemDesignDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Items/ConfigurationTextItemDesignViewModel.cs

@@ -0,0 +1,14 @@
+using Artemis.Core;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+
+public class ConfigurationTextItemDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationTextItem Item { get; }
+
+    public ConfigurationTextItemDesignViewModel(ConfigurationTextItem item)
+    {
+        Item = item;
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Section/ConfigurationSectionDesignView.axaml

@@ -0,0 +1,34 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:section="clr-namespace:Artemis.UI.Screens.ProfileEditor.DesignPanels.Section"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Screens.ProfileEditor.DesignPanels.Section.ConfigurationSectionDesignView"
+             x:DataType="section:ConfigurationSectionDesignViewModel">
+    <Border Classes="card" VerticalAlignment="Top">
+        <StackPanel>
+            <TextBlock Theme="{StaticResource SubtitleTextBlockStyle}" Text="{CompiledBinding ConfigurationSection.Name}"/>
+            <Border Classes="card-separator" />
+           
+            <ItemsControl ItemsSource="{CompiledBinding Items}">
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <StackPanel Classes="device-view-model-container">
+                            <!-- Your existing item template goes here -->
+                            <ContentControl Content="{CompiledBinding}"/>
+                            <Border Classes="card-separator" Name="Separator" />
+                        </StackPanel>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+                <ItemsControl.Styles>
+                    <Styles>
+                        <Style Selector="ContentPresenter:nth-last-child(1) > StackPanel > Border#Separator">
+                            <Setter Property="IsVisible" Value="False" />
+                        </Style>
+                    </Styles>
+                </ItemsControl.Styles>
+            </ItemsControl>
+        </StackPanel>
+    </Border>
+</UserControl>

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Section/ConfigurationSectionDesignView.axaml.cs

@@ -0,0 +1,12 @@
+using Artemis.UI.Screens.ProfileEditor.ConfigurationPanels.Section;
+using ReactiveUI.Avalonia;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Section;
+
+public partial class ConfigurationSectionDesignView: ReactiveUserControl<ConfigurationSectionDesignViewModel>
+{
+    public ConfigurationSectionDesignView()
+    {
+        InitializeComponent();
+    }
+}

src/Artemis.UI/Screens/ProfileEditor/DesignPanels/Section/ConfigurationSectionDesignViewModel.cs

@@ -0,0 +1,33 @@
+using System.Collections.ObjectModel;
+using Artemis.Core;
+using Artemis.UI.Screens.ProfileEditor.DesignPanels.Items;
+using Artemis.UI.Shared;
+
+namespace Artemis.UI.Screens.ProfileEditor.DesignPanels.Section;
+
+public class ConfigurationSectionDesignViewModel : ActivatableViewModelBase
+{
+    public ConfigurationSection ConfigurationSection { get; }
+    public ObservableCollection<ActivatableViewModelBase> Items { get; }
+
+    public ConfigurationSectionDesignViewModel(ConfigurationSection configurationSection)
+    {
+        ConfigurationSection = configurationSection;
+        Items = [];
+        foreach (IConfigurationItem item in ConfigurationSection.Items)
+        {
+            if (item is ConfigurationTextItem textItem)
+                Items.Add(new ConfigurationTextItemDesignViewModel(textItem));
+            else if (item is ConfigurationStringItem stringItem)
+                Items.Add(new ConfigurationStringItemDesignViewModel(stringItem));
+            else if (item is ConfigurationBooleanItem booleanItem)
+                Items.Add(new ConfigurationBooleanItemDesignViewModel(booleanItem));
+            else if (item is ConfigurationNumericItem numberItem)
+                Items.Add(new ConfigurationNumericItemDesignViewModel(numberItem));
+            else if (item is ConfigurationSKColorItem colorItem)
+                Items.Add(new ConfigurationSKColorItemDesignViewModel(colorItem));
+            else if (item is ConfigurationColorGradientItem colorGradientItem)
+                Items.Add(new ConfigurationColorGradientItemDesignViewModel(colorGradientItem));
+        }
+    }
+}