More controls

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

@@ -67,7 +67,7 @@
             <ComboBoxItem Content="ComboBoxItem 3"/>
         </ComboBox>
 
-        <ListBox SelectedIndex="0">
+        <ListBox SelectedIndex="0" Margin="0 10">
             <ListBoxItem Content="ListBoxItem 1"/>
             <ListBoxItem Content="ListBoxItem 2"/>
             <ListBoxItem Content="ListBoxItem 3"/>
@@ -81,7 +81,7 @@
                      Minimum="25" Maximum="75" />
         <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
 
-        <Border Background="Green">
+        <Border Background="{DynamicResource ThemeBackgroundBrush1}">
             <Border.ContextMenu>
                 <ContextMenu>
                     <MenuItem Header="Hello"/>
@@ -115,6 +115,7 @@
                 </MenuItem>
             </MenuItem>
         </Menu>
-    </WrapPanel>
 
+        <NotificationCard Content="Notification Card"/>
+    </WrapPanel>
 </UserControl>

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

@@ -6,6 +6,7 @@
         <ResourceDictionary x:Key="Dark">
             <Color x:Key="ThemeBackgroundColor">#252525</Color> <!--This is the lowest elevation color-->
             <Color x:Key="ThemeBackgroundColor1">#2D2D30</Color>
+            <Color x:Key="ThemeBackgroundColor2">#303030</Color>
             <Color x:Key="AccentColor">#B00022</Color>
 
             <Color x:Key="ThemeForegroundColor">#FFFFFF</Color>
@@ -20,10 +21,13 @@
             <Color x:Key="ThemeBorderMidColor">#3F3F46</Color>
             <Color x:Key="ThemeBorderHighColor">#4F4F4F</Color>
 
+            <Color x:Key="NotificationCardBackgroundColor">#303030</Color>
+
             <system:Double x:Key="ThemeDisabledOpacity">0.4</system:Double>
 
             <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{StaticResource ThemeBackgroundColor}" />
             <SolidColorBrush x:Key="ThemeBackgroundBrush1" Color="{StaticResource ThemeBackgroundColor1}" />
+            <SolidColorBrush x:Key="ThemeBackgroundBrush2" Color="{StaticResource ThemeBackgroundColor2}" />
             <SolidColorBrush x:Key="ThemeAccentBrush" Color="{StaticResource AccentColor}" />
 
             <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{StaticResource ThemeForegroundColor}" />
@@ -38,6 +42,8 @@
             <SolidColorBrush x:Key="ThemeBorderMidBrush" Color="{StaticResource ThemeBorderMidColor}" />
             <SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{StaticResource ThemeBorderHighColor}" />
 
+            <SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="{StaticResource NotificationCardBackgroundColor}" />
+
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
             <Thickness x:Key="ThemeBorderThickness">1</Thickness>
             <Thickness x:Key="ScrollBarThickness">5</Thickness>

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

@@ -6,7 +6,7 @@
     <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
-    <Setter Property="CornerRadius" Value="{DynamicResource ThemeCornerRadius}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Padding" Value="4" />

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

@@ -21,19 +21,19 @@
       </ControlTemplate>
     </Setter>
     <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightColor}" />
     </Style>
     <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
     </Style>
     <Style Selector="^:selected:focus /template/ ContentPresenter#PART_ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
     </Style>
     <Style Selector="^:selected:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
     </Style>
     <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
     </Style>
   </ControlTheme>
 </ResourceDictionary>

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

@@ -0,0 +1,38 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ListBox}"
+                TargetType="ListBox">
+    <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="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="border"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <ScrollViewer Name="PART_ScrollViewer"
+                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                        BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}"
+                        Background="{TemplateBinding Background}"
+                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
+                        VerticalSnapPointsType="{TemplateBinding (ScrollViewer.VerticalSnapPointsType)}"
+                        HorizontalSnapPointsType="{TemplateBinding (ScrollViewer.HorizontalSnapPointsType)}">
+            <ItemsPresenter Name="PART_ItemsPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+          </ScrollViewer>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:disabled /template/ Border#border">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -0,0 +1,45 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ListBoxItem}"
+                TargetType="ListBoxItem">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="Transparent" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="2 1" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+          <ContentPresenter Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            Background="{TemplateBinding Background}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            CornerRadius="{TemplateBinding CornerRadius}" />
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightColor}" />
+    </Style>
+
+    <Style Selector="^:selected /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+    </Style>
+
+    <Style Selector="^:selected:focus /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+    </Style>
+
+    <Style Selector="^:selected:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+    </Style>
+
+    <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -5,8 +5,9 @@
   <ControlTheme x:Key="TopLevelMenuItem"
                 TargetType="MenuItem">
     <Setter Property="Background" Value="Transparent" />
