[Proposal] DockLayout

[TheCodeTraveler]

DockLayout

• [x] Proposed
• [x] Prototype
• [x] Implementation
  • [x] iOS Support
  • [x] Android Support
  • [x] macOS Support
  • [x] Windows Support
• [x] Unit Tests
• [x] Sample
• [ ] Documentation: Not Started

Summary

The DockLayout makes it easy to dock content in all four directions (top, bottom, left and right). This makes it a great choice in many situations, where you want to divide the screen into specific areas. By default, the last element inside the DockLayout will automatically fill the rest of the space (center), unless this feature is specifically disabled.

The dock position on the child elements are set through an attached property.

Inspired by WPF DockPanel.

Detailed Design

DockLayout.shared.cs

public class DockLayout : Layout<View>
{
  public static readonly BindableProperty DockProperty;
  public static readonly BindableProperty LastChildFillProperty;
  
  public static Dock GetDock(BindableObject bindable);
  public static void SetDock(BindableObject bindable, Dock value);
  
  public Dock Dock { get; set; }
  public bool LastChildFill { get; set; }
}

Usage Syntax

XAML Usage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <StackLayout>

        <xct:DockLayout
          LastChildFill="False">
          <Button xct:DockLayout.Dock="Top" Text="Top" HeightRequest="50"/>
          <Button xct:DockLayout.Dock="Bottom" Text="Bottom" HeightRequest="50"/>
          <Button xct:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
          <Button xct:DockLayout.Dock="Left" Text="Left" WidthRequest="60"/>
          <Button xct:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
          <Button xct:DockLayout.Dock="Right" Text="Right" WidthRequest="80"/>
      </xct:DockLayout>

    </StackLayout>

</ContentPage>

C# Usage

class MyPage : ContentPage
{
  public MyPage()
  {
    Content = new DockLayout
    {
      Children =
      {
        new Button().Invoke(button => DockLayout.SetDock(button, Dock.Top),
        new Button().Invoke(button => DockLayout.SetDock(button, Dock.Bottom),
        new Button().Invoke(button => DockLayout.SetDock(button, Dock.Left),
        new Button().Invoke(button => DockLayout.SetDock(button, Dock.Right),
      }
    };
  }
}

[profix898]

@brminnick: PR in #635 (here is my comment)

[ghost]

Reopening Proposal.

Only Proposals moved to the Closed Project Column and Completed Project Column can be closed.