App Hub
Hi, VisitorSign In
community forums
App Hub Forums » Windows Phone 7 » Developing for Windows Phone 7 » Multi-line Textbox inside a ScrollViewer gives bad user experience
Sort Discussions: Previous Discussion Next Discussion
Page 1 of 1 (8 posts)

Multi-line Textbox inside a ScrollViewer gives bad user experience

Last post 12/23/2010 10:19 PM by mSpot Inc.. 7 replies.
  • 12/10/2010 3:07 PM

    Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    I have a screen in my app where the user needs to view, edit, and input a relatively large amount of text.

    I started out with a regular TextBox with AcceptsReturn=True and TextWrapping=Wrap. This works fine until the text becomes too large for the screen, at which point the text input cursor will scroll itself into view automatically as you type, but there's no way for the user to scroll back to the top unless they have a device with a keyboard that has arrow keys. I tried setting VerticalScrollBarVisibility=Visible but it doesn't appear to have any effect.

    Next I tried wrapping the TextBox inside a ScrollViewer like this

    <ScrollViewer>
        <TextBox AcceptsReturn="True" TextWrapping="Wrap" />
    </ScrollViewer>

    This enables the user to scroll the text by hand, but the input cursor no longer scrolls itself into view automatically so inputting text becomes very difficult. When you're typing near the bottom of the visible area and the text wraps to the next line you can no longer see the text as it is being entered unless you manually scroll the view down.

    Is there any way to get the regular behavior while typing, but get the ScrollViewer behavior while dragging? Neither solution is adequate by itself. Is there another way to approach the problem?
  • 12/10/2010 4:43 PM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    Actually a user can scroll up and down in a multiline TextBox. Unfortunately, the procedure is unintuitive and many users will never discover it. The way to do it is press and hold until the blue (i.e. accent color) edit cursor appears. You can then drag the edit cursor around, and if dragged to the top or bottom of the TextBox, it will scroll the text.

    I'm not sure that this helps you because most users won't realize they can do this. Microsoft needs to make TextBox respond to flick gestures for scrolling.

    Richard
  • 12/10/2010 5:19 PM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    I'm not comfortable relying on that because I actually thought of it and tried exactly what you suggested twice already with no results. After reading your reply I tried again and didn't give up as quickly, and after a minute or two of fiddling I finally got the little arrow to appear and the scrolling started. It's an extremely difficult technique that's hard to pull off even if you know how to do it.
  • 12/11/2010 4:21 AM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    I've had issues here too. It would be good to see it fixed properly.
  • 12/23/2010 6:25 PM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    I would like to see this fixed too.  I have the same problem and the multi-line scroll behavior is not acceptable.
  • 12/23/2010 6:58 PM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    Why not set a maxheight on your textbox.  This way you can make sure it'll never get so big it gets off the screen.

    Alternatively you could try something like this:

    <ScrollViewer>
    <StackPanel Orientation="Horizontal">
    <TextBox .../>
    <Rectangle Width="40"/>
    </StackPanel>
    </ScrollViewer>

    That would give you a little extra bar to the right that the user could grab, like a scrollbar
  • 12/23/2010 7:59 PM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    Using the following xaml, I just flick or swipe to scroll the text:

    <ScrollViewer VerticalScrollBarVisibility="Visible" 
                  Width="384" Height="96" Margin="0,0,3,0">  
         <TextBox x:Name="txtDesc" Width="380" Height="200" 
                  TextWrapping="Wrap" FontSize="28" 
                  Text="... Very Long Text ..." 
                  TextChanged="txtDexc_TextChanged" InputScope="Text"/>  
    </ScrollViewer>  
     

    May be some of the properties not needed. I didn't remove as it just works.
  • 12/23/2010 10:19 PM In reply to

    Re: Multi-line Textbox inside a ScrollViewer gives bad user experience

    Reply Quote
    Hi ESM,

    However, as the user types and gets to the bottom, they have to manually scroll up to continue seeing what they type. So, not ideal but actually it might be a better experience than manipulating the press-and-hold edit cursor.

    Richard
Page 1 of 1 (8 posts) Previous Discussion Next Discussion