Redesigned sidebar

Removed dependency on Mahapps, ControlzEx and Dragablz

src/Artemis.Core/Plugins/Abstract/Module.cs

@@ -20,6 +20,12 @@ namespace Artemis.Core.Plugins.Abstract
         /// </summary>
         public string DisplayName { get; protected set; }
 
+        /// <summary>
+        ///     The modules display icon that's shown in the menu see <see href="https://materialdesignicons.com" /> for available
+        ///     icons
+        /// </summary>
+        public string DisplayIcon { get; set; }
+
         /// <summary>
         ///     Whether or not this module expands upon the main data model. If set to true any data in main data model can be
         ///     accessed by profiles in this module

src/Artemis.Plugins.Modules.General/GeneralModule.cs

@@ -14,6 +14,7 @@ namespace Artemis.Plugins.Modules.General
         {
             _settings = settings;
             DisplayName = "General";
+            DisplayIcon = "AllInclusive";
             ExpandsMainDataModel = true;
 
             var testSetting = _settings.GetSetting("TestSetting", DateTime.Now);

src/Artemis.UI/App.xaml

@@ -2,8 +2,7 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:s="https://github.com/canton7/Stylet"
-             xmlns:local="clr-namespace:Artemis.UI"
-             xmlns:dragablz="http://dragablz.net/winfx/xaml/dragablz">
+             xmlns:local="clr-namespace:Artemis.UI">
 
     <Application.Resources>
         <ResourceDictionary>
@@ -13,62 +12,26 @@
                         <local:Bootstrapper />
                     </s:ApplicationLoader.Bootstrapper>
                 </s:ApplicationLoader>
-                <!-- MahApps -->
-                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
-                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
-                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
-                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
-
                 <!-- Material Design -->
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Teal.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Teal.xaml" />
 
-                <!-- Material Design: MahApps Compatibility -->
-                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.NumericUpDown.xaml" />
+                <!-- Material design extensions -->
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/Generic.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/MaterialDesignLightTheme.xaml" />
 
-                <!-- Include the Dragablz Material Design style -->
-                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml" />
-
-                <ResourceDictionary Source="ResourceDictionaries/Scrollbar.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Scrollbar.xaml" />
             </ResourceDictionary.MergedDictionaries>
 
-            <!-- MahApps Brushes -->
-            <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource Primary700}" />
-            <SolidColorBrush x:Key="AccentBaseColorBrush" Color="{DynamicResource Primary600}" />
-            <SolidColorBrush x:Key="AccentColorBrush" Color="{DynamicResource Primary500}" />
-            <SolidColorBrush x:Key="AccentColorBrush2" Color="{DynamicResource Primary400}" />
-            <SolidColorBrush x:Key="AccentColorBrush3" Color="{DynamicResource Primary300}" />
-            <SolidColorBrush x:Key="AccentColorBrush4" Color="{DynamicResource Primary200}" />
-            <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{DynamicResource Primary700}" />
-            <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{DynamicResource Primary500Foreground}" />
-            <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5">
-                <GradientStop Color="{DynamicResource Primary700}" Offset="0" />
-                <GradientStop Color="{DynamicResource Primary300}" Offset="1" />
-            </LinearGradientBrush>
-            <SolidColorBrush x:Key="CheckmarkFill" Color="{DynamicResource Primary500}" />
-            <SolidColorBrush x:Key="RightArrowFill" Color="{DynamicResource Primary500}" />
-            <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{DynamicResource Primary500Foreground}" />
-            <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{DynamicResource Primary500}" Opacity="0.4" />
-            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchBrush.Win10"
-                             Color="{DynamicResource Primary500}" />
-            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchMouseOverBrush.Win10"
-                             Color="{DynamicResource Primary400}" />
-            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.ThumbIndicatorCheckedBrush.Win10"
-                             Color="{DynamicResource Primary500Foreground}" />
-
-            <!-- tell Dragablz tab control to use the Material Design theme -->
-            <Style TargetType="{x:Type dragablz:TabablzControl}"
-                   BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
-
             <!-- Some general convertes etc. -->
             <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
 
             <DrawingImage x:Key="BowIcon">
                 <DrawingImage.Drawing>
                     <DrawingGroup>
-                        <GeometryDrawing Brush="{DynamicResource IdealForegroundColorBrush}"
+                        <GeometryDrawing Brush="White"
                                          Geometry="M1518 3378 c-48 -63 -61 -101 -66 -184 -4 -70 -1 -91 27 
                                      -170 l31 -89 -27 -20 c-32 -24 -849 -601 -981 -693 l-93 -64 -87 40 
                                      c-48 22 -91 37 -95 32 -5 -4 9 -41 29 -83 l37 -75 -28 -24 c-23 -20 

src/Artemis.UI/Artemis.UI.csproj

@@ -66,12 +66,6 @@
     <Reference Include="Castle.Core, Version=4.0.0.0, Culture=neutral, PublicKeyToken=407dd0808d44fbdc, processorArchitecture=MSIL">
       <HintPath>..\packages\Castle.Core.4.4.0\lib\net45\Castle.Core.dll</HintPath>
     </Reference>
-    <Reference Include="ControlzEx, Version=3.0.2.4, Culture=neutral, processorArchitecture=MSIL">
-      <HintPath>..\packages\ControlzEx.3.0.2.4\lib\net462\ControlzEx.dll</HintPath>
-    </Reference>
-    <Reference Include="Dragablz, Version=0.0.3.203, Culture=neutral, processorArchitecture=MSIL">
-      <HintPath>..\packages\Dragablz.0.0.3.203\lib\net45\Dragablz.dll</HintPath>
-    </Reference>
     <Reference Include="FluentValidation, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7de548da2fbae0f0, processorArchitecture=MSIL">
       <HintPath>..\packages\FluentValidation.8.5.0\lib\net45\FluentValidation.dll</HintPath>
     </Reference>
@@ -81,19 +75,19 @@
     <Reference Include="Humanizer, Version=2.6.0.0, Culture=neutral, PublicKeyToken=979442b78dfc278e, processorArchitecture=MSIL">
       <HintPath>..\packages\Humanizer.Core.2.6.2\lib\netstandard2.0\Humanizer.dll</HintPath>
     </Reference>
-    <Reference Include="MahApps.Metro, Version=1.6.5.1, Culture=neutral, processorArchitecture=MSIL">
-      <HintPath>..\packages\MahApps.Metro.1.6.5\lib\net47\MahApps.Metro.dll</HintPath>
-    </Reference>
     <Reference Include="MaterialDesignColors, Version=1.2.0.325, Culture=neutral, processorArchitecture=MSIL">
       <HintPath>..\packages\MaterialDesignColors.1.2.0\lib\net45\MaterialDesignColors.dll</HintPath>
     </Reference>
