locked
Creating a Scrollable TextBlock and TextBox for WP7 RRS feed

  • Question

  •  <ScrollViewer VerticalAlignment="Stretch" 
                                      HorizontalAlignment="Stretch"
                                      Height="Auto" Width="Auto">
                        <TextBlock Name="noteViewTextBlock"
                                   Visibility="Visible" 
                                   Text="" TextWrapping="Wrap"
                                   Height="Auto"
                        	       FontSize="22"
                                   ScrollViewer.VerticalScrollBarVisibility="Visible"/>
                        </ScrollViewer>

    The above code is xaml code for a textblock. Actually I want to implement a scrollbar facility inside the text block, so that I can see the rest content that has been clipped off from the bottom side of the text block. I tried a lot but found nothing. I am unable to see the rest of my text from the bottom side.

    Can any one kindly please help me out for my problem?

    I am using Microsoft Visual Studio Ultimate 2012 and making application for Windows Phone 7.x

    Thursday, May 29, 2014 7:29 PM

Answers

  • The critical factor is the final Height value of your ScrollViewer. It is affected by how you set up the surrounding xaml. Show us the rest of the xaml on the page.

    You need to set up the page so that the ScrollViewer's Height will be the amount of area you want displayed on the screen. As a quick fix, you can hardcode it to a specific number, for example:

        <ScrollViewer Height="200" ...

    • Proposed as answer by Ahmad Pirani Thursday, May 29, 2014 8:24 PM
    • Marked as answer by Satiswar Thursday, May 29, 2014 8:43 PM
    • Unmarked as answer by Satiswar Thursday, May 29, 2014 8:43 PM
    • Marked as answer by Satiswar Thursday, May 29, 2014 8:43 PM
    Thursday, May 29, 2014 8:20 PM
  • You only need to put the TextBox in a ScrollViewer. The user can touch and drag in the TextBox to scroll it.

                <ScrollViewer Height="200">
                    <TextBox TextWrapping="Wrap"/>
                </ScrollViewer>

    However, there's a problem that if the user is typing a lot of text, it won't auto-scroll to keep the cursor visible when typing at the bottom (the user can manually scroll but it won't be automatic). There is a workaround in this thread: Scroll Viewer hiding textbox and not auto scrolling to the end

    • Marked as answer by Satiswar Friday, May 30, 2014 10:14 AM
    Thursday, May 29, 2014 9:29 PM
  • Using your code, I have no problem seeing the TextBox.

    1. Open a new project
    2. Put your code inside the ContentPanel grid
    • Marked as answer by Satiswar Friday, May 30, 2014 10:14 AM
    Friday, May 30, 2014 7:52 AM

All replies

  • The critical factor is the final Height value of your ScrollViewer. It is affected by how you set up the surrounding xaml. Show us the rest of the xaml on the page.

    You need to set up the page so that the ScrollViewer's Height will be the amount of area you want displayed on the screen. As a quick fix, you can hardcode it to a specific number, for example:

        <ScrollViewer Height="200" ...

    • Proposed as answer by Ahmad Pirani Thursday, May 29, 2014 8:24 PM
    • Marked as answer by Satiswar Thursday, May 29, 2014 8:43 PM
    • Unmarked as answer by Satiswar Thursday, May 29, 2014 8:43 PM
    • Marked as answer by Satiswar Thursday, May 29, 2014 8:43 PM
    Thursday, May 29, 2014 8:20 PM
  • Thank you for your kind co-operation sir. I got it. But can you please tell me how can I integrate a scrollbar inside my text box so that I can able to scroll the content of the text box. I have a text box and when I am writing so many lines I am unable to scroll it up. so can you please help me out with this issue.

    Waiting for your reply sir...


    Satiswar Dash

    Thursday, May 29, 2014 8:29 PM
  • You only need to put the TextBox in a ScrollViewer. The user can touch and drag in the TextBox to scroll it.

                <ScrollViewer Height="200">
                    <TextBox TextWrapping="Wrap"/>
                </ScrollViewer>

    However, there's a problem that if the user is typing a lot of text, it won't auto-scroll to keep the cursor visible when typing at the bottom (the user can manually scroll but it won't be automatic). There is a workaround in this thread: Scroll Viewer hiding textbox and not auto scrolling to the end

    • Marked as answer by Satiswar Friday, May 30, 2014 10:14 AM
    Thursday, May 29, 2014 9:29 PM
  • Sir, I tried but I am unable to see my current textbox. Its not visible when m putting it inside a scroll viewer.

    Here is my code, can you please help me out with this issue?

      <ScrollViewer Height="500">
                    <TextBox 
                    Name="noteTextBox"
                    TextWrapping="Wrap"
                    Grid.Row="1" 
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    AcceptsReturn="True"
                    BorderBrush="{StaticResource PhoneAccentBrush}" 
                    SelectionBackground="{StaticResource TransparentBrush}" 
                    SelectionForeground="{StaticResource TransparentBrush}"/>
                </ScrollViewer>


    Satiswar Dash

    Friday, May 30, 2014 6:47 AM
  • Using your code, I have no problem seeing the TextBox.

    1. Open a new project
    2. Put your code inside the ContentPanel grid
    • Marked as answer by Satiswar Friday, May 30, 2014 10:14 AM
    Friday, May 30, 2014 7:52 AM
  • Thanks sir I got my solution. I tried this following code and its working.
    <ScrollViewer Name="textscroller"
                    Height="500">
                    <TextBox Name="mytextbox" 
                        AcceptsReturn="True" 
                        TextWrapping="Wrap" 
                        Text=""
                        SizeChanged="TextBox_SizeChanged"/>
                </ScrollViewer>

     private void TextBox_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                textscroller.ScrollToVerticalOffset(mytextbox.ActualHeight);
    
            }

    Thanks a lot for your kind help.

    Satiswar Dash

    Friday, May 30, 2014 10:13 AM