Fixed ToolTapStrip with StrechableStackPanel

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

@@ -3,10 +3,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="clr-namespace:PixiEditor.Avalonia.ViewModels"
-             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
-             xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
              xmlns:main="clr-namespace:PixiEditor.Avalonia.Views.Main"
-             xmlns:controls="clr-namespace:Dock.Avalonia.Controls;assembly=Dock.Avalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="PixiEditor.Avalonia.Views.MainView"
              x:DataType="vm:MainViewModel" Background="{DynamicResource ThemeBackgroundBrush}">
@@ -18,34 +15,22 @@
       </DockControl.Factory>
 
       <RootDock x:Name="Root" Id="Root" IsCollapsable="False" DefaultDockable="{Binding #MainLayout}">
-
-        <!-- Windows -->
-
-        <RootDock.Windows>
-          <!--<DockWindow x:Name="DockWindow" Id="DockWindow" X="281" Y="233" Width="250" Height="400" Topmost="True">
-            <RootDock ActiveDockable="{Binding #ToolDock}" Window="{Binding #DockWindow}">
-              <ToolDock x:Name="ToolDock">
-                <Tool x:Name="ToolWindow" Id="ToolWindow" Title="Tool Window" x:DataType="Tool">
-                  <TextBlock Text="{Binding Title}"/>
-                </Tool>
+          <DockDock x:Name="MainLayout" Id="MainLayout" >
+              <!-- Left Pane -->
+              <ToolDock Dock="Left" CanFloat="False" GripMode="Hidden">
+                    <Tool CanClose="False" CanPin="False" CanFloat="False">
+                        <StackPanel Orientation="Vertical" Spacing="5" Width="40">
+                            <Border Width="40" Height="40" Background="White"/>
+                            <Border Width="40" Height="40" Background="White"/>
+                            <Border Width="40" Height="40" Background="White"/>
+                            <Border Width="40" Height="40" Background="White"/>
+                        </StackPanel>
+                    </Tool>
               </ToolDock>
-            </RootDock>
-          </DockWindow>-->
-        </RootDock.Windows>
-
-        <ProportionalDock x:Name="MainLayout" Id="MainLayout" Orientation="Horizontal">
-
-          <!-- Left Pane -->
 
-          <ToolDock x:Name="LeftPane" Id="LeftPane" Proportion="0.25" Alignment="Left">
-            <Tool x:Name="SolutionExplorer" Id="SolutionExplorer" Title="Solution Explorer" x:DataType="Tool">
-              <TextBlock Text="{Binding Title}"/>
-            </Tool>
-          </ToolDock>
 
-          <ProportionalDockSplitter x:Name="LeftSplitter" Id="LeftSplitter" />
 
-          <!-- Top Pane -->
+              <!-- Top Pane -->
 
           <ProportionalDock x:Name="TopPane" Id="TopPane" Orientation="Vertical">
 
@@ -66,41 +51,49 @@
                     </StackPanel>
                   </DocumentTemplate>
                 </DocumentDock.DocumentTemplate>
-                <Document x:Name="Document1" Id="Document1" Title="Program.cs" x:DataType="Document">
+                <Document x:Name="Document1" Id="Document1" Title="SomeDrawing.pixi" x:DataType="Document">
                   <TextBlock Text="{Binding Title}"/>
                 </Document>
-                <Document x:Name="Document2" Id="Document2" Title="App.axaml" x:DataType="Document">
+                <Document x:Name="Document2" Id="Document2" Title="SomePng.png" x:DataType="Document">
                   <TextBlock Text="{Binding Title}"/>
                 </Document>
               </DocumentDock>
 
               <ProportionalDockSplitter x:Name="RightSplitter" Id="RightSplitter" />
 
-              <!-- Properties Pane -->
-              <ToolDock x:Name="PropertiesPane" Id="PropertiesPane" Proportion="0.3" Alignment="Right">
-                <Tool x:Name="Properties" Id="Properties" Title="Properties" x:DataType="Tool">
+              <ProportionalDock Orientation="Vertical"  x:Name="RightVerticalPane" Id="RightVerticalPane" Proportion="0.15">
+
+                  <!-- Properties Pane -->
+              <ToolDock x:Name="ColorsPane" Id="ColorsPane" Alignment="Right">
+                <Tool x:Name="ColorPicker" Id="ColorPicker" CanClose="False" CanPin="False" Title="Color Picker" x:DataType="Tool">
                   <TextBlock Text="{Binding Title}"/>
                 </Tool>
+                  <Tool x:Name="ColorSliders" Id="ColorSliders" CanClose="False" CanPin="False" Title="Color Sliders" x:DataType="Tool">
+                      <TextBlock Text="{Binding Title}"/>
+                  </Tool>
+                  <Tool x:Name="Palette" Id="Palette" Title="Palette" CanClose="False" CanPin="False" x:DataType="Tool">
+                      <TextBlock Text="{Binding Title}"/>
+                  </Tool>
+                  <Tool x:Name="Swatches" Id="Swatches" Title="Swatches" CanClose="False" CanPin="False" x:DataType="Tool">
+                      <TextBlock Text="{Binding Title}"/>
+                  </Tool>
               </ToolDock>