-    <Reference Include="MaterialDesignThemes.MahApps, Version=0.1.0.325, Culture=neutral, processorArchitecture=MSIL">
-      <HintPath>..\packages\MaterialDesignThemes.MahApps.0.1.0\lib\net45\MaterialDesignThemes.MahApps.dll</HintPath>
+    <Reference Include="MaterialDesignExtensions, Version=2.8.0.0, Culture=neutral, processorArchitecture=MSIL">
+      <HintPath>..\packages\MaterialDesignExtensions.2.8.0\lib\net45\MaterialDesignExtensions.dll</HintPath>
     </Reference>
     <Reference Include="MaterialDesignThemes.Wpf, Version=2.6.0.325, Culture=neutral, processorArchitecture=MSIL">
       <HintPath>..\packages\MaterialDesignThemes.2.6.0\lib\net45\MaterialDesignThemes.Wpf.dll</HintPath>
     </Reference>
     <Reference Include="Microsoft.CSharp" />
+    <Reference Include="Microsoft.Expression.Interactions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\System.Windows.Interactivity.WPF.2.0.20525\lib\net40\Microsoft.Expression.Interactions.dll</HintPath>
+    </Reference>
     <Reference Include="Ninject, Version=3.3.4.0, Culture=neutral, PublicKeyToken=c7192dc5380945e7, processorArchitecture=MSIL">
       <HintPath>..\packages\Ninject.3.3.4\lib\net45\Ninject.dll</HintPath>
     </Reference>
@@ -153,8 +147,8 @@
     <Reference Include="System.ValueTuple, Version=4.0.3.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51, processorArchitecture=MSIL">
       <HintPath>..\packages\System.ValueTuple.4.5.0\lib\net47\System.ValueTuple.dll</HintPath>
     </Reference>
-    <Reference Include="System.Windows.Interactivity, Version=4.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
-      <HintPath>..\packages\ControlzEx.3.0.2.4\lib\net462\System.Windows.Interactivity.dll</HintPath>
+    <Reference Include="System.Windows.Interactivity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\System.Windows.Interactivity.WPF.2.0.20525\lib\net40\System.Windows.Interactivity.dll</HintPath>
     </Reference>
     <Reference Include="System.Xml" />
     <Reference Include="System.Core" />
@@ -181,6 +175,10 @@
     <Compile Include="Events\WindowsThemeEventArgs.cs" />
     <Compile Include="Screens\GradientEditor\GradientEditorViewModel.cs" />
     <Compile Include="Screens\Module\ProfileEditor\LayerElements\Dialogs\AddLayerElementViewModel.cs" />
+    <Compile Include="Screens\Sidebar\SidebarView.xaml.cs">
+      <DependentUpon>SidebarView.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Screens\Sidebar\SidebarViewModel.cs" />
     <Compile Include="Services\Interfaces\IProfileEditorService.cs" />
     <Compile Include="Services\ProfileEditorService.cs" />
     <Compile Include="Utilities\BindableSelectedItemBehavior.cs" />
@@ -307,6 +305,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Screens\Sidebar\SidebarView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Screens\SurfaceEditor\Dialogs\SurfaceDeviceConfigView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/Artemis.UI/Ninject/UiModule.cs

@@ -7,7 +7,6 @@ using Artemis.UI.Stylet;
 using Artemis.UI.ViewModels.Dialogs;
 using FluentValidation;
 using Ninject.Extensions.Conventions;
-using Ninject.Extensions.Factory;
 using Ninject.Modules;
 using Stylet;
 
@@ -26,8 +25,9 @@ namespace Artemis.UI.Ninject
             {
                 x.FromThisAssembly()
                     .SelectAllClasses()
-                    .InheritedFrom<IScreenViewModel>()
-                    .BindAllInterfaces();
+                    .InheritedFrom<MainScreenViewModel>()
+                    .BindAllBaseClasses()
+                    .Configure(c => c.InSingletonScope());
             });
 
             // Bind all dialog VMs

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

@@ -1,11 +1,11 @@
-<mah:MetroWindow x:Class="Artemis.UI.Screens.GradientEditor.GradientEditorView"
+<mde:MaterialWindow x:Class="Artemis.UI.Screens.GradientEditor.GradientEditorView"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  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:gradientEditor="clr-namespace:Artemis.UI.Screens.GradientEditor"
                  xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-                 xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
+                 xmlns:mde="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
                  mc:Ignorable="d"
                  Title="Gradient Editor"
                  Height="450" Width="800"
@@ -13,4 +13,4 @@
     <Grid>
         <materialDesign:ColorPicker Color="{Binding CurrentColor}" />
     </Grid>
-</mah:MetroWindow>
+</mde:MaterialWindow>

src/Artemis.UI/Screens/Home/HomeViewModel.cs

@@ -1,12 +1,17 @@
 using System;
 using System.Diagnostics;
