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!

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!