Added the rest of control templates

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

@@ -4,6 +4,7 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              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"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="PixiEditor.Avalonia.Views.MainView"
              x:DataType="vm:MainViewModel" Background="{DynamicResource ThemeBackgroundBrush}">
@@ -15,15 +16,17 @@
 
         <WrapPanel Orientation="Vertical" Margin="10" HorizontalAlignment="Left">
 
-        <TextBlock Text="Text"/>
-        <TextBlock Text="h1" Classes="h1"/>
-        <TextBlock Text="h2" Classes="h2"/>
-        <TextBlock Text="h3" Classes="h3"/>
-        <TextBlock Text="h4" Classes="h4"/>
+            <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/>
+            <Separator/>
 
-        <TextBlock ui:Translator.Key="LANGUAGE" ui:Translator.TooltipKey="LANGUAGE"/>
+            <TextBlock ui:Translator.Key="LANGUAGE" ui:Translator.TooltipKey="LANGUAGE"/>
+            <SelectableTextBlock Text="Selectable text block"/>
 
         <Separator/>
 
@@ -144,5 +147,99 @@
             <GridSplitter Grid.Column="1" Background="Black" ResizeDirection="Columns"/>
             <Rectangle Grid.Column="2" Fill="Red"/>
         </Grid>
-    </WrapPanel>
+
+            <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/MainView.axaml.cs

@@ -1,5 +1,8 @@
 using System.Collections.Generic;
 using Avalonia.Controls;
+using Avalonia.Dialogs;
+using Avalonia.Interactivity;
+using Avalonia.Platform.Storage;
 
 namespace PixiEditor.Avalonia.Views;
 
@@ -10,4 +13,5 @@ public partial class MainView : UserControl
         InitializeComponent();
         autoComplete.ItemsSource = new List<string> { "Wendy's", "Boob guy", "Patrick" };
     }
+
 }

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

@@ -52,19 +52,22 @@
             <system:Double x:Key="ControlCornerRadiusValue">5</system:Double>
             <Thickness x:Key="ThemeBorderThickness">1</Thickness>
             <Thickness x:Key="ScrollBarThickness">5</Thickness>
+
+            <FontFamily x:Key="ContentControlThemeFontFamily">fonts:Inter#Inter, $Default</FontFamily>
+            <system:Double x:Key="FontSizeSmall">10</system:Double>
+            <system:Double x:Key="FontSizeNormal">12</system:Double>
+            <system:Double x:Key="FontSizeLarge">16</system:Double>
+
+            <system:Double x:Key="Header0">40</system:Double>
+            <system:Double x:Key="Header1">32</system:Double>
+            <system:Double x:Key="Header2">26</system:Double>
+            <system:Double x:Key="Header3">22</system:Double>
+            <system:Double x:Key="Header4">20</system:Double>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
-    <system:Double x:Key="FontSizeSmall">10</system:Double>
-    <system:Double x:Key="FontSizeNormal">12</system:Double>
-    <system:Double x:Key="FontSizeLarge">16</system:Double>
-
-    <system:Double x:Key="Header0">40</system:Double>
-    <system:Double x:Key="Header1">32</system:Double>
-    <system:Double x:Key="Header2">26</system:Double>
-    <system:Double x:Key="Header3">22</system:Double>
-    <system:Double x:Key="Header4">20</system:Double>
 
-    <FontFamily x:Key="ContentControlThemeFontFamily">fonts:Inter#Inter, $Default</FontFamily>
+    <SolidColorBrush x:Key="RefreshVisualizerBackground">Pink</SolidColorBrush>
+    <SolidColorBrush x:Key="RefreshVisualizerForeground">White</SolidColorBrush>
 
 </ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ItemsControl.axaml

@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type ItemsControl}"
+                  TargetType="ItemsControl">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <ItemsPresenter Name="PART_ItemsPresenter"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Label.axaml

@@ -0,0 +1,23 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type Label}"
+                  TargetType="Label">
+        <Setter Property="Padding" Value="3" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter Name="PART_ContentPresenter"
+                                  Padding="{TemplateBinding Padding}"
+                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                  Content="{TemplateBinding Content}"
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  CornerRadius="{TemplateBinding CornerRadius}"
+                                  RecognizesAccessKey="True" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ManagedFileChooser.axaml