-using Stylet;
+using MaterialDesignThemes.Wpf;
 
 namespace Artemis.UI.Screens.Home
 {
-    public class HomeViewModel : Screen, IScreenViewModel
+    public class HomeViewModel : MainScreenViewModel
     {
-        public string Title => "Home";
+        public HomeViewModel()
+        {
+            DisplayName = "Home";
+            DisplayIcon = PackIconKind.Home;
+            DisplayOrder = 1;
+        }
 
         public void OpenUrl(string url)
         {

src/Artemis.UI/Screens/IScreenViewModel.cs

@@ -1,9 +1,11 @@
-using Stylet;
+using MaterialDesignThemes.Wpf;
+using Stylet;
 
 namespace Artemis.UI.Screens
 {
-    public interface IScreenViewModel : IScreen
+    public abstract class MainScreenViewModel : Screen
     {
-        string Title { get; }
+        public int DisplayOrder { get; set; }
+        public PackIconKind DisplayIcon { get; set; }
     }
 }

src/Artemis.UI/Screens/Module/ModuleRootView.xaml

@@ -3,7 +3,6 @@
              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:dragablz="http://dragablz.net/winfx/xaml/dragablz"
              xmlns:s="https://github.com/canton7/Stylet"
              xmlns:module="clr-namespace:Artemis.UI.Screens.Module"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
@@ -11,18 +10,17 @@
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance module:ModuleRootViewModel}">
 
-    <dragablz:TabablzControl Margin="0 -1 0 0" ItemsSource="{Binding Items}" SelectedItem="{Binding ActiveItem}" FixedHeaderCount="{Binding FixedHeaderCount}">
-        <dragablz:TabablzControl.HeaderItemTemplate>
-            <DataTemplate>
-                <TextBlock Text="{Binding DisplayName}" />
-            </DataTemplate>
-        </dragablz:TabablzControl.HeaderItemTemplate>
-        <dragablz:TabablzControl.ContentTemplate>
-            <DataTemplate>
+    <TabControl Margin="0 -1 0 0" 
+                ItemsSource="{Binding Items}" 
+                SelectedItem="{Binding ActiveItem}" 
+                DisplayMemberPath="DisplayName" 
+                Style="{StaticResource MaterialDesignTabControl}">
+       <TabControl.ContentTemplate>
+            <DataTemplate >
                 <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect FadeIn}">
-                    <ContentControl s:View.Model="{Binding}" IsTabStop="False" />
+                    <ContentControl s:View.Model="{Binding}" IsTabStop="False" TextElement.Foreground="{DynamicResource MaterialDesignBody}"/>
                 </materialDesign:TransitioningContent>
             </DataTemplate>
-        </dragablz:TabablzControl.ContentTemplate>
-    </dragablz:TabablzControl>
+        </TabControl.ContentTemplate>
+    </TabControl>
 </UserControl>

src/Artemis.UI/Screens/Module/ModuleRootViewModel.cs

@@ -12,15 +12,15 @@ namespace Artemis.UI.Screens.Module
 
         public ModuleRootViewModel(Core.Plugins.Abstract.Module module, IProfileEditorViewModelFactory profileEditorViewModelFactory)
         {
+            DisplayName = module?.DisplayName;
             Module = module;
+            
             _profileEditorViewModelFactory = profileEditorViewModelFactory;
 
             Task.Run(AddTabsAsync);
         }
 
-        public string Title => Module?.DisplayName;
         public Core.Plugins.Abstract.Module Module { get; }
-        public int FixedHeaderCount => Items.Count;
 
         private async Task AddTabsAsync()
         {

src/Artemis.UI/Screens/News/NewsViewModel.cs

@@ -1,9 +1,15 @@
-using Stylet;
+using MaterialDesignThemes.Wpf;
+using Stylet;
 
 namespace Artemis.UI.Screens.News
 {
-    public class NewsViewModel : Screen, IScreenViewModel
+    public class NewsViewModel : MainScreenViewModel
     {
-        public string Title => "News";
+        public NewsViewModel()
+        {
+            DisplayName = "News";
+            DisplayIcon = PackIconKind.Newspaper;
+            DisplayOrder = 2;
+        }
     }
 }

src/Artemis.UI/Screens/RootView.xaml

@@ -1,30 +1,26 @@
-<metro:MetroWindow x:Class="Artemis.UI.Screens.RootView"
+<mde:MaterialWindow x:Class="Artemis.UI.Screens.RootView"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     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:metro="http://metro.mahapps.com/winfx/xaml/controls"
                     xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
                     xmlns:s="https://github.com/canton7/Stylet"
-                   xmlns:abstract="clr-namespace:Artemis.Core.Plugins.Abstract;assembly=Artemis.Core"
                     xmlns:screens="clr-namespace:Artemis.UI.Screens"
+                    xmlns:mde="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
                     mc:Ignorable="d"
+                    FadeContentIfInactive="False"
                     Icon="/Artemis.UI;component/Resources/logo-512.png"
                     Title="Artemis"
-                   GlowBrush="{DynamicResource AccentColorBrush}"
-                   TextElement.Foreground="{DynamicResource MaterialDesignBody}"
+                    Foreground="{DynamicResource MaterialDesignBody}"
                     Background="{DynamicResource MaterialDesignPaper}"
-                   TextElement.FontWeight="Medium"
-                   TextElement.FontSize="14"
                     FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
-                   SaveWindowPosition="True"
                     UseLayoutRounding="True"
                     Deactivated="{s:Action WindowDeactivated}"
                     Activated="{s:Action WindowActivated}"
                     d:DesignHeight="640"
                     d:DesignWidth="1200"
                     d:DataContext="{d:DesignInstance screens:RootViewModel}">
-    <metro:MetroWindow.Resources>
+    <mde:MaterialWindow.Resources>
         <Style TargetType="ContentControl" x:Key="InitializingFade">
             <Style.Triggers>
                 <DataTrigger Binding="{Binding ActiveItemReady}" Value="False">
@@ -49,122 +45,16 @@
                 </DataTrigger>
             </Style.Triggers>
         </Style>
-    </metro:MetroWindow.Resources>
-    <metro:MetroWindow.LeftWindowCommands>
-        <metro:WindowCommands>
-            <!-- Make the window title dissapear by providing an empty overwrite of WindowCommands -->
-        </metro:WindowCommands>
-    </metro:MetroWindow.LeftWindowCommands>
-    <metro:MetroWindow.IconTemplate>
-        <DataTemplate>
-            <Grid Width="{TemplateBinding Width}"
-                  Height="{TemplateBinding Height}"
-                  Background="Transparent"
-                  RenderOptions.BitmapScalingMode="HighQuality"
-                  Margin="0,0,-10,0">
-                <Image Source="{StaticResource BowIcon}" Stretch="Uniform" Margin="6" />
-            </Grid>
-        </DataTemplate>
-    </metro:MetroWindow.IconTemplate>
+    </mde:MaterialWindow.Resources>
     <materialDesign:DialogHost Identifier="RootDialog">
-        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
+        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding IsSidebarVisible}">
             <materialDesign:DrawerHost.LeftDrawerContent>
-                <DockPanel MinWidth="212">
-                    <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}"
-                                  DockPanel.Dock="Top"
-                                  HorizontalAlignment="Right"
-                                  Margin="16"
-                                  IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
-
-                    <!-- Built-in pages -->
-                    <ListBox Margin="0 16 0 16"
-                             SelectedIndex="0"
-                             DockPanel.Dock="Top"
-                             SelectedItem="{Binding SelectedPage}">
-                        <ListBoxItem x:Name="Home">
-                            <StackPanel Orientation="Horizontal">
-                                <materialDesign:PackIcon Kind="Home"
-                                                         Margin="0,0,8,0" />
-                                <TextBlock>Home</TextBlock>
-                            </StackPanel>
-                        </ListBoxItem>
-                        <ListBoxItem x:Name="News">
-                            <StackPanel Orientation="Horizontal">
-                                <materialDesign:PackIcon Kind="Newspaper"
-                                                         Margin="0,0,8,0" />
-                                <TextBlock>News</TextBlock>
-                            </StackPanel>
-                        </ListBoxItem>
-                        <ListBoxItem x:Name="Workshop">
-                            <StackPanel Orientation="Horizontal">
-                                <materialDesign:PackIcon Kind="TestTube"
-                                                         Margin="0,0,8,0" />
-                                <TextBlock>Workshop</TextBlock>
-                            </StackPanel>
-                        </ListBoxItem>
-                        <ListBoxItem x:Name="SurfaceEditor">
-                            <StackPanel Orientation="Horizontal">
-                                <materialDesign:PackIcon Kind="Edit"
-                                                         Margin="0,0,8,0" />
-                                <TextBlock>Surface Editor</TextBlock>
-                            </StackPanel>
-                        </ListBoxItem>
-                        <ListBoxItem x:Name="Settings">
-                            <StackPanel Orientation="Horizontal">
-                                <materialDesign:PackIcon Kind="Settings"
-                                                         Margin="0,0,8,0" />
-                                <TextBlock>Settings</TextBlock>
-                            </StackPanel>
-                        </ListBoxItem>
-                    </ListBox>
-
-                    <!-- Modules -->
-                    <TextBlock Margin="8,8,0,8"
-                               DockPanel.Dock="Top">
-                        Modules
-                    </TextBlock>
-                    <Border BorderThickness="0 1 0 0"
-                            BorderBrush="{DynamicResource MaterialDesignDivider}">
-                        <ListBox Margin="0 0 0 16"
-                                 SelectedIndex="-1"
-                                 ItemsSource="{Binding Modules}"
-                                 SelectedItem="{Binding SelectedModule}"
-                                 DockPanel.Dock="Top">
-                            <ListBox.ItemTemplate>
-                                <DataTemplate DataType="abstract:Module">
-                                    <DockPanel HorizontalAlignment="Stretch"
-                                               VerticalAlignment="Stretch"
-                                               Margin="0">
-                                        <materialDesign:PackIcon Kind="Home"
-                                                                 Margin="0,0,8,0" />
-                                        <TextBlock Text="{Binding DisplayName}" />
-                                    </DockPanel>
-                                </DataTemplate>
-                            </ListBox.ItemTemplate>
-                        </ListBox>
-                    </Border>
-                </DockPanel>
+                <ContentControl s:View.Model="{Binding SidebarViewModel}" Width="220" ClipToBounds="False"/>
             </materialDesign:DrawerHost.LeftDrawerContent>
             <DockPanel>
