Question

Basically, I’m developing a note-taking app where the user can type as long as he wants (kinda like Scrollable TextBox in WP7). I put the TextBox in a ScrollViewer, and everything is fine; I disable the ScrollViewer when the TextBox gets focus, so it scrolls automatically while the user is typing.

My problem is, I want the user to be able to scroll while editing the note, just as he’s able to scroll while reading the note. I thought the only way to do this would be to hold down until the oversized caret appears, then moving it around, but I discovered that, in fact, third party apps support this type of scrolling.

What I’m trying to achieve is something like Word/OneNote on the phone, where the user can easily scroll while editing the document (here’s a video demonstrating it). The same effect is seen in the Skype and Facebook apps where, while writing a message, you can scroll it to see more of it.

I wonder if this is a custom control, or if the layout was designed in a specific way, because a TextBox inside a ScrollViewer simply doesn’t work.

I’d appreciate any help. Thanks in advance.

Answer 1

Based on the answer given by Ku6opr, I tweaked the code so it works under my circumstances. Now, the TextBox has regular behavior, but is scrollable, and the RootFrame doesn’t go up automatically.

XAML:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ScrollViewer x:Name="InputScrollViewer">
        <TextBox x:Name="MessageText" TextWrapping="Wrap" Text="" AcceptsReturn="True" TextChanged="inputText_TextChanged" GotFocus="MessageText_GotFocus" Padding="0,0,0,400" Tap="MessageText_Tap" />
    </ScrollViewer>
</Grid>

C#:

public partial class MainPage : PhoneApplicationPage
{
    double InputHeight = 0.0;

    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

    private void MessageText_GotFocus(object sender, System.Windows.RoutedEventArgs e)
    {
        (App.Current as App).RootFrame.RenderTransform = new CompositeTransform();
    }

    private void inputText_TextChanged(object sender, System.Windows.Controls.TextChangedEventArgs e)
    {
        Dispatcher.BeginInvoke(() =>
        {
            double CurrentInputHeight = MessageText.ActualHeight;

            if (CurrentInputHeight > InputHeight)
            {
                InputScrollViewer.ScrollToVerticalOffset(InputScrollViewer.VerticalOffset + CurrentInputHeight - InputHeight);
            }

            InputHeight = CurrentInputHeight;
        });
    }

    public void MessageText_Tap(object sender, GestureEventArgs e)
    {
        InputScrollViewer.ScrollToVerticalOffset(e.GetPosition(MessageText).Y - 80);
    }
}

The Tap event handlers detects the vertical position of the tap, and scrolls the ScrollViewer so the caret is in view when the TextBox gets focus.