Finished Shelf control

src/PixiEditor.AvaloniaUI/Views/Layers/ReferenceLayer.axaml

@@ -8,67 +8,19 @@
              xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
              xmlns:behaviours="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Behaviours"
              xmlns:cmds="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
+             xmlns:decorators="clr-namespace:PixiEditor.AvaloniaUI.Views.Decorators"
+             xmlns:controls="clr-namespace:PixiEditor.UI.Common.Controls;assembly=PixiEditor.UI.Common"
              mc:Ignorable="d"
              d:DesignHeight="60" d:DesignWidth="350" VerticalAlignment="Center" x:Name="uc">
-    <Border BorderBrush="{DynamicResource ThemeBorderMidBrush}" BorderThickness="0 2 0 0" MinWidth="60"
+    <Border BorderThickness="0 2 0 0" MinWidth="60"
             Focusable="True" DragDrop.AllowDrop="True">
         <Interaction.Behaviors>
             <behaviours:ClearFocusOnClickBehavior/>
         </Interaction.Behaviors>
         <DockPanel Background="Transparent">
-            <CheckBox Focusable="False" ZIndex="10" Name="visibilityCheckbox" Margin="0,0,5,0" Height="16" HorizontalAlignment="Right" DockPanel.Dock="Right">
-              <!--TODO: Recreate this animation-->
-                <!--<CheckBox.Triggers>
-                    <EventTrigger RoutedEvent="CheckBox.Checked">
-                        <BeginStoryboard>
-                            <Storyboard>
-                                <DoubleAnimation Storyboard.TargetName="mainDockPanel" Storyboard.TargetProperty="Height" From="40" To="0" Duration="0:0:0.15"/>
-                            </Storyboard>
-                        </BeginStoryboard>
-                    </EventTrigger>
-                    <EventTrigger RoutedEvent="CheckBox.Unchecked">
-                        <BeginStoryboard>
-                            <Storyboard>
-                                <DoubleAnimation Storyboard.TargetName="mainDockPanel" Storyboard.TargetProperty="Height" From="0" To="40" Duration="0:0:0.15"/>
-                            </Storyboard>
-                        </BeginStoryboard>
-                    </EventTrigger>
-
-                </CheckBox.Triggers>-->
-                <CheckBox.Template>
-                    <ControlTemplate TargetType="{x:Type CheckBox}">
-                        <StackPanel Orientation="Horizontal" Focusable="False">
-                            <Image Focusable="False" Width="14" Cursor="Hand" x:Name="checkboxImage" Source="/Images/ChevronDown.png">
-                                <Image.RenderTransform>
-                                    <RotateTransform Angle="0"/>
-                                </Image.RenderTransform>
-                            </Image>
-                            <ContentPresenter Focusable="False"/>
-                        </StackPanel>
-                        <!--<ControlTemplate.Triggers>
-                            <Trigger Property="IsChecked" Value="True">
-                                <Setter TargetName="checkboxImage" Property="RenderTransform">
-                                    <Setter.Value>
-                                        <RotateTransform Angle="180" CenterX="7" CenterY="4"/>
-                                    </Setter.Value>
-                                </Setter>
-                            </Trigger>
-                        </ControlTemplate.Triggers>-->
-                    </ControlTemplate>
-                    <!--<CheckBox.Styles>
-                        <Style Selector="CheckBox:checked #checkboxImage">
-                            <Setter Property="RenderTransform">
-                                <Setter.Value>
-                                    <RotateTransform Angle="180" CenterX="7" CenterY="4"/>
-                                </Setter.Value>
-                            </Setter>
-                        </Style>
-                    </CheckBox.Styles>-->
-                </CheckBox.Template>
-            </CheckBox>
-
+            <controls:Shelf>
             <Grid Height="40" x:Name="mainDockPanel">
-                <Grid 
+                <Grid
                     IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}"
                     Panel.ZIndex="5">
                     <Grid Cursor="Hand" IsVisible="{Binding ElementName=visibilityCheckbox, Path=!IsChecked}" Background="Transparent">
@@ -76,8 +28,8 @@
                             <Image Margin="5 0 5 0" Width="20" Source="/Images/Add-reference.png"
                                IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}"/>
 
-                            <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" 
-                                        Margin="0 0 5 0" Foreground="White" 
+                            <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}"
+                                        Margin="0 0 5 0" Foreground="White"
                                         FontSize="15" VerticalAlignment="Center" ui:Translator.Key="ADD_REFERENCE_LAYER"/>
                         </StackPanel>
                         <Interaction.Behaviors>
@@ -153,6 +105,7 @@
                                FontSize="15" VerticalAlignment="Center" ui:Translator.Key="REFERENCE"/>
                 </DockPanel>
             </Grid>
+                </controls:Shelf>
         </DockPanel>
     </Border>
 </UserControl>

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

