App layout template controls

[Avid29]

A discussion was started when @Sergio0694 mentioned that his AdaptiveShell from OneLocker and Legere could be a control of its own. @Arlodotexe further suggested that the Quarrel SideDrawer could also be a control of a similar type.

Similarities between these controls:

• They contain 4 panels
• Has Small, Medium, Large, and Extra Large Visual States
• Side panels can be opened and closed
• Etc

[Avid29]

My WIP proposal:

We add an abstract control RootView or RootViewBase. This describes any control that serves as the basic layout control for an app or window. This control would have 3 child types: Root2PanelView, Root3PanelView, Root4PanelView.

Both the AdaptiveShell and SideDrawer would be implemented as a Root4PanelView, since they contain 4 panels (However, the SideDrawer could be reimplemented as either 2 or 3). These controls could either be abstract or templated controls. Not entirely sure how much customization would be required.

Other layouts might have a different number of panels and would be implemented accordingly. For example, the "Strix" shell in Strix Music is a 2-panel layout.

[Sergio0694]

Isn't a 2-panel layout basically either a NavigationView or a SplitView? My thinking is that we should just have a single control that has 4 panels, and if you don't need all 4 you can just configure it to never expand either the left panel or the right one. We could even just have some IsLeftPanelEnabled and IsRightPanelEnabled properties that just hide them entirely, for instance. This is also how my AdaptiveShell control works. The only difference is you'd also be able to hide the buttons to open those panels entirely, if you wanted.

[michael-hawker]

Was looking at this earlier, and reminded me of the ActivityBar/SideBar pattern from VS Code that I implemented in XAML Studio too. But wasn't sure if it exactly mapped or not similarly from the videos posted in Discord. Though I think a collapsed NavigationView may be similar enough now to be usable for that experience, but would have to try again, I think there were issues with re-clicking and deselecting the same item before in the past.

I wonder if abstracting a layer above all this though would be useful? Like just having a View/Panel type system which can define these regions and animate between different configurations of them vs. being tied to a specific number? Kind of like a more structured DockPanel or RelativePanel that uses defined "region" sets over additive/unknown quantities.

Kind of akin to a visual state sort of setup maybe? Reminded me of a few others things discussed by folks in the past:

Other related ideas:

• Dashboard layout designer using grid splitters #486
• Enable Grid to dynamically switch layouts #541

[Sergio0694]

For reference, here's how my adaptive shell looks in OneLocker:

adaptive_shell_onelocker.mp4

[Arlodotexe]

Here's the 2-panel layout mentioned by @Avid29 in Strix Music, though the "side drawers" are top/bottom instead of left/right.

2020-08-08_01-58-17.mp4

[Avid29]

Here's a video demo of the Quarrel SideDrawer (in RTL)

SideDrawer.mp4