@@ -0,0 +1,235 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:dialogs="using:Avalonia.Dialogs"
+                    xmlns:internal="using:Avalonia.Dialogs.Internal">
+  <DrawingGroup x:Key="LevelUp">
+    <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
+    <GeometryDrawing Brush="#FFF6F6F6"
+                     Geometry="F1M14.5,0L6.39,0 5.39,2 2.504,2C1.677,2,1,2.673,1,3.5L1,10.582 1,10.586 1,15.414 3,13.414 3,16 7,16 7,13.414 9,15.414 9,13 14.5,13C15.327,13,16,12.327,16,11.5L16,1.5C16,0.673,15.327,0,14.5,0" />
+    <GeometryDrawing Brush="#FFDCB679"
+                     Geometry="F1M14,3L7.508,3 8.008,2 8.012,2 14,2z M14.5,1L7.008,1 6.008,3 2.504,3C2.227,3,2,3.224,2,3.5L2,9.582 4.998,6.586 9,10.586 9,12 14.5,12C14.775,12,15,11.776,15,11.5L15,1.5C15,1.224,14.775,1,14.5,1" />
+    <GeometryDrawing Brush="#FF00529C" Geometry="F1M8,11L5,8 2,11 2,13 4,11 4,15 6,15 6,11 8,13z" />
+    <GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M8.0001,1.9996L7.5001,3.0006 14.0001,3.0006 14.0001,1.9996z" />
+  </DrawingGroup>
+  <DrawingGroup x:Key="Refresh">
+    <GeometryDrawing Brush="#FFF6F6F6"
+                     Geometry="F1M13.5049,7.3896L13.2339,6.2646 9.9299,7.5886 10.0729,8.3896C10.0909,8.4906 10.1079,8.5926 10.1079,8.6976 10.1079,9.8596 9.1619,10.8046 7.9999,10.8046 6.8369,10.8046 5.8909,9.8596 5.8909,8.6976 5.8909,7.8966 6.3399,7.1996 6.9999,6.8426L6.9999,9.4986 12.6789,4.8156 8.0569,0.9996 6.9999,0.9996 6.9999,3.1266C4.3539,3.6006 2.3389,5.9176 2.3389,8.6976 2.3389,11.8186 4.8789,14.3586 7.9999,14.3586 11.1209,14.3586 13.6609,11.8186 13.6609,8.6976 13.6609,8.2626 13.6089,7.8226 13.5049,7.3896" />
+    <GeometryDrawing Brush="#FF414141"
+                     Geometry="F1M12.5322,7.623L11.0572,8.214C11.0862,8.372 11.1072,8.533 11.1072,8.697 11.1072,10.415 9.7172,11.805 8.0002,11.805 6.2852,11.805 4.8912,10.415 4.8912,8.697 4.8912,6.983 6.2852,5.59 8.0002,5.59L8.0002,7.378 11.1072,4.815 8.0002,2.25 8.0002,4.039C5.4262,4.039 3.3392,6.123 3.3392,8.697 3.3392,11.27 5.4262,13.358 8.0002,13.358 10.5762,13.358 12.6612,11.27 12.6612,8.697 12.6612,8.327 12.6152,7.969 12.5322,7.623" />
+  </DrawingGroup>
+  <internal:ResourceSelectorConverter x:Key="Icons">
+    <DrawingGroup x:Key="Icon_Folder">
+      <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M0,0L16,0 16,16 0,16z" />
+      <GeometryDrawing Brush="#FFF6F6F6"
+                       Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
+      <GeometryDrawing Brush="#FFDCB67A"
+                       Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
+      <GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M2,3L8.374,3 8.874,4 2,4z" />
+    </DrawingGroup>
+    <DrawingGroup x:Key="Icon_File">
+      <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
+      <GeometryDrawing Brush="#FFF6F6F6"
+                       Geometry="F1M4,15C3.03,15,2,14.299,2,13L2,3C2,1.701,3.03,1,4,1L10.061,1 14,4.556 14,13C14,13.97,13.299,15,12,15z" />
+      <GeometryDrawing Brush="#FF9B4E96"
+                       Geometry="F1M12,13L4,13 4,3 9,3 9,6 12,6z M9.641,2L3.964,2C3.964,2,3,2,3,3L3,13C3,14,3.964,14,3.964,14L11.965,14C12.965,14,13,13,13,13L13,5z" />
+      <GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M4,3L9,3 9,6 12,6 12,13 4,13z" />
+    </DrawingGroup>
+    <DrawingGroup x:Key="Icon_Volume">
+      <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
+      <GeometryDrawing Brush="#FFF6F6F6"
+                       Geometry="F1M0,12L0,6.5C0,5.122,1.122,4,2.5,4L13.5,4C14.879,4,16,5.122,16,6.5L16,12z" />
+      <GeometryDrawing Brush="#FFEFEFF0"
+                       Geometry="F1M13,8L12,8 12,7 13,7z M11,8L10,8 10,7 11,7z M13.5,6L2.5,6C2.224,6,2,6.224,2,6.5L2,10 14,10 14,6.5C14,6.224,13.775,6,13.5,6" />
+      <GeometryDrawing Brush="#FF424242"
+                       Geometry="F1M13,7L12,7 12,8 13,8z M11,7L10,7 10,8 11,8z M2,10L14,10 14,6.5C14,6.224,13.775,6,13.5,6L2.5,6C2.224,6,2,6.224,2,6.5z M15,11L1,11 1,6.5C1,5.673,1.673,5,2.5,5L13.5,5C14.327,5,15,5.673,15,6.5z" />
+    </DrawingGroup>
+  </internal:ResourceSelectorConverter>
+
+  <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}"
+                TargetType="dialogs:ManagedFileChooser">
+    <Setter Property="Template">
+      <ControlTemplate x:DataType="internal:ManagedFileChooserViewModel">
+        <DockPanel Margin="5">
+          <DockPanel Margin="0,0,0,5"
+                     DockPanel.Dock="Top">
+            <internal:ChildFitter Width="{Binding ElementName=Location, Path=Bounds.Height}"
+                                 DockPanel.Dock="Right">
+              <Button Command="{Binding GoUp}">
+                <Image Stretch="Fill">
+                  <DrawingImage Drawing="{StaticResource LevelUp}" />
+                </Image>
+              </Button>
+            </internal:ChildFitter>
+            <internal:ChildFitter Width="{Binding ElementName=Location, Path=Bounds.Height}"
+                                 DockPanel.Dock="Right">
+              <Button Command="{Binding Refresh}">
+                <Image Stretch="Fill">
+                  <DrawingImage Drawing="{StaticResource Refresh}" />
+                </Image>
+              </Button>
+            </internal:ChildFitter>
+            <TextBox x:Name="Location"
+                     Margin="0,0,5,0"
+                     Text="{Binding Location}">
+              <TextBox.KeyBindings>
+                <KeyBinding Command="{Binding EnterPressed}"
+                            Gesture="Enter" />
+              </TextBox.KeyBindings>
+            </TextBox>
+          </DockPanel>
+          <DockPanel Margin="0,5,0,0"
+                     DockPanel.Dock="Bottom">
+            <StackPanel DockPanel.Dock="Left"
+                        Orientation="Horizontal">
+              <CheckBox IsChecked="{Binding ShowHiddenFiles}">
+                <TextBlock>Show hidden files</TextBlock>
+              </CheckBox>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Right"
+                        Orientation="Horizontal"
+                        Spacing="10">
+              <StackPanel.Styles>
+                <Style Selector="Button">
+                  <Setter Property="Margin" Value="4" />
+                </Style>
+              </StackPanel.Styles>
+              <Button Command="{Binding Ok}" MinWidth="60">OK</Button>
+              <Button Command="{Binding Cancel}" MinWidth="60">Cancel</Button>
+            </StackPanel>
+          </DockPanel>
+
+          <ComboBox Margin="0,5,0,0"
+                    DockPanel.Dock="Bottom"
+                    IsVisible="{Binding ShowFilters}"
+                    ItemsSource="{Binding Filters}"
+                    SelectedItem="{Binding SelectedFilter}" />
+
+          <TextBox DockPanel.Dock="Bottom"
+                   IsVisible="{Binding !SelectingFolder}"
+                   Text="{Binding FileName}"
+                   Watermark="File name" />
+
+          <ListBox x:Name="PART_QuickLinks"
+                   Margin="0,0,5,5"
+                   BorderBrush="Transparent"
+                   DockPanel.Dock="Left"
+                   Focusable="False"
+                   ItemsSource="{Binding QuickLinks}"
+                   SelectedIndex="{Binding QuickLinksSelectedIndex}">
+            <ListBox.ItemTemplate>
+              <DataTemplate>
+                <StackPanel Background="Transparent"
+                            Orientation="Horizontal"
+                            Spacing="4">
+                  <Image Width="16"
+                         Height="16">
+                    <DrawingImage Drawing="{Binding IconKey, Converter={StaticResource Icons}}" />
+                  </Image>
+                  <TextBlock Text="{Binding DisplayName}" />
+                </StackPanel>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+          <DockPanel Grid.IsSharedSizeScope="True">
+            <Grid Margin="15,5,0,0"
+                  HorizontalAlignment="Stretch"
+                  DockPanel.Dock="Top">
+              <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="20" SharedSizeGroup="Icon" />
+                <ColumnDefinition Width="400" SharedSizeGroup="Name" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+                <ColumnDefinition Width="200" SharedSizeGroup="Modified" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+                <ColumnDefinition Width="150" SharedSizeGroup="Type" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+                <ColumnDefinition Width="200" SharedSizeGroup="Size" />
+                <ColumnDefinition Width="16" SharedSizeGroup="Splitter" />
+              </Grid.ColumnDefinitions>
+              <TextBlock Grid.Column="1"
+                         Text="Name" />
+              <GridSplitter Grid.Column="2"
+                            ResizeDirection="Columns"
+                            Background="Transparent" />
+              <Rectangle HorizontalAlignment="Left" Grid.Column="2" VerticalAlignment="Stretch" Width="1" Fill="{DynamicResource ThemeControlMidBrush}"/>
+              <TextBlock Grid.Column="3"
+                         Text="Date Modified" />
+              <GridSplitter Grid.Column="4"
+                            ResizeDirection="Columns"
+                            Background="Transparent" />
+              <Rectangle HorizontalAlignment="Left"
+                         Grid.Column="4"
+                         VerticalAlignment="Stretch"
+                         Width="1"
+                         Fill="{DynamicResource ThemeControlMidBrush}"/>
+
+              <TextBlock Grid.Column="5"
+                         Text="Type" />
+              <GridSplitter Grid.Column="6" ResizeDirection="Columns"
+                            Background="Transparent" />
+              <Rectangle HorizontalAlignment="Left"
+                         Grid.Column="6"
+                         VerticalAlignment="Stretch"
+                         Width="1"
+                         Fill="{DynamicResource ThemeControlMidBrush}"/>
+
+              <TextBlock Grid.Column="7"
+                         Text="Size" />
+              <GridSplitter Grid.Column="8"
+                            ResizeDirection="Columns"
+                            Background="Transparent" />
+              <Rectangle HorizontalAlignment="Left"
+                         Grid.Column="8"
+                         VerticalAlignment="Stretch"
+                         Width="1"
+                         Fill="{DynamicResource ThemeControlMidBrush}"/>
+            </Grid>
+            <ListBox x:Name="PART_Files"
+                     Margin="0,5"
+                     ItemsSource="{Binding Items}"
+                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                     SelectedItems="{Binding SelectedItems}"
+                     SelectionMode="{Binding SelectionMode}">
+              <ListBox.ItemTemplate>
+                <DataTemplate>
+                  <Grid Background="Transparent">
+                    <Grid.ColumnDefinitions>
+                      <ColumnDefinition SharedSizeGroup="Icon" />
+                      <ColumnDefinition SharedSizeGroup="Name" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                      <ColumnDefinition SharedSizeGroup="Modified" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                      <ColumnDefinition SharedSizeGroup="Type" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                      <ColumnDefinition SharedSizeGroup="Size" />
+                      <ColumnDefinition SharedSizeGroup="Splitter" />
+                    </Grid.ColumnDefinitions>
+                    <Image Grid.Column="0"
+                           Width="16"
+                           Height="16">
+                      <DrawingImage Drawing="{Binding IconKey, Converter={StaticResource Icons}}" />
+                    </Image>
+                    <TextBlock Grid.Column="1"
+                               Text="{Binding DisplayName}" />
+                    <TextBlock Grid.Column="3"
+                               Text="{Binding Modified}" />
+                    <TextBlock Grid.Column="5"
+                               Text="{Binding Type}" />
+                    <TextBlock Grid.Column="7" HorizontalAlignment="Right">
+                      <TextBlock.Text>
+                        <Binding Path="Size">
+                          <Binding.Converter>
+                            <internal:FileSizeStringConverter />
+                          </Binding.Converter>
+                        </Binding>
+                      </TextBlock.Text>
+                    </TextBlock>
+                  </Grid>
+                </DataTemplate>
+              </ListBox.ItemTemplate>
+            </ListBox>
+          </DockPanel>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/MenuFlyoutPresenter.axaml

