WinRT ScrollViewer - Find scroll position (Top or Bottom)

While building Windows Phone, Windows 8.1 or Universal Windows 8.1 applications I needed to find scroll position(e.g. - scroll position is at the top or you are at the bottom) I also saw this question posted at many forums so decided to put together a small sample.

In WPF, we have ScrollViewer.ScrollChanged event which doesn't exists in WinRT, however there is another event ViewChanged that could be utilized to obtain the scroll position. We will check for a property called ScrollViewer.VerticalOffset which gets a value that contains the vertical offset of the scrolled content.

A positive VerticalOffset value corresponds to the content being offset to the top. Valid values are between zero and the ExtentHeight minus the ViewportHeight.If CanContentScroll is true, the values of the ExtentHeight, ScrollableHeight, ViewportHeight, and VerticalOffset properties are number of items. If CanContentScroll is false, the values of these properties are Device Independent Pixels.

In this example we will build a simple Windows Phone 8.1 app to alert if scroll is at top or bottom position

XAML

 <Grid x:Name="TopGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="60"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
   <TextBlock x:Name ="MytexTextBlock"  Grid.Row="0"   ></TextBlock>
    <ScrollViewer x:Name ="MyscrollbarScrollViewer" Grid.Row="1"  ViewChanged="MyscrollbarScrollViewer_OnViewChanged">
       <StackPanel Orientation="Vertical">
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum1</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum2</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum3</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum4</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum5</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum6</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum7</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum8</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum9</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum10</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum11</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum12</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum13</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum14</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum15</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum16</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum17</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum18</TextBlock>
            <TextBlock Style="{StaticResource BaseTextBlockStyle}">Lorem Ipsum19</TextBlock>
        </StackPanel>
    </ScrollViewer>
</Grid> 

Code Behind

     private void MyscrollbarScrollViewer_OnViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        var verticalOffsetValue = MyscrollbarScrollViewer.VerticalOffset;
        var maxVerticalOffsetValue = MyscrollbarScrollViewer.ExtentHeight - MyscrollbarScrollViewer.ViewportHeight;
        MytexTextBlock.Text = "";
        if (maxVerticalOffsetValue < 0 ||verticalOffsetValue == maxVerticalOffsetValue)
        {
            // Scrolled to bottom

            MytexTextBlock.Text = "Bottom " + maxVerticalOffsetValue.ToString();

        }
        else if (verticalOffsetValue == 0)
        {
            // Scrolled to top
            MytexTextBlock.Text = verticalOffsetValue.ToString() + "Top " + maxVerticalOffsetValue.ToString();
        }

    }

Now run the sample , scroll all the way to top or bottom. You will be notified

Comments

• Anonymous
  August 21, 2017
  scrollviewer is not workingxaml <!-- --> codebehind:for(int i=0;i<20;i++){Projects.children.add(/Some controls here/);}but not working