Imported Dock.Avalonia

src/PixiEditor.Avalonia/PixiEditor.Avalonia/PixiEditor.Avalonia.csproj

@@ -20,6 +20,8 @@
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="ByteSize" Version="2.1.1" />
+        <PackageReference Include="Dock.Avalonia" Version="11.0.0" />
+        <PackageReference Include="Dock.Model.Avalonia" Version="11.0.0" />
         <PackageReference Include="Hardware.Info" Version="11.0.0" />
         <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
         <PackageReference Include="PixiEditor.Parser" Version="3.3.0" />

src/PixiEditor.Avalonia/PixiEditor.Avalonia/ViewModels/MainViewModel.cs

@@ -2,5 +2,4 @@
 
 public class MainViewModel : ViewModelBase
 {
-    public string Greeting => "Welcome to Avalonia!";
 }

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/AllControlsPanel.axaml

@@ -0,0 +1,238 @@
+<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:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
+             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.Avalonia.Views.AllControlsPanel" Background="{DynamicResource ThemeBackgroundBrush}">
+
+    <WrapPanel Orientation="Vertical" Margin="10" HorizontalAlignment="Left">
+
+            <Label Content="Label"/>
+            <TextBlock Text="Text"/>
+            <TextBlock Text="h1" Classes="h1"/>
+            <TextBlock Text="h2" Classes="h2"/>
+            <TextBlock Text="h3" Classes="h3"/>
+            <TextBlock Text="h4" Classes="h4"/>
+
+            <Separator/>
+
+            <TextBlock ui:Translator.Key="LANGUAGE" ui:Translator.TooltipKey="LANGUAGE"/>
+            <SelectableTextBlock Text="Selectable text block"/>
+
+        <Separator/>
+
+        <Button Content="Button"/>
+        <Button Content="Button Disabled" Margin="0 10" IsEnabled="False"/>
+
+        <ToggleButton Content="ToggleButton"/>
+
+        <RepeatButton Margin="0 10" Content="Repeat Button" />
+
+        <Separator/>
+
+        <CheckBox Content="CheckBox" IsThreeState="True"/>
+
+        <Separator/>
+
+        <RadioButton GroupName="Radios" Margin="0 10" Content="Option 1"/>
+        <RadioButton GroupName="Radios" Content="Option 2"/>
+
+        <Separator/>
+
+        <ScrollViewer Height="50">
+            <StackPanel>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+            </StackPanel>
+        </ScrollViewer>
+
+        <Separator/>
+
+        <TextBox Watermark="TextBox" Margin="0 10" Text="Sample text"/>
+
+        <Separator/>
+
+        <ComboBox SelectedIndex="0">
+            <ComboBoxItem Content="ComboBoxItem 1"/>
+            <ComboBoxItem Content="ComboBoxItem 2"/>
+            <ComboBoxItem Content="ComboBoxItem 3"/>
+        </ComboBox>
+
+        <ListBox SelectedIndex="0" Margin="0 10">
+            <ListBoxItem Content="ListBoxItem 1"/>
+            <ListBoxItem Content="ListBoxItem 2"/>
+            <ListBoxItem Content="ListBoxItem 3"/>
+        </ListBox>
+
+        <Slider Margin="0 10" Value="50"/>
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
+        <ProgressBar VerticalAlignment="Center" Value="5" Margin="0 10" Maximum="10" />
+        <ProgressBar VerticalAlignment="Center" Value="50" />
+        <ProgressBar VerticalAlignment="Center" Value="50" ShowProgressText="True" Margin="0 10"
+                     Minimum="25" Maximum="75" />
+        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
+
+        <Border Background="{DynamicResource ThemeBackgroundBrush1}">
+            <Border.ContextMenu>
+                <ContextMenu>
+                    <MenuItem Header="Hello"/>
+                    <MenuItem Header="Hello2"/>
+                    <Separator/>
+                    <MenuItem Header="Hello Nested">
+                        <MenuItem Header="Hover for more">
+                            <MenuItem Header="If you hover again, you'll get a cookie">
+                                <MenuItem Header="Sike! No cookie here, keep going">
+                                    <MenuItem Header="Ok, take some rest 🍪"/>
+                                </MenuItem>
+                                </MenuItem>
+                        </MenuItem>
+                        </MenuItem>
+                </ContextMenu>
+            </Border.ContextMenu>
+            <TextBlock Text="Right click for context menu"/>
+        </Border>
+
+        <Menu>
+            <MenuItem Header="Hello"/>
+            <MenuItem Header="Hello2"/>
+            <Separator/>
+            <MenuItem Header="Hello Nested">
+                <MenuItem Header="Hover for more">
+                    <MenuItem Header="If you hover again, you'll get a cookie">
+                        <MenuItem Header="Sike! No cookie here, keep going">
+                            <MenuItem Header="Ok, take some rest 🍪"/>
+                        </MenuItem>
+                    </MenuItem>
+                </MenuItem>
+            </MenuItem>
+        </Menu>
+
+        <NotificationCard Content="Notification Card"/>
+        <AutoCompleteBox Margin="0 10" Watermark="No, this is" Name="autoComplete" />
+        <ButtonSpinner AllowSpin="True" ButtonSpinnerLocation="Right" ShowButtonSpinner="True">
+            <TextBlock Text="Button Spinner"/>
+        </ButtonSpinner>
+        <Calendar/>
+        <DatePicker/>
+        <CaptionButtons/>
+        <Carousel>
+            <Carousel.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock>Hello</TextBlock>
+                </DataTemplate>
+            </Carousel.ItemTemplate>
+            <Carousel.Items>
+                <TextBlock/>
+                <TextBlock/>
+                <TextBlock/>
+            </Carousel.Items>
+        </Carousel>
+        <DropDownButton/>
+        <Expander/>
+        <FlyoutPresenter/>
+        <Grid Width="200" Height="200" ColumnDefinitions="*, 4, *">
+            <Rectangle Grid.Column="0" Fill="Blue"/>
+            <GridSplitter Grid.Column="1" Background="Black" ResizeDirection="Columns"/>
+            <Rectangle Grid.Column="2" Fill="Red"/>
+        </Grid>
+
+            <dialogs:ManagedFileChooser Width="300"/>
+            <MenuFlyoutPresenter/>
+            <NativeMenuBar/>
+            <NumericUpDown Margin="0 10"/>
+            <RefreshContainer Content="Refresh Container"/>
+
+            <RefreshVisualizer Orientation="Auto">
+                123
+            </RefreshVisualizer>
+
+            <SplitButton Margin="0 10" Content="Split Button">
+                <SplitButton.Flyout>
+                    <Flyout>
+                        <StackPanel>
+                            <Button Content="Some flyout button"/>
+                        </StackPanel>
+                    </Flyout>
+                </SplitButton.Flyout>
+            </SplitButton>
+            <Border Width="200" Height="200">
+                <SplitView DisplayMode="Inline"
+                           IsPaneOpen="True">
+                    <SplitView.Pane>
+                        <Border Background="Green" />
+                    </SplitView.Pane>
+                    <SplitView.Content>
+                        <Border Background="Blue" />
+                    </SplitView.Content>
+                </SplitView>
+            </Border>
+
+            <TabControl>
+                <TabItem Header="Tab 1">
+                    <TextBlock Text="Tab 1"/>
+                </TabItem>
+                <TabItem Header="Tab 2">
+                    <TextBlock Text="Tab 2"/>
+                </TabItem>
+                <TabItem Header="Tab 3">
+                    <TextBlock Text="Tab 3"/>
+                </TabItem>
+            </TabControl>
+
+            <ThemeVariantScope/>
+
+            <TimePicker/>
+
+            <StackPanel Margin="20" Width="250" Spacing="24">
+                <StackPanel Spacing="12">
+                    <TextBlock
+                        Text="Automatic updates"
+                        Classes="h1" />
+                    <TextBlock
+                        Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
+                        TextWrapping="Wrap" />
+                    <ToggleSwitch HorizontalContentAlignment="Left"
+                                  Content="Enable automatic Updates?"
+                                  OffContent="Uit"
+                                  OnContent="Aan"
+                                  VerticalAlignment="Bottom" />
+                </StackPanel>
+
+                <StackPanel Spacing="12">
+                    <TextBlock
+                        Text="Previewer"
+                        Classes="h1" />
+                    <TextBlock
+                        Text="The previewer Shows a preview off your code, this could slow down your system"
+                        TextWrapping="Wrap" />
+                    <ToggleSwitch
+                        Content="Previewer"
+                        IsChecked="True" />
+                </StackPanel>
+
+                <TreeView>
+                    <TreeViewItem Header="Item 1">
+                        <TreeViewItem Header="Item 1.1"/>
+                        <TreeViewItem Header="Item 1.2"/>
+                        <TreeViewItem Header="Item 1.3"/>
+                    </TreeViewItem>
+                    <TreeViewItem Header="Item 2">
+                        <TreeViewItem Header="Item 2.1"/>
+                        <TreeViewItem Header="Item 2.2"/>
+                        <TreeViewItem Header="Item 2.3"/>
+                    </TreeViewItem>
+                    <TreeViewItem Header="Item 3">
+                        <TreeViewItem Header="Item 3.1"/>
+                        <TreeViewItem Header="Item 3.2"/>
+                        <TreeViewItem Header="Item 3.3"/>
+                    </TreeViewItem>
+                </TreeView>
+
+            </StackPanel>
+        </WrapPanel>
+</UserControl>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/AllControlsPanel.axaml.cs

