ResizablePanelGroup

Panels side by side with resize handles between them, as uikit:ResizablePanelGroup.

<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Width="560" Height="240" HorizontalAlignment="Left">
  <uikit:ResizablePanelGroup>
    <uikit:ResizablePanel Size="150" MinSize="120" MaxSize="240">
      <TextBlock Text="Explorer (120..240)" Margin="12" />
    </uikit:ResizablePanel>
    <uikit:ResizablePanel>
      <uikit:ResizablePanelGroup Orientation="Vertical">
        <uikit:ResizablePanel>
          <TextBlock Text="Editor" Margin="12" />
        </uikit:ResizablePanel>
        <uikit:ResizablePanel Size="80" MinSize="60">
          <TextBlock Text="Terminal" Margin="12" />
        </uikit:ResizablePanel>
      </uikit:ResizablePanelGroup>
    </uikit:ResizablePanel>
    <uikit:ResizablePanel Size="120">
      <TextBlock Text="Outline" Margin="12" />
    </uikit:ResizablePanel>
  </uikit:ResizablePanelGroup>
</Border>

#Usage

uikit:ResizablePanelGroup lays its panels side by side (Orientation="Vertical" stacks them) with the handle of the Resizable between each two visible panels, and does the resizing itself. A uikit:ResizablePanel starts at its Size (panels without one share what is left) and stays between MinSize (100 by default) and MaxSize. Dragging a handle resizes the panel before it to the pointer: growing it takes room from the panels after it in turn, each down to its minimum, and shrinking it below its minimum shrinks the panels before it. A new group length scales the panels in proportion; a hidden panel (IsVisible="False") gives its room to the others and gets it back when shown; adding or removing a panel redistributes in proportion. ResizePanel(index, size) resizes by the same rules, and Resized reports the lengths (Sizes) after a drag or a ResizePanel. Groups nest: put a group in a panel.

The demo has a left panel limited to 120..240, a vertical group in the middle and a right panel.

#Examples

Hiding the left panel, ResizePanel, and the sizes Resized reports.

<StackPanel Spacing="8" Width="560" HorizontalAlignment="Left">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <ToggleButton Classes="outline" Content="Show left" IsChecked="{Binding #Left.IsVisible}" />
    <Button Classes="outline small" Content="Left to 100" Tag="100" Click="OnResizeLeft" />
    <Button Classes="outline small" Content="Left to 200" Tag="200" Click="OnResizeLeft" />
    <TextBlock Name="Sizes" VerticalAlignment="Center" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </WrapPanel>
  <Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="5.5" Height="160">
    <uikit:ResizablePanelGroup Name="Group" Resized="OnResized">
      <uikit:ResizablePanel Name="Left" Size="200">
        <TextBlock Text="Left" Margin="12" />
      </uikit:ResizablePanel>
      <uikit:ResizablePanel>
        <TextBlock Text="Center" Margin="12" />
      </uikit:ResizablePanel>
      <uikit:ResizablePanel Size="160">
        <TextBlock Text="Right" Margin="12" />
      </uikit:ResizablePanel>
    </uikit:ResizablePanelGroup>
  </Border>
</StackPanel>