Moar controls

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

@@ -13,7 +13,7 @@
     <vm:MainViewModel />
   </Design.DataContext>
 
-    <StackPanel Spacing="10" Margin="10" HorizontalAlignment="Left">
+        <WrapPanel Orientation="Vertical" Margin="10" HorizontalAlignment="Left">
 
         <TextBlock Text="Text"/>
         <TextBlock Text="h1" Classes="h1"/>
@@ -21,20 +21,30 @@
         <TextBlock Text="h3" Classes="h3"/>
         <TextBlock Text="h4" Classes="h4"/>
 
+        <Separator/>
+
         <TextBlock ui:Translator.Key="LANGUAGE" ui:Translator.TooltipKey="LANGUAGE"/>
 
+        <Separator/>
+
         <Button Content="Button"/>
-        <Button Content="Button Disabled" IsEnabled="False"/>
+        <Button Content="Button Disabled" Margin="0 10" IsEnabled="False"/>
 
         <ToggleButton Content="ToggleButton"/>
 
-        <RepeatButton Content="Repeat Button"/>
+        <RepeatButton Margin="0 10" Content="Repeat Button" />
+
+        <Separator/>
 
         <CheckBox Content="CheckBox" IsThreeState="True"/>
 
-        <RadioButton GroupName="Radios" Content="Option 1"/>
+        <Separator/>
+
+        <RadioButton GroupName="Radios" Margin="0 10" Content="Option 1"/>
         <RadioButton GroupName="Radios" Content="Option 2"/>
 
+        <Separator/>
+
         <ScrollViewer Height="50">
             <StackPanel>
                 <TextBlock Text="ScrollViewer"/>
@@ -45,7 +55,11 @@
             </StackPanel>
         </ScrollViewer>
 
-        <TextBox Watermark="TextBox" Text="Sample text"/>
+        <Separator/>
+
+        <TextBox Watermark="TextBox" Margin="0 10" Text="Sample text"/>
+
+        <Separator/>
 
         <ComboBox SelectedIndex="0">
             <ComboBoxItem Content="ComboBoxItem 1"/>
@@ -59,8 +73,48 @@
             <ListBoxItem Content="ListBoxItem 3"/>
         </ListBox>
 
-        <Slider Width="100" Value="50"/>
-        <ProgressBar Width="100" Value="50"/>
-    </StackPanel>
+        <Slider Margin="0 10" Value="50"/>
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
+        <ProgressBar VerticalAlignment="Center" Value="5" Margin="0 10" Maximum="10" />
+        <ProgressBar VerticalAlignment="Center" Value="50" />
+        <ProgressBar VerticalAlignment="Center" Value="50" ShowProgressText="True" Margin="0 10"
+                     Minimum="25" Maximum="75" />
+        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
+
+        <Border Background="Green">
+            <Border.ContextMenu>
+                <ContextMenu>
+                    <MenuItem Header="Hello"/>
+                    <MenuItem Header="Hello2"/>
+                    <Separator/>
+                    <MenuItem Header="Hello Nested">
+                        <MenuItem Header="Hover for more">
+                            <MenuItem Header="If you hover again, you'll get a cookie">
+                                <MenuItem Header="Sike! No cookie here, keep going">
+                                    <MenuItem Header="Ok, take some rest 🍪"/>
+                                </MenuItem>
+                                </MenuItem>
+                        </MenuItem>
+                        </MenuItem>
+                </ContextMenu>
+            </Border.ContextMenu>
+            <TextBlock Text="Right click for context menu"/>
+        </Border>
+
+        <Menu>
+            <MenuItem Header="Hello"/>
+            <MenuItem Header="Hello2"/>
+            <Separator/>
+            <MenuItem Header="Hello Nested">
+                <MenuItem Header="Hover for more">
+                    <MenuItem Header="If you hover again, you'll get a cookie">
+                        <MenuItem Header="Sike! No cookie here, keep going">
+                            <MenuItem Header="Ok, take some rest 🍪"/>
+                        </MenuItem>
+                    </MenuItem>
+                </MenuItem>
+            </MenuItem>
+        </Menu>
+    </WrapPanel>
 
 </UserControl>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/MainWindow.axaml