@@ -62,6 +62,7 @@
             <SolidColorBrush x:Key="ThumbBrush" Color="{StaticResource ThumbColor}"/>
 
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
+            <CornerRadius x:Key="ControlCornerRadiusTop">5, 5, 0, 0</CornerRadius>
             <system:Double x:Key="ControlCornerRadiusValue">5</system:Double>
             <Thickness x:Key="ThemeBorderThickness">1</Thickness>
             <system:Double x:Key="ScrollBarThickness">12</system:Double>

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

@@ -0,0 +1,62 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:PixiEditor.UI.Common.Controls">
+    <ControlTheme TargetType="controls:Shelf" x:Key="{x:Type controls:Shelf}">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border CornerRadius="{DynamicResource ControlCornerRadiusTop}"
+                        Background="{DynamicResource ThemeBackgroundBrush1}">
+                    <Border.Transitions>
+                        <Transitions>
+                            <TransformOperationsTransition Easing="CubicEaseInOut" Property="RenderTransform" Duration="0:0:0.3"/>
+                        </Transitions>
+                    </Border.Transitions>
+                    <DockPanel LastChildFill="True">
+                        <CheckBox IsChecked="{TemplateBinding IsOpen, Mode=TwoWay}" Focusable="False" ZIndex="10" Name="PART_VisibilityCheckbox" Height="16" HorizontalAlignment="Right"
+                                  DockPanel.Dock="Right" VerticalAlignment="Top" Margin="0,5,5,0">
+                        <CheckBox.Transitions>
+                            <Transitions>
+                                <TransformOperationsTransition Easing="BackEaseInOut" Property="RenderTransform" Duration="0:0:0.3"/>
+                            </Transitions>
+                        </CheckBox.Transitions>
+                    <CheckBox.Template>
+                        <ControlTemplate TargetType="{x:Type CheckBox}">
+                            <StackPanel Orientation="Horizontal" Focusable="False">
+                                <Image Focusable="False" Width="14" Cursor="Hand" Name="PART_CheckboxImage" Source="avares://PixiEditor.UI.Common/Assets/ChevronDown.png"/>
+                                <ContentPresenter Focusable="False"/>
+                            </StackPanel>
+                        </ControlTemplate>
+                    </CheckBox.Template>
+                </CheckBox>
+                        <ContentPresenter Content="{TemplateBinding Content}">
+                            <ContentPresenter.Transitions>
+                                <Transitions>
+                                    <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.3"/>
+                                    <DoubleTransition Property="Opacity" Duration="0:0:0.3"/>
+                                </Transitions>
+                            </ContentPresenter.Transitions>
+                        </ContentPresenter>
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ CheckBox">
+            <Setter Property="RenderTransformOrigin" Value="7, 7"/>
+            <Setter Property="RenderTransform" Value="rotate(0deg)"/>
+        </Style>
+
+        <Style Selector="^:not(:isOpen) /template/ CheckBox">
+            <Setter Property="RenderTransform" Value="rotate(180deg)"/>
+        </Style>
+
+        <Style Selector="^:not(:isOpen) /template/ Border">
+            <Setter Property="RenderTransform" Value="translateY(20px)"/>
+        </Style>
+
+        <Style Selector="^:not(:isOpen) /template/ ContentPresenter">
+            <Setter Property="Opacity" Value="0"/>
+            <Setter Property="IsHitTestVisible" Value="False"/>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/Shelf.cs

@@ -0,0 +1,35 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Threading;
+
+namespace PixiEditor.UI.Common.Controls;
+
+[PseudoClasses(":isOpen")]
+public class Shelf : ContentControl
+{
+    public static readonly StyledProperty<bool> IsOpenProperty = AvaloniaProperty.Register<Shelf, bool>(
+        nameof(IsOpen), true);
+
+    public bool IsOpen
+    {
+        get => GetValue(IsOpenProperty);
+        set => SetValue(IsOpenProperty, value);
+    }
+
+    static Shelf()
+    {
+        IsOpenProperty.Changed.Subscribe(OnIsOpenChanged);
+    }
+
+    public Shelf()
+    {
+        PseudoClasses.Set(":isOpen", true);
+    }
+
+    private static void OnIsOpenChanged(AvaloniaPropertyChangedEventArgs e)
+    {
+        var shelf = (Shelf)e.Sender;
+        shelf.PseudoClasses.Set(":isOpen", (bool)e.NewValue);
+    }
+}

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

@@ -8,6 +8,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+      <AvaloniaResource Include="Assets\ChevronDown.png" />
       <AvaloniaResource Include="Assets\PixiEditorLogo.png" />
       <AvaloniaResource Include="Assets\Processing.gif" />
       <AvaloniaResource Include="Fonts\feather.ttf" />

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

@@ -69,6 +69,7 @@
                 <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"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Shelf.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>