How to use ScrollViewer.ScrollToVerticalOffset?

Question

I hope this isn't a duplicate but I can't find any documentation or examples on how to actually use ScrollToVerticalOffset(). I'm using it in a Windows Phone 8 app, but I think it will still apply to WP7 and Silverlight (although, feel free to correct me if I'm wrong).

So here is my basic set up (pseudo-code from memory):

<phone.PivotItem>
   <ScrollViewer>
      <Grid Height="1500">
         <Grid.RowDefinitions>
            <!-- about 20 rows, all auto-height -->
         </Grid.RowDefinitions>

         <Border Grid.Row="0">
            <TextBox x:Name="txt1" />
         </Border>
         <Border Grid.Row="1">
            <TextBox x:Name="txt2" />
         </Border>

         <!-- ...... -->

         <Border Grid.Row="19">
            <TextBox x:Name="txt20" />
         </Border>
      </Grid>
   </ScrollViewer>
</phone.PivotItem>

So as you can see, I've got a ScrollViewer within a PivotItem, and inside is a Grid. In the Grid there are about 20 TextBoxs, each within a Border. I am dynamically setting focus to one of these TextBoxs when this page loads, so anytime I set focus to TextBox #6-20 (roughly) - I have to manually scroll down to see it. I want to auto-scroll my ScrollViewer so that whichever TextBox has focus, it will be centered for the user to see.

The documentation for ScrollToVerticalOffset() says:

Scrolls the content that is within the ScrollViewer to the specified vertical offset position.

And that it accepts a type of System.Double.

What I don't understand is A) the value I'm supposed to pass, and B) how I could even get that value? Is it supposed to be a number between 0 and the height of my Grid (1500)? If so, how could I determine the position of any given TextBox so I can scroll to it?

If there are any straightforward examples, please feel free to link out to them. I'm not sure if the content within the ScrollViewer matters when calling this method, but in case it does I wanted to show exactly how I'm using it.

Many thanks in advance!

Nannana

Small question, why have you implemented this setup? Any reason why not to use the longlistselector? I was wondering about it :) – Xanthophyll

Good question - I suppose the main reason is that I wasn't familiar with LongListSelector, and I haven't done enough research to know if it would be a better option or not. Basically, I'm making a "top ten leaderboard" type thing which will display the top ten names & scores. If a new score is > than the 10th score, I'll insert a TextBox into the correct position and let the user save it. My pseudo-code above obviously doesn't reflect all of this functionality though. – Nannana

So in my actual scenario, there are 10 different TextBlocks that I'm using as labels, and then they get adjusted/shifted for the "new entry" and a TextBox is put in it's place to let the user save their name into that position. – Nannana

Answer 1

You can see any UIElement's position relative to another UIElement using the UIElement.TransformToVisual call.

First, get the transform between the TextBox and ScrollViewer.

GeneralTransform transform = textBox.TransformToVisual(scrollViewer);

Then, figure out what point (0,0) of the TextBox is relative to the ScrollViewer. Meaning, the TextBox origin (0,0) is located at what ScrollViewer position.

Point textBoxPosition = transform.Transform(new Point(0, 0));

Now that you know the Y position of the TextBox relative to the ScrollViewer, scroll to that Y offset.

scrollViewer.ScrollToVerticalOffset(textBoxPosition.Y);

Good luck!

Adnopoz

Answer 2

This is a very old post, but the meaning of VerticalOffset varies. Most of the solutions I have seen assume VeritcalOffset is in pixels. This is not always the case.

From: https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.scrollviewer.extentheight

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.

Geanticlinal