UWP Catch List View Scroll Event

Question

I am developing a Windows Universal App for Phone.

I have a List View and a button over it. I want to hide the button when I scroll down in the List View.

How can i catch the scrolling event? How can i access the ScrollViewer inside the ListView?

I tried several ways but none seems to work..

My XAML Code is:

<ListView x:Name="PostListView" Grid.Row="1"
                        IsItemClickEnabled="True"
                        ItemTemplate="{StaticResource PostItemTemplate}"
                        ItemsSource="{Binding Feed}"
                        ShowsScrollingPlaceholders="False"
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                        ScrollViewer.VerticalScrollMode="Enabled"
                        IncrementalLoadingTrigger="Edge">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="Margin" Value="0" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListViewItem">
                                            <ListViewItemPresenter
                                                SelectedBackground="{StaticResource LightStandardColorBrush}"
                                                SelectedPointerOverBackground="{StaticResource LightStandardColorBrush}"
                                                PressedBackground="{StaticResource LightStandardColorBrush}"
                                                SelectedPressedBackground="{StaticResource LightStandardColorBrush}"/>

                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListView.ItemContainerStyle>

                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Tapped">
                                <core:InvokeCommandAction Command="{Binding PostItemTapped}" CommandParameter="{Binding ElementName=PostListView, Path=SelectedItem}"/>
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </ListView>

Answer 1

You can do in two ways

1) You can listen for PointerEntered event in listview

<ListView PointerEntered="PointerEntered" x:Name="PostListView" >
....
</ListView>

private void PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            listScrollviewer = Scrolling(PostListView);
        }

        private ScrollViewer Scrolling(DependencyObject depObj)
        {
            ScrollViewer foundOne = GetScrollViewer(depObj);
            if (foundOne != null)
            {
                //    if (foundOne.VerticalOffset == 0)
                //    //refresh.Visibility = Visibility.Visible;
                //    else
                //refresh.Visibility = Visibility.Collapsed;
                foundOne.ViewChanging += foundOne_ViewChanging;
            }


            return foundOne;
        }

        public static ScrollViewer GetScrollViewer(DependencyObject depObj)
        {
            if (depObj is ScrollViewer) return depObj as ScrollViewer;

            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
            {
                var child = VisualTreeHelper.GetChild(depObj, i);

                var result = GetScrollViewer(child);
                if (result != null) return result;
            }
            return null;
        }

        private void foundOne_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e)
        {
          //YOur logic to hide the button
          if (e.NextView.VerticalOffset == 0)
            {
            }
           else
           {
              //Hide the button
           }

        }

2)second way is to edit the listview style. There you will get the scrollviewer

<ListView  Style="{StaticResource ListViewStyle1}">
...
</ListView>

<Style x:Key="ListViewStyle1" TargetType="ListView">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="IsSwipeEnabled" Value="True"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Bottom"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
            <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
            <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
            <Setter Property="ItemContainerTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <AddDeleteThemeTransition/>
                        <ReorderThemeTransition/>
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListView">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>