Windowscommunitytoolkit: Disable ScrollHeader's VerticalScrollBar

[HesamKashefi]

Hi, Is there anyway to disable ScrollHeader's VerticalScrollBar or Setting it's Visibility to hidden?

[nmetulev]

Hey @HesamKashefi, are you referring to the scrollbar on the listview itself? If not, can you share a code snipet that makes the VerticalScrollBar show up on the ScrollHeader?

In the meantime, one way to access the ScrollViewer of the ScrollHeader is to use the VisualTreeHelper or even beter, use the VisualTreeExtensions.

[HesamKashefi]

Hi @nmetulev I meant the header itself : here is the code in text file :

code.txt

and here is the result :

Thanks for your attention

[JohnnyWestlake]

For the time being you can retemplate scroll header in your app and disable the ScrollBar

 <Style TargetType="controls:ScrollHeader">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:ScrollHeader">
                    <ScrollViewer VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
                        <ContentPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Or you could optionally just remove the ScrollViewer entirely from the template above. (I haven't looked into it but I don't know if it's even necessary for the header too work, at least for your use case)

And I suppose in a future build of the toolkit the proper ScrollViewer attached property bindings can be added in the template so you can do it as <controls:ScrollHeader ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Hidden" /> instead

[nmetulev]

Not sure either why we have a scrollviewer in there. @pdehne , might know.

[pdehne]

The scrollviewer is needed to fix rendering issues when Scrolling with quick return enabled. Please see https://github.com/Microsoft/UWPCommunityToolkit/pull/227#issuecomment-249741662 for details.

[nmetulev]

I see. What if we disable directional scroll mode, or remove the scroll bar visibility, will that still work?

[pdehne]

I did hide the vertical scrollbar just like @JohnnyWestlake suggested and the ScrollHeader sample is still working. I do wonder why the scrollbar is shown in @HesamKashefi example in the first place though.

[nmetulev]

@HesamKashefi , do you mind sharing a repro project?

[HesamKashefi]

@pdehne Do not wonder plz because it's there !
look this is an empty project sample code you just need to move the mouse to the right corner of the Button to see the scrollbar :

`

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView>
        <ListView.Header>
            <controls:ScrollHeader>
                <Button Height="40" HorizontalAlignment="Stretch" Content="Click"/>
            </controls:ScrollHeader>
        </ListView.Header>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Margin" Value="0,1"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>`

@nmetulev Thanks for your tips I removed the scrollbar with the Style you provided
I think this sample suffices !

[pdehne]

I reproduced it now. The scrollbar is only shown if the ListView is empty. @JohnnyWestlake suggestions fixes the problem. @JohnnyWestlake care to provide a pull request? I'd be happy to do it too.

[HesamKashefi]

@pdehne I Don't think it's realated to Items! you can see at the top of this page I have sent a picture that there is a ListView with 2 Items in it

[JohnnyWestlake]

@pdehne I'm on vacation atm with no dev tools, so happy for you to go ahead =P

[pdehne]

@HesamKashefi Your right. The scrollbar is always displayed but if the listview contains enough items to show a scrollbar too, the listview scrollbar will overlap the scrollheader scrollbar.