@@ -0,0 +1,21 @@
+using System.Collections.Generic;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace PixiEditor.Avalonia.Views;
+
+public partial class AllControlsPanel : UserControl
+{
+    public AllControlsPanel()
+    {
+        InitializeComponent();
+        autoComplete.ItemsSource = new List<string> { "Wendy's", "Boob guy", "Patrick" };
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
+

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/Main/MainTitleBar.axaml

@@ -0,0 +1,8 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.Avalonia.Views.Main.MainTitleBar">
+
+</UserControl>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/Main/MainTitleBar.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace PixiEditor.Avalonia.Views.Main;
+
+public partial class MainTitleBar : UserControl
+{
+    public MainTitleBar()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
+

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/MainView.axaml

@@ -5,241 +5,104 @@
              xmlns:vm="clr-namespace:PixiEditor.Avalonia.ViewModels"
              xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
              xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
+             xmlns:main="clr-namespace:PixiEditor.Avalonia.Views.Main"
+             xmlns:controls="clr-namespace:Dock.Avalonia.Controls;assembly=Dock.Avalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="PixiEditor.Avalonia.Views.MainView"
              x:DataType="vm:MainViewModel" Background="{DynamicResource ThemeBackgroundBrush}">
-  <Design.DataContext>
-    <!-- This only sets the DataContext for the previewer in an IDE,
-         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
-    <vm:MainViewModel />
-  </Design.DataContext>
-
-        <WrapPanel Orientation="Vertical" Margin="10" HorizontalAlignment="Left">
-
-            <Label Content="Label"/>
-            <TextBlock Text="Text"/>
-            <TextBlock Text="h1" Classes="h1"/>
-            <TextBlock Text="h2" Classes="h2"/>
-            <TextBlock Text="h3" Classes="h3"/>
-            <TextBlock Text="h4" Classes="h4"/>
-
-            <Separator/>
-
-            <TextBlock ui:Translator.Key="LANGUAGE" ui:Translator.TooltipKey="LANGUAGE"/>
-            <SelectableTextBlock Text="Selectable text block"/>
-
-        <Separator/>
-
-        <Button Content="Button"/>
-        <Button Content="Button Disabled" Margin="0 10" IsEnabled="False"/>
-
-        <ToggleButton Content="ToggleButton"/>
-
-        <RepeatButton Margin="0 10" Content="Repeat Button" />
-
-        <Separator/>
-
-        <CheckBox Content="CheckBox" IsThreeState="True"/>
-
-        <Separator/>
-
-        <RadioButton GroupName="Radios" Margin="0 10" Content="Option 1"/>
-        <RadioButton GroupName="Radios" Content="Option 2"/>
-
-        <Separator/>
-
-        <ScrollViewer Height="50">
-            <StackPanel>
-                <TextBlock Text="ScrollViewer"/>
-                <TextBlock Text="ScrollViewer"/>
-                <TextBlock Text="ScrollViewer"/>
-                <TextBlock Text="ScrollViewer"/>
-                <TextBlock Text="ScrollViewer"/>
-            </StackPanel>
-        </ScrollViewer>
-
-        <Separator/>
-
-        <TextBox Watermark="TextBox" Margin="0 10" Text="Sample text"/>
-
-        <Separator/>
-
-        <ComboBox SelectedIndex="0">
-            <ComboBoxItem Content="ComboBoxItem 1"/>
-            <ComboBoxItem Content="ComboBoxItem 2"/>
-            <ComboBoxItem Content="ComboBoxItem 3"/>
-        </ComboBox>
-
-        <ListBox SelectedIndex="0" Margin="0 10">
-            <ListBoxItem Content="ListBoxItem 1"/>
-            <ListBoxItem Content="ListBoxItem 2"/>
-            <ListBoxItem Content="ListBoxItem 3"/>
-        </ListBox>
-
-        <Slider Margin="0 10" Value="50"/>
-        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
-        <ProgressBar VerticalAlignment="Center" Value="5" Margin="0 10" Maximum="10" />
-        <ProgressBar VerticalAlignment="Center" Value="50" />
-        <ProgressBar VerticalAlignment="Center" Value="50" ShowProgressText="True" Margin="0 10"
-                     Minimum="25" Maximum="75" />
-        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
-
-        <Border Background="{DynamicResource ThemeBackgroundBrush1}">
-            <Border.ContextMenu>
-                <ContextMenu>
-                    <MenuItem Header="Hello"/>
-                    <MenuItem Header="Hello2"/>
-                    <Separator/>
-                    <MenuItem Header="Hello Nested">
-                        <MenuItem Header="Hover for more">
-                            <MenuItem Header="If you hover again, you'll get a cookie">
-                                <MenuItem Header="Sike! No cookie here, keep going">
-                                    <MenuItem Header="Ok, take some rest 🍪"/>
-                                </MenuItem>
-                                </MenuItem>
-                        </MenuItem>
-                        </MenuItem>
-                </ContextMenu>
-            </Border.ContextMenu>
-            <TextBlock Text="Right click for context menu"/>
-        </Border>
-
-        <Menu>
-            <MenuItem Header="Hello"/>
-            <MenuItem Header="Hello2"/>
-            <Separator/>
-            <MenuItem Header="Hello Nested">
-                <MenuItem Header="Hover for more">
-                    <MenuItem Header="If you hover again, you'll get a cookie">
-                        <MenuItem Header="Sike! No cookie here, keep going">
-                            <MenuItem Header="Ok, take some rest 🍪"/>
-                        </MenuItem>
-                    </MenuItem>
-                </MenuItem>
-            </MenuItem>
-        </Menu>
-
-        <NotificationCard Content="Notification Card"/>
-        <AutoCompleteBox Margin="0 10" Watermark="No, this is" Name="autoComplete" />
-        <ButtonSpinner AllowSpin="True" ButtonSpinnerLocation="Right" ShowButtonSpinner="True">
-            <TextBlock Text="Button Spinner"/>
-        </ButtonSpinner>
-        <Calendar/>
-        <DatePicker/>
-        <CaptionButtons/>
-        <Carousel>
-            <Carousel.ItemTemplate>
-                <DataTemplate>
-                    <TextBlock>Hello</TextBlock>
-                </DataTemplate>
-            </Carousel.ItemTemplate>
-            <Carousel.Items>
-                <TextBlock/>
-                <TextBlock/>
-                <TextBlock/>
-            </Carousel.Items>
-        </Carousel>
-        <DropDownButton/>
-        <Expander/>
-        <FlyoutPresenter/>
-        <Grid Width="200" Height="200" ColumnDefinitions="*, 4, *">
-            <Rectangle Grid.Column="0" Fill="Blue"/>
-            <GridSplitter Grid.Column="1" Background="Black" ResizeDirection="Columns"/>
-            <Rectangle Grid.Column="2" Fill="Red"/>
-        </Grid>
-
-            <dialogs:ManagedFileChooser Width="300"/>
-            <MenuFlyoutPresenter/>
-            <NativeMenuBar/>
-            <NumericUpDown Margin="0 10"/>
-            <RefreshContainer Content="Refresh Container"/>
-
-            <RefreshVisualizer Orientation="Auto">
-                123
-            </RefreshVisualizer>
-
-            <SplitButton Margin="0 10" Content="Split Button">
-                <SplitButton.Flyout>
-                    <Flyout>
-                        <StackPanel>
-                            <Button Content="Some flyout button"/>
-                        </StackPanel>
-                    </Flyout>
-                </SplitButton.Flyout>
-            </SplitButton>
-            <Border Width="200" Height="200">
-                <SplitView DisplayMode="Inline"
-                           IsPaneOpen="True">
-                    <SplitView.Pane>
-                        <Border Background="Green" />
-                    </SplitView.Pane>
-                    <SplitView.Content>
-                        <Border Background="Blue" />
-                    </SplitView.Content>
-                </SplitView>
-            </Border>
-
-            <TabControl>
-                <TabItem Header="Tab 1">
-                    <TextBlock Text="Tab 1"/>
-                </TabItem>
-                <TabItem Header="Tab 2">
-                    <TextBlock Text="Tab 2"/>
-                </TabItem>
-                <TabItem Header="Tab 3">
-                    <TextBlock Text="Tab 3"/>
-                </TabItem>
-            </TabControl>
-
-            <ThemeVariantScope/>
-
-            <TimePicker/>
-
-            <StackPanel Margin="20" Width="250" Spacing="24">
-                <StackPanel Spacing="12">
-                    <TextBlock
-                        Text="Automatic updates"
-                        Classes="h1" />
-                    <TextBlock
-                        Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
-                        TextWrapping="Wrap" />
-                    <ToggleSwitch HorizontalContentAlignment="Left"
-                                  Content="Enable automatic Updates?"
-                                  OffContent="Uit"
-                                  OnContent="Aan"
-                                  VerticalAlignment="Bottom" />
-                </StackPanel>
-
-                <StackPanel Spacing="12">
-                    <TextBlock
-                        Text="Previewer"
-                        Classes="h1" />
-                    <TextBlock
-                        Text="The previewer Shows a preview off your code, this could slow down your system"
-                        TextWrapping="Wrap" />
-                    <ToggleSwitch
-                        Content="Previewer"
-                        IsChecked="True" />
-                </StackPanel>
-
-                <TreeView>
-                    <TreeViewItem Header="Item 1">
-                        <TreeViewItem Header="Item 1.1"/>
-                        <TreeViewItem Header="Item 1.2"/>
-                        <TreeViewItem Header="Item 1.3"/>
-                    </TreeViewItem>
-                    <TreeViewItem Header="Item 2">
-                        <TreeViewItem Header="Item 2.1"/>
-                        <TreeViewItem Header="Item 2.2"/>
-                        <TreeViewItem Header="Item 2.3"/>
-                    </TreeViewItem>
-                    <TreeViewItem Header="Item 3">
-                        <TreeViewItem Header="Item 3.1"/>
-                        <TreeViewItem Header="Item 3.2"/>
-                        <TreeViewItem Header="Item 3.3"/>
-                    </TreeViewItem>
-                </TreeView>
-
-            </StackPanel>
-        </WrapPanel>
+    <Grid>
+        <main:MainTitleBar/>
+      <DockControl x:Name="Dock" Grid.Row="1" InitializeLayout="True" InitializeFactory="True">
+      <DockControl.Factory>
+        <Factory />
+      </DockControl.Factory>
+
+      <RootDock x:Name="Root" Id="Root" IsCollapsable="False" DefaultDockable="{Binding #MainLayout}">
+
+        <!-- Windows -->
+
+        <RootDock.Windows>
+          <!--<DockWindow x:Name="DockWindow" Id="DockWindow" X="281" Y="233" Width="250" Height="400" Topmost="True">
+            <RootDock ActiveDockable="{Binding #ToolDock}" Window="{Binding #DockWindow}">
+              <ToolDock x:Name="ToolDock">
+                <Tool x:Name="ToolWindow" Id="ToolWindow" Title="Tool Window" x:DataType="Tool">
+                  <TextBlock Text="{Binding Title}"/>
+                </Tool>
+              </ToolDock>
+            </RootDock>
+          </DockWindow>-->
+        </RootDock.Windows>
+
+        <ProportionalDock x:Name="MainLayout" Id="MainLayout" Orientation="Horizontal">
+
+          <!-- Left Pane -->
+
+          <ToolDock x:Name="LeftPane" Id="LeftPane" Proportion="0.25" Alignment="Left">
+            <Tool x:Name="SolutionExplorer" Id="SolutionExplorer" Title="Solution Explorer" x:DataType="Tool">
+              <TextBlock Text="{Binding Title}"/>
+            </Tool>
+          </ToolDock>
+
+          <ProportionalDockSplitter x:Name="LeftSplitter" Id="LeftSplitter" />
+
+          <!-- Top Pane -->
+
+          <ProportionalDock x:Name="TopPane" Id="TopPane" Orientation="Vertical">
+
+            <!-- Right Pane -->
+
+            <ProportionalDock x:Name="RightPane" Id="RightPane" Orientation="Horizontal">
+
+              <!-- Documents Pane -->
+
+              <DocumentDock x:Name="DocumentsPane" Id="DocumentsPane" CanCreateDocument="True" ActiveDockable="Document1">
+                <DocumentDock.DocumentTemplate>
+                  <DocumentTemplate>
+                    <StackPanel x:DataType="Document">
+                      <TextBlock Text="Title"/>
+                      <TextBox Text="{Binding Title}"/>
+                      <TextBlock Text="Context"/>
+                      <TextBox Text="{Binding Context}"/>
+                    </StackPanel>
+                  </DocumentTemplate>
+                </DocumentDock.DocumentTemplate>
+                <Document x:Name="Document1" Id="Document1" Title="Program.cs" x:DataType="Document">
+                  <TextBlock Text="{Binding Title}"/>
+                </Document>
+                <Document x:Name="Document2" Id="Document2" Title="App.axaml" x:DataType="Document">
+                  <TextBlock Text="{Binding Title}"/>
+                </Document>
+              </DocumentDock>
+
+              <ProportionalDockSplitter x:Name="RightSplitter" Id="RightSplitter" />
+
+              <!-- Properties Pane -->
+              <ToolDock x:Name="PropertiesPane" Id="PropertiesPane" Proportion="0.3" Alignment="Right">
+                <Tool x:Name="Properties" Id="Properties" Title="Properties" x:DataType="Tool">
+                  <TextBlock Text="{Binding Title}"/>
+                </Tool>
+              </ToolDock>
+
+            </ProportionalDock>
+
+            <ProportionalDockSplitter x:Name="BottomSplitter" Id="BottomSplitter" />
+
+            <!-- Bottom Pane -->
+
+            <ToolDock x:Name="BottomPane" Id="BottomPane" Proportion="0.3" Alignment="Bottom" ActiveDockable="Output">
+              <Tool x:Name="ErrorList" Id="ErrorList" Title="Error List" x:DataType="Tool">
+                <TextBlock Text="{Binding Title}"/>
+              </Tool>
+              <Tool x:Name="Output" Id="Output" Title="Output" x:DataType="Tool">
+                <TextBlock Text="{Binding Title}"/>
+              </Tool>
+            </ToolDock>
+
+          </ProportionalDock>
+
+        </ProportionalDock>
+      </RootDock>
+
+    </DockControl>
+    </Grid>
 </UserControl>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/MainView.axaml.cs

@@ -11,7 +11,6 @@ public partial class MainView : UserControl
     public MainView()
     {
         InitializeComponent();
-        autoComplete.ItemsSource = new List<string> { "Wendy's", "Boob guy", "Patrick" };
     }
 
 }

src/PixiEditor.UI.Common/Controls/Dock/Accents/Base.axaml

@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard">
+
+    <SolidColorBrush x:Key="DockApplicationAccentBrushLow">#007ACC</SolidColorBrush>
+    <SolidColorBrush x:Key="DockApplicationAccentBrushMed">#1C97EA</SolidColorBrush>
+    <SolidColorBrush x:Key="DockApplicationAccentBrushHigh">#52B0EF</SolidColorBrush>
+    <SolidColorBrush x:Key="DockApplicationAccentForegroundBrush">#F0F0F0</SolidColorBrush>
+    <SolidColorBrush x:Key="DockApplicationAccentBrushIndicator">#007ACC</SolidColorBrush>
+
+    <SolidColorBrush x:Key="DockThemeBorderLowBrush" Color="{DynamicResource ThemeBorderLowColor}" />
+    <SolidColorBrush x:Key="DockThemeBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}" />
+    <SolidColorBrush x:Key="DockThemeAccentBrush" Color="{DynamicResource ThemeAccentColor}" />
+    <SolidColorBrush x:Key="DockThemeForegroundBrush" Color="{DynamicResource ThemeForegroundColor}" />
+    <SolidColorBrush x:Key="DockThemeControlBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}" />
+    <sys:Double x:Key="DockFontSizeNormal">12</sys:Double>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DockControl.axaml

@@ -0,0 +1,49 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <DockControl Width="600" Height="400" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type DockControl}" TargetType="DockControl">
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentControl x:Name="PART_ContentControl"
+                        Content="{TemplateBinding Layout}"
+                        x:DataType="core:IDock"
+                        x:CompileBindings="True">
+          <ContentControl.DataTemplates>
+            <DataTemplate DataType="dmc:IDocumentContent">
+              <DocumentContentControl />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IToolContent">
+              <ToolContentControl />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IProportionalDockSplitter">
+              <ProportionalStackPanelSplitter />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IDocumentDock">
+              <DocumentDockControl />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IToolDock">
+              <ToolDockControl />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IProportionalDock">
+              <ProportionalDockControl />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IDockDock">
+              <DockDockControl />
+            </DataTemplate>
+            <DataTemplate DataType="dmc:IRootDock">
+              <RootDockControl />
+            </DataTemplate>
+          </ContentControl.DataTemplates>
+        </ContentControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DockDockControl.axaml

@@ -0,0 +1,37 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Dock.Avalonia.Converters"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <DockDockControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type DockDockControl}" TargetType="DockDockControl">
+
+    <Setter Property="(ProportionalStackPanelSplitter.Proportion)" Value="{Binding Proportion}" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible">
+          <ItemsControl ItemsSource="{Binding VisibleDockables}">
+            <ItemsControl.Styles>
+              <Style Selector="ItemsControl > ContentPresenter" x:DataType="core:IDock">
+                <Setter Property="(DockPanel.Dock)"
+                        Value="{Binding Dock, Converter={x:Static converters:DockModeConverter.Instance}}" />
+              </Style>
+            </ItemsControl.Styles>
+            <ItemsControl.ItemsPanel>
+              <ItemsPanelTemplate>
+                <DockPanel DockProperties.IsDropArea="True"
+                           Background="Transparent"
+                           LastChildFill="{Binding LastChildFill}"/>
+              </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+          </ItemsControl>
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DockTarget.axaml

@@ -0,0 +1,112 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Panel Width="300" Height="300">
+      <DockTarget>
+        <DockTarget.Styles>
+          <Style Selector="^/template/ Panel#PART_TopIndicator">
+            <Setter Property="Opacity" Value="0.0" />
+          </Style>
+          <Style Selector="^/template/ Panel#PART_BottomIndicator">
+            <Setter Property="Opacity" Value="0.0" />
+          </Style>
+          <Style Selector="^/template/ Panel#PART_LeftIndicator">
+            <Setter Property="Opacity" Value="0.0" />
+          </Style>
+          <Style Selector="^/template/ Panel#PART_RightIndicator">
+            <Setter Property="Opacity" Value="0.0" />
+          </Style>
+          <Style Selector="^/template/ Panel#PART_CenterIndicator">
+            <Setter Property="Opacity" Value="0.0" />
+          </Style>
+        </DockTarget.Styles>
+      </DockTarget>
+    </Panel>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type DockTarget}" TargetType="DockTarget">
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid x:Name="PART_IndicatorGrid" RowDefinitions="*,*" ColumnDefinitions="*,*" x:CompileBindings="True">
+          <Panel x:Name="PART_TopIndicator" Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" />
+          <Panel x:Name="PART_BottomIndicator" Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" />
+          <Panel x:Name="PART_LeftIndicator" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" />
+          <Panel x:Name="PART_RightIndicator" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" />
+          <Panel x:Name="PART_CenterIndicator" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
+          <Panel x:Name="PART_SelectorPanel" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Grid.Column="0">
+            <Grid x:Name="PART_SelectorGrid" RowDefinitions="*,*,*" ColumnDefinitions="*,*,*">
+              <Image x:Name="PART_TopSelector" Grid.Row="0" Grid.Column="1" />
+              <Image x:Name="PART_BottomSelector" Grid.Row="2" Grid.Column="1" />
+              <Image x:Name="PART_LeftSelector" Grid.Row="1" Grid.Column="0" />
+              <Image x:Name="PART_RightSelector" Grid.Row="1" Grid.Column="2" />
+              <Image x:Name="PART_CenterSelector" Grid.Row="1" Grid.Column="1" />
+            </Grid>
+          </Panel>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^/template/ Grid#PART_SelectorGrid">
+      <Setter Property="MaxWidth" Value="125" />
+      <Setter Property="MaxHeight" Value="125" />
+    </Style>
+
+    <Style Selector="^/template/ Panel#PART_TopIndicator">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushIndicator}" />
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^/template/ Panel#PART_BottomIndicator">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushIndicator}" />
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^/template/ Panel#PART_LeftIndicator">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushIndicator}" />
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^/template/ Panel#PART_RightIndicator">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushIndicator}" />
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^/template/ Panel#PART_CenterIndicator">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushIndicator}" />
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^/template/ Image#PART_TopSelector">
+      <Setter Property="Source" Value="avares://Dock.Avalonia/Assets/DockAnchorableTop.png" />
+      <Setter Property="Width" Value="40" />
+      <Setter Property="Height" Value="40" />
+    </Style>
+
+    <Style Selector="^/template/ Image#PART_BottomSelector">
+      <Setter Property="Source" Value="avares://Dock.Avalonia/Assets/DockAnchorableBottom.png" />
+      <Setter Property="Width" Value="40" />
+      <Setter Property="Height" Value="40" />
+    </Style>
+
+    <Style Selector="^/template/ Image#PART_LeftSelector">
+      <Setter Property="Source" Value="avares://Dock.Avalonia/Assets/DockAnchorableLeft.png" />
+      <Setter Property="Width" Value="40" />
+      <Setter Property="Height" Value="40" />
+    </Style>
+
+    <Style Selector="^/template/ Image#PART_RightSelector">
+      <Setter Property="Source" Value="avares://Dock.Avalonia/Assets/DockAnchorableRight.png" />
+      <Setter Property="Width" Value="40" />
+      <Setter Property="Height" Value="40" />
+    </Style>
+
+    <Style Selector="^/template/ Image#PART_CenterSelector">
+      <Setter Property="Source" Value="avares://Dock.Avalonia/Assets/DockDocumentInside.png" />
+      <Setter Property="Width" Value="40" />
+      <Setter Property="Height" Value="40" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DocumentContentControl.axaml

