Proposal: ScrollViewer - Support Offset (begin and end) for scrollbar

[harvinders]

Proposal: ScrollViewer should support BeginOffset and EndOffset for scrollbar

Summary

Sometime developers need to overlay a control on top of ScrollViewer. In these situations it is good to reduce the size of the scrollbar by setting some kind of begin and end offset.

Below is an example of a media app displaying the media control overlay with Acrylic Background on a ScrollViewer (ListView)

 Today                                                    Proposal utilising end offset

A Navigation Header with Acrylic background

 Today                                                    Proposal utilising begin offset

Extending ListView into Titlebar

 Today                                                    Proposal utilising begin offset

Rationale

• The alternative to this proposal is to override the ControlTemplate which is messy and difficult to be kept in sync with UI changes happening in WinUI.
• It is a popular pattern many apps do it. Groove did it with its media controls. Settings app does it with the header

Scope

Capability	Priority
Allow to set the begin and end offset	Must
Expression animations that was taking scroll position as input should not be impacted	Must
Animate when the offset changes (if at that time scrollbar is visible)	Should

Important Notes

   public double BeginOffset {get;set;} 
   public double EndOffset {get; set; } 

Open Questions

[lhak]

I think this can be realized for most use cases today with the platform scrollviewer and the CanContentRenderOutsideBounds property. So far, this functionality does not seem to exist in the new winui scrollviewer.

[harvinders]

How does one use CanContentRenderOutsideBounds ? There is hardly any documentation.

[ranjeshj]

@RBrid to comment on the new scrollviewer property.

[StephenLPeters]

TeachingTip would befit from this! It's scrollviewer's scrollbar intersects its close button and we were never able to fix this.

[RBrid]

Thanks for the feedback. The existing ScrollViewer.CanContentRenderOutsideBounds can indeed come handy to achieve this behavior. I just played with it a bit and came up with this sample code. I did little testing with it and I am not sure it accounts for all circumstances though. Some values are hardcoded but you get the idea:

XAML fragment:

<ContentControl x:Name="root">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer x:Name="sv" Background="Yellow" Width="300" Height="600" 
            CanContentRenderOutsideBounds="True"
            HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
            HorizontalScrollMode="Auto" VerticalScrollMode="Auto"
            ZoomMode="Enabled" Grid.Row="1">
            <StackPanel x:Name="sp" Margin="0,-80,0,0">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="200" Height="250" Fill="AliceBlue"/>
                    <Rectangle Width="200" Height="250" Fill="Beige"/>
                    <Rectangle Width="200" Height="250" Fill="Aquamarine"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="200" Height="250" Fill="Bisque"/>
                    <Rectangle Width="200" Height="250" Fill="Aqua"/>
                    <Rectangle Width="200" Height="250" Fill="AntiqueWhite"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="200" Height="250" Fill="LightBlue"/>
                    <Rectangle Width="200" Height="250" Fill="BlanchedAlmond"/>
                    <Rectangle Width="200" Height="250" Fill="Azure"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="200" Height="250" Fill="AliceBlue"/>
                    <Rectangle Width="200" Height="250" Fill="Beige"/>
                    <Rectangle Width="200" Height="250" Fill="Aquamarine"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="200" Height="250" Fill="Bisque"/>
                    <Rectangle Width="200" Height="250" Fill="Aqua"/>
                    <Rectangle Width="200" Height="250" Fill="AntiqueWhite"/>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>
        <Border Background="Brown" Opacity="0.25" Height="80" Width="300"/>
        <Border Height="80" Width="300">
            <TextBlock Text="HEADER" FontSize="30" HorizontalAlignment="Center" 
                VerticalAlignment="Center" Opacity="0.6"/>
        </Border>
    </Grid>
</ContentControl>

C# code fragment:

public MainPage()
{
    this.InitializeComponent();

    RectangleGeometry rg = new RectangleGeometry();
    Rect newClipRect = new Rect(0, 0, 300, 680);
    rg.Rect = newClipRect;
    this.root.Clip = rg;

    this.sv.ViewChanged += Sv_ViewChanged;
}

private void Sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
    this.sp.Margin = new Windows.UI.Xaml.Thickness(0,-80 / sv.ZoomFactor,0,0);
}

Does this work for you? Note that the current ScrollBar control is not Composition/animation friendly. Its height cannot be animated for instance.

It is true that this CanContentRenderOutsideBounds property is currently missing in the new scrolling controls (to be named ScrollView and ScrollPresenter according to microsoft/microsoft-ui-xaml-specs#56). I do think that we should be adding that property to the new controls in the future. We could use this issue #1914 to track that work.

At this point I am not convinced that this is a common enough scenario that it warrants additional dedicated properties like BeginOffset/EndOffset.

[harvinders]

Big thank you @RBrid for the sample, it was most helpful. I think it should solve most of my use cases. Can we hope CanContentRenderOutsideBounds would be available when the new ScrollViewer would come out of preview? I really can't use the new OS ScrollViewer as my min target is 1803.

[RBrid]

@harvinders, glad the sample is helpful. I am afraid the first out-of-preview release of the ScrollView control will be without the CanContentRenderOutsideBounds property. We have pretty much locked down its public object model and feature set. Maybe the second release will have that property added.