-                <materialDesign:ColorZone Padding="10" materialDesign:ShadowAssist.ShadowDepth="Depth2" Mode="PrimaryMid" DockPanel.Dock="Top">
-                    <DockPanel>
-                        <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="{Binding MenuOpen}" x:Name="MenuToggleButton" />
-                        <materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
-                            <StackPanel>
-                                <Button Content="Hello World" />
-                                <Button Content="Nice Popup" />
-                                <Button Content="Can't Touch This" IsEnabled="False" />
-                                <Separator />
-                                <Button Content="Goodbye" />
-                            </StackPanel>
-                        </materialDesign:PopupBox>
-
-                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" Text="{Binding ActiveItem.Title}" />
-                    </DockPanel>
-                </materialDesign:ColorZone>
-
-                <ContentControl s:View.Model="{Binding ActiveItem}" Style="{StaticResource InitializingFade}" IsTabStop="False" />
+                <mde:AppBar Type="Dense" IsNavigationDrawerOpen="{Binding IsSidebarVisible, Mode=TwoWay}" Title="{Binding ActiveItem.DisplayName}" ShowNavigationDrawerButton="True" DockPanel.Dock="Top" />
+                <ContentControl s:View.Model="{Binding ActiveItem}" IsTabStop="False"  Style="{StaticResource InitializingFade}"/>
             </DockPanel>
         </materialDesign:DrawerHost>
     </materialDesign:DialogHost>
-</metro:MetroWindow>
+</mde:MaterialWindow>

src/Artemis.UI/Screens/RootViewModel.cs

@@ -1,18 +1,10 @@
-using System.Collections.Generic;
+using System;
 using System.ComponentModel;
-using System.Linq;
+using System.Threading;
 using System.Threading.Tasks;
 using System.Windows;
-using System.Windows.Controls;
-using Artemis.Core.Events;
-using Artemis.Core.Services.Interfaces;
 using Artemis.UI.Events;
-using Artemis.UI.Ninject.Factories;
-using Artemis.UI.Screens.Home;
-using Artemis.UI.Screens.News;
-using Artemis.UI.Screens.Settings;
-using Artemis.UI.Screens.SurfaceEditor;
-using Artemis.UI.Screens.Workshop;
+using Artemis.UI.Screens.Sidebar;
 using Artemis.UI.Utilities;
 using MaterialDesignThemes.Wpf;
 using Stylet;
@@ -21,131 +13,53 @@ namespace Artemis.UI.Screens
 {
     public class RootViewModel : Conductor<IScreen>
     {
-        private readonly ICollection<IScreenViewModel> _artemisViewModels;
         private readonly IEventAggregator _eventAggregator;
-        private readonly IModuleViewModelFactory _moduleViewModelFactory;
-        private readonly IPluginService _pluginService;
         private bool _lostFocus;
 
-        public RootViewModel(ICollection<IScreenViewModel> artemisViewModels,
-            IPluginService pluginService,
-            IModuleViewModelFactory moduleViewModelFactory,
-            IEventAggregator eventAggregator)
+        public RootViewModel(IEventAggregator eventAggregator, SidebarViewModel sidebarViewModel)
         {
-            _artemisViewModels = artemisViewModels;
-            _pluginService = pluginService;
-            _moduleViewModelFactory = moduleViewModelFactory;
+            SidebarViewModel = sidebarViewModel;
             _eventAggregator = eventAggregator;
 
-            // Activate the home item
-            ActiveItem = _artemisViewModels.First(v => v.GetType() == typeof(HomeViewModel));
-            ActiveItemReady = true;
-
-            // Sync up with the plugin service
-            Modules = new BindableCollection<Core.Plugins.Abstract.Module>();
-            Modules.AddRange(_pluginService.GetPluginsOfType<Core.Plugins.Abstract.Module>());
-
-            _pluginService.PluginEnabled += PluginServiceOnPluginEnabled;
-            _pluginService.PluginDisabled += PluginServiceOnPluginDisabled;
-            PropertyChanged += OnSelectedModuleChanged;
-            PropertyChanged += OnSelectedPageChanged;
-
             var themeWatcher = new ThemeWatcher();
             themeWatcher.ThemeChanged += (sender, args) => ApplyWindowsTheme(args.Theme);
             ApplyWindowsTheme(themeWatcher.GetWindowsTheme());
+
+            ActiveItem = SidebarViewModel.SelectedItem;
+            ActiveItemReady = true;
+            SidebarViewModel.PropertyChanged += SidebarViewModelOnPropertyChanged;
         }
 
+        private void SidebarViewModelOnPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == nameof(SidebarViewModel.SelectedItem))
+            {
+                IsSidebarVisible = false;
+                ActiveItemReady = false;
+
+                // Allow the menu to close, it's slower but feels more responsive, funny how that works right
+                Execute.PostToUIThreadAsync(async () =>
+                {
+                    await Task.Delay(400);
+                    ActiveItem = SidebarViewModel.SelectedItem;
+                    ActiveItemReady = true;
+                });
+            }
+        }
+
+        public SidebarViewModel SidebarViewModel { get; }
+        public bool IsSidebarVisible { get; set; }
+        public bool ActiveItemReady { get; set; }
+
         private void ApplyWindowsTheme(ThemeWatcher.WindowsTheme windowsTheme)
         {
             var paletteHelper = new PaletteHelper();
             var theme = paletteHelper.GetTheme();
-
             theme.SetBaseTheme(windowsTheme == ThemeWatcher.WindowsTheme.Dark ? Theme.Dark : Theme.Light);
             paletteHelper.SetTheme(theme);
-        }
 
