Avalonia: Port SplitView control from UWP

[maxkatz6]

Overview

From MS docs:
A split view control has an expandable/collapsible pane and a content area.
A split view's content area is always visible. The pane can expand and collapse or remain in an open state, and can present itself from either the left side or right side of an app window. The pane has four modes: Overlay, Inline, CompactOverlay, CompactInline. (Detailed in links below)

Possible usage

1. NavigationView/HamburgerMenu app templates, which is popular for UWP apps and mobile applications on iOS/Android (with some specific implementations)
   1.1. Simple HamburgerMenu implementation based on SplitView
   1.2. WinUI's NavigationView is built on top of SplitView (only for Left mode)
2. In-page Panes could contain additional features and applications components and should be hidden by default on narrow window and showed on wide window.
   2.1. Old Microsoft Edge right pane with favorites, settings and other

Proposed API

public class SplitView : Control
{
    public SplitView();

    [Content]
    public object Content { get; set; }
    public SplitViewPanePlacement PanePlacement { get; set; }
    public Brush PaneBackground { get; set; }
    public object Pane { get; set; }
    public double OpenPaneLength { get; set; }
    public bool IsPaneOpen { get; set; }
    public SplitViewDisplayMode DisplayMode { get; set; }
    public double CompactPaneLength { get; set; }
    public LightDismissOverlayMode LightDismissOverlayMode { get; set; }
    public SplitViewTemplateSettings TemplateSettings { get; }

    public static StyledProperty CompactPaneLengthProperty { get; }
    public static StyledProperty ContentProperty { get; }
    public static StyledProperty DisplayModeProperty { get; }
    public static StyledProperty IsPaneOpenProperty { get; }
    public static StyledProperty OpenPaneLengthProperty { get; }
    public static StyledProperty PaneBackgroundProperty { get; }
    public static StyledProperty PanePlacementProperty { get; }
    public static StyledProperty PaneProperty { get; }
    public static StyledProperty LightDismissOverlayModeProperty { get; }
    public static DirectProperty TemplateSettingsProperty { get; }

    public event EventHandler<EventArgs> PaneClosed;
    public event EventHandler<SplitViewPaneClosingEventArgs> PaneClosing;
    public event EventHandler<EventArgs> PaneOpened;
    public event EventHandler<EventArgs> PaneOpening;
}

public sealed class SplitViewPaneClosingEventArgs
{
    public bool Cancel { get; set; }
}

// Provides calculated values that can be referenced as **TemplatedParent** sources when defining templates for a SplitView.
public sealed class SplitViewTemplateSettings : AvaloniaObject
{
    public GridLength CompactPaneGridLength { get; }
    public double NegativeOpenPaneLength { get; }
    public double NegativeOpenPaneLengthMinusCompactLength { get; }
    public GridLength OpenPaneGridLength { get; }
    public double OpenPaneLength { get; }
    public double OpenPaneLengthMinusCompactLength { get; }
}

public enum SplitViewDisplayMode
{
    Overlay = 0,
    Inline = 1,
    CompactOverlay = 2,
    CompactInline = 3
}

public enum SplitViewPanePlacement
{
    Left = 0,
    Right = 1
}

//     Defines constants that specify whether the area outside of a *light-dismiss* UI is darkened.
public enum LightDismissOverlayMode
{
    Auto = 0,
    On = 1,
    Off = 2
}

Open questions:

1. Should this control be shipped with Avalonia or moved to separated package?
2. There some possible differences in API with UWP's control. For instance, "object" for Content and Pane instead of UIElement and EventHandler instead of TypedEventHandler. But I am not sure, if it is real issue.
3. In UWP LightDismissOverlayMode is also used for Flyout, ComboBox, ContentDialog. In future Avalonia could also support it for another controls.

Related links

1. Could be done as part of https://github.com/AvaloniaUI/Avalonia/issues/3950 and https://github.com/AvaloniaUI/Avalonia/issues/2521
2. https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/split-view
3. https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.SplitView?view=winrt-18362
4. https://github.com/Kinnara/ModernWpf/tree/master/ModernWpf.Controls/SplitView
5. https://github.com/unoplatform/uno/tree/master/src/Uno.UI/UI/Xaml/Controls/SplitView
6. https://github.com/dotMorten/UniversalWPF/tree/master/src/UniversalWPF.SplitView

Gif example

Gif source: https://nicksnettravels.builttoroam.com/uwp-splitview/

[grokys]

I agree that this control would be useful, however I'm hesitant to accept any more controls into Avalonia itself because they become a maintenance burden on the core developers and we don't have enough time as it is.

Personally, I think the best way to do this would be to port it, hosted by the maintainer in their own repository, and add the control to https://github.com/AvaloniaCommunity/awesome-avalonia for visibility.

[amwx]

I'm working on creating a library for Fluent Design/WinUI inspired things for use with Avalonia, sort of inspired by #3950, and I've ported the SplitView control. This is all a work in progress, but the SplitView is finished and works.
https://github.com/amwx/FluentAvalonia

[maxkatz6]

Done with https://github.com/AvaloniaUI/Avalonia/pull/4174