Moved toolset name to the top

src/PixiEditor/Views/Main/Tools/Toolbar.axaml

@@ -13,7 +13,6 @@
             BorderThickness="{DynamicResource ThemeBorderThickness}"
             Cursor="Arrow"
             Padding="5"
-            Margin="10"
             Height="40"
             HorizontalAlignment="Left"
             Background="{DynamicResource ThemeBackgroundBrush1}">

src/PixiEditor/Views/Main/Tools/ToolsPicker.axaml

@@ -16,8 +16,13 @@
             Cursor="Arrow"
             Width="48"
             Background="{DynamicResource ThemeBackgroundBrush1}">
-        <StackPanel>
-            <Border Background="{DynamicResource ThemeBackgroundBrush2}">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="25" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            
+            <Border Grid.Row="0" Background="{DynamicResource ThemeBackgroundBrush2}">
                 <StackPanel Orientation="Horizontal">
                     <Button Classes="pixi-icon" Content="{DynamicResource icon-chevron-left}"
                             Command="{Binding SwitchToolSetCommand, ElementName=picker}">
@@ -31,17 +36,22 @@
                             <system:Boolean>True</system:Boolean>
                         </Button.CommandParameter>
                     </Button>
-                    <Border Padding="5" Margin="5 0" ClipToBounds="False" Background="{DynamicResource ThemeBackgroundBrush2}"
-                            CornerRadius="{DynamicResource ControlCornerRadius}">
-                       <TextBlock ui:Translator.Key="{Binding ElementName=picker, Path=ToolSet.Name}" VerticalAlignment="Center"/> 
-                    </Border>
+                    <!--<ComboBox ItemsSource="{Binding ElementName=picker, Path=ToolSets}"
+                              SelectedItem="{Binding ElementName=picker, Path=ToolSet}"
+                              SelectedIndex="0">
+                        <ComboBox.ItemTemplate>
+                            <DataTemplate>
+                                <TextBlock ui:Translator.Key="{Binding Name}" />
+                            </DataTemplate>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>-->
                 </StackPanel>
             </Border>
-            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+            <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                 <ItemsControl ItemsSource="{Binding ElementName=picker, Path=ToolSet.Tools}" Padding="0 2">
                     <ItemsControl.ItemTemplate>
                         <DataTemplate DataType="tools:ToolViewModel">
-                            <tools1:ToolPickerButton DataContext="{Binding}" 
+                            <tools1:ToolPickerButton DataContext="{Binding}"
                                                      IsSelected="{Binding IsActive}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
@@ -52,6 +62,6 @@
                     </ItemsControl.ItemsPanel>
                 </ItemsControl>
             </ScrollViewer>
-        </StackPanel>
+        </Grid>
     </Border>
 </UserControl>

src/PixiEditor/Views/Main/Tools/ToolsPicker.axaml.cs

@@ -1,4 +1,5 @@
-using System.Windows.Input;
+using System.Collections.ObjectModel;
+using System.Windows.Input;
 using Avalonia;
 using Avalonia.Controls;
 using PixiEditor.Models.Handlers;
@@ -7,6 +8,8 @@ namespace PixiEditor.Views.Main.Tools;
 
 internal partial class ToolsPicker : UserControl
 {
+    public static readonly StyledProperty<ObservableCollection<IToolSetHandler>> ToolSetsProperty = AvaloniaProperty.Register<ToolsPicker, ObservableCollection<IToolSetHandler>>("ToolSets");
+
     public static readonly StyledProperty<IToolSetHandler> ToolSetProperty =
         AvaloniaProperty.Register<ToolsPicker, IToolSetHandler>(
             nameof(ToolSet));
@@ -16,15 +19,21 @@ internal partial class ToolsPicker : UserControl
         set => SetValue(ToolSetProperty, value);
     }
 
+    public ObservableCollection<IToolSetHandler> ToolSets
+    {
+        get { return (ObservableCollection<IToolSetHandler>)GetValue(ToolSetsProperty); }
+        set { SetValue(ToolSetsProperty, value); }
+    }
+    
     public static readonly StyledProperty<ICommand> SwitchToolSetCommandProperty = AvaloniaProperty.Register<ToolsPicker, ICommand>(
         "SwitchToolSetCommand");
-
+    
     public ICommand SwitchToolSetCommand
     {
         get => GetValue(SwitchToolSetCommandProperty);
         set => SetValue(SwitchToolSetCommandProperty, value);
     }
-
+    
     public ToolsPicker()
     {
         InitializeComponent();

src/PixiEditor/Views/Main/ViewportControls/Viewport.axaml

@@ -130,7 +130,7 @@
                                           Classes="OverlayToggleButton pixi-icon"
                                           Content="{DynamicResource icon-gridlines}"
                                           IsChecked="{Binding GridLinesVisible, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}" />
-                            
+
                             <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
                                           ui:Translator.TooltipKey="TOGGLE_SNAPPING"
                                           Classes="OverlayToggleButton pixi-icon"
@@ -141,14 +141,33 @@
                 </Border>
             </overlays:TogglableFlyout.Child>
         </overlays:TogglableFlyout>
-        <tools:Toolbar ZIndex="100" VerticalAlignment="Top" DataContext="{Binding Source={viewModels:MainVM}, Path=.}" />
-
-        <tools:ToolsPicker ZIndex="100"
-                           Margin="10 55 0 0"
-                           HorizontalAlignment="Left"
-                           VerticalAlignment="Top"
-                           ToolSet="{Binding Source={viewModels:MainVM}, Path=ToolsSubViewModel.ActiveToolSet}"
-                           SwitchToolSetCommand="{xaml:Command Name=PixiEditor.Tools.SwitchToolSet, UseProvided=True}" />
+        <Grid ZIndex="100" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="45" />
+                <RowDefinition Height="35" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <tools:Toolbar
+                DataContext="{Binding Source={viewModels:MainVM}, Path=.}" />
+            <Border Grid.Row="1" ClipToBounds="False"
+                    HorizontalAlignment="Left"
+                    Padding="5 0"
+                    Margin="0 2.5 0 5"
+                    Height="25"
+                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                    BorderThickness="1"
+                    Background="{DynamicResource ThemeBackgroundBrush2}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}">
+                <TextBlock
+                    ui:Translator.Key="{Binding Source={viewModels:MainVM}, Path=ToolsSubViewModel.ActiveToolSet.Name}"
+                    VerticalAlignment="Center" />
+            </Border>
+            <tools:ToolsPicker Grid.Row="2" 
+                HorizontalAlignment="Left"
+                ToolSet="{Binding Source={viewModels:MainVM}, Path=ToolsSubViewModel.ActiveToolSet, Mode=TwoWay}"
+                               ToolSets="{Binding Source={viewModels:MainVM}, Path=ToolsSubViewModel.AllToolSets, Mode=OneWay}"
+                               SwitchToolSetCommand="{xaml:Command Name=PixiEditor.Tools.SwitchToolSet, UseProvided=True}" />
+        </Grid>
         <rendering:Scene
             Focusable="False" Name="scene"
             ZIndex="1"