Extend SplitView

[CodeDevAM]

I would like to propose that a SplitView could also expand from top to bottom.

On top of that I would Like to propose that the size of the pane could be given as a proportion of the parent size.

Last but not least it would be great of the User could change the size of the expanded pane with some kind of GridSplitter.

[CodeDevAM]

I would like to provide an example. I would love to see if something comparable would find its way to Avalonia.

TopViewExample.2024-02-02.12-01-38.mp4

TopViewExample.zip

[maxkatz6]

@CodeDevAM it should be possible to improve SplitView, but as you can see, this layout can be implemented relatively easy even without SplitView.

The problem with SplitView is that it can work in overlay mode, on top of main content. And simple Grid + GridSplitter combination won't work well. Instead, there should be a Thumb and manually pointer events handling, adjusting PaneWidth.

[CodeDevAM]

Just for fun:

The overlay feature is realativly easy to add:
https://github.com/AvaloniaUI/Avalonia/assets/125025268/82e45a8d-54c9-458c-9a5f-3fc0956e1c0e

TopViewExample.zip

In the end I don't care how it's working under the hud. But having a pane that extends from top to bottom would be nice. It's a very cool feature for some options that you want to hide most of the time and display them only if needed. It could also be an alternative to an Expander.

[timunie]

API wise I suggest these new StyledProperties:

• PanePosition (enum: Left, Right, Top, Bottom)
• CanUserResizeOpenPane (bool, default: false)
• OpenPaneMinLength (double, default: NaN, in Style: 10% from parent bounds)
• OpenPaneMaxLength (double, default: NaN, in Style: 75% from parent bounds)

Add new (not required) TemplatePart: PART_OpenPaneResizeThumb (is only visisble if Pane is open && CanUserResizeOpenPane)

[CodeDevAM]

Will this become a modification of SplitView control or would this become a new control?

Maybe this could be considered as a replacement for Expander as well.

How can I support?

[timunie]

it should be improvement to current SplitView, I don't see it breaking current impl.

[CodeDevAM]

I need to say I am not deep into the concepts and the idea how Avalonia is implemented under the hood. But I want to learn. Is there a documentation about this?

I has taken a look into https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/SplitView/SplitView.cs

I did notice that setting the position of the pane basically results in adding a pseudo class to the SplitView. But I don't know where to find the actual template or layout that belongs to these pseudo classes.

[timunie]

I did notice that setting the position of the pane basically results in adding a pseudo class to the SplitView. But I don't know where to find the actual template or layout that belongs to these pseudo classes.

check FluentTheme and SimpleTheme projects for it.

[maxkatz6]

Note, since SplitView is ported from UWP/WinUI, it's always a good idea to research how they dealt with the same issues.

For example, while GridSplitter is only usable with actual Grids, UWP (specifically Windows Community Toolkit) have added PropertySizer control:
https://learn.microsoft.com/en-us/dotnet/communitytoolkit/windows/sizers/propertysizer
microsoft/microsoft-ui-xaml#190 (comment)

Which can be used to resize bind width of the split view.

[maxkatz6]

Also CommunityToolkit/WindowsCommunityToolkit#4672
In terms of resizing, whole discussion can be shifted from SplitView itself to GridSplitter/PropertySizer.

[CodeDevAM]

Is there a need to keep the implementations similar or in sync?