@@ -0,0 +1,20 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <DocumentContentControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type DocumentContentControl}" TargetType="DocumentContentControl">
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible">
+          <ContentControl Content="{Binding}" 
+                          ContentTemplate="{Binding}" />
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DocumentControl.axaml

@@ -0,0 +1,71 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <DocumentControl Width="300" Height="400" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type DocumentControl}" TargetType="DocumentControl">
+
+    <Setter Property="HeaderTemplate">
+      <DataTemplate DataType="core:IDockable">
+        <TextBlock Text="{Binding Title}" Padding="2" />
+      </DataTemplate>
+    </Setter>
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel x:Name="PART_DockPanel"
+                   DockProperties.IsDropArea="True"
+                   DockProperties.IsDockTarget="True"
+                   Background="Transparent"
+                   ZIndex="1"
+                   x:DataType="dmc:IDocumentDock"
+                   x:CompileBindings="True">
+          <DocumentTabStrip x:Name="PART_TabStrip"
+                            ItemsSource="{Binding VisibleDockables}"
+                            SelectedItem="{Binding ActiveDockable, Mode=TwoWay}"
+                            CanCreateItem="{Binding CanCreateDocument}"
+                            IsActive="{TemplateBinding IsActive}"
+                            DockPanel.Dock="Top"
+                            DockProperties.IsDropArea="True">
+            <DocumentTabStrip.Styles>
+              <Style Selector="DocumentTabStripItem">
+                <Setter Property="IsActive" Value="{Binding $parent[DocumentTabStrip].IsActive}" />
+              </Style>
+            </DocumentTabStrip.Styles>
+          </DocumentTabStrip>
+          <Grid x:Name="PART_Grid"
+                IsVisible="{Binding #PART_TabStrip.IsVisible}" />
+          <Border x:Name="PART_Border">
+            <DockableControl DataContext="{Binding ActiveDockable}"
+                             TrackingMode="Visible">
+              <ContentControl x:Name="PART_ContentPresenter"
+                              Content="{Binding}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch" />
+            </DockableControl>
+          </Border>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^/template/ Grid#PART_Grid">
+      <Setter Property="Background" Value="{DynamicResource DockThemeBorderLowBrush}" />
+      <Setter Property="Height" Value="2" />
+      <Setter Property="DockPanel.Dock" Value="Top" />
+    </Style>
+
+    <Style Selector="^:active /template/ Grid#PART_Grid">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushLow}" />
+    </Style>
+
+    <Style Selector="^/template/ Border#PART_Border">
+      <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+      <Setter Property="BorderThickness" Value="1,1,1,1" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DocumentDockControl.axaml

