[Specs] CollapsibleToolbarLayout

[roubachof]

A shot at a platform-agnostic implementation of the famous collapsible toolbar layout UX.
Could implement successfully #325.

A CollapsibleToolbarLayout has 2 main properties

Name	Type	Description
Toolbar	ICollapsibleToolbar	the toolbar to be collapsed or expanded
Content	object	the body of page that will be wrapped in a ScrollViewer

interface ICollapsibleToolbar 
{
	TextBlock Title { get; }

	Brush Background { get; }

	/// <summary>
	/// Called when the collapsible layout header height is changing (in fact it is just scroll up)
	/// </summary>
	/// <param name="state">The current state of the layout.</param>
	/// <param name="expandedRatio">The expanded ratio: 1 is fully expanded (the state will be Expanded), 0 fully collapsed (Collapsed), else would be InBetween.</param>
	void OnCollapsing(CollapsibleLayoutState state, double expandedRatio);
}

For now, we have the NavigationBar in the toolkit, so we could just made it implement ICollapsibleToolbar.
Now we would like also to support collapsibles background images:

I propose the following properties:

Name	Type	Description
ExpandedHeight	double	the bar height when expanded
State	CollapsibleToolbarLayoutState	enum: Collapsed, InBetween, Expanded
ExpandedTitleMargin	Thickness	the title margins when expanded
ExpandedTitleFontSize	double	the title font size when expanded
ExpandedImage	sting	the image path displayed on the background when expanded

The pseudo-xaml implementation would look like this:

<Grid>
    <ScrollViewer>
	<StackPanel>
	        <ExpandedToolbarContent>
        	<Content>
	<StackPanel>
    </ScrollViewer>

    <Toolbar>
</Grid>

Basically the 'ExpandedToolbarContent' would contain the expanded UI, the title with expanded title font size and the background image.

And we used it like this:

<CollapsibleToolbarLayout ExpandedHeight="160"
                          State="Expanded"
                          ExpandedTitleFontSize="26"
                          ExpandedImage="MontrealSnowTornado.png">
    <CollapsibleToolbarLayout.Toolbar>
        <Toolbar />
    </CollapsibleToolbarLayout.Toolbar>

</CollapsibleToolbarLayout>

Use case: from expanded to collapsed

We are in expanded state: the ExpandedToolbarContent is displaying a montreal image in the background and a title with a font size of 26, height is 160dp.
In this state the Toolbar background is transparent, and the title is hidden, its CollapsibleState = "Expanded".
Our CollapsibleToolbarLayout state = "Expanded".

1. Scroll up is detected. Our CollapsibleToolbarLayout and our Toolbar states = "InBetween".
2. Thanks to interpolation based on the bottom of the ExpandedToolbarContent respectively to the Y scroll axis we are slowly fading background from image to our toolbar background. And scaling title font size to Toolbar font size.
3. When the bottom of the ExpandedToolbarContent reaches the bottom of the Toolbar, we set our CollapsibleToolbarLayout state to "Collapsed". We also set Toolbar states = "Collapsed". It does make visible the Toolbar background and title.

This way we can mimic with little effort a collapsible bar.

[kazo0]

Ah ok so this way the NavigationBar always stays static at the top of the page and we simply have content below/behind it that will simulate its extended state.

Yeah this way we can simply have the native renderers react to the DependencyProperty for the Expanded state and set its background to transparent and remove the title

Do we maybe want to expose something like an ExpandedTemplate that accepts a DataTemplate so you can define whatever you want as the layout of the expanded view, including background images, etc.?

[roubachof]

Great idea for the DataTemplate !

[roubachof]

An alternative version less fake, but with maybe issue with smoothness (to be tested):

Alternative for an expandable Toolbar

Instead of mocking it, we leave to the toolbar itself the responsibility to implement its behavior.
We have a attached property named ExpandableView.

ExpandedView

I propose the following properties:

Name	Type	Description
ExpandedHeight	double	the bar height when expanded
State	ExpansionState	Enum: Collapsed, InBetween, Expanded, (read-only)
ExpandedRatio	double	1 is fully expanded, 0 fully collapsed (read-only)
ExpandedTitleMargin	Thickness	the title margins when expanded
ExpandedTitleFontSize	double	the title font size when expanded
ExpandedImage	sting	the image path displayed on the background when expanded
MasterScrollViewer	ScrollViewer	the ScrollViewer that will toggle the expansion/collapsing

And we'd used it like this:

<Grid>
    <utu:Toolbar Title="Home">
        <utu:ExpandableLayout.ExpandableView>
            <utu:ExpandedView MasterScrollViewer="{x:Bind RelatedScrollView}"
                              ExpandedHeight="160"
                              State="Expanded"
                              ExpandedTitleFontSize="26"
                              ExpandedImage="MontrealSnowTornado.png" />
        </utu:ExpandableLayout.ExpandableView>
    </utu:Toolbar>
    <ScrollViewer x:Name="RelatedScrollView">
        <StackPanel Padding="0,180,0,0">
            ...
        </StackPanel>
    </ScrollView>    
</Grid>

The expandable is subscribing to the ViewChanged event of the master scroll viewer, and based on the vertical offset and the ExpandedHeight will compute the expandedRatio.

The toolbar must implement a IExpandable interface:

interface IExpandable 
{
	/// <summary>
	/// Called when the master scroll viewer is scrolling, inducing a modification of the expanded ratio.
	/// </summary>
	/// <param name="expandedRatio">The expanded ratio: 1 is fully expanded, 0 fully collapsed.</param>
	void OnExpansion(double expandedRatio);
}

Use case: from expanded to collapsed

We are in expanded state: the Toolbar is displaying a Montreal image in the background and a title with a font size of 26, height is 160dp, ExpansionState = "Expanded".

1. Scroll up is detected. ExpansionState state = "InBetween".
2. The ExpandedView compute the expandedRatio and calls OnExpansion on the toolbar. Thanks to interpolation, the toolbar will compute correct text margin, size, Montreal image opacity and height.
3. When expandedRatio == 0, the ExpansionState = "Collapsed", and our toolbar has a solid brush color as a background.

Concerns:

The mechanism resizes the toolbar height as we are scrolling: will the resizing be smooth on all platforms?
Will the sample rates of the ViewChanged event will be enough to achieve smooth resizing?
Need to do a small PoC to test this.

[roubachof]

@kazo0 @agneszitte @Xiaoy312 I need your opinion on this :)