-
+              <ToolDock x:Name="LayersPane" Id="LayersPane" Alignment="Right">
+                  <Tool CanClose="False" CanPin="False" x:Name="Layers" Id="Layers" Title="Layers" x:DataType="Tool">
+                      <TextBlock Text="{Binding Title}"/>
+                  </Tool>
+              </ToolDock>
+                  <ToolDock x:Name="NavigationPane" Id="NavigationPane" Alignment="Right">
+                      <Tool CanClose="False" CanPin="False" x:Name="Navigation" Id="Navigation" Title="Navigation" x:DataType="Tool">
+                          <TextBlock Text="{Binding Title}"/>
+                      </Tool>
+                  </ToolDock>
+              </ProportionalDock>
             </ProportionalDock>
 
-            <ProportionalDockSplitter x:Name="BottomSplitter" Id="BottomSplitter" />
-
-            <!-- Bottom Pane -->
-
-            <ToolDock x:Name="BottomPane" Id="BottomPane" Proportion="0.3" Alignment="Bottom" ActiveDockable="Output">
-              <Tool x:Name="ErrorList" Id="ErrorList" Title="Error List" x:DataType="Tool">
-                <TextBlock Text="{Binding Title}"/>
-              </Tool>
-              <Tool x:Name="Output" Id="Output" Title="Output" x:DataType="Tool">
-                <TextBlock Text="{Binding Title}"/>
-              </Tool>
-            </ToolDock>
-
           </ProportionalDock>
 
-        </ProportionalDock>
+        </DockDock>
       </RootDock>
 
     </DockControl>

src/PixiEditor.UI.Common/Controls/Dock/Controls/StretchableStackPanel.cs

@@ -0,0 +1,25 @@
+using Avalonia;
+using Avalonia.Controls;
+
+namespace PixiEditor.UI.Common.Controls.Dock.Controls;
+
+/// <summary>
+///     StretchableStackPanel resizes all children equally to fit the width of the panel if panel is smaller than desirable children size.
+/// </summary>
+public class StretchableStackPanel : StackPanel
+{
+    protected override Size MeasureOverride(Size availableSize)
+    {
+        var size = base.MeasureOverride(availableSize);
+        if (size.Width > availableSize.Width)
+        {
+            var width = availableSize.Width / Children.Count;
+            foreach (var child in Children)
+            {
+                child.Measure(new Size(width, availableSize.Height));
+            }
+        }
+
+        return size;
+    }
+}

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolTabStrip.axaml

@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:PixiEditor.UI.Common.Controls.Dock.Controls">
   <Design.PreviewWith>
     <Border Padding="20">
       <ToolTabStrip>
@@ -37,7 +38,7 @@
 
     <Setter Property="ItemsPanel">
       <ItemsPanelTemplate>
-        <StackPanel Orientation="Horizontal" ClipToBounds="False" />
+        <controls:StretchableStackPanel Orientation="Horizontal" ClipToBounds="False" />
       </ItemsPanelTemplate>
     </Setter>
 

src/PixiEditor.UI.Common/Controls/Dock/Controls/ToolTabStripItem.axaml

@@ -32,12 +32,12 @@
   
   <ControlTheme x:Key="{x:Type ToolTabStripItem}" TargetType="ToolTabStripItem">
 
-    <Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
-    <Setter Property="FontWeight" Value="Normal" />
+      <Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
+      <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="MinHeight" Value="0" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Background" Value="Transparent" />
-    <Setter Property="Foreground" Value="{DynamicResource DockThemeForegroundBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundSecondaryBrush}" />
     <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
     <Setter Property="BorderThickness" Value="0 1 0 0" />
     <Setter Property="Margin" Value="0" />
@@ -62,7 +62,7 @@
                           DockProperties.IsDragArea="True"
                           DockProperties.IsDropArea="True">
                 <Panel Margin="2">
-                  <ContentPresenter ContentTemplate="{Binding $parent[ToolControl].HeaderTemplate}"
+                  <ContentPresenter x:Name="child" TextTrimming="CharacterEllipsis" ContentTemplate="{Binding $parent[ToolControl].HeaderTemplate}"
                                     Content="{Binding}" />
                 </Panel>
               </StackPanel>
@@ -77,7 +77,7 @@
 
     <Style Selector="^:selected">
       <Setter Property="Background" Value="{DynamicResource DockThemeBackgroundBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource DockApplicationAccentBrushMed}" />
+      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
       <Setter Property="BorderBrush" Value="{DynamicResource DockThemeBorderLowBrush}" />
       <Setter Property="BorderThickness" Value="1 0 1 1" />
       <Setter Property="Margin" Value="0 0 0 0" />