@@ -0,0 +1,22 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <DocumentDockControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type DocumentDockControl}" TargetType="DocumentDockControl">
+
+    <Setter Property="(ProportionalStackPanelSplitter.Proportion)" Value="{Binding Proportion}" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible"
+                         ProportionalStackPanelSplitter.Proportion="{Binding Proportion}">
+          <DocumentControl IsActive="{Binding IsActive}" />
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DocumentTabStrip.axaml

@@ -0,0 +1,79 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <DocumentTabStrip>
+        <DocumentTabStripItem>Item 1</DocumentTabStripItem>
+        <DocumentTabStripItem>Item 2</DocumentTabStripItem>
+        <DocumentTabStripItem IsEnabled="False">Disabled</DocumentTabStripItem>
+      </DocumentTabStrip>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="ButtonCreateDocument" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="0" />
+    <Setter Property="Margin" Value="0" />
+    <Setter Property="Width" Value="26" />
+    <Setter Property="Height" Value="24" />
+    <Setter Property="HorizontalAlignment" Value="Right" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalAlignment" Value="Top" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Background" Value="Transparent" />
+    <Style Selector="^:pointerover">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushHigh}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type DocumentTabStrip}" TargetType="DocumentTabStrip">
+
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="ClipToBounds" Value="False" />
+    <Setter Property="ZIndex" Value="1" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel Background="Transparent"
+                   ClipToBounds="False"
+                   x:DataType="dmc:IDocumentDock"
+                   x:CompileBindings="True">
+          <Button x:Name="PART_ButtonCreate"
+                  Command="{Binding CreateDocument}"
+                  Theme="{StaticResource ButtonCreateDocument}"
+                  IsVisible="{Binding CanCreateDocument}"
+                  DockPanel.Dock="Right">
+            <Path x:Name="PART_PathCreate">
+              <Path.Styles>
+                <Style Selector="Path">
+                  <Setter Property="Margin" Value="5" />
+                  <Setter Property="Stretch" Value="Uniform" />
+                  <Setter Property="UseLayoutRounding" Value="False" />
+                  <Setter Property="Fill" Value="{DynamicResource DockThemeForegroundBrush}" />
+                  <Setter Property="Data"
+                          Value="M8.41687 7.57953V2.41851C8.41687 2.18743 8.22932 1.99988 7.99823 1.99988C7.76715 1.99988 7.5796 2.18743 7.5796 2.41851V7.57953H2.41863C2.18755 7.57953 2 7.76708 2 7.99816C2 8.22925 2.18755 8.41679 2.41863 8.41679H7.5796V13.5812C7.5796 13.8123 7.76715 13.9999 7.99823 13.9999C8.22932 13.9999 8.41687 13.8123 8.41687 13.5812V8.41679L13.5799 8.41851C13.811 8.41851 13.9985 8.23096 13.9985 7.99988C13.9985 7.76879 13.811 7.58125 13.5799 7.58125L8.41687 7.57953Z" />
+                </Style>
+              </Path.Styles>
+            </Path>
+          </Button>
+          <ItemsPresenter x:Name="PART_ItemsPresenter"
+                          ItemsPanel="{TemplateBinding ItemsPanel}" />
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <WrapPanel ClipToBounds="False" />
+      </ItemsPanelTemplate>
+    </Setter>
+
+    <Style Selector="^:not(:create):empty">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/DocumentTabStripItem.axaml