@@ -12,5 +12,5 @@
         WindowState="Maximized"
         Icon="/Assets/avalonia-logo.ico"
         Title="PixiEditor">
-        <views:MainView />
+    <views:MainView />
 </Window>

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

@@ -12,9 +12,8 @@
         <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Padding" Value="10,0"/>
+        <Setter Property="Padding" Value="5"/>
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
-        <Setter Property="Height" Value="28"/>
         <Setter Property="Template">
             <ControlTemplate>
                 <ContentPresenter Name="PART_ContentPresenter"

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

@@ -0,0 +1,29 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type ContextMenu}"
+                  TargetType="ContextMenu">
+        <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Padding" Value="4,2" />
+        <Setter Property="TextBlock.FontSize" Value="{DynamicResource FontSizeNormal}" />
+        <Setter Property="TextBlock.FontWeight" Value="Normal" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer>
+                        <ItemsPresenter Name="PART_ItemsPresenter"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}"
+                                        KeyboardNavigation.TabNavigation="Continue" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,79 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="using:System">
+
+  <ControlTheme x:Key="TopLevelMenuItem"
+                TargetType="MenuItem">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Padding" Value="6 0" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="root"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Panel>
+            <ContentPresenter Name="PART_HeaderPresenter"
+                              Margin="{TemplateBinding Padding}"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}">
+              <ContentPresenter.DataTemplates>
+                <DataTemplate DataType="sys:String">
+                  <AccessText Text="{Binding}" />
+                </DataTemplate>
+              </ContentPresenter.DataTemplates>
+            </ContentPresenter>
+            <Popup Name="PART_Popup"
+                   IsLightDismissEnabled="True"
+                   IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}"
+                   Placement="BottomEdgeAlignedLeft"
+                   OverlayInputPassThroughElement="{Binding $parent[Menu]}">
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                      BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                      BorderThickness="{TemplateBinding BorderThickness}">
+                <ScrollViewer>
+                  <ItemsPresenter Name="PART_ItemsPresenter"
+                                  Margin="2"
+                                  Grid.IsSharedSizeScope="True"
+                                  ItemsPanel="{TemplateBinding ItemsPanel}" />
+                </ScrollViewer>
+              </Border>
+            </Popup>
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:selected /template/ Border#root">
+        <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+    </Style>
+
+    <Style Selector="^:empty /template/ Path#rightArrow">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+
+    <Style Selector="^:disabled">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type Menu}"
+                TargetType="Menu">
+    <Setter Property="ItemContainerTheme" Value="{StaticResource TopLevelMenuItem}" />
+    <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}"
+                          KeyboardNavigation.TabNavigation="Continue" />
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,108 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:conv="using:Avalonia.Controls.Converters"
+                    xmlns:sys="using:System"
+                    x:ClassModifier="internal">
+  <conv:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
+
+  <ControlTheme x:Key="{x:Type MenuItem}"
+                TargetType="MenuItem">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Padding" Value="6 0" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="root"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Grid>
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="20" />
+              <ColumnDefinition Width="5" />
+              <ColumnDefinition Width="*" />
+              <ColumnDefinition Width="Auto"
+                                SharedSizeGroup="MenuItemIGT" />
+              <ColumnDefinition Width="20" />
+            </Grid.ColumnDefinitions>
+            <ContentPresenter Name="icon"
+                              Width="16"
+                              Height="16"
+                              Margin="3"
+                              HorizontalAlignment="Center"
+                              VerticalAlignment="Center"
+                              Content="{TemplateBinding Icon}" />
+            <Path Name="check"
+                  Margin="3"
+                  VerticalAlignment="Center"
+                  Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z"
+                  Fill="{TemplateBinding Foreground}"
+                  IsVisible="False" />
+            <ContentPresenter Name="PART_HeaderPresenter"
+                              Grid.Column="2"
+                              Margin="{TemplateBinding Padding}"
+                              VerticalAlignment="Center"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}">
+              <ContentPresenter.DataTemplates>
+                <DataTemplate DataType="sys:String">
+                  <AccessText Text="{Binding}" />
+                </DataTemplate>
+              </ContentPresenter.DataTemplates>
+            </ContentPresenter>
+            <TextBlock x:Name="PART_InputGestureText"
+                       Grid.Column="3"
+                       VerticalAlignment="Center"
+                       Text="{TemplateBinding InputGesture,
+                                              Converter={StaticResource KeyGestureConverter}}" />
+            <Path Name="rightArrow"
+                  Grid.Column="4"
+                  Margin="10,0,0,0"
+                  VerticalAlignment="Center"
+                  Data="M0,0L4,3.5 0,7z"
+                  Fill="{DynamicResource ThemeForegroundBrush}" />
+            <Popup Name="PART_Popup"
+                   IsLightDismissEnabled="False"
+                   IsOpen="{TemplateBinding IsSubMenuOpen,
+                                            Mode=TwoWay}"
+                   Placement="RightEdgeAlignedTop">
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                      BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                      CornerRadius="{TemplateBinding CornerRadius}"
+                      BorderThickness="{TemplateBinding BorderThickness}">
+                <ScrollViewer>
+                  <ItemsPresenter Name="PART_ItemsPresenter"
+                                  Margin="2"
+                                  Grid.IsSharedSizeScope="True"
+                                  ItemsPanel="{TemplateBinding ItemsPanel}" />
+                </ScrollViewer>
+              </Border>
+            </Popup>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:separator">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Separator />
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="^:selected /template/ Border#root">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+    </Style>
+
+    <Style Selector="^:empty /template/ Path#rightArrow">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+
+    <Style Selector="^:disabled">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -1,14 +1,117 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Design.PreviewWith>
-        <Border Padding="20">
-            <ProgressBar/>
-        </Border>
-    </Design.PreviewWith>
-
-    <!--<Style Selector="ProgressBar">
-        <Setter Property="Foreground" Value="{DynamicResource AccentColor}"/>
-        <Setter Property="Background" Value="{DynamicResource Background1}"/>
-        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
-    </Style>-->
-</ResourceDictionary>
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Avalonia.Controls.Converters">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="10">
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
+        <ProgressBar VerticalAlignment="Center" Value="5" Maximum="10" />
+        <ProgressBar VerticalAlignment="Center" Value="50" />
+        <ProgressBar VerticalAlignment="Center" Value="50" Minimum="25" Maximum="75" />
+        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <converters:StringFormatConverter x:Key="StringFormatConverter" />
+
+  <ControlTheme x:Key="{x:Type ProgressBar}"
+                TargetType="ProgressBar">
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush1}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Template">
+      <ControlTemplate TargetType="ProgressBar">
+        <Grid>
+          <Border Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <Panel>
+              <Border Name="PART_Indicator"
+                      Background="{TemplateBinding Foreground}"
+                      CornerRadius="{TemplateBinding CornerRadius}"
+                      IsVisible="{Binding !IsIndeterminate, RelativeSource={RelativeSource TemplatedParent}}" />
+              <Border Name="PART_IndeterminateIndicator"
+                      Background="{TemplateBinding Foreground}"
+                      CornerRadius="{TemplateBinding CornerRadius}"
+                      IsVisible="{Binding IsIndeterminate, RelativeSource={RelativeSource TemplatedParent}}" />
+            </Panel>
+          </Border>
+          <LayoutTransformControl Name="PART_LayoutTransformControl"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"
+                                  IsVisible="{Binding ShowProgressText, RelativeSource={RelativeSource TemplatedParent}}">
+            <TextBlock Foreground="{DynamicResource ThemeForegroundBrush}">
+              <TextBlock.Text>
+                <MultiBinding Converter="{StaticResource StringFormatConverter}">
+                  <TemplateBinding Property="ProgressTextFormat" />
+                  <Binding Path="Value"
+                           RelativeSource="{RelativeSource TemplatedParent}" />
+                  <TemplateBinding Property="Percentage" />
+                  <TemplateBinding Property="Minimum" />
+                  <TemplateBinding Property="Maximum" />
+                </MultiBinding>
+              </TextBlock.Text>
+            </TextBlock>
+          </LayoutTransformControl>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:horizontal /template/ Border#PART_Indicator">
+      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
+    <Style Selector="^:vertical /template/ Border#PART_Indicator">
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+      <Setter Property="VerticalAlignment" Value="Bottom" />
+    </Style>
+    <Style Selector="^:horizontal">
+      <Setter Property="MinWidth" Value="200" />
+      <Setter Property="MinHeight" Value="16" />
+    </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="MinWidth" Value="16" />
+      <Setter Property="MinHeight" Value="200" />
+    </Style>
+    <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
+      <Setter Property="LayoutTransform">
+        <Setter.Value>
+          <RotateTransform Angle="90" />
+        </Setter.Value>
+      </Setter>
+    </Style>
+
+    <Style Selector="^:horizontal:indeterminate /template/ Border#PART_IndeterminateIndicator">
+        <Style.Animations>
+        <Animation Easing="LinearEasing"
+                   IterationCount="Infinite"
+                   Duration="0:0:3">
+          <KeyFrame Cue="0%">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.IndeterminateStartingOffset}" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.IndeterminateEndingOffset}" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+      <Setter Property="Width" Value="{Binding TemplateSettings.ContainerWidth, RelativeSource={RelativeSource TemplatedParent}}" />
+    </Style>
+    <Style Selector="^:vertical:indeterminate /template/ Border#PART_IndeterminateIndicator">
+      <Style.Animations>
+        <Animation Easing="LinearEasing"
+                   IterationCount="Infinite"
+                   Duration="0:0:3">
+          <KeyFrame Cue="0%">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.IndeterminateStartingOffset}" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.IndeterminateEndingOffset}" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+      <Setter Property="Height" Value="{Binding TemplateSettings.ContainerWidth, RelativeSource={RelativeSource TemplatedParent}}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,40 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type RepeatButton}"
+                TargetType="RepeatButton">
+    <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="Cursor" Value="Hand" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Padding" Value="5"/>
+    <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}"
+                          TextElement.Foreground="{TemplateBinding Foreground}" />
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    </Style>
+    <Style Selector="^:disabled">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+    <Style Selector="^:pressed  /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundColor}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,19 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type Separator}"
+                  TargetType="Separator">
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}" />
+        <Setter Property="Margin" Value="5" />
+        <Setter Property="Height" Value="1" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+</ResourceDictionary>

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