-        public IObservableCollection<Core.Plugins.Abstract.Module> Modules { get; set; }
-        public bool MenuOpen { get; set; }
-        public ListBoxItem SelectedPage { get; set; }
-        public Core.Plugins.Abstract.Module SelectedModule { get; set; }
-        public bool ActiveItemReady { get; set; }
-
-        public async Task NavigateToSelectedModule()
-        {
-            if (SelectedModule == null)
-                return;
-
-            MenuOpen = false;
-            SelectedPage = null;
-
-            // Create a view model for the given plugin info (which will be a module)
-            var viewModel = await Task.Run(() => _moduleViewModelFactory.Create(SelectedModule));
-            ActivateItem(viewModel);
-        }
-
-        private void PluginServiceOnPluginEnabled(object sender, PluginEventArgs e)
-        {
-            var existing = Modules.FirstOrDefault(m => _pluginService.GetPluginInfo(m)?.Guid == e.PluginInfo.Guid);
-            if (existing != null)
-            {
-                if (SelectedModule == existing && SelectedModule != null)
-                    SelectedModule = null;
-                Modules.Remove(existing);
-            }
-
-            if (e.PluginInfo.Instance is Core.Plugins.Abstract.Module module)
-                Modules.Add(module);
-        }
-
-        private void PluginServiceOnPluginDisabled(object sender, PluginEventArgs e)
-        {
-            var existing = Modules.FirstOrDefault(m => _pluginService.GetPluginInfo(m)?.Guid == e.PluginInfo.Guid);
-            if (existing != null)
-            {
-                if (SelectedModule == existing && SelectedModule != null)
-                    SelectedModule = null;
-                Modules.Remove(existing);
-            }
-        }
-
-        private async void OnSelectedModuleChanged(object sender, PropertyChangedEventArgs e)
-        {
-            if (e.PropertyName == nameof(SelectedModule))
-                await NavigateToSelectedModule();
-        }
-
-        private async void OnSelectedPageChanged(object sender, PropertyChangedEventArgs e)
-        {
-            if (e.PropertyName != "SelectedPage" || SelectedPage == null)
-                return;
-
-            SelectedModule = null;
-            MenuOpen = false;
-            ActiveItemReady = false;
-
-            // Let the menu close smoothly to avoid a sluggish feeling
-            await Task.Delay(400);
-
-            switch (SelectedPage.Name)
-            {
-                case "Home":
-                    ActivateItem(_artemisViewModels.First(v => v is HomeViewModel));
-                    break;
-                case "News":
-                    ActivateItem(_artemisViewModels.First(v => v is NewsViewModel));
-                    break;
-                case "Workshop":
-                    ActivateItem(_artemisViewModels.First(v => v is WorkshopViewModel));
-                    break;
-                case "SurfaceEditor":
-                    ActivateItem(_artemisViewModels.First(v => v is SurfaceEditorViewModel));
-                    break;
-                case "Settings":
-                    ActivateItem(_artemisViewModels.First(v => v is SettingsViewModel));
-                    break;
-            }
-
-            ActiveItemReady = true;
+            var extensionsPaletteHelper = new MaterialDesignExtensions.Themes.PaletteHelper();
+            extensionsPaletteHelper.SetLightDark(windowsTheme == ThemeWatcher.WindowsTheme.Dark);
         }
 
         public void WindowDeactivated()

src/Artemis.UI/Screens/Settings/Debug/DebugView.xaml

@@ -1,69 +1,23 @@
-<metro:MetroWindow x:Class="Artemis.UI.Screens.Settings.Debug.DebugView"
+<mde:MaterialWindow x:Class="Artemis.UI.Screens.Settings.Debug.DebugView"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     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:metro="http://metro.mahapps.com/winfx/xaml/controls"
                     xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
                     xmlns:s="https://github.com/canton7/Stylet"
-                   xmlns:abstract="clr-namespace:Artemis.Core.Plugins.Abstract;assembly=Artemis.Core"
+                    xmlns:mde="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
+                    xmlns:debug="clr-namespace:Artemis.UI.Screens.Settings.Debug"
                     mc:Ignorable="d"
-                   GlowBrush="{DynamicResource AccentColorBrush}"
-                   FontFamily="{StaticResource DefaultFont}"
                     Title="Artemis debugger"
+                    Background="{DynamicResource MaterialDesignPaper}"
+                    FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
+                    UseLayoutRounding="True"
                     Width="800"
                     Height="800"
-                   d:DesignHeight="639.411"
-                   d:DesignWidth="1113.251"
-                   d:DataContext="{d:DesignInstance screens:DebugViewModel}"
+                    d:DesignHeight="800"
+                    d:DesignWidth="800"
+                    d:DataContext="{d:DesignInstance debug:DebugViewModel}"
                     Icon="/Artemis.UI;component/Resources/logo-512.png">
-    <metro:MetroWindow.Resources>
-        <DrawingImage x:Key="BowIcon">
-            <DrawingImage.Drawing>
-                <DrawingGroup>
-                    <GeometryDrawing Brush="{DynamicResource IdealForegroundColorBrush}"
-                                     Geometry="M1518 3378 c-48 -63 -61 -101 -66 -184 -4 -70 -1 -91 27 
-                                     -170 l31 -89 -27 -20 c-32 -24 -849 -601 -981 -693 l-93 -64 -87 40 
-                                     c-48 22 -91 37 -95 32 -5 -4 9 -41 29 -83 l37 -75 -28 -24 c-23 -20 
-                                     -29 -35 -33 -81 l-4 -56 -82 -19 c-109 -25 -109 -41 4 -91 l85 -38 7 
-                                     -64 c15 -137 90 -1279 85 -1293 -3 -7 -35 -24 -70 -35 -159 -53 -257                                     
-                                     -168 -257 -302 0 -35 2 -38 47 -53 54 -18 185 -21 232 -5 29 10 31 
-                                     14 31 58 0 26 6 56 14 66 13 18 15 18 46 -8 44 -37 78 -35 119 7 l34
-                                     35 -17 41 c-9 23 -12 39 -6 35 6 -4 43 -1 83 6 39 6 219 14 398 18 
-                                     l327 6 113 57 c158 78 256 166 317 282 24 46 27 62 27 152 0 98 -1 
-                                     103 -41 184 l-42 83 44 69 c24 37 51 68 59 68 9 0 44 -14 78 -32 l62
-                                     -31 -93 -44 c-58 -26 -92 -48 -90 -55 9 -27 353 -68 570 -68 108 0 
-                                     108 0 108 24 0 34 -105 171 -220 286 -122 122 -238 216 -250 204 -6 
-                                     -6 -1 -42 16 -98 14 -49 23 -91 19 -94 -3 -3 -36 9 -73 27 l-69 33 24
-                                     71 c13 39 23 76 23 82 0 6 28 17 63 24 279 58 399 300 314 632 -32 
-                                     121 -49 155 -134 255 -37 45 -106 126 -152 180 -73 87 -241 326 -241
-                                     343 0 3 15 13 32 21 21 10 35 25 40 45 15 60 -16 103 -81 108 -43 3 
-                                     -39 22 14 74 l45 43 -25 50 c-35 69 -77 114 -130 139 -63 30 -88 27 
-                                     -117 -11z m215 -835 c188 -279 250 -417 250 -548 0 -133 -74 -214 -243
-                                     -265 l-55 -16 -37 -138 c-21 -76 -39 -140 -40 -141 -6 -5 -814 377 -823
-                                     390 -6 7 -19 46 -29 86 -10 41 -25 81 -33 91 -8 9 -57 35 -109 59 -52 
-                                     23 -93 46 -92 51 2 4 233 169 513 366 l510 358 26 -46 c15 -25 88 -136
-                                     162 -247z m-1108 -898 c61 21 88 26 107 19 14 -5 204 -92 421 -194 l395
-                                     -185 -27 -35 c-15 -19 -53 -72 -84 -117 l-57 -81 30 -90 c39 -117 40 
-                                     -179 2 -253 -45 -90 -147 -145 -347 -189 -71 -15 -435 -59 -600 -73 l
-                                     -29 -2 -37 540 c-20 297 -40 581 -43 632 l-7 92 98 -46 97 -46 81 28z" />
-                </DrawingGroup>
-            </DrawingImage.Drawing>
-        </DrawingImage>
-    </metro:MetroWindow.Resources>
-    <metro:MetroWindow.IconTemplate>
-        <DataTemplate>
-            <Grid Width="{TemplateBinding Width}"
-                  Height="{TemplateBinding Height}"
-                  Background="Transparent"
-                  RenderOptions.BitmapScalingMode="HighQuality"
-                  Margin="0,0,-10,0">
-                <Image Source="{DynamicResource BowIcon}"
-                       Stretch="Uniform"
-                       Margin="6" />
-            </Grid>
-        </DataTemplate>
-    </metro:MetroWindow.IconTemplate>
     <StackPanel Margin="10, 10, 10, 10">
         <TextBlock>
             In this window you can view the inner workings of Artemis.
