Added AdornerLayer, Calendar and more

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

@@ -117,5 +117,11 @@
         </Menu>
 
         <NotificationCard Content="Notification Card"/>
+        <AutoCompleteBox Margin="0 10"/>
+        <ButtonSpinner AllowSpin="True" ButtonSpinnerLocation="Right" ShowButtonSpinner="True">
+            <TextBlock Text="Button Spinner"/>
+        </ButtonSpinner>
+        <Calendar/>
+        <CaptionButtons/>
     </WrapPanel>
 </UserControl>

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

@@ -21,6 +21,8 @@
             <Color x:Key="ThemeBorderMidColor">#3F3F46</Color>
             <Color x:Key="ThemeBorderHighColor">#4F4F4F</Color>
 
+            <Color x:Key="ErrorColor">#B00020</Color>
+
             <Color x:Key="NotificationCardBackgroundColor">#303030</Color>
 
             <system:Double x:Key="ThemeDisabledOpacity">0.4</system:Double>
@@ -44,7 +46,10 @@
 
             <SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="{StaticResource NotificationCardBackgroundColor}" />
 
+            <SolidColorBrush x:Key="ErrorBrush" Color="{StaticResource ErrorColor}" />
+
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
+            <system:Double x:Key="ControlCornerRadiusValue">5</system:Double>
             <Thickness x:Key="ThemeBorderThickness">1</Thickness>
             <Thickness x:Key="ScrollBarThickness">5</Thickness>
         </ResourceDictionary>

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

@@ -0,0 +1,14 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
+        <Setter Property="DefaultFocusAdorner">
+            <FocusAdornerTemplate>
+                <Rectangle Margin="1"
+                           Stroke="{DynamicResource ThemeAccentBrush}"
+                           RadiusX="{DynamicResource ControlCornerRadiusValue}"
+                           RadiusY="{DynamicResource ControlCornerRadiusValue}"
+                           StrokeThickness="1" />
+            </FocusAdornerTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type AutoCompleteBox}"
+                TargetType="AutoCompleteBox">
+    <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="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <TextBox Name="PART_TextBox"
+                   Padding="{TemplateBinding Padding}"
+                   Background="{TemplateBinding Background}"
+                   BorderBrush="{TemplateBinding BorderBrush}"
+                   BorderThickness="{TemplateBinding BorderThickness}"
+                   CornerRadius="{TemplateBinding CornerRadius}"
+                   DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                   Watermark="{TemplateBinding Watermark}" />
+
+          <Popup Name="PART_Popup"
+                 MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                 MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                 IsLightDismissEnabled="True"
+                 PlacementTarget="{TemplateBinding}">
+            <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                    BorderThickness="1">
+              <ListBox Name="PART_SelectingItemsControl"
+                       Background="{TemplateBinding Background}"
+                       BorderThickness="0"
+                       Foreground="{TemplateBinding Foreground}"
+                       ItemTemplate="{TemplateBinding ItemTemplate}"
+                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                       ScrollViewer.VerticalScrollBarVisibility="Auto" />
+            </Border>
+          </Popup>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,88 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+  <ControlTheme x:Key="ButtonSpinnerRepeatButton"
+                BasedOn="{StaticResource {x:Type RepeatButton}}"
+                TargetType="RepeatButton">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="Transparent" />
+    <Style Selector="^ /template/ RepeatButton:pointerover">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type ButtonSpinner}"
+                TargetType="ButtonSpinner">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Focusable" Value="True" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DataValidationErrors>
+          <Border Name="border"
+                  Margin="{TemplateBinding Padding}"
+                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <DockPanel>
+              <UniformGrid Name="PART_SpinnerPanel"
+                           DockPanel.Dock="Right"
+                           IsVisible="{TemplateBinding ShowButtonSpinner}"
+                           Rows="2">
+                <RepeatButton Name="PART_IncreaseButton"
+                              Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                  <Path Width="8"
+                        Height="4"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Data="M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z"
+                        Fill="{DynamicResource ThemeForegroundBrush}"
+                        Stretch="Uniform" />
+                </RepeatButton>
+                <RepeatButton Name="PART_DecreaseButton"
+                              Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                  <Path Width="8"
+                        Height="4"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Data="M0,0 L3,0 4.5,1.5 6,0 9,0 4.5,4.5 z"
+                        Fill="{DynamicResource ThemeForegroundBrush}"
+                        Stretch="Uniform" />
+                </RepeatButton>
+              </UniformGrid>
+              <ContentPresenter Name="PART_ContentPresenter"
+                                Grid.Column="1"
+                                Padding="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+            </DockPanel>
+          </Border>
+        </DataValidationErrors>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:left">
+      <Style Selector="^ /template/ StackPanel#PART_SpinnerPanel">
+        <Setter Property="DockPanel.Dock" Value="Left" />
+      </Style>
+    </Style>
+    <Style Selector="^:pointerover /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^:focus /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^:error /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ErrorBrush}" />
+    </Style>
+  </ControlTheme>
+
+</ResourceDictionary>

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