@@ -0,0 +1,132 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="SliderRepeatTrackTheme"
+                TargetType="RepeatButton">
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush1}" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeBorderLowBrush}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"/>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type Slider}"
+                TargetType="Slider">
+    <Style Selector="^:horizontal">
+      <Setter Property="MinWidth" Value="40" />
+      <Setter Property="MinHeight" Value="20" />
+      <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+      <Setter Property="Template">
+        <ControlTemplate>
+            <Grid Name="grid">
+            <Grid.RowDefinitions>
+              <RowDefinition Height="Auto" />
+              <RowDefinition Height="Auto"
+                             MinHeight="20" />
+              <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Border Name="TrackBackground"
+                    Grid.Row="1"
+                    Height="4"
+                    Margin="6,0"
+                    VerticalAlignment="Center" />
+            <Track Name="PART_Track"
+                   Grid.Row="1"
+                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                   Orientation="Horizontal">
+                <Track.DecreaseButton>
+                <RepeatButton Name="PART_DecreaseButton"
+                              Theme="{StaticResource SliderRepeatTrackTheme}" />
+              </Track.DecreaseButton>
+              <Track.IncreaseButton>
+                <RepeatButton Name="PART_IncreaseButton"
+                              Theme="{StaticResource SliderRepeatTrackTheme}" />
+              </Track.IncreaseButton>
+              <Thumb Name="thumb"
+                     MinWidth="20"
+                     MinHeight="20">
+                <Thumb.Template>
+                  <ControlTemplate>
+                    <Grid Background="{DynamicResource ThemeBackgroundBrush1}">
+                      <Ellipse Width="12"
+                               Height="12"
+                               Fill="{DynamicResource ThemeAccentBrush}" />
+                    </Grid>
+                  </ControlTemplate>
+                </Thumb.Template>
+              </Thumb>
+            </Track>
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="MinWidth" Value="20" />
+      <Setter Property="MinHeight" Value="40" />
+      <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+      <Setter Property="Template">
+        <ControlTemplate>
+            <Border CornerRadius="{TemplateBinding CornerRadius}">
+            <Grid>
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="Auto" />
+              <ColumnDefinition Width="Auto"
+                                MinWidth="26" />
+              <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <Border Name="TrackBackground"
+                    Grid.Column="1"
+                    Width="4"
+                    Margin="0,6"
+                    HorizontalAlignment="Center" />
+            <Track Name="PART_Track"
+                   Grid.Column="1"
+                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                   Orientation="Vertical">
+              <Track.DecreaseButton>
+                <RepeatButton Name="PART_DecreaseButton"
+                              Theme="{StaticResource SliderRepeatTrackTheme}" />
+              </Track.DecreaseButton>
+              <Track.IncreaseButton>
+                <RepeatButton Name="PART_IncreaseButton"
+                              Theme="{StaticResource SliderRepeatTrackTheme}" />
+              </Track.IncreaseButton>
+              <Thumb Name="thumb"
+                     MinWidth="20"
+                     MinHeight="20">
+                <Thumb.Template>
+                  <ControlTemplate>
+                    <Grid>
+                      <Ellipse Width="12"
+                               Height="12"
+                               Fill="{DynamicResource ThemeAccentBrush}" />
+                    </Grid>
+                  </ControlTemplate>
+                </Thumb.Template>
+              </Thumb>
+            </Track>
+          </Grid>
+            </Border>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="^ /template/ Track#PART_Track">
+      <Setter Property="Minimum" Value="{TemplateBinding Minimum}" />
+      <Setter Property="Maximum" Value="{TemplateBinding Maximum}" />
+      <Setter Property="Value" Value="{TemplateBinding Value, Mode=TwoWay}" />
+    </Style>
+    <Style Selector="^ /template/ Border#TrackBackground">
+      <Setter Property="BorderThickness" Value="2" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}" />
+    </Style>
+    <Style Selector="^ /template/ TickBar">
+      <Setter Property="Ticks" Value="{TemplateBinding Ticks}" />
+    </Style>
+    <Style Selector="^:disabled /template/ Grid#grid">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

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

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

@@ -8,8 +8,7 @@
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="Cursor" Value="Hand"/>
     <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
-    <Setter Property="Padding" Value="10,0"/>
-    <Setter Property="Height" Value="28"/>
+    <Setter Property="Padding" Value="5"/>
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">

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

@@ -0,0 +1,23 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type ToolTip}"
+                  TargetType="ToolTip">
+        <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Padding" Value="8,4" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <ContentPresenter Name="PART_ContentPresenter"
+                                  Padding="{TemplateBinding Padding}"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                  Content="{TemplateBinding Content}"
+                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                  CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -16,6 +16,15 @@
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ScrolLBar.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ToggleButton.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/PopupRoot.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/RepeatButton.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ProgressBar.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Slider.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ToolTip.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Separator.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TitleBar.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ContextMenu.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Menu.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/MenuItem.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>