@@ -0,0 +1,140 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:core="using:Dock.Model.Core"
+                    x:CompileBindings="True">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <DocumentTabStripItem>Leaf</DocumentTabStripItem>
+        <DocumentTabStripItem IsSelected="True">Arch</DocumentTabStripItem>
+        <DocumentTabStripItem Background="Yellow">Background</DocumentTabStripItem>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ContextMenu x:Key="DocumentTabStripItemContextMenu" x:DataType="core:IDockable" x:CompileBindings="True">
+    <MenuItem Header="_Float"
+              Command="{Binding Owner.Factory.FloatDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanFloat}"/>
+    <MenuItem Header="_Close"
+              Command="{Binding Owner.Factory.CloseDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+    <MenuItem Header="Close other tabs"
+              Command="{Binding Owner.Factory.CloseOtherDockables}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+    <MenuItem Header="Close all tabs"
+              Command="{Binding Owner.Factory.CloseAllDockables}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+    <MenuItem Header="_Close tabs to the left"
+              Command="{Binding Owner.Factory.CloseLeftDockables}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+    <MenuItem Header="_Close tabs to the right"
+              Command="{Binding Owner.Factory.CloseRightDockables}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+  </ContextMenu>
+
+  <ControlTheme x:Key="{x:Type DocumentTabStripItem}" TargetType="DocumentTabStripItem">
+
+    <Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="MinHeight" Value="24" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Foreground" Value="{DynamicResource DockThemeForegroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Margin" Value="0" />
+    <Setter Property="Padding" Value="4 0 4 0" />
+
+    <Setter Property="Template" x:DataType="core:IDockable">
+      <ControlTemplate>
+          <Border Background="{TemplateBinding Background}"
+                  TextElement.FontFamily="{TemplateBinding FontFamily}"
+                  TextElement.FontSize="{TemplateBinding FontSize}"
+                  TextElement.FontWeight="{TemplateBinding FontWeight}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  Padding="{TemplateBinding Padding}"
+                  ContextMenu="{DynamicResource DocumentTabStripItemContextMenu}">
+            <DockableControl TrackingMode="Tab">
+              <StackPanel Background="Transparent"
+                          Orientation="Horizontal"
+                          Spacing="2"
+                          DockProperties.IsDragArea="True"
+                          DockProperties.IsDropArea="True">
+                <Panel Margin="2">
+                  <ContentPresenter ContentTemplate="{Binding $parent[DocumentControl].HeaderTemplate}"
+                                    Content="{Binding}" />
+                </Panel>
+                <Button x:Name="PART_CloseButton"
+                        Command="{Binding Owner.Factory.CloseDockable}"
+                        CommandParameter="{Binding}"
+                        IsVisible="{Binding CanClose}">
+                  <Button.Styles>
+                    <Style Selector="Button">
+                      <Setter Property="BorderThickness" Value="0" />
+                      <Setter Property="Padding" Value="0" />
+                      <Setter Property="Margin" Value="0" />
+                      <Setter Property="Width" Value="14" />
+                      <Setter Property="Height" Value="14" />
+                      <Setter Property="Background" Value="Transparent" />
+                      <Style Selector="^:pointerover">
+                        <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushHigh}" />
+                      </Style>
+                    </Style>
+                  </Button.Styles>
+                  <Path x:Name="PART_ClosePath">
+                    <Path.Styles>
+                      <Style Selector="Path">
+                        <Setter Property="Margin" Value="2" />
+                        <Setter Property="Stretch" Value="Uniform" />
+                        <Setter Property="UseLayoutRounding" Value="False" />
+                        <Setter Property="Data"
+                                Value="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+                      </Style>
+                    </Path.Styles>
+                  </Path>
+                </Button>
+              </StackPanel>
+            </DockableControl>
+          </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:selected /template/ Path#PART_ClosePath">
+      <Setter Property="Fill" Value="{DynamicResource DockApplicationAccentForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Path#PART_ClosePath">
+      <Setter Property="Fill" Value="{DynamicResource DockApplicationAccentForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:not(:active):selected">
+      <Setter Property="Background" Value="{DynamicResource DockThemeBorderLowBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource DockThemeForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:active:selected">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushLow}" />
+      <Setter Property="Foreground" Value="{DynamicResource DockApplicationAccentForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:pointerover">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushMed}" />
+      <Setter Property="Foreground" Value="{DynamicResource DockApplicationAccentForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:selected:pointerover">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushLow}" />
+      <Setter Property="Foreground" Value="{DynamicResource DockApplicationAccentForegroundBrush}" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/HostWindow.axaml

@@ -0,0 +1,111 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <HostWindow IsToolWindow="False" Width="300" Height="400" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type HostWindow}" TargetType="HostWindow">
+
+    <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+    <Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
+    <Setter Property="FontFamily" Value="{TemplateBinding FontFamily}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource DockThemeForegroundBrush}" />
+    <Setter Property="WindowState" Value="Normal" />
+    <Setter Property="UseLayoutRounding" Value="True" />
+    <Setter Property="Title" Value="{Binding ActiveDockable.Title}" />
+    <Setter Property="SystemDecorations" Value="Full" />
+    <Setter Property="ExtendClientAreaToDecorationsHint" Value="True" />
+    <Setter Property="ExtendClientAreaChromeHints" Value="PreferSystemChrome" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+          <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
+          <Panel Background="Transparent" Margin="{TemplateBinding WindowDecorationMargin}" />
+          <VisualLayerManager>
+            <VisualLayerManager.ChromeOverlayLayer>
+              <HostWindowTitleBar Name="PART_TitleBar" />
+            </VisualLayerManager.ChromeOverlayLayer>
+            <ContentPresenter Name="PART_ContentPresenter"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              Margin="{TemplateBinding Padding}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+          </VisualLayerManager>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+
+    <Setter Property="Content">
+      <Template>
+        <Panel Margin="{Binding $parent[HostWindow].OffScreenMargin}">
+          <Panel Margin="{Binding $parent[HostWindow].WindowDecorationMargin}">
+            <DockControl Layout="{Binding}"
+                         x:DataType="core:IHostWindow"
+                         x:CompileBindings="True" />
+          </Panel>
+        </Panel>
+      </Template>
+    </Setter>
+
+    <Style Selector="^:toolwindow">
+
+      <Setter Property="SystemDecorations" Value="None" />
+      <Setter Property="ExtendClientAreaToDecorationsHint" Value="True" />
+      <Setter Property="ExtendClientAreaChromeHints" Value="PreferSystemChrome" />
+
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Panel>
+            <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+            <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
+            <Panel Background="Transparent" Margin="{TemplateBinding WindowDecorationMargin}" />
+            <VisualLayerManager>
+              <VisualLayerManager.ChromeOverlayLayer>
+                <!-- <TitleBar/> -->
+              </VisualLayerManager.ChromeOverlayLayer>
+              <ContentPresenter Name="PART_ContentPresenter"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Content="{TemplateBinding Content}"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+            </VisualLayerManager>
+          </Panel>
+        </ControlTemplate>
+      </Setter>
+
+      <Setter Property="Content">
+        <Template>
+          <Panel Margin="{Binding $parent[HostWindow].OffScreenMargin}">
+            <DockControl Layout="{Binding}"
+                         x:DataType="core:IHostWindow"
+                         x:CompileBindings="True" />
+          </Panel>
+        </Template>
+      </Setter>
+
+    </Style>
+
+    <Style Selector="^:toolwindow">
+      <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+      <Setter Property="TransparencyLevelHint" Value="None"/>
+      <Setter Property="Opacity" Value="1.0" />
+    </Style>
+
+    <Style Selector="^:toolwindow:dragging">
+      <Setter Property="Background" Value="{x:Null}" />
+      <Setter Property="TransparencyLevelHint" Value="Transparent"/>
+      <Setter Property="Opacity" Value="0.5" />
+    </Style>
+
+    <Style Selector="^TitleBar /template/ Border#PART_Background">
+      <Setter Property="IsHitTestVisible" Value="True" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/HostWindowTitleBar.axaml

@@ -0,0 +1,59 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border>
+      <HostWindowTitleBar Background="SkyBlue" Height="30" Width="300" Foreground="Black" />
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type HostWindowTitleBar}" TargetType="HostWindowTitleBar">
+
+    <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>    
+    <Setter Property="VerticalAlignment" Value="Top" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="Background" Value="Transparent" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Stretch">
+          <Panel x:Name="PART_MouseTracker" Height="1" VerticalAlignment="Top" />
+          <Panel x:Name="PART_Container">
+            <Border x:Name="PART_Background" Background="{TemplateBinding Background}" />
+            <CaptionButtons x:Name="PART_CaptionButtons" VerticalAlignment="Top" HorizontalAlignment="Right" Foreground="{TemplateBinding Foreground}" />
+          </Panel>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+ 
+    <Style Selector="^:fullscreen">
+      <Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
+    </Style>
+
+    <Style Selector="^/template/ Border#PART_Background">
+      <Setter Property="IsHitTestVisible" Value="False" />
+    </Style>
+
+    <Style Selector="^:fullscreen /template/ Border#PART_Background">
+      <Setter Property="IsHitTestVisible" Value="True" />
+    </Style>
+
+    <Style Selector="^:fullscreen /template/ Panel#PART_MouseTracker">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+
+    <Style Selector="^:fullscreen /template/ Panel#PART_Container">
+      <Setter Property="RenderTransform" Value="translateY(-30px)" />
+      <Setter Property="Transitions">
+        <Transitions>
+          <TransformOperationsTransition Property="RenderTransform" Duration="0:0:.25" />
+        </Transitions>
+      </Setter>
+    </Style>
+
+    <Style Selector="^:fullscreen:pointerover /template/ Panel#PART_Container">
+      <Setter Property="RenderTransform" Value="none" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ProportionalDockControl.axaml

@@ -0,0 +1,37 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Dock.Avalonia.Converters"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <ProportionalDockControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ProportionalDockControl}" TargetType="ProportionalDockControl">
+
+    <Setter Property="(ProportionalStackPanelSplitter.Proportion)" Value="{Binding Proportion}" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible"
+                         ProportionalStackPanelSplitter.Proportion="{Binding Proportion}">
+          <ItemsControl ItemsSource="{Binding VisibleDockables}">
+            <ItemsControl.Styles>
+              <Style Selector="ItemsControl > ContentPresenter > :is(core|IDock)" x:DataType="core:IDock">
+                <Setter Property="(ProportionalStackPanelSplitter.Proportion)" Value="{Binding Proportion}" />
+              </Style>
+            </ItemsControl.Styles>
+            <ItemsControl.ItemsPanel>
+              <ItemsPanelTemplate>
+                <ProportionalStackPanel DockProperties.IsDropArea="True"
+                                        Background="Transparent"
+                                        Orientation="{Binding Orientation, Converter={x:Static converters:OrientationConverter.Instance}}" />
+              </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+          </ItemsControl>
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ProportionalStackPanelSplitter.axaml

@@ -0,0 +1,18 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ControlTheme x:Key="{x:Type ProportionalStackPanelSplitter}" TargetType="ProportionalStackPanelSplitter">
+
+        <Setter Property="Background" Value="Transparent" />
+
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}" />
+            </ControlTemplate>
+        </Setter>
+
+    </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/RootDockControl.axaml

@@ -0,0 +1,41 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls">
+  <Design.PreviewWith>
+    <RootDockControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type RootDockControl}" TargetType="RootDockControl">
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible"
+                         x:DataType="dmc:IRootDock"
+                         x:CompileBindings="True">
+          <DockPanel Background="Transparent"
+                     DockProperties.IsDropArea="False">
+            <ToolPinnedControl DockPanel.Dock="Left" 
+                               Orientation="Vertical"
+                               Items="{Binding LeftPinnedDockables}"
+                               IsVisible="{Binding !!LeftPinnedDockables.Count}" />
+            <ToolPinnedControl DockPanel.Dock="Right" 
+                               Orientation="Vertical"
+                               Items="{Binding RightPinnedDockables}"
+                               IsVisible="{Binding !!RightPinnedDockables.Count}" />
+            <ToolPinnedControl DockPanel.Dock="Top" 
+                               Orientation="Horizontal"
+                               Items="{Binding TopPinnedDockables}"
+                               IsVisible="{Binding !!TopPinnedDockables.Count}" />
+            <ToolPinnedControl DockPanel.Dock="Bottom" 
+                               Orientation="Horizontal"
+                               Items="{Binding BottomPinnedDockables}"
+                               IsVisible="{Binding !!BottomPinnedDockables.Count}" />
+            <ContentControl Content="{Binding ActiveDockable}" />
+          </DockPanel>
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolChromeControl.axaml

@@ -0,0 +1,198 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Dock.Avalonia.Converters"
+                    xmlns:controls="using:Dock.Model.Controls">
+  <Design.PreviewWith>
+    <ToolChromeControl Width="300" Height="400" />
+  </Design.PreviewWith>
+
+  <ContextMenu x:Key="ToolChromeControlContextMenu" 
+               x:DataType="controls:IToolDock" x:CompileBindings="True"
+               IsVisible="{Binding !!ActiveDockable}">
+    <MenuItem Header="_Float"
+              Command="{Binding Owner.Factory.FloatDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding ActiveDockable.CanFloat, FallbackValue=False}"/>
+    <MenuItem Header="_Hide"
+              Command="{Binding Owner.Factory.PinDockable}"
+              CommandParameter="{Binding ActiveDockable}"
+              IsVisible="{Binding ActiveDockable.CanPin, FallbackValue=False}"/>
+    <MenuItem Header="_Close"
+              Command="{Binding Owner.Factory.CloseDockable}"
+              CommandParameter="{Binding ActiveDockable}"
+              IsVisible="{Binding ActiveDockable.CanClose, FallbackValue=False}"/>
+  </ContextMenu>
+  
+  <ControlTheme x:Key="{x:Type ToolChromeControl}" TargetType="ToolChromeControl">
+
+    <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="0" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid RowDefinitions="Auto,*" x:DataType="controls:IToolDock" x:CompileBindings="True">
+          <ContentPresenter x:Name="PART_ContentPresenter"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            Content="{TemplateBinding Content}"
+                            Padding="{TemplateBinding Padding}"
+                            Grid.Row="1" />
+          <Border x:Name="PART_Border"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  VerticalAlignment="Top"
+                  ContextMenu="{DynamicResource ToolChromeControlContextMenu}"
+                  Grid.Row="{Binding GripMode, Converter={x:Static converters:GripModeConverters.GridRowAutoHideConverter}}">
+            <Grid x:Name="PART_Grip">
+              <DockPanel LastChildFill="True" Margin="8 0">
+                <Panel DockPanel.Dock="Left">
+                  <TextBlock x:Name="PART_Title"
+                             Text="{Binding ActiveDockable.Title, FallbackValue=TITLE}" />
+                </Panel>
+                <Button x:Name="PART_CloseButton"
+                        Command="{Binding Owner.Factory.CloseDockable}"
+                        CommandParameter="{Binding ActiveDockable}"
+                        IsVisible="{Binding ActiveDockable.CanClose, FallbackValue=False}"
+                        DockPanel.Dock="Right">
+                  <Viewbox>
+                    <Path x:Name="PART_ClosePath" />
+                  </Viewbox>
+                </Button>
+                <Button x:Name="PART_PinButton"
+                        Command="{Binding Owner.Factory.PinDockable}"
+                        CommandParameter="{Binding ActiveDockable}"
+                        IsVisible="{Binding ActiveDockable.CanPin, FallbackValue=False}"
+                        DockPanel.Dock="Right">
+                  <Viewbox>
+                    <Path x:Name="PART_PinPath" />
+                  </Viewbox>
+                </Button>
+                <Grid x:Name="PART_Grid" />
+              </DockPanel>
+            </Grid>
+          </Border>
+          <Panel x:Name="PART_Panel"
+                 Background="{TemplateBinding BorderBrush}"
+                 Height="1"
+                 VerticalAlignment="Top"
+                 Grid.Row="{Binding GripMode, Converter={x:Static converters:GripModeConverters.GridRowAutoHideConverter}}" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^/template/ Border#PART_Border">
+      <Setter Property="BorderThickness" Value="1 1 1 0" />
+      <Setter Property="IsVisible"
+              Value="{Binding GripMode, Converter={x:Static converters:GripModeConverters.IsVisibleVisibleConverter}}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Border#PART_Border">
+      <Setter Property="IsVisible"
+              Value="{Binding GripMode, Converter={x:Static converters:GripModeConverters.IsVisibleAutoHideOrVisibleConverter}}" />
+    </Style>
+
+    <Style Selector="^:floating /template/ Border#PART_Border">
+      <Setter Property="BorderThickness" Value="0" />
+    </Style>
+
+    <Style Selector="^/template/ Panel#PART_Panel">
+      <Setter Property="IsVisible"
+              Value="{Binding GripMode, Converter={x:Static converters:GripModeConverters.IsVisibleAutoHideOrHiddenConverter}}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Panel#PART_Panel">
+      <Setter Property="IsVisible"
+              Value="{Binding GripMode, Converter={x:Static converters:GripModeConverters.IsVisibleVisibleOrHiddenConverter}}" />
+    </Style>
+
+    <Style Selector="^:floating:pointerover /template/ Panel#PART_Panel">
+      <Setter Property="Height" Value="0" />
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+
+    <Style Selector="^/template/ TextBlock#PART_Title">
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="TextAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Stretch" />
+      <Setter Property="Margin" Value="0 4 8 4" />
+      <Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
+    </Style>
+
+    <Style Selector="^:active /template/ TextBlock#PART_Title">
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="Foreground" Value="{DynamicResource DockApplicationAccentForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^/template/ Grid#PART_Grip">
+      <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+    </Style>
+
+    <Style Selector="^/template/ Grid#PART_Grip">
+      <Setter Property="(DockProperties.IsDragArea)" Value="True" />
+    </Style>
+
+    <Style Selector="^:floating /template/ Grid#PART_Grip">
+      <Setter Property="(DockProperties.IsDragArea)" Value="False" />
+    </Style>
+
+    <Style Selector="^:active /template/ Grid#PART_Grip">
+      <Setter Property="Background" Value="{DynamicResource DockThemeAccentBrush}" />
+    </Style>
+
+    <Style Selector="^/template/ Grid#PART_Grid">
+      <Setter Property="Height" Value="5" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+      <Setter Property="Margin" Value="0 0 2 0" />
+      <Setter Property="Background">
+        <VisualBrush SourceRect="0,0,4,5"
+                     DestinationRect="0,0,4,5"
+                     TileMode="Tile"
+                     Stretch="UniformToFill">
+          <VisualBrush.Visual>
+            <Canvas Width="4" Height="5" Background="Transparent">
+              <Rectangle Height="1" Width="1" Fill="#474747" />
+              <Rectangle Height="1" Width="1" Fill="#474747" Canvas.Top="2" Canvas.Left="2" />
+              <Rectangle Height="1" Width="1" Fill="#474747" Canvas.Top="4" />
+            </Canvas>
+          </VisualBrush.Visual>
+        </VisualBrush>
+      </Setter>
+    </Style>
+
+    <Style Selector="^/template/ Button#PART_CloseButton">
+      <Setter Property="Margin" Value="2 0 0 0" />
+      <Setter Property="Padding" Value="3" />
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="Width" Value="18" />
+      <Setter Property="Height" Value="16" />
+    </Style>
+
+    <Style Selector="^/template/ Button#PART_PinButton">
+      <Setter Property="Margin" Value="2 0 0 0" />
+      <Setter Property="Padding" Value="3" />
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="Width" Value="18" />
+      <Setter Property="Height" Value="16" />
+    </Style>
+
+    <Style Selector="^/template/ Path#PART_ClosePath">
+      <Setter Property="Stretch" Value="UniformToFill" />
+      <Setter Property="Fill" Value="#474747" />
+      <Setter Property="Data"
+              Value="M1169 1024l879 -879l-145 -145l-879 879l-879 -879l-145 145l879 879l-879 879l145 145l879 -879l879 879l145 -145z" />
+    </Style>
+
+    <Style Selector="^/template/ Path#PART_PinPath">
+      <Setter Property="Stretch" Value="UniformToFill" />
+      <Setter Property="Fill" Value="#474747" />
+      <Setter Property="Data" Value="M2048 1229v-205h-2048v205h2048z" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolContentControl.axaml

@@ -0,0 +1,20 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <ToolContentControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ToolContentControl}" TargetType="ToolContentControl">
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible">
+          <ContentControl Content="{Binding}" 
+                          ContentTemplate="{Binding}" />
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolControl.axaml

@@ -0,0 +1,57 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <ToolControl Width="300" Height="400" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ToolControl}" TargetType="ToolControl">
+
+    <Setter Property="HeaderTemplate">
+      <DataTemplate DataType="core:IDockable">
+        <TextBlock Text="{Binding Title}" Padding="2" />
+      </DataTemplate>
+    </Setter>
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel x:Name="PART_DockPanel"
+                   DockProperties.IsDropArea="True"
+                   DockProperties.IsDockTarget="True"
+                   x:DataType="dmc:IToolDock"
+                   x:CompileBindings="True">
+          <ToolTabStrip x:Name="PART_TabStrip"
+                        ItemsSource="{Binding VisibleDockables}"
+                        SelectedItem="{Binding ActiveDockable, Mode=TwoWay}"
+                        DockPanel.Dock="Bottom"
+                        DockProperties.IsDropArea="True" />
+          <Border x:Name="PART_Border">
+            <DockableControl DataContext="{Binding ActiveDockable}"
+                             TrackingMode="Visible">
+              <ContentControl x:Name="PART_ContentPresenter"
+                              Content="{Binding}"
+                              HorizontalAlignment="Stretch"
+                              VerticalAlignment="Stretch" />
+            </DockableControl>
+          </Border>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^/template/ DockPanel#PART_DockPanel">
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="ZIndex" Value="1" />
+    </Style>
+
+    <Style Selector="^/template/ Border#PART_Border">
+      <Setter Property="ZIndex" Value="-1" />
+      <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+      <Setter Property="Margin" Value="0" />
+      <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+      <Setter Property="BorderThickness" Value="1 0 1 0" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolDockControl.axaml

@@ -0,0 +1,24 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <ToolDockControl Width="300" Height="300" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ToolDockControl}" TargetType="ToolDockControl">
+
+    <Setter Property="(ProportionalStackPanelSplitter.Proportion)" Value="{Binding Proportion}" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Visible" 
+                         ProportionalStackPanelSplitter.Proportion="{Binding Proportion}">
+          <ToolChromeControl IsActive="{Binding IsActive}"
+                             IsVisible="{Binding !!VisibleDockables.Count}">
+            <ToolControl />
+          </ToolChromeControl>
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolPinItemControl.axaml

@@ -0,0 +1,63 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <ToolPinItemControl Width="30" Height="400" />
+  </Design.PreviewWith>
+
+  <ContextMenu x:Key="ToolPinItemControlContextMenu" x:DataType="core:IDockable" x:CompileBindings="True">
+    <MenuItem Header="_Float"
+              Command="{Binding Owner.Factory.FloatDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanFloat}"/>
+    <MenuItem Header="_Show"
+              Command="{Binding Owner.Factory.PinDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanPin}"/>
+    <MenuItem Header="_Close"
+              Command="{Binding Owner.Factory.CloseDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+  </ContextMenu>
+
+  <ControlTheme x:Key="{x:Type ToolPinItemControl}" TargetType="ToolPinItemControl">
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockableControl TrackingMode="Pinned"
+                         x:DataType="core:IDockable"
+                         x:CompileBindings="True">
+          <LayoutTransformControl x:Name="PART_LayoutTransformControl">
+            <Button Background="Transparent"
+                    BorderBrush="Transparent"
+                    BorderThickness="0"
+                    CornerRadius="0"
+                    Command="{Binding Owner.Factory.PinDockable}"
+                    CommandParameter="{Binding}"
+                    IsVisible="{Binding CanPin}">
+              <TextBlock Text="{Binding Title}"
+                         VerticalAlignment="Center"
+                         HorizontalAlignment="Left"
+                         ContextMenu="{DynamicResource ToolPinItemControlContextMenu}">
+              </TextBlock>
+            </Button>
+          </LayoutTransformControl>
+        </DockableControl>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^[Orientation=Vertical]/template/ LayoutTransformControl#PART_LayoutTransformControl">
+      <Setter Property="LayoutTransform">
+        <RotateTransform Angle="270" />
+      </Setter>
+    </Style>
+
+    <Style Selector="^[Orientation=Horizontal]/template/ LayoutTransformControl#PART_LayoutTransformControl">
+      <Setter Property="LayoutTransform">
+        <RotateTransform Angle="0" />
+      </Setter>
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolPinnedControl.axaml

@@ -0,0 +1,34 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls"
+                    xmlns:core="using:Dock.Model.Core">
+  <Design.PreviewWith>
+    <ToolPinnedControl Width="30" Height="400" />
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ToolPinnedControl}" TargetType="ToolPinnedControl">
+
+    <Setter Property="Orientation" Value="Vertical" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ItemsControl ItemsSource="{TemplateBinding Items}"
+                      x:DataType="dmc:IRootDock"
+                      x:CompileBindings="True">
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <StackPanel Orientation="{Binding $parent[ToolPinnedControl].Orientation}"
+                          DockProperties.IsDropArea="True" />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+          <ItemsControl.DataTemplates>
+            <DataTemplate DataType="core:IDockable">
+              <ToolPinItemControl Orientation="{Binding $parent[ToolPinnedControl].Orientation}" />
+            </DataTemplate>
+          </ItemsControl.DataTemplates>
+        </ItemsControl>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolTabStrip.axaml

@@ -0,0 +1,55 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <ToolTabStrip>
+        <ToolTabStripItem>Item 1</ToolTabStripItem>
+        <ToolTabStripItem>Item 2</ToolTabStripItem>
+        <ToolTabStripItem IsEnabled="False">Disabled</ToolTabStripItem>
+      </ToolTabStrip>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="{x:Type ToolTabStrip}" TargetType="ToolTabStrip">
+
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="ClipToBounds" Value="False" />
+    <Setter Property="ZIndex" Value="1" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <Border Name="PART_Border"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}"
+                  Padding="{TemplateBinding Padding}"
+                  DockPanel.Dock="Left">
+            <ItemsPresenter Name="PART_ItemsPresenter"
+                            ItemsPanel="{TemplateBinding ItemsPanel}"/>
+          </Border>
+          <Border Name="PART_BorderFill" />
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <StackPanel Orientation="Horizontal" ClipToBounds="False" />
+      </ItemsPanelTemplate>
+    </Setter>
+
+    <Style Selector="^:singleitem">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+
+    <Style Selector="^/template/ Border#PART_BorderFill">
+      <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+      <Setter Property="BorderThickness" Value="0 1 0  0" />
+    </Style>
+
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolTabStripItem.axaml

@@ -0,0 +1,94 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dmc="using:Dock.Model.Controls"
+                    x:CompileBindings="True">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <ToolTabStripItem>Leaf</ToolTabStripItem>
+        <ToolTabStripItem IsSelected="True">Arch</ToolTabStripItem>
+        <ToolTabStripItem Background="Yellow">Background</ToolTabStripItem>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <x:Double x:Key="TabStripItemMinHeight">48</x:Double>
+  <x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
+
+  <ContextMenu x:Key="ToolTabStripItemContextMenu" x:DataType="dmc:IToolDock" x:CompileBindings="True">
+    <MenuItem Header="_Float"
+              Command="{Binding Owner.Factory.FloatDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanFloat}"/>
+    <MenuItem Header="_Hide"
+              Command="{Binding Owner.Factory.PinDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanPin}"/>
+    <MenuItem Header="_Close"
+              Command="{Binding Owner.Factory.CloseDockable}"
+              CommandParameter="{Binding}"
+              IsVisible="{Binding CanClose}"/>
+  </ContextMenu>
+  
+  <ControlTheme x:Key="{x:Type ToolTabStripItem}" TargetType="ToolTabStripItem">
+
+    <Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="MinHeight" Value="0" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Foreground" Value="{DynamicResource DockThemeForegroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+    <Setter Property="BorderThickness" Value="0 1 0 0" />
+    <Setter Property="Margin" Value="0" />
+    <Setter Property="Padding" Value="4 1 4 0" />
+
+    <Setter Property="Template">
+      <ControlTemplate>
+          <Border Background="{TemplateBinding Background}"
+                  TextElement.FontFamily="{TemplateBinding FontFamily}"
+                  TextElement.FontSize="{TemplateBinding FontSize}"
+                  TextElement.FontWeight="{TemplateBinding FontWeight}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  Padding="{TemplateBinding Padding}"
+                  ContextMenu="{DynamicResource ToolTabStripItemContextMenu}"
+                  x:DataType="dmc:IToolDock" x:CompileBindings="True">
+            <DockableControl TrackingMode="Tab">
+              <StackPanel x:Name="DragTool"
+                          Background="Transparent"
+                          Orientation="Horizontal"
+                          Spacing="2"
+                          DockProperties.IsDragArea="True"
+                          DockProperties.IsDropArea="True">
+                <Panel Margin="2">
+                  <ContentPresenter ContentTemplate="{Binding $parent[ToolControl].HeaderTemplate}"
+                                    Content="{Binding}" />
+                </Panel>
+              </StackPanel>
+            </DockableControl>
+          </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover">
+      <Setter Property="Background" Value="{DynamicResource DockApplicationAccentBrushMed}" />
+    </Style>
+
+    <Style Selector="^:selected">
+      <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource DockApplicationAccentBrushMed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+      <Setter Property="BorderThickness" Value="1 0 1 1" />
+      <Setter Property="Margin" Value="0 0 0 0" />
+      <Setter Property="Padding" Value="4 2 4 0" />
+    </Style>
+
+    <Style Selector="^:selected:pointerover">
+      <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
+    </Style> 
+    
+  </ControlTheme>
+
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Dock/PixiEditorDockTheme.axaml

@@ -0,0 +1,31 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ProportionalStackPanelSplitter.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DocumentTabStripItem.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DocumentTabStrip.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolTabStripItem.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolTabStrip.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DockTarget.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DocumentControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolChromeControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolPinItemControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolPinnedControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DockDockControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DocumentContentControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DocumentDockControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ProportionalDockControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/RootDockControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolContentControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/ToolDockControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/DockControl.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/HostWindowTitleBar.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Controls/HostWindow.axaml" />
+                <ResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Dock/Accents/Base.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+</Styles>

src/PixiEditor.UI.Common/PixiEditor.UI.Common.csproj

@@ -21,6 +21,7 @@
       <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
       <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
       <PackageReference Include="Avalonia.Xaml.Behaviors" Version="11.0.0-rc2.2" />
+      <PackageReference Include="Dock.Avalonia" Version="11.0.0" />
     </ItemGroup>
 
     <ItemGroup>

src/PixiEditor.UI.Common/Themes/PixiEditorTheme.axaml

@@ -11,4 +11,5 @@
 
     <StyleInclude Source="/Styles/PixiEditor.Controls.axaml"/>
     <StyleInclude Source="/Styles/PixiEditor.Styles.axaml"/>
+    <StyleInclude Source="/Controls/Dock/PixiEditorDockTheme.axaml"/>
 </Styles>