@@ -0,0 +1,33 @@
+<!--
+  // (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"
+                    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type Calendar}"
+                  TargetType="Calendar">
+        <!--<Setter Property="Focusable" Value="False" />-->
+        <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+        <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+        <Setter Property="HeaderBackground" Value="{DynamicResource ThemeAccentBrush2}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <StackPanel Name="PART_Root"
+                            HorizontalAlignment="Center"
+                            ClipToBounds="True">
+                    <CalendarItem Name="PART_CalendarItem"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                  CornerRadius="{TemplateBinding CornerRadius}"
+                                  HeaderBackground="{TemplateBinding HeaderBackground}" />
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,74 @@
+<!--
+  // (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"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="{x:Type CalendarButton}"
+                TargetType="CalendarButton">
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
+    <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="MinWidth" Value="37" />
+    <Setter Property="MinHeight" Value="38" />
+    <Setter Property="Focusable" Value="False" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid>
+
+          <Rectangle Name="SelectedBackground"
+                     Fill="{TemplateBinding Background}"
+                     IsVisible="False"
+                     Opacity="0.75" />
+
+          <Rectangle Name="Background"
+                     Fill="{TemplateBinding Background}"
+                     IsVisible="False"
+                     Opacity="0.5" />
+
+          <!--  Focusable="False"  -->
+          <ContentPresenter Name="Content"
+                            Margin="1,0,1,1"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}" />
+
+          <Rectangle Name="FocusVisual"
+                     IsHitTestVisible="False"
+                     IsVisible="False"
+                     Stroke="{DynamicResource HighlightBrush}"
+                     StrokeThickness="1" />
+
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ Rectangle#Background">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:pressed /template/ Rectangle#Background">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+
+    <Style Selector="^:selected /template/ Rectangle#SelectedBackground">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+
+    <Style Selector="^:inactive /template/ ContentPresenter#Content">
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}" />
+    </Style>
+
+    <Style Selector="^:btnfocused /template/ Rectangle#FocusVisual">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,139 @@
+<!--
+  // (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"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="{x:Type CalendarDatePicker}"
+                TargetType="CalendarDatePicker">
+    <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>
+        <Grid ColumnDefinitions="*,Auto">
+
+          <Grid.Styles>
+
+            <Style Selector="Button.CalendarDropDown">
+              <Setter Property="Template">
+                <ControlTemplate>
+                  <Grid Width="19"
+                        Height="18"
+                        Margin="0"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Background="{DynamicResource ThemeControlLowBrush}"
+                        ClipToBounds="False"
+                        ColumnDefinitions="*,*,*,*"
+                        RowDefinitions="23*,19*,19*,19*">
+
+                    <Border Name="Highlight"
+                            Grid.Row="0"
+                            Grid.RowSpan="4"
+                            Grid.ColumnSpan="4"
+                            Margin="-1"
+                            BorderBrush="{DynamicResource HighlightBrush}"
+                            BorderThickness="1" />
+                    <Border Name="Background"
+                            Grid.Row="1"
+                            Grid.RowSpan="3"
+                            Grid.ColumnSpan="4"
+                            Margin="0,-1,0,0"
+                            BorderBrush="{DynamicResource ThemeBorderHighBrush}"
+                            BorderThickness="1"
+                            CornerRadius=".5" />
+                    <Rectangle Grid.RowSpan="1"
+                               Grid.ColumnSpan="4"
+                               Fill="{DynamicResource ThemeAccentBrush}"
+                               Stroke="{DynamicResource ThemeBorderHighBrush}"
+                               StrokeThickness="1" />
+                    <TextBlock Grid.Row="1"
+                               Grid.RowSpan="3"
+                               Grid.Column="0"
+                               Grid.ColumnSpan="4"
+                               Margin="0,-1,0,0"
+                               HorizontalAlignment="Center"
+                               VerticalAlignment="Center"
+                               FontSize="{DynamicResource FontSizeSmall}"
+                               Foreground="{DynamicResource ThemeBorderHighBrush}"
+                               Text="{Binding Source={x:Static sys:DateTime.Today}, Path=Day}" />
+
+                    <Ellipse Grid.ColumnSpan="4"
+                             Width="3"
+                             Height="3"
+                             HorizontalAlignment="Center"
+                             VerticalAlignment="Center"
+                             Fill="{DynamicResource ThemeControlLowBrush}"
+                             StrokeThickness="0" />
+                  </Grid>
+                </ControlTemplate>
+              </Setter>
+            </Style>
+
+            <Style Selector="Button.CalendarDropDown /template/ Border#Highlight">
+              <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="Button.CalendarDropDown:pressed /template/ Border#Highlight">
+              <Setter Property="IsVisible" Value="True" />
+            </Style>
+
+            <Style Selector="Button.CalendarDropDown:pointerover /template/ Border#Background">
+              <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}" />
+            </Style>
+
+          </Grid.Styles>
+
+          <TextBox Name="PART_TextBox"
+                   Grid.Column="0"
+                   Padding="{TemplateBinding Padding}"
+                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                   Background="{TemplateBinding Background}"
+                   BorderBrush="{TemplateBinding BorderBrush}"
+                   BorderThickness="{TemplateBinding BorderThickness}"
+                   CornerRadius="{TemplateBinding CornerRadius}"
+                   DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                   UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                   Watermark="{TemplateBinding Watermark}" />
+
+          <Button Name="PART_Button"
+                  Grid.Column="1"
+                  Width="20"
+                  Margin="2,0,2,0"
+                  Padding="0"
+                  Background="Transparent"
+                  BorderThickness="0"
+                  Classes="CalendarDropDown"
+                  ClipToBounds="False"
+                  Focusable="False"
+                  Foreground="{TemplateBinding Foreground}" />
+
+          <Popup Name="PART_Popup"
+                 PlacementTarget="{TemplateBinding}"
+                 IsLightDismissEnabled="False">
+            <Calendar Name="PART_Calendar"
+                      DisplayDate="{TemplateBinding DisplayDate}"
+                      DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
+                      DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                      FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                      IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                      SelectedDate="{TemplateBinding SelectedDate,
+                                                     Mode=TwoWay}" />
+          </Popup>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:focus /template/ TextBox#PART_TextBox">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,180 @@
+<!--
+  // (c) Copyright Microsoft Corporation.
+  // This source is subject to the Microsoft Public License (Ms-PL).
+  // Please see https://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"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="{x:Type CalendarItem}"
+                TargetType="CalendarItem">
+    <Setter Property="CornerRadius" Value="1" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Margin="0,2,0,2"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+
+            <Border BorderBrush="{DynamicResource ThemeBackgroundBrush}"
+                    BorderThickness="2"
+                    CornerRadius="1">
+              <Grid>
+                <Grid.RowDefinitions>
+                  <RowDefinition Height="Auto" />
+                  <RowDefinition Height="*" />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                  <ColumnDefinition Width="Auto" />
+                  <ColumnDefinition Width="*" />
+                  <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+
+                <Grid.Styles>
+                  <Style Selector="Button.CalendarHeader">
+                    <Setter Property="Cursor" Value="Hand" />
+                    <Setter Property="Background" Value="Transparent" />
+                    <Setter Property="BorderThickness" Value="0" />
+                  </Style>
+                  <Style Selector="Button.CalendarHeader:pressed  /template/ ContentPresenter">
+                    <Setter Property="Background" Value="Transparent" />
+                  </Style>
+
+                  <Style Selector="Button.CalendarNavigation">
+                    <Setter Property="Height" Value="20" />
+                    <Setter Property="Width" Value="28" />
+                  </Style>
+                  <Style Selector="Button.CalendarNavigation > Path">
+                    <Setter Property="Fill" Value="{DynamicResource ThemeForegroundBrush}" />
+                  </Style>
+                  <Style Selector="Button.CalendarNavigation:pointerover > Path">
+                    <Setter Property="Fill" Value="{DynamicResource HighlightBrush}" />
+                  </Style>
+
+                  <Style Selector="Button#HeaderButton:pointerover">
+                    <Setter Property="Foreground" Value="{DynamicResource HighlightBrush}" />
+                  </Style>
+                </Grid.Styles>
+
+                <Rectangle Grid.ColumnSpan="3"
+                           Height="22"
+                           VerticalAlignment="Top"
+                           Fill="{TemplateBinding HeaderBackground}"
+                           Stretch="Fill" />
+
+                <Button Name="PART_PreviousButton"
+                        HorizontalAlignment="Left"
+                        Classes="CalendarHeader CalendarNavigation"
+                        IsVisible="False">
+
+                  <Path Width="6"
+                        Height="10"
+                        Margin="14,-6,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Data="M288.75,232.25 L288.75,240.625 L283,236.625 z"
+                        Stretch="Fill" />
+
+                </Button>
+
+                <Button Name="PART_HeaderButton"
+                        Grid.Column="1"
+                        Padding="1,5,1,9"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Classes="CalendarHeader"
+                        FontSize="10.5"
+                        FontWeight="Bold" />
+
+                <Button Name="PART_NextButton"
+                        Grid.Column="2"
+                        HorizontalAlignment="Right"
+                        Classes="CalendarHeader CalendarNavigation"
+                        IsVisible="False">
+
+                  <Path Width="6"
+                        Height="10"
+                        Margin="0,-6,14,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Data="M282.875,231.875 L282.875,240.375 L288.625,236 z"
+                        Stretch="Fill" />
+
+                </Button>
+
+                <Grid Name="PART_MonthView"
+                      Grid.Row="1"
+                      Grid.ColumnSpan="3"
+                      Margin="6,-1,6,6"
+                      IsVisible="False">
+                  <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                  </Grid.RowDefinitions>
+                  <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                  </Grid.ColumnDefinitions>
+                </Grid>
+
+                <Grid Name="PART_YearView"
+                      Grid.Row="1"
+                      Grid.ColumnSpan="3"
+                      Margin="6,-3,7,6"
+                      IsVisible="False">
+                  <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                  </Grid.RowDefinitions>
+                  <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                  </Grid.ColumnDefinitions>
+                </Grid>
+              </Grid>
+            </Border>
+          </Border>
+
+          <Rectangle Name="DisabledVisual"
+                     Margin="0,2,0,2"
+                     Fill="{DynamicResource ThemeControlLowBrush}"
+                     IsVisible="False"
+                     Opacity="{DynamicResource ThemeDisabledOpacity}"
+                     Stretch="Fill" />
+
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+    <Setter Property="DayTitleTemplate">
+      <Template x:DataType="x:String">
+        <TextBlock Margin="0,4,0,4"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   FontSize="9.5"
+                   FontWeight="Bold"
+                   Text="{Binding}" />
+      </Template>
+    </Setter>
+
+    <Style Selector="^:calendardisabled /template/ Rectangle#DisabledVisual">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,113 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <CaptionButtons Height="30" />
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="SimpleCaptionButton"
+                TargetType="Button">
+    <Setter Property="Background" Value="#ffe5e5e5" />
+    <!--  Reusing BorderBrush to define pressed background color, as it's not used otherwise  -->
+    <Setter Property="BorderBrush" Value="#ffcacaca" />
+    <Setter Property="Foreground" Value="Black" />
+    <Setter Property="Width" Value="45" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="Transparent"
+                          Content="{TemplateBinding Content}" />
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{TemplateBinding Background}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{TemplateBinding BorderBrush}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type CaptionButtons}"
+                TargetType="CaptionButtons">
+    <Setter Property="MaxHeight" Value="30" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <StackPanel VerticalAlignment="Stretch"
+                    Orientation="Horizontal"
+                    Spacing="2"
+                    TextElement.FontSize="10">
+          <Button x:Name="PART_FullScreenButton"
+                  IsVisible="False"
+                  Theme="{StaticResource SimpleCaptionButton}">
+            <Viewbox Width="11"
+                     Margin="2">
+              <Path Name="FullScreenButtonPath"
+                    Data="M2048 2048v-819h-205v469l-1493 -1493h469v-205h-819v819h205v-469l1493 1493h-469v205h819z"
+                    Fill="{TemplateBinding Foreground}"
+                    Stretch="UniformToFill" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_MinimizeButton"
+                  Theme="{StaticResource SimpleCaptionButton}"
+                  AutomationProperties.Name="Minimize">
+            <Viewbox Width="11"
+                     Margin="2">
+              <Path Data="M2048 1229v-205h-2048v205h2048z"
+                    Fill="{TemplateBinding Foreground}"
+                    Stretch="UniformToFill" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_RestoreButton"
+                  Theme="{StaticResource SimpleCaptionButton}"
+                  AutomationProperties.Name="Maximize">
+            <Viewbox Width="11"
+                     Margin="2">
+              <Viewbox.RenderTransform>
+                <RotateTransform Angle="-90" />
+              </Viewbox.RenderTransform>
+              <Path Name="RestoreButtonPath"
+                    Data="M2048 2048v-2048h-2048v2048h2048zM1843 1843h-1638v-1638h1638v1638z"
+                    Fill="{TemplateBinding Foreground}"
+                    Stretch="UniformToFill" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_CloseButton"
+                  Background="#ffe81123"
+                  BorderBrush="#fff1707a"
+                  Theme="{StaticResource SimpleCaptionButton}"
+                  AutomationProperties.Name="Close">
+            <Viewbox Width="11"
+                     Margin="2">
+              <Path Data="M1169 1024l879 -879l-145 -145l-879 879l-879 -879l-145 145l879 879l-879 879l145 145l879 -879l879 879l145 -145z"
+                    Fill="{TemplateBinding Foreground}"
+                    Stretch="UniformToFill" />
+            </Viewbox>
+          </Button>
+        </StackPanel>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:maximized /template/ Path#RestoreButtonPath">
+      <Setter Property="Data" Value="M2048 410h-410v-410h-1638v1638h410v410h1638v-1638zM1434 1434h-1229v-1229h1229v1229zM1843 1843h-1229v-205h1024v-1024h205v1229z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Path#FullScreenButtonPath">
+      <Setter Property="IsVisible" Value="True" />
+      <Setter Property="Data" Value="M205 1024h819v-819h-205v469l-674 -674l-145 145l674 674h-469v205zM1374 1229h469v-205h-819v819h205v-469l674 674l145 -145z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Button#PART_MinimizeButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^ /template/ Button#PART_RestoreButton:disabled">
+      <Setter Property="Opacity" Value="0.2"/>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -28,6 +28,14 @@
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ListBox.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ListBoxItem.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/NotificationCard.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/AdornerLayer.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/AutoCompleteBox.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ButtonSpinner.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Calendar.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/CalendarButton.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/CalendarDatePicker.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/CalendarItem.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/CaptionButtons.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>