@@ -95,4 +49,4 @@
         </Button>
     </StackPanel>
 
-</metro:MetroWindow>
+</mde:MaterialWindow>

src/Artemis.UI/Screens/Settings/Debug/DebugViewModel.cs

@@ -11,7 +11,7 @@ using Stylet;
 
 namespace Artemis.UI.Screens.Settings.Debug
 {
-    public class DebugViewModel : Screen, IScreenViewModel
+    public class DebugViewModel : Screen
     {
         private readonly ICoreService _coreService;
         private readonly IRgbService _rgbService;

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

@@ -3,12 +3,13 @@ using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.UI.Ninject.Factories;
 using Artemis.UI.Screens.Settings.Debug;
 using Artemis.UI.Screens.Settings.Tabs.Devices;
+using MaterialDesignThemes.Wpf;
 using Ninject;
 using Stylet;
 
 namespace Artemis.UI.Screens.Settings
 {
-    public class SettingsViewModel : Screen, IScreenViewModel
+    public class SettingsViewModel : MainScreenViewModel
     {
         private readonly IDeviceSettingsViewModelFactory _deviceSettingsViewModelFactory;
         private readonly IKernel _kernel;
@@ -22,6 +23,10 @@ namespace Artemis.UI.Screens.Settings
             ISettingsService settingsService,
             IDeviceSettingsViewModelFactory deviceSettingsViewModelFactory)
         {
+            DisplayName = "Settings";
+            DisplayIcon = PackIconKind.Settings;
+            DisplayOrder = 5;
+
             _kernel = kernel;
             _surfaceService = surfaceService;
             _windowManager = windowManager;

src/Artemis.UI/Screens/Settings/Tabs/Devices/DeviceSettingsViewModel.cs

@@ -32,7 +32,6 @@ namespace Artemis.UI.Screens.Settings.Tabs.Devices
             _deviceService.IdentifyDevice(Device);
         }
         
-
         public void ShowDeviceDebugger()
         {
         }

src/Artemis.UI/Screens/Sidebar/SidebarView.xaml

@@ -0,0 +1,31 @@
+<UserControl x:Class="Artemis.UI.Screens.Sidebar.SidebarView"
+             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:sidebar="clr-namespace:Artemis.UI.Screens.Sidebar"
+             xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:s="https://github.com/canton7/Stylet"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance sidebar:SidebarViewModel}">
+    <StackPanel>
+        <!-- Placeholder -->
+        <StackPanel Margin="15">
+            <materialDesign:PackIcon Kind="QuestionMarkCircle" Width="50" Height="50" />
+            <TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" Margin="0 15 0 0">
+                Active module
+            </TextBlock>
+            <ComboBox BorderThickness="0" Foreground="{DynamicResource MaterialDesignNavigationItemSubheader}" materialDesign:HintAssist.Hint="Active profile">
+                <ComboBoxItem>Profile 1</ComboBoxItem>
+                <ComboBoxItem>Profile 2</ComboBoxItem>
+                <ComboBoxItem>Profile 3</ComboBoxItem>
+                <ComboBoxItem>Profile 4</ComboBoxItem>
+            </ComboBox>
+        </StackPanel>
+
+        <controls:SideNavigation Items="{Binding SidebarItems}" WillSelectNavigationItemCommand="{s:Action SelectItem}" />
+    </StackPanel>
+
+</UserControl>

src/Artemis.UI/Screens/Sidebar/SidebarView.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.Sidebar
+{
+    /// <summary>
+    /// Interaction logic for SidebarView.xaml
+    /// </summary>
+    public partial class SidebarView : UserControl
+    {
+        public SidebarView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Sidebar/SidebarViewModel.cs

@@ -0,0 +1,123 @@
+using System.Collections.Generic;
+using System.Linq;
+using Artemis.Core.Events;
+using Artemis.Core.Services.Interfaces;
+using Artemis.UI.Ninject.Factories;
+using MaterialDesignExtensions.Controls;
+using MaterialDesignExtensions.Model;
+using MaterialDesignThemes.Wpf;
+using Stylet;
+
+namespace Artemis.UI.Screens.Sidebar
+{
+    public class SidebarViewModel : PropertyChangedBase
+    {
+        private readonly IModuleViewModelFactory _moduleViewModelFactory;
+        private readonly IPluginService _pluginService;
+
+        public SidebarViewModel(List<MainScreenViewModel> defaultSidebarItems, IModuleViewModelFactory moduleViewModelFactory, IPluginService pluginService)
+        {
+            _moduleViewModelFactory = moduleViewModelFactory;
+            _pluginService = pluginService;
+
+            DefaultSidebarItems = defaultSidebarItems;
+            SidebarItemObjects = new Dictionary<INavigationItem, object>();
+            SidebarItems = new BindableCollection<INavigationItem>();
+
+            SetupSidebar();
+            _pluginService.PluginEnabled += PluginServiceOnPluginEnabled;
+            _pluginService.PluginDisabled += PluginServiceOnPluginDisabled;
+        }
+
+        public List<MainScreenViewModel> DefaultSidebarItems { get; set; }
+        public BindableCollection<INavigationItem> SidebarItems { get; set; }
+        public Dictionary<INavigationItem, object> SidebarItemObjects { get; set; }
+        public IScreen SelectedItem { get; set; }
+
+        public void SetupSidebar()
+        {
+            SidebarItems.Clear();
+            SidebarItemObjects.Clear();
+
+            // Add all default sidebar items
+            SidebarItems.Add(new DividerNavigationItem());
+            foreach (var screen in DefaultSidebarItems.OrderBy(d => d.DisplayOrder))
+            {
+                var sidebarItem = new FirstLevelNavigationItem {Icon = screen.DisplayIcon, Label = screen.DisplayName};
+                SidebarItems.Add(sidebarItem);
+                SidebarItemObjects.Add(sidebarItem, screen);
+            }
+
+            // Add all activated modules
+            SidebarItems.Add(new DividerNavigationItem());
+            SidebarItems.Add(new SubheaderNavigationItem {Subheader = "Modules"});
+            var modules = _pluginService.GetPluginsOfType<Core.Plugins.Abstract.Module>().ToList();
+            foreach (var module in modules)
+                AddModule(module);
+
+            // Select the top item, which will be one of the defaults
+            SidebarItems[1].IsSelected = true;
+            SelectedItem = (IScreen) SidebarItemObjects[SidebarItems[1]];
+        }
+
+        // ReSharper disable once UnusedMember.Global - Called by view
+        public void SelectItem(WillSelectNavigationItemEventArgs args)
+        {
+            if (args.NavigationItemToSelect == null)
+            {
+                SelectedItem = null;
+                return;
+            }
+
+            var sidebarItemObject = SidebarItemObjects[args.NavigationItemToSelect];
+            // The default items are singleton screens, simply set it as the selected item
+            if (sidebarItemObject is IScreen screen)
+                SelectedItem = screen;
+            // Modules have a VM that must be created, use a factory and set the result as the selected item
+            else if (sidebarItemObject is Core.Plugins.Abstract.Module module)
+                SelectedItem = _moduleViewModelFactory.Create(module);
+        }
+
+        public void AddModule(Core.Plugins.Abstract.Module module)
+        {
+            // Ensure the module is not already in the list
+            if (SidebarItemObjects.Any(io => io.Value == module))
+                return;
+
+            // Icon is provided as string to avoid having to reference MaterialDesignThemes
+            var parsedIcon = System.Enum.TryParse<PackIconKind>(module.DisplayIcon, true, out var iconEnum);
+            if (parsedIcon == false)
+                iconEnum = PackIconKind.QuestionMarkCircle;
+            var sidebarItem = new FirstLevelNavigationItem { Icon = iconEnum, Label = module.DisplayName };
+            SidebarItems.Add(sidebarItem);
+            SidebarItemObjects.Add(sidebarItem, module);
+        }
+
+        public void RemoveModule(Core.Plugins.Abstract.Module module)
+        {
+            // If not in the list there's nothing to do
+            if (SidebarItemObjects.All(io => io.Value != module))
+                return;
+
+            var existing = SidebarItemObjects.First(io => io.Value == module);
+            SidebarItems.Remove(existing.Key);
+            SidebarItemObjects.Remove(existing.Key);
+        }
+
+        #region Event handlers
+
+        private void PluginServiceOnPluginEnabled(object sender, PluginEventArgs e)
+        {
+            if (e.PluginInfo.Instance is Core.Plugins.Abstract.Module module)
+                AddModule(module);
+        }
+
+        private void PluginServiceOnPluginDisabled(object sender, PluginEventArgs e)
+        {
+            if (e.PluginInfo.Instance is Core.Plugins.Abstract.Module module)
+                RemoveModule(module);
+        }
+        
+        #endregion
+    }
+}

src/Artemis.UI/Screens/Splash/SplashView.xaml

@@ -1,21 +1,17 @@
-<mah:MetroWindow x:Class="Artemis.UI.Screens.Splash.SplashView"
+<controls:MaterialWindow x:Class="Artemis.UI.Screens.Splash.SplashView"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  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:mah="http://metro.mahapps.com/winfx/xaml/controls"
                  xmlns:splash="clr-namespace:Artemis.UI.Screens.Splash"
+                 xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
                  mc:Ignorable="d"
                  Title="Artemis"
+                 WindowStyle="None"
                  Height="450"
-                 Width="450"
-                 ShowTitleBar="False"
-                 ShowMaxRestoreButton="False"
-                 ShowCloseButton="False"
-                 ShowMinButton="False"
+                 Width="400"
                  WindowStartupLocation="CenterScreen"
-                 GlowBrush="{DynamicResource AccentColorBrush}"
-                 FontFamily="{StaticResource DefaultFont}"
+                 FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
                  d:DataContext="{d:DesignInstance splash:SplashViewModel}">
     <Grid Background="{DynamicResource PrimaryHueMidBrush}">
         <Grid.RowDefinitions>
@@ -31,4 +27,4 @@
         <TextBlock Grid.Row="2" HorizontalAlignment="Center" Foreground="#FFDDDDDD" Text="{Binding Status}" />
         <ProgressBar Grid.Row="3" IsIndeterminate="True" Maximum="1" Minimum="1" Margin="16 0" />
     </Grid>
-</mah:MetroWindow>
+</controls:MaterialWindow>

src/Artemis.UI/Screens/SurfaceEditor/Dialogs/SurfaceDeviceConfigView.xaml

@@ -6,47 +6,19 @@
              xmlns:s="https://github.com/canton7/Stylet"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:surfaceEditor="clr-namespace:Artemis.UI.Screens.SurfaceEditor.Dialogs"
-             xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
              mc:Ignorable="d"
              d:DesignHeight="351.305" d:DesignWidth="262.163"
              d:DataContext="{d:DesignInstance {x:Type surfaceEditor:SurfaceDeviceConfigViewModel}}">
     <StackPanel Margin="16">
         <TextBlock Text="{Binding Title}" Style="{StaticResource MaterialDesignTitleTextBlock}" />
+        <TextBlock Text="Note: These are not being validated yet" Style="{StaticResource MaterialDesignSubheadingTextBlock}" />
+        <TextBox materialDesign:HintAssist.Hint="X-coordinate" Text="{Binding X}" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0 10" />
 
-        <Label>X-coordinate</Label>
-        <mah:NumericUpDown materialDesign:HintAssist.Hint="X-coordinate"
-                           Value="{Binding X}"
-                           Style="{StaticResource MaterialDesignNumericUpDown}"
-                           Minimum="0"
-                           Interval="1"
-                           StringFormat="0" />
-
-        <Label>Y-coordinate</Label>
-        <mah:NumericUpDown materialDesign:HintAssist.Hint="Y-coordinate"
-                           Value="{Binding Y}"
-                           Style="{StaticResource MaterialDesignNumericUpDown}"
-                           Minimum="0"
-                           Interval="1"
-                           StringFormat="0" />
-
-        <Label>Scale</Label>
-        <mah:NumericUpDown materialDesign:HintAssist.Hint="Scale"
-                           Value="{Binding Scale}"
-                           Style="{StaticResource MaterialDesignNumericUpDown}"
-                           Minimum="0"
-                           Interval="0.1"
-                           StringFormat="0.00" />
-
-        <Label>Rotation</Label>
-        <mah:NumericUpDown materialDesign:HintAssist.Hint="Rotation"
-                           Value="{Binding Rotation}"
-                           Style="{StaticResource MaterialDesignNumericUpDown}"
-                           Minimum="0"
-                           Maximum="359"
-                           Interval="1"
-                           StringFormat="0" />
+        <TextBox materialDesign:HintAssist.Hint="Y-coordinate" Text="{Binding Y}" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0 10" />
 
+        <TextBox materialDesign:HintAssist.Hint="Scale" Text="{Binding Scale}" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0 10" />
 
+        <TextBox materialDesign:HintAssist.Hint="Rotation" Text="{Binding Rotation}" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0 10" />
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
             <Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0"
                     Command="{s:Action Cancel}">

src/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorView.xaml

@@ -66,10 +66,10 @@
                                     <ColumnDefinition />
                                     <ColumnDefinition />
                                 </Grid.ColumnDefinitions>
-                                <Rectangle Grid.Row="0" Grid.Column="0" Fill="{DynamicResource MaterialDesignPaper}" />
+                                <Rectangle Grid.Row="0" Grid.Column="0" Fill="Black" Opacity="0.15" />
                                 <Rectangle Grid.Row="0" Grid.Column="1" />
                                 <Rectangle Grid.Row="1" Grid.Column="0" />
-                                <Rectangle Grid.Row="1" Grid.Column="1" Fill="{DynamicResource MaterialDesignPaper}" />
+                                <Rectangle Grid.Row="1" Grid.Column="1" Fill="Black" Opacity="0.15" />
                             </Grid>
                         </VisualBrush.Visual>
                     </VisualBrush>

src/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorViewModel.cs

@@ -15,11 +15,12 @@ using Artemis.UI.Screens.Shared;
 using Artemis.UI.Screens.SurfaceEditor.Dialogs;
 using Artemis.UI.Screens.SurfaceEditor.Visualization;
 using Artemis.UI.Services.Interfaces;
+using MaterialDesignThemes.Wpf;
 using Stylet;
 
 namespace Artemis.UI.Screens.SurfaceEditor
 {
-    public class SurfaceEditorViewModel : Screen, IScreenViewModel
+    public class SurfaceEditorViewModel : MainScreenViewModel
     {
         private readonly IDeviceService _deviceService;
         private readonly IDialogService _dialogService;
@@ -28,6 +29,10 @@ namespace Artemis.UI.Screens.SurfaceEditor
 
         public SurfaceEditorViewModel(ISurfaceService surfaceService, IDialogService dialogService, ISettingsService settingsService, IDeviceService deviceService)
         {
+            DisplayName = "Surface Editor";
+            DisplayIcon = PackIconKind.Edit;
+            DisplayOrder = 4;
+
             Devices = new ObservableCollection<SurfaceDeviceViewModel>();
             SurfaceConfigurations = new ObservableCollection<ArtemisSurface>();
             SelectionRectangle = new RectangleGeometry();
@@ -60,8 +65,6 @@ namespace Artemis.UI.Screens.SurfaceEditor
             }
         }
         
-        public string Title => "Surface Editor";
-
         public ArtemisSurface CreateSurfaceConfiguration(string name)
         {
             var config = _surfaceService.CreateSurfaceConfiguration(name);

src/Artemis.UI/Screens/SurfaceEditor/Visualization/SurfaceDeviceView.xaml

@@ -65,10 +65,10 @@
         <!-- Selection rectangle -->
         <Rectangle Width="Auto" Height="Auto" StrokeThickness="2">
             <Rectangle.Stroke>
-                <SolidColorBrush Color="{StaticResource IdealForegroundColor}" />
+                <SolidColorBrush Color="{StaticResource Accent700}" />
             </Rectangle.Stroke>
             <Rectangle.Fill>
-                <SolidColorBrush Color="{StaticResource IdealForegroundColor}" Opacity="0.25" />
+                <SolidColorBrush Color="{StaticResource Accent700}" Opacity="0.25" />
             </Rectangle.Fill>
             <Rectangle.Style>
                 <Style TargetType="{x:Type Rectangle}">
@@ -80,10 +80,10 @@
                                     <Storyboard>
                                         <ColorAnimation
                                             Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
-                                            To="{StaticResource IdealForegroundColor}" Duration="0:0:0.25" />
+                                            To="{StaticResource Accent700}" Duration="0:0:0.25" />
                                         <ColorAnimation
                                             Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
-                                            To="{StaticResource IdealForegroundColor}" Duration="0:0:0.25" />
+                                            To="{StaticResource Accent700}" Duration="0:0:0.25" />
                                     </Storyboard>
                                 </BeginStoryboard>
                             </DataTrigger.EnterActions>

src/Artemis.UI/Screens/Workshop/WorkshopViewModel.cs

@@ -1,13 +1,20 @@
 using System.Windows.Media;
+using MaterialDesignThemes.Wpf;
 using Stylet;
 
 namespace Artemis.UI.Screens.Workshop
 {
-    public class WorkshopViewModel : Screen, IScreenViewModel
+    public class WorkshopViewModel : MainScreenViewModel
     {
+        public WorkshopViewModel()
+        {
+            DisplayName = "Workshop";
+            DisplayIcon = PackIconKind.TestTube;
+            DisplayOrder = 3;
+        }
+
         public Color TestColor { get; set; }
         public bool TestPopupOpen { get; set; }
-        public string Title => "Workshop";
         
         public void UpdateValues()
         {

src/Artemis.UI/packages.config

@@ -1,16 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
   <package id="Castle.Core" version="4.4.0" targetFramework="net461" />
-  <package id="ControlzEx" version="3.0.2.4" targetFramework="net472" />
-  <package id="Dragablz" version="0.0.3.203" targetFramework="net472" />
   <package id="FluentValidation" version="8.5.0" targetFramework="net472" />
   <package id="Fody" version="6.0.5" targetFramework="net472" developmentDependency="true" />
   <package id="gong-wpf-dragdrop" version="2.1.0" targetFramework="net472" />
   <package id="Humanizer.Core" version="2.6.2" targetFramework="net461" />
-  <package id="MahApps.Metro" version="1.6.5" targetFramework="net472" />
   <package id="MaterialDesignColors" version="1.2.0" targetFramework="net472" />
+  <package id="MaterialDesignExtensions" version="2.8.0" targetFramework="net472" />
   <package id="MaterialDesignThemes" version="2.6.0" targetFramework="net472" />
-  <package id="MaterialDesignThemes.MahApps" version="0.1.0" targetFramework="net472" />
   <package id="Ninject" version="3.3.4" targetFramework="net461" />
   <package id="Ninject.Extensions.Conventions" version="3.3.0" targetFramework="net461" />
   <package id="Ninject.Extensions.Factory" version="3.3.2" targetFramework="net461" />
@@ -26,4 +23,5 @@
   <package id="System.Numerics.Vectors" version="4.5.0" targetFramework="net472" />
   <package id="System.Runtime.CompilerServices.Unsafe" version="4.6.0" targetFramework="net472" />
   <package id="System.ValueTuple" version="4.5.0" targetFramework="net472" />
+  <package id="System.Windows.Interactivity.WPF" version="2.0.20525" targetFramework="net472" />
 </packages>