Horizontal Autocollapse

<Grid
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:zones="clr-namespace:LostTech.Stack.Zones;assembly=Stack"
    mc:Ignorable="d"
    zones:Layout.Version="2"
    Width="1024" Height="576"
    d:DesignWidth="1024"
    d:DesignHeight="576"
>
  <!-- ===================================================================== -->
  <!-- ! This file is overwritten after every update. Please, modify a copy! -->
  <!-- ===================================================================== -->
  <Grid.Resources>
    <ResourceDictionary>
      <sys:Double x:Key="GripSize">80</sys:Double>
      <sys:Double x:Key="GripFontSize">40</sys:Double>
    </ResourceDictionary>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition>
      <ColumnDefinition.Style>
        <Style>
          <Setter Property="ColumnDefinition.Width" Value="1*"/>
          <Style.Triggers>
            <DataTrigger Binding="{Binding Items.Count, ElementName=SideTabs}" Value="0">
              <Setter Property="ColumnDefinition.Width" Value="0"/>
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </ColumnDefinition.Style>
    </ColumnDefinition>

    <ColumnDefinition Width="3*"/>
  </Grid.ColumnDefinitions>
  <Grid Grid.Column="1">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <zones:WindowTabs>
      <zones:WindowTabs.ItemsSource>
        <CompositeCollection>
          <CollectionContainer Collection="{Binding Windows, Source={x:Reference Main}}"/>
          <CollectionContainer Collection="{Binding Windows, Source={x:Reference LeftMain}}"/>
          <CollectionContainer Collection="{Binding Windows, Source={x:Reference RightMain}}"/>
          <CollectionContainer Collection="{Binding Windows, Source={x:Reference TopMain}}"/>
          <CollectionContainer Collection="{Binding Windows, Source={x:Reference BottomMain}}"/>
        </CompositeCollection>
      </zones:WindowTabs.ItemsSource>
    </zones:WindowTabs>

    <zones:Zone x:Name="Main" Grid.Row="1"/>

    <Grid Grid.Row="1">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>

      <zones:Zone x:Name="LeftMain" Grid.Column="0" Grid.RowSpan="2"/>
      <zones:Zone x:Name="RightMain" Grid.Column="1" Grid.RowSpan="2"/>
      <zones:Zone x:Name="TopMain" Grid.Row="0" Grid.ColumnSpan="2"/>
      <zones:Zone x:Name="BottomMain" Grid.Row="1" Grid.ColumnSpan="2"/>

      <zones:Zone Grid.Column="0" Grid.Row="0"/>
      <zones:Zone Grid.Column="1" Grid.Row="0"/>
      <zones:Zone Grid.Column="0" Grid.Row="1"/>
      <zones:Zone Grid.Column="1" Grid.Row="1"/>

      <zones:Zone Grid.Column="0" Grid.RowSpan="2"
                    Margin="{Binding Source={StaticResource GripSize}, Converter={StaticResource ThicknessConverter}}"
                    Target="{Binding ElementName=LeftMain}"/>
      <zones:Zone Grid.Column="1" Grid.RowSpan="2"
                    Margin="{Binding Source={StaticResource GripSize}, Converter={StaticResource ThicknessConverter}}"
                    Target="{Binding ElementName=RightMain}"/>

      <Border Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Width="{StaticResource GripSize}" Background="#44F"
                zones:Layout.IsHint="True">
        <!-- Find more symbols from Segoe UI Symbol in Character Map app -->
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                   FontFamily="Segoe UI Symbol" Foreground="White" Text="" FontSize="{StaticResource GripFontSize}"/>
      </Border>
      <zones:Zone Grid.Row="0" Grid.ColumnSpan="2"
                    HorizontalAlignment="Center" Width="{StaticResource GripSize}"
                    Target="{Binding ElementName=TopMain}"/>
      <Border Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" Width="{StaticResource GripSize}" Background="#44F"
                zones:Layout.IsHint="True">
        <!-- Find more symbols from Segoe UI Symbol in Character Map app -->
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                   FontFamily="Segoe UI Symbol" Foreground="White" Text="" FontSize="{StaticResource GripFontSize}"/>
      </Border>
      <zones:Zone Grid.Row="1" Grid.ColumnSpan="2"
                    HorizontalAlignment="Center" Width="{StaticResource GripSize}"
                    Target="{Binding ElementName=BottomMain}"/>
    </Grid>

    <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"
            zones:Layout.IsHint="True"
            Width="160" Height="160" Background="#44F">
      <!-- Find more symbols from Segoe UI Symbol in Character Map app -->
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                   FontFamily="Segoe UI Symbol" Foreground="White" Text="" FontSize="80"/>
    </Border>
    <zones:Zone Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="160" Height="160"
                Target="{Binding ElementName=Main}"/>
  </Grid>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <zones:WindowTabs x:Name="SideTabs">
      <zones:WindowTabs.ItemsSource>
        <CompositeCollection>
          <zones:ZoneElement Content="{Binding ViewModel, Source={x:Reference SideStack}}"/>
          <CollectionContainer Collection="{Binding Windows, Source={x:Reference SideSingle}}"/>
        </CompositeCollection>
      </zones:WindowTabs.ItemsSource>
    </zones:WindowTabs>

    <Grid Grid.Row="1">
      <zones:Zone x:Name="SideSingle" Id="Side" />
      <zones:Zone x:Name="SideStack" Id="Side Stack">
        <zones:Zone.Layout>
          <ItemsPanelTemplate>
            <UniformGrid Columns="1"/>
          </ItemsPanelTemplate>
        </zones:Zone.Layout>
      </zones:Zone>

      <!-- Canvas is visible even though its container is collapsed -->
      <Canvas x:Name="DropOverlay"
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
              zones:Layout.IsHint="True">
        <zones:Zone Target="{Binding ElementName=SideStack}" MinWidth="160"
                    Width="{Binding ActualWidth, ElementName=DropOverlay}"
                    Height="{Binding ActualHeight, ElementName=DropOverlay}"/>

        <Grid MinWidth="160"
              Width="{Binding ActualWidth, ElementName=DropOverlay}"
              Height="{Binding ActualHeight, ElementName=DropOverlay}"
              HorizontalAlignment="Stretch">
          <Border Height="160" Width="160" Background="#44F">
            <!-- Find more symbols from Segoe UI Symbol in Character Map app -->
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
                       FontFamily="Segoe UI Symbol" Foreground="White" Text="" FontSize="80"/>
          </Border>

          <zones:Zone HorizontalAlignment="Center" VerticalAlignment="Center"
                      Height="160" Width="160"
                      Target="{Binding ElementName=SideSingle}"/>
        </Grid>
      </Canvas>
    </Grid>
  </Grid>
</Grid>