@@ -0,0 +1,30 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}"
+                  TargetType="MenuFlyoutPresenter">
+        <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Name="LayoutRoot"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                  Theme="{StaticResource SimpleMenuScrollViewer}"
+                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <ItemsPresenter Name="PART_ItemsPresenter"
+                                        Margin="{TemplateBinding Padding}"
+                                        Grid.IsSharedSizeScope="True"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}"
+                                        KeyboardNavigation.TabNavigation="Continue" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/NativeMenuBar.axaml

@@ -0,0 +1,28 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="clr-namespace:PixiEditor.UI.Common.Converters">
+    <converters:IBitmapToImageConverter x:Key="NativeMenuBarIBitmapToImageConverter" />
+    <ControlTheme x:Key="{x:Type NativeMenuBar}"
+                  TargetType="NativeMenuBar">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Menu IsVisible="{Binding !$parent[TopLevel].(NativeMenu.IsNativeMenuExported)}"
+                      ItemsSource="{Binding $parent[TopLevel].(NativeMenu.Menu).Items}">
+                    <Menu.Styles>
+                        <Style Selector="MenuItem" x:DataType="NativeMenuItem">
+                            <Setter Property="Header" Value="{Binding Header}"/>
+                            <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
+                            <Setter Property="InputGesture" Value="{Binding Gesture}"/>
+                            <Setter Property="ItemsSource" Value="{Binding Menu.Items}"/>
+                            <Setter Property="Command" Value="{Binding Command}"/>
+                            <Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
+                            <Setter Property="(NativeMenuBar.EnableMenuItemClickForwarding)" Value="True"/>
+                            <!--NativeMenuItem is IBitmap and MenuItem is Image-->
+                            <Setter Property="Icon" Value="{Binding Icon , Converter={StaticResource NativeMenuBarIBitmapToImageConverter}}"/>
+                        </Style>
+                    </Menu.Styles>
+                </Menu>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/NumericUpDown.axaml

@@ -0,0 +1,39 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type NumericUpDown}"
+                TargetType="NumericUpDown">
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="Padding" Value="4" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ButtonSpinner Name="PART_Spinner"
+                       HorizontalContentAlignment="Stretch"
+                       VerticalContentAlignment="Stretch"
+                       AllowSpin="{TemplateBinding AllowSpin}"
+                       Background="{TemplateBinding Background}"
+                       BorderBrush="{TemplateBinding BorderBrush}"
+                       BorderThickness="{TemplateBinding BorderThickness}"
+                       ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
+                       CornerRadius="{TemplateBinding CornerRadius}"
+                       ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
+          <TextBox Name="PART_TextBox"
+                   MinWidth="20"
+                   Margin="4"
+                   Padding="{TemplateBinding Padding}"
+                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                   AcceptsReturn="False"
+                   Background="{TemplateBinding Background}"
+                   BorderThickness="0"
+                   DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                   IsReadOnly="{TemplateBinding IsReadOnly}"
+                   Text="{TemplateBinding Text}"
+                   TextWrapping="NoWrap"
+                   Watermark="{TemplateBinding Watermark}" />
+        </ButtonSpinner>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/OverlayPopupHost.axaml

@@ -0,0 +1,24 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type OverlayPopupHost}"
+                  TargetType="OverlayPopupHost">
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+        <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <!--  Do not forget to update Templated_Control_With_Popup_In_Template_Should_Set_TemplatedParent test  -->
+                <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
+                    <VisualLayerManager IsPopup="True">
+                        <ContentPresenter Name="PART_ContentPresenter"
+                                          Padding="{TemplateBinding Padding}"
+                                          Background="{TemplateBinding Background}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </VisualLayerManager>
+                </LayoutTransformControl>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/PathIcon.axaml

@@ -0,0 +1,23 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type PathIcon}"
+                  TargetType="PathIcon">
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Height" Value="{DynamicResource IconElementThemeHeight}" />
+        <Setter Property="Width" Value="{DynamicResource IconElementThemeWidth}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Background="{TemplateBinding Background}">
+                    <Viewbox Width="{TemplateBinding Width}"
+                             Height="{TemplateBinding Height}">
+                        <Path Data="{TemplateBinding Data}"
+                              Fill="{TemplateBinding Foreground}"
+                              Stretch="Uniform" />
+                    </Viewbox>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/RefreshContainer.axaml

@@ -0,0 +1,25 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type RefreshContainer}"
+                  TargetType="RefreshContainer">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid>
+                    <ContentPresenter Name="PART_ContentPresenter"
+                                      Background="{TemplateBinding Background}"
+                                      BorderBrush="{TemplateBinding BorderBrush}"
+                                      BorderThickness="{TemplateBinding BorderThickness}"
+                                      CornerRadius="{TemplateBinding CornerRadius}"
+                                      ContentTemplate="{TemplateBinding ContentTemplate}"
+                                      Content="{TemplateBinding Content}"
+                                      Padding="{TemplateBinding Padding}"
+                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}">
+                    </ContentPresenter>
+                    <Grid Name="PART_RefreshVisualizerPresenter"/>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/RefreshVisualizer.axaml