-    <Setter Property="Padding" Value="6 0" />
+    <Setter Property="Padding" Value="7 4" />
     <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="root"
@@ -32,6 +33,7 @@
                    OverlayInputPassThroughElement="{Binding $parent[Menu]}">
               <Border Background="{DynamicResource ThemeBackgroundBrush}"
                       BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                      CornerRadius="{DynamicResource ControlCornerRadius}"
                       BorderThickness="{TemplateBinding BorderThickness}">
                 <ScrollViewer>
                   <ItemsPresenter Name="PART_ItemsPresenter"

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

@@ -0,0 +1,100 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+  <ControlTheme x:Key="{x:Type NotificationCard}"
+                TargetType="NotificationCard">
+    <Setter Property="Background" Value="{DynamicResource NotificationCardBackgroundBrush}" />
+    <Setter Property="UseLayoutRounding" Value="True" />
+    <Setter Property="Width" Value="350" />
+    <Setter Property="FontSize" Value="14" />
+    <Setter Property="Foreground" Value="White" />
+    <Setter Property="RenderTransformOrigin" Value="50%,75%" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <LayoutTransformControl Name="PART_LayoutTransformControl"
+                                UseRenderTransform="True">
+          <Border Margin="8,8,0,0"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <ContentControl Name="PART_Content"
+                            MinHeight="150"
+                            Content="{TemplateBinding Content}" />
+          </Border>
+        </LayoutTransformControl>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^">
+      <Style.Animations>
+        <Animation Easing="QuadraticEaseIn"
+                   FillMode="Forward"
+                   Duration="0:0:0.45">
+          <KeyFrame Cue="0%">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="TranslateTransform.Y" Value="20" />
+            <Setter Property="ScaleTransform.ScaleX" Value="0.85" />
+            <Setter Property="ScaleTransform.ScaleY" Value="0.85" />
+          </KeyFrame>
+          <KeyFrame Cue="30%">
+            <Setter Property="TranslateTransform.Y" Value="-20" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="Opacity" Value="1" />
+            <Setter Property="TranslateTransform.Y" Value="0" />
+            <Setter Property="ScaleTransform.ScaleX" Value="1" />
+            <Setter Property="ScaleTransform.ScaleY" Value="1" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
+      <Setter Property="RenderTransformOrigin" Value="50%,0%" />
+      <Style.Animations>
+        <Animation Easing="QuadraticEaseOut"
+                   FillMode="Forward"
+                   Duration="0:0:0.75">
+          <KeyFrame Cue="0%">
+            <Setter Property="TranslateTransform.X" Value="0" />
+            <Setter Property="ScaleTransform.ScaleY" Value="1" />
+          </KeyFrame>
+          <KeyFrame Cue="70%">
+            <Setter Property="TranslateTransform.X" Value="800" />
+            <Setter Property="ScaleTransform.ScaleY" Value="1" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="ScaleTransform.ScaleY" Value="0" />
+            <Setter Property="TranslateTransform.X" Value="800" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <Style Selector="^[IsClosing=true]">
+      <Style.Animations>
+        <Animation Easing="QuadraticEaseOut"
+                   FillMode="Forward"
+                   Duration="0:0:1.25">
+          <KeyFrame Cue="100%">
+            <Setter Property="IsClosed" Value="True" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <Style Selector="^:information">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardInformationBackgroundBrush}" />
+    </Style>
+    <Style Selector="^:success">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}" />
+    </Style>
+    <Style Selector="^:warning">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardWarningBackgroundBrush}" />
+    </Style>
+    <Style Selector="^:error">
+      <Setter Property="Background" Value="{DynamicResource NotificationCardErrorBackgroundBrush}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

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

@@ -25,6 +25,9 @@
                 <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"/>
+                <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"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>