@@ -0,0 +1,31 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type RefreshVisualizer}"
+                TargetType="RefreshVisualizer">
+    <Setter Property="IsTabStop"
+            Value="False"/>
+    <Setter Property="IsHitTestVisible"
+            Value="False"/>
+    <Setter Property="Height"
+            Value="100"/>
+    <Setter Property="Background"
+            Value="{DynamicResource RefreshVisualizerBackground}"/>
+    <Setter Property="Foreground"
+            Value="{DynamicResource RefreshVisualizerForeground}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Name="PART_Root"
+              MinHeight="80"
+              Background="{TemplateBinding Background}">
+          <Grid.Styles>
+            <Style Selector="PathIcon#PART_Icon">
+              <Setter Property="Data"
+                      Value="M18.6195264,3.31842271 C19.0080059,3.31842271 19.3290603,3.60710385 19.3798716,3.9816481 L19.3868766,4.08577298 L19.3868766,6.97963208 C19.3868766,7.36811161 19.0981955,7.68916605 18.7236513,7.73997735 L18.6195264,7.74698235 L15.7256673,7.74698235 C15.3018714,7.74698235 14.958317,7.40342793 14.958317,6.97963208 C14.958317,6.59115255 15.2469981,6.27009811 15.6215424,6.21928681 L15.7256673,6.21228181 L16.7044011,6.21182461 C13.7917384,3.87107476 9.52212532,4.05209336 6.81933829,6.75488039 C3.92253872,9.65167996 3.92253872,14.34832 6.81933829,17.2451196 C9.71613786,20.1419192 14.4127779,20.1419192 17.3095775,17.2451196 C19.0725398,15.4821573 19.8106555,12.9925923 19.3476248,10.58925 C19.2674502,10.173107 19.5398064,9.77076216 19.9559494,9.69058758 C20.3720923,9.610413 20.7744372,9.88276918 20.8546118,10.2989121 C21.4129973,13.1971899 20.5217103,16.2033812 18.3947747,18.3303168 C14.8986373,21.8264542 9.23027854,21.8264542 5.73414113,18.3303168 C2.23800371,14.8341794 2.23800371,9.16582064 5.73414113,5.66968323 C9.05475132,2.34907304 14.3349409,2.18235834 17.8523166,5.16953912 L17.8521761,4.08577298 C17.8521761,3.66197713 18.1957305,3.31842271 18.6195264,3.31842271 Z">
+              </Setter>
+            </Style>
+          </Grid.Styles>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/SelectableTextBlock.axaml

@@ -0,0 +1,20 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <SelectableTextBlock Text="Preview" />
+    </Design.PreviewWith>
+
+    <MenuFlyout x:Key="SelectableTextBlockContextFlyout" Placement="Bottom">
+        <MenuItem x:Name="SelectableTextBlockContextFlyoutCopyItem" Header="Copy" Command="{Binding $parent[SelectableTextBlock].Copy}"
+                  IsEnabled="{Binding $parent[SelectableTextBlock].CanCopy}" InputGesture="{x:Static TextBox.CopyGesture}" />
+    </MenuFlyout>
+
+    <ControlTheme x:Key="{x:Type SelectableTextBlock}" TargetType="SelectableTextBlock">
+        <Setter Property="SelectionBrush" Value="{DynamicResource ThemeControlHighlightBrush}" />
+
+        <Style Selector="^[IsEnabled=True]">
+            <Setter Property="Cursor" Value="IBeam" />
+            <Setter Property="ContextFlyout" Value="{StaticResource SelectableTextBlockContextFlyout}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/SplitButton.axaml

@@ -0,0 +1,200 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Avalonia.Controls.Converters">
+
+  <!-- This style is based on the Fluent v1 style. -->
+
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <SplitButton />
+    </Border>
+  </Design.PreviewWith>
+
+  <x:Double x:Key="SplitButtonPrimaryButtonSize">24</x:Double>
+  <x:Double x:Key="SplitButtonSecondaryButtonSize">24</x:Double>
+  <x:Double x:Key="SplitButtonSeparatorWidth">1</x:Double>
+  <x:Double x:Key="SplitButtonMinHeight">24</x:Double>
+  <Thickness x:Key="SplitButtonBorderThemeThickness">1</Thickness>
+
+  <converters:MarginMultiplierConverter x:Key="PrimaryButtonBorderMultiplier" Left="True" Top="True" Bottom="True"
+                                        Indent="1" />
+  <converters:MarginMultiplierConverter x:Key="SecondaryButtonBorderMultiplier" Right="True" Top="True" Bottom="True"
+                                        Indent="1" />
+  <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Bottom="True" Indent="1" />
+  <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight" />
+  <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
+  <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight" />
+  <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
+
+  <ControlTheme x:Key="SimpleSplitButtonComponent" TargetType="Button">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter x:Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Padding="{TemplateBinding Padding}"
+                          RecognizesAccessKey="True"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlMidColor}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidColor}" />
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeBorderHighColor}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowColor}" />
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ ContentPresenter">
+      <Setter Property="Background">
+        <SolidColorBrush Color="{DynamicResource ThemeControlMidColor}"
+                         Opacity="{DynamicResource ThemeDisabledOpacity}" />
+      </Setter>
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowColor}" />
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    </Style>
+
+    <Style Selector="^[Tag=flyout-open] /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeBorderHighColor}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowColor}" />
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    </Style>
+
+    <Style Selector="^[Tag=checked]">
+      <Style Selector="^ /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ThemeBorderHighColor}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidColor}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+      </Style>
+
+      <Style Selector="^:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ThemeBorderHighColor}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidColor}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+      </Style>
+
+      <Style Selector="^:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ThemeBorderHighColor}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighColor}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+      </Style>
+
+      <Style Selector="^:disabled /template/ ContentPresenter">
+        <Setter Property="Background">
+          <SolidColorBrush Color="{DynamicResource ThemeControlHighColor}"
+                           Opacity="{DynamicResource ThemeDisabledOpacity}" />
+        </Setter>
+        <Setter Property="BorderBrush">
+          <SolidColorBrush Color="{DynamicResource ThemeControlMidColor}"
+                           Opacity="{DynamicResource ThemeDisabledOpacity}" />
+        </Setter>
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^[Tag=checked-flyout-open] /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeBorderHighColor}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighColor}" />
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type SplitButton}" TargetType="SplitButton">
+    <Setter Property="Background" Value="{DynamicResource ThemeControlMidColor}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowColor}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource SplitButtonBorderThemeThickness}" />
+    <Setter Property="MinHeight" Value="{DynamicResource SplitButtonMinHeight}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="KeyboardNavigation.IsTabStop" Value="True" />
+    <Setter Property="Focusable" Value="True" />
+    <Setter Property="Padding" Value="4" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid>
+          <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="Auto" />
+          </Grid.ColumnDefinitions>
+
+          <Button x:Name="PART_PrimaryButton"
+                  Grid.Column="0"
+                  Theme="{StaticResource SimpleSplitButtonComponent}"
+                  MinWidth="{DynamicResource SplitButtonPrimaryButtonSize}"
+                  Foreground="{TemplateBinding Foreground}"
+                  Background="{TemplateBinding Background}"
+                  BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource PrimaryButtonBorderMultiplier}}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  Content="{TemplateBinding Content}"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                  Command="{TemplateBinding Command}"
+                  CommandParameter="{TemplateBinding CommandParameter}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                  FontFamily="{TemplateBinding FontFamily}"
+                  FontSize="{TemplateBinding FontSize}"
+                  FontWeight="{TemplateBinding FontWeight}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                  Padding="{TemplateBinding Padding}"
+                  Focusable="False"
+                  KeyboardNavigation.IsTabStop="False" />
+
+          <Border x:Name="SeparatorBorder"
+                  Grid.Column="1"
+                  Background="Transparent"
+                  Width="{DynamicResource SplitButtonSeparatorWidth}"
+                  BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}"
+                  BorderBrush="{TemplateBinding BorderBrush}" />
+
+          <Button x:Name="PART_SecondaryButton"
+                  Grid.Column="2"
+                  Theme="{StaticResource SimpleSplitButtonComponent}"
+                  MinWidth="{DynamicResource SplitButtonSecondaryButtonSize}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  Foreground="{TemplateBinding Foreground}"
+                  Background="{TemplateBinding Background}"
+                  BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SecondaryButtonBorderMultiplier}}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                  Padding="0"
+                  HorizontalContentAlignment="Center"
+                  VerticalContentAlignment="Center"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Focusable="False"
+                  KeyboardNavigation.IsTabStop="False">
+            <PathIcon Height="12" Width="12"
+                      Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z" />
+          </Button>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:flyout-open /template/ Button">
+      <Setter Property="Tag" Value="flyout-open" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Button">
+      <Setter Property="Tag" Value="checked" />
+    </Style>
+
+    <Style Selector="^:checked:flyout-open /template/ Button">
+      <Setter Property="Tag" Value="checked-flyout-open" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/SplitView.axaml

@@ -0,0 +1,253 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="using:System">
+  <Design.PreviewWith>
+    <Border Width="400" Height="400">
+      <SplitView DisplayMode="Inline"
+                 IsPaneOpen="True">
+        <SplitView.Pane>
+          <Border Background="Green" />
+        </SplitView.Pane>
+        <SplitView.Content>
+          <Border Background="Blue" />
+        </SplitView.Content>
+      </SplitView>
+    </Border>
+  </Design.PreviewWith>
+
+  <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
+  <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
+  <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
+  <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
+  <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
+  <!-- Not used here (directly), but preserving for reference
+        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>-->
+
+  <ControlTheme x:Key="{x:Type SplitView}"
+                TargetType="SplitView">
+    <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
+    <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
+    <Setter Property="PaneBackground" Value="{DynamicResource ThemeControlHighlightLowBrush}" />
+
+    <!-- Left -->
+    <Style Selector="^:left">
+      <Setter Property="Template">
+        <ControlTemplate TargetType="SplitView">
+          <Grid Name="Container"
+                Background="{TemplateBinding Background}">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition
+                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+              <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+
+            <Panel Name="PART_PaneRoot" Background="{TemplateBinding PaneBackground}"
+                   ClipToBounds="True"
+                   HorizontalAlignment="Left"
+                   ZIndex="100">
+              <ContentPresenter x:Name="PART_PanePresenter" Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+              <Rectangle Name="HCPaneBorder" Fill="Transparent" Width="1"
+                         HorizontalAlignment="Right" />
+            </Panel>
+
+            <Panel Name="ContentRoot">
+              <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+              <Rectangle Name="LightDismissLayer" />
+            </Panel>
+
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <!-- Overlay -->
+    <Style Selector="^:overlay:left /template/ Panel#PART_PaneRoot">
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+      <!-- ColumnSpan should be 2 -->
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+      <Setter Property="Grid.Column" Value="0" />
+    </Style>
+    <Style Selector="^:overlay:left /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Grid.ColumnSpan" Value="2" />
+    </Style>
+
+    <!-- CompactInline -->
+    <Style Selector="^:compactinline:left /template/ Panel#PART_PaneRoot">
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:compactinline:left /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+    </Style>
+
+    <!-- CompactOverlay -->
+    <Style Selector="^:compactoverlay:left /template/ Panel#PART_PaneRoot">
+      <!-- ColumnSpan should be 2 -->
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:compactoverlay:left /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+    </Style>
+
+    <!-- Inline -->
+    <Style Selector="^:inline:left /template/ Panel#PART_PaneRoot">
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:inline:left /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+    </Style>
+
+    <!-- Right -->
+    <Style Selector="^:right">
+      <Setter Property="Template">
+        <ControlTemplate TargetType="SplitView">
+          <Grid Name="Container" Background="{TemplateBinding Background}">
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*" />
+              <ColumnDefinition
+                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
+            </Grid.ColumnDefinitions>
+
+            <Panel Name="PART_PaneRoot" Background="{TemplateBinding PaneBackground}"
+                   ClipToBounds="True"
+                   HorizontalAlignment="Right"
+                   ZIndex="100">
+              <ContentPresenter x:Name="PART_PanePresenter" Content="{TemplateBinding Pane}"
+                                ContentTemplate="{TemplateBinding PaneTemplate}" />
+              <Rectangle Name="HCPaneBorder"
+                         Fill="Transparent"
+                         Width="1" HorizontalAlignment="Left" />
+            </Panel>
+
+            <Panel Name="ContentRoot">
+              <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+              <Rectangle Name="LightDismissLayer" />
+            </Panel>
+
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <!-- Overlay -->
+    <Style Selector="^:overlay:right /template/ Panel#PART_PaneRoot">
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+      <Setter Property="Grid.ColumnSpan" Value="2" />
+      <Setter Property="Grid.Column" Value="1" />
+    </Style>
+    <Style Selector="^:overlay:right /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Grid.ColumnSpan" Value="2" />
+    </Style>
+
+    <!-- CompactInline -->
+    <Style Selector="^:compactinline:right /template/ Panel#PART_PaneRoot">
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:compactinline:right /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+    </Style>
+
+    <!-- CompactOverlay -->
+    <Style Selector="^:compactoverlay:right /template/ Panel#PART_PaneRoot">
+      <Setter Property="Grid.ColumnSpan" Value="2" />
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:compactoverlay:right /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+    </Style>
+
+    <!-- Inline -->
+    <Style Selector="^:inline:right /template/ Panel#PART_PaneRoot">
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:inline:right /template/ Panel#ContentRoot">
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="Grid.ColumnSpan" Value="1" />
+    </Style>
+
+    <!-- Open/Close Pane animation  -->
+    <Style Selector="^:open /template/ Panel#PART_PaneRoot">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+        </Transitions>
+      </Setter>
+      <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
+    </Style>
+    <Style Selector="^:open /template/ Rectangle#LightDismissLayer">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}"
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+        </Transitions>
+      </Setter>
+      <Setter Property="Opacity" Value="1.0" />
+    </Style>
+
+    <Style Selector="^:closed /template/ Panel#PART_PaneRoot">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}"
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+        </Transitions>
+      </Setter>
+      <Setter Property="Width"
+              Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
+    </Style>
+    <Style Selector="^:closed /template/ Rectangle#LightDismissLayer">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}"
+                            Easing="{StaticResource SplitViewPaneAnimationEasing}" />
+        </Transitions>
+      </Setter>
+      <Setter Property="Opacity" Value="0.0" />
+    </Style>
+
+    <Style Selector="^ /template/ Rectangle#LightDismissLayer">
+      <Setter Property="IsVisible" Value="False" />
+      <Setter Property="Fill" Value="Transparent" />
+    </Style>
+    <Style Selector="^:lightdismiss /template/ Rectangle#LightDismissLayer">
+      <Setter Property="Fill">
+        <SolidColorBrush Color="{DynamicResource ThemeControlLowColor}" Opacity="0.6" />
+      </Setter>
+    </Style>
+
+    <Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TabControl.axaml

@@ -0,0 +1,59 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type TabControl}"
+                TargetType="TabControl">
+    <Setter Property="Padding" Value="8" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Padding="{TemplateBinding Padding}"
+                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <DockPanel>
+            <ItemsPresenter Name="PART_ItemsPresenter"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+            <ContentPresenter Name="PART_SelectedContentHost"
+                              Margin="{TemplateBinding Padding}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Content="{TemplateBinding SelectedContent}"
+                              ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+          </DockPanel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^[TabStripPlacement=Top]">
+      <Setter Property="Padding" Value="0 4 0 0" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
+      <Setter Property="DockPanel.Dock" Value="Top" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Bottom] /template/ ItemsPresenter#PART_ItemsPresenter">
+      <Setter Property="DockPanel.Dock" Value="Bottom" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Bottom]">
+      <Setter Property="Padding" Value="0 0 0 4" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter">
+      <Setter Property="DockPanel.Dock" Value="Left" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
+      <Setter Property="Orientation" Value="Vertical" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Left]">
+      <Setter Property="Padding" Value="4 0 0 0" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter">
+      <Setter Property="DockPanel.Dock" Value="Right" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
+      <Setter Property="Orientation" Value="Vertical" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right]">
+      <Setter Property="Padding" Value="0 0 4 0" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TabItem.axaml

@@ -0,0 +1,46 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type TabItem}"
+                TargetType="TabItem">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="Padding" Value="8" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Header}"
+                          ContentTemplate="{TemplateBinding HeaderTemplate}"
+                          CornerRadius="{TemplateBinding CornerRadius}" />
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}" />
+    </Style>
+    <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}" />
+    </Style>
+    <Style Selector="^:selected:focus /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+    </Style>
+    <Style Selector="^:selected:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+    </Style>
+    <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
+    </Style>
+    <Style Selector="^[TabStripPlacement=Right]">
+      <Setter Property="HorizontalContentAlignment" Value="Right" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TabStrip.axaml

@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type TabStrip}"
+                  TargetType="TabStrip">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ItemsPresenter Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <WrapPanel />
+            </ItemsPanelTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TabStripItem.axaml

@@ -0,0 +1,27 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type TabStripItem}"
+                  TargetType="TabStripItem">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Margin" Value="16" />
+        <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter Name="PART_ContentPresenter"
+                                  Padding="{TemplateBinding Padding}"
+                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                  Content="{TemplateBinding Content}"
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ThemeVariantScope.axaml

@@ -0,0 +1,8 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type ThemeVariantScope}"
+                  TargetType="ThemeVariantScope">
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        <Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeNormal}" />
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TimePicker.axaml

@@ -0,0 +1,311 @@
+<!--
+  // (c) Copyright Microsoft Corporation.
+  // This source is subject to the Microsoft Public License (Ms-PL).
+  // Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
+  // All other rights reserved.
+-->
+
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="using:System">
+  <Design.PreviewWith>
+    <Border Height="500"
+            Padding="20">
+      <StackPanel VerticalAlignment="Center"
+                  Spacing="20">
+        <TimePicker />
+        <TimePicker CornerRadius="10" />
+        <TimePicker IsEnabled="False" />
+        <TimePicker>
+          <DataValidationErrors.Error>
+            <sys:Exception>
+              <x:Arguments>
+                <x:String>Error</x:String>
+              </x:Arguments>
+            </sys:Exception>
+          </DataValidationErrors.Error>
+        </TimePicker>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <x:Double x:Key="TimePickerFlyoutPresenterItemHeight">40</x:Double>
+  <x:Double x:Key="TimePickerSpacerThemeWidth">1</x:Double>
+  <Thickness x:Key="TimePickerBorderThemeThickness">1</Thickness>
+  <x:Double x:Key="TimePickerFlyoutPresenterHighlightHeight">40</x:Double>
+  <x:Double x:Key="TimePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
+  <x:Double x:Key="TimePickerThemeMinWidth">242</x:Double>
+  <x:Double x:Key="TimePickerThemeMaxWidth">456</x:Double>
+  <Thickness x:Key="TimePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
+  <Thickness x:Key="TimePickerHostPadding">0,3,0,6</Thickness>
+
+  <ControlTheme x:Key="SimpleTimePickerFlyoutButton"
+                TargetType="Button">
+    <Setter Property="RenderTransform" Value="none" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          HorizontalContentAlignment="Stretch"
+                          VerticalContentAlignment="Stretch"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          Foreground="{TemplateBinding Foreground}" />
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background">
+        <SolidColorBrush Opacity="0.6"
+                         Color="{DynamicResource ThemeControlMidHighColor}" />
+      </Setter>
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlLowBrush}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TimePicker}"
+                TargetType="TimePicker">
+    <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighlightMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource TimePickerBorderThemeThickness}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DataValidationErrors>
+          <Grid Name="LayoutRoot"
+                Margin="{TemplateBinding Padding}">
+            <Button x:Name="PART_FlyoutButton"
+                    MinWidth="{DynamicResource TimePickerThemeMinWidth}"
+                    MaxWidth="{DynamicResource TimePickerThemeMaxWidth}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Foreground="{TemplateBinding Foreground}"
+                    IsEnabled="{TemplateBinding IsEnabled}"
+                    Theme="{StaticResource SimpleTimePickerFlyoutButton}">
+
+              <Grid Name="PART_FlyoutButtonContentGrid">
+                <!--  Ignore col defs here, set in code  -->
+                <Border x:Name="PART_FirstPickerHost"
+                        Grid.Column="0"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                  <TextBlock x:Name="PART_HourTextBlock"
+                             Padding="{DynamicResource TimePickerHostPadding}"
+                             HorizontalAlignment="Center"
+                             FontFamily="{TemplateBinding FontFamily}"
+                             FontSize="{TemplateBinding FontSize}"
+                             FontWeight="{TemplateBinding FontWeight}" />
+                </Border>
+
+                <Rectangle Name="PART_FirstColumnDivider"
+                           Grid.Column="1"
+                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                           HorizontalAlignment="Center"
+                           Fill="{DynamicResource TimePickerSpacerFill}" />
+
+                <Border x:Name="PART_SecondPickerHost"
+                        Grid.Column="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                  <TextBlock x:Name="PART_MinuteTextBlock"
+                             Padding="{DynamicResource TimePickerHostPadding}"
+                             HorizontalAlignment="Center"
+                             FontFamily="{TemplateBinding FontFamily}"
+                             FontSize="{TemplateBinding FontSize}"
+                             FontWeight="{TemplateBinding FontWeight}" />
+                </Border>
+
+                <Rectangle Name="PART_SecondColumnDivider"
+                           Grid.Column="3"
+                           Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                           HorizontalAlignment="Center"
+                           Fill="{DynamicResource TimePickerSpacerFill}" />
+
+                <Border x:Name="PART_ThirdPickerHost"
+                        Grid.Column="4"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                  <TextBlock x:Name="PART_PeriodTextBlock"
+                             Padding="{DynamicResource TimePickerHostPadding}"
+                             HorizontalAlignment="Center"
+                             FontFamily="{TemplateBinding FontFamily}"
+                             FontSize="{TemplateBinding FontSize}"
+                             FontWeight="{TemplateBinding FontWeight}" />
+                </Border>
+              </Grid>
+            </Button>
+
+            <Popup Name="PART_Popup"
+                   IsLightDismissEnabled="True"
+                   Placement="Bottom"
+                   PlacementTarget="{TemplateBinding}"
+                   WindowManagerAddShadowHint="False">
+              <TimePickerPresenter Name="PART_PickerPresenter" />
+            </Popup>
+
+          </Grid>
+        </DataValidationErrors>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:disabled /template/ Rectangle">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+
+    <Style Selector="^:hasnotime /template/ Button#PART_FlyoutButton TextBlock">
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TimePickerPresenter}"
+                TargetType="TimePickerPresenter">
+    <Setter Property="Width" Value="242" />
+    <Setter Property="MinWidth" Value="242" />
+    <Setter Property="MaxHeight" Value="398" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource DateTimeFlyoutBorderThickness}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="Background"
+                MaxHeight="398"
+                Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Grid Name="ContentPanel"
+                RowDefinitions="*,Auto">
+            <Grid Name="PART_PickerContainer">
+              <!--  Ignore col defs here, set in code  -->
+              <Panel Name="PART_HourHost"
+                     Grid.Column="0">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="PART_HourSelector"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                       PanelType="Hour"
+                                       ShouldLoop="True" />
+                </ScrollViewer>
+                <RepeatButton Name="PART_HourUpButton"
+                              Theme="{StaticResource SimpleDateTimePickerUpButton}" />
+                <RepeatButton Name="PART_HourDownButton"
+                              Theme="{StaticResource SimpleDateTimePickerDownButton}" />
+              </Panel>
+
+              <Panel Name="PART_MinuteHost"
+                     Grid.Column="2">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="PART_MinuteSelector"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                       PanelType="Minute"
+                                       ShouldLoop="True" />
+                </ScrollViewer>
+                <RepeatButton Name="PART_MinuteUpButton"
+                              Theme="{StaticResource SimpleDateTimePickerUpButton}" />
+                <RepeatButton Name="PART_MinuteDownButton"
+                              Theme="{StaticResource SimpleDateTimePickerDownButton}" />
+              </Panel>
+
+              <Panel Name="PART_PeriodHost"
+                     Grid.Column="4">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                              VerticalScrollBarVisibility="Hidden">
+                  <DateTimePickerPanel Name="PART_PeriodSelector"
+                                       ItemHeight="{DynamicResource TimePickerFlyoutPresenterItemHeight}"
+                                       PanelType="TimePeriod"
+                                       ShouldLoop="False" />
+                </ScrollViewer>
+                <RepeatButton Name="PART_PeriodUpButton"
+                              Theme="{StaticResource SimpleDateTimePickerUpButton}" />
+                <RepeatButton Name="PART_PeriodDownButton"
+                              Theme="{StaticResource SimpleDateTimePickerDownButton}" />
+              </Panel>
+
+              <Rectangle x:Name="HighlightRect"
+                         Grid.Column="0"
+                         Grid.ColumnSpan="5"
+                         Height="{DynamicResource TimePickerFlyoutPresenterHighlightHeight}"
+                         VerticalAlignment="Center"
+                         ZIndex="-1">
+                <Rectangle.Fill>
+                  <SolidColorBrush Opacity="0.6"
+                                   Color="{DynamicResource ThemeAccentColor}" />
+                </Rectangle.Fill>
+              </Rectangle>
+              <Rectangle Name="PART_FirstSpacer"
+                         Grid.Column="1"
+                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                         HorizontalAlignment="Center"
+                         Fill="{DynamicResource ThemeControlMidHighBrush}" />
+              <Rectangle Name="PART_SecondSpacer"
+                         Grid.Column="3"
+                         Width="{DynamicResource TimePickerSpacerThemeWidth}"
+                         HorizontalAlignment="Center"
+                         Fill="{DynamicResource ThemeControlMidHighBrush}" />
+            </Grid>
+
+            <Grid Name="AcceptDismissGrid"
+                  Grid.Row="1"
+                  ColumnDefinitions="*,*">
+              <Rectangle Grid.ColumnSpan="2"
+                         Height="{DynamicResource TimePickerSpacerThemeWidth}"
+                         VerticalAlignment="Top"
+                         Fill="{DynamicResource ThemeControlMidHighBrush}" />
+              <Button Name="PART_AcceptButton"
+                      Grid.Column="0"
+                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Theme="{StaticResource SimpleDateTimePickerButton}">
+                <Path Data="M0.5,8.5 5,13.5 15.5,3"
+                      Stroke="{Binding $parent[Button].Foreground}"
+                      StrokeLineCap="Round"
+                      StrokeThickness="0.75" />
+              </Button>
+              <Button Name="PART_DismissButton"
+                      Grid.Column="1"
+                      Height="{DynamicResource TimePickerFlyoutPresenterAcceptDismissHostGridHeight}"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      FontSize="16"
+                      Theme="{StaticResource SimpleDateTimePickerButton}">
+                <Path Data="M2,2 14,14 M2,14 14 2"
+                      Stroke="{Binding $parent[Button].Foreground}"
+                      StrokeLineCap="Round"
+                      StrokeThickness="0.75" />
+              </Button>
+            </Grid>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^ /template/ Panel">
+      <Style Selector="^:pointerover RepeatButton">
+        <Setter Property="IsVisible" Value="True" />
+      </Style>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ToggleSwitch.axaml

@@ -0,0 +1,271 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <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>
+    </StackPanel>
+  </Design.PreviewWith>
+
+  <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
+  <GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
+  <GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
+  <x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
+  <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
+  <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness>
+
+  <ControlTheme x:Key="{x:Type ToggleSwitch}"
+                TargetType="ToggleSwitch">
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+    <Setter Property="KnobTransitions">
+      <Transitions>
+        <DoubleTransition
+            Easing="CubicEaseOut"
+            Property="Canvas.Left"
+            Duration="0:0:0.2" />
+      </Transitions>
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Background="{TemplateBinding Background}"
+              RowDefinitions="Auto,*">
+
+          <ContentPresenter x:Name="PART_ContentPresenter"
+                            Grid.Row="0"
+                            Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            RecognizesAccessKey="True"
+                            VerticalAlignment="Top" />
+
+          <Grid Grid.Row="1"
+                MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
+                HorizontalAlignment="Left"
+                VerticalAlignment="Top">
+
+            <Grid.RowDefinitions>
+              <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
+              <RowDefinition Height="Auto" />
+              <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
+            </Grid.RowDefinitions>
+
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="Auto" />
+              <ColumnDefinition Width="12" MaxWidth="12" />
+              <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <Grid x:Name="SwitchAreaGrid"
+                  Grid.RowSpan="3"
+                  Grid.ColumnSpan="3"
+                  Background="Transparent"
+                  TemplatedControl.IsTemplateFocusTarget="True"
+                  Margin="0,5" />
+
+            <ContentPresenter x:Name="PART_OffContentPresenter"
+                              Grid.RowSpan="3"
+                              Grid.Column="2"
+                              Content="{TemplateBinding OffContent}"
+                              ContentTemplate="{TemplateBinding OffContentTemplate}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
+
+            <ContentPresenter x:Name="PART_OnContentPresenter"
+                              Grid.RowSpan="3"
+                              Grid.Column="2"
+                              Content="{TemplateBinding OnContent}"
+                              ContentTemplate="{TemplateBinding OnContentTemplate}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
+
+            <Border x:Name="OuterBorder"
+                    Grid.Row="1"
+                    Height="20"
+                    Width="40"
+                    CornerRadius="10"
+                    Background="Transparent"
+                    BorderBrush="{DynamicResource ThemeBorderMidColor}"
+                    BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
+
+            <Border x:Name="SwitchKnobBounds"
+                    Grid.Row="1"
+                    Height="20"
+                    Width="40"
+                    CornerRadius="10"
+                    Background="{DynamicResource ThemeAccentColor}"
+                    BorderBrush="{DynamicResource ThemeAccentColor}"
+                    BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}" />
+
+            <Canvas x:Name="PART_SwitchKnob" Grid.Row="1"
+                    HorizontalAlignment="Left"
+                    Width="20" Height="20">
+
+              <Grid x:Name="PART_MovingKnobs"
+                    Width="20" Height="20">
+
+                <Ellipse x:Name="SwitchKnobOn"
+                         Fill="{DynamicResource HighlightForegroundColor}"
+                         Width="10" Height="10" />
+
+                <Ellipse x:Name="SwitchKnobOff"
+                         Fill="{DynamicResource ThemeBorderMidColor}"
+                         Width="10" Height="10" />
+              </Grid>
+            </Canvas>
+          </Grid>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
+      <Setter Property="Margin" Value="0" />
+    </Style>
+
+    <!-- PointerOverState -->
+    <Style Selector="^:pointerover /template/ Border#OuterBorder">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighColor}" />
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Fill" Value="{DynamicResource ThemeBorderHighColor}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Fill" Value="{DynamicResource HighlightForegroundColor}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Border#SwitchKnobBounds">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentColor2}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentColor2}" />
+    </Style>
+
+    <Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+
+    <!-- PressedState -->
+    <Style Selector="^:pressed /template/ Border#OuterBorder">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighColor}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeControlMidHighColor}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Border#SwitchKnobBounds">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentColor3}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentColor3}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Fill" Value="{DynamicResource ThemeBorderHighColor}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Fill" Value="{DynamicResource HighlightForegroundColor}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ Grid#SwitchAreaGrid">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+
+    <!-- DisabledState -->
+    <Style Selector="^:disabled">
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowColor}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Border#OuterBorder">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundLowColor}" />
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowColor}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Fill" Value="{DynamicResource HighlightForegroundColor}" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Border#SwitchKnobBounds">
+      <Setter Property="Background" Value="{DynamicResource ThemeForegroundLowColor}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundLowColor}" />
+    </Style>
+
+    <!-- CheckedState -->
+    <Style Selector="^:checked /template/ Border#OuterBorder">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked  /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked  /template/ Border#SwitchKnobBounds">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:checked /template/ ContentPresenter#PART_OffContentPresenter">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:checked /template/ ContentPresenter#PART_OnContentPresenter">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <!--UncheckedState -->
+    <Style Selector="^:unchecked /template/ Border#OuterBorder">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOff">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOn">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:unchecked  /template/ Border#SwitchKnobBounds">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
+      <Setter Property="Opacity" Value="1" />
+    </Style>
+
+    <Style Selector="^:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
+      <Setter Property="Opacity" Value="0" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TransitioningContentControl.axaml

@@ -0,0 +1,31 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type TransitioningContentControl}"
+                TargetType="TransitioningContentControl">
+    <!--  Set Defaults  -->
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <ContentPresenter Name="PART_ContentPresenter"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
+          <ContentPresenter Name="PART_ContentPresenter2"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TreeView.axaml

@@ -0,0 +1,31 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type TreeView}"
+                  TargetType="TreeView">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+        <Setter Property="Padding" Value="4" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                                  BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}"
+                                  Background="{TemplateBinding Background}"
+                                  HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                  IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                                  VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                        <ItemsPresenter Name="PART_ItemsPresenter"
+                                        Margin="{TemplateBinding Padding}"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TreeViewItem.axaml

@@ -0,0 +1,102 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Avalonia.Controls.Converters">
+  <converters:MarginMultiplierConverter x:Key="LeftMarginConverter"
+                                        Indent="16"
+                                        Left="True" />
+
+  <ControlTheme x:Key="SimpleTreeViewItemToggleButtonTheme"
+                TargetType="ToggleButton">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Width="14"
+                Height="12"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Background="Transparent">
+          <Path HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Data="M 0 2 L 4 6 L 0 10 Z"
+                Fill="{DynamicResource ThemeForegroundBrush}" />
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:checked">
+      <Setter Property="RenderTransform">
+        <RotateTransform Angle="45" />
+      </Setter>
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TreeViewItem}"
+                TargetType="TreeViewItem">
+    <Setter Property="Padding" Value="2" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <StackPanel>
+          <Border Name="SelectionBorder"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}"
+                  Focusable="True"
+                  TemplatedControl.IsTemplateFocusTarget="True">
+            <Grid Name="PART_Header"
+                  Margin="{TemplateBinding Level,
+                                           Mode=OneWay,
+                                           Converter={StaticResource LeftMarginConverter}}"
+                  ColumnDefinitions="16, *">
+              <ToggleButton Name="PART_ExpandCollapseChevron"
+                            Focusable="False"
+                            Background="Transparent"
+                            IsChecked="{TemplateBinding IsExpanded,
+                                                        Mode=TwoWay}"
+                            Theme="{StaticResource SimpleTreeViewItemToggleButtonTheme}" />
+              <ContentPresenter Name="PART_HeaderPresenter"
+                                Grid.Column="1"
+                                Background="Transparent"
+                                Padding="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
+                                Content="{TemplateBinding Header}"
+                                ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                Focusable="False" />
+            </Grid>
+          </Border>
+          <ItemsPresenter Name="PART_ItemsPresenter"
+                          IsVisible="{TemplateBinding IsExpanded}"
+                          ItemsPanel="{TemplateBinding ItemsPanel}" />
+        </StackPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+      <Setter Property="Padding" Value="2" />
+    </Style>
+
+    <Style Selector="^ /template/ Border#SelectionBorder:pointerover">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}" />
+    </Style>
+
+    <Style Selector="^:selected /template/ Border#SelectionBorder">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}" />
+    </Style>
+
+    <Style Selector="^:selected /template/ Border#SelectionBorder:focus">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+    </Style>
+
+    <Style Selector="^:selected /template/ Border#SelectionBorder:pointerover">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+    </Style>
+
+    <Style Selector="^:selected /template/ Border#SelectionBorder:pointerover:focus">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
+    </Style>
+
+    <Style Selector="^:empty /template/ ToggleButton#PART_ExpandCollapseChevron">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/WindowNotificationManager.axaml

@@ -0,0 +1,52 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type WindowNotificationManager}"
+                TargetType="WindowNotificationManager">
+    <Setter Property="Margin" Value="0 0 8 8" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ReversibleStackPanel Name="PART_Items">
+          <ReversibleStackPanel.DataTemplates>
+            <DataTemplate DataType="INotification">
+              <StackPanel Margin="12"
+                          Spacing="8">
+                <TextBlock FontWeight="Medium"
+                           Text="{Binding Title}" />
+                <TextBlock MaxHeight="80"
+                           Margin="0,0,12,0"
+                           Text="{Binding Message}"
+                           TextWrapping="Wrap" />
+              </StackPanel>
+            </DataTemplate>
+            <DataTemplate DataType="x:String">
+              <TextBlock Margin="12"
+                         Text="{Binding}" />
+            </DataTemplate>
+          </ReversibleStackPanel.DataTemplates>
+        </ReversibleStackPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="VerticalAlignment" Value="Top" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+    </Style>
+
+    <Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="VerticalAlignment" Value="Top" />
+      <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+
+    <Style Selector="^:bottomleft /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="ReverseOrder" Value="True" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+    </Style>
+
+    <Style Selector="^:bottomright /template/ ReversibleStackPanel#PART_Items">
+      <Setter Property="ReverseOrder" Value="True" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+      <Setter Property="HorizontalAlignment" Value="Right" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Converters/IBitmapToImageConverter.cs

@@ -0,0 +1,23 @@
+using System.Globalization;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+using Avalonia.Media.Imaging;
+
+namespace PixiEditor.UI.Common.Converters
+{
+    internal class IBitmapToImageConverter : IValueConverter
+    {
+        public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
+            if (value is Bitmap bm)
+                return new Image { Source = bm };
+
+            return null;
+        }
+
+        public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

src/PixiEditor.UI.Common/Styles/PixiEditor.Controls.axaml

@@ -45,6 +45,30 @@
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Expander.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/FlyoutPresenter.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/GridSplitter.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ItemsControl.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Label.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ManagedFileChooser.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/MenuFlyoutPresenter.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/NativeMenuBar.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/NumericUpDown.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/OverlayPopupHost.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/PathIcon.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/RefreshContainer.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/RefreshVisualizer.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/SelectableTextBlock.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/SplitButton.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/SplitView.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TabControl.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TabItem.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TabStrip.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TabStripItem.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ThemeVariantScope.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TimePicker.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ToggleSwitch.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TransitioningContentControl.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TreeView.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TreeViewItem.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/WindowNotificationManager.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>