Automatically adding a newline to TextBox in WP8.1 XAML

Question

I am trying to build a Windows Phone 8.1 app and there is something that is really bothering me: ![look at this] http://i.imgur.com/XO7oOmT.png

As you can see the TextBox is not creating and going to a new line when the text reaches its end. What should I do? I tried Googling for it but couldn't really find it (I am sure I used the wrong keywords but I am all new into this).

Anyways, here is the XAML code I am using (with some things I've found on Google but didn't work)

Look at the "contentTextBox":

        <Grid x:Name="LayoutRoot" Background="WhiteSmoke">

        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TODO: Content should be placed within the following grid-->
        <Grid Grid.Row="0" x:Name="TitleRoot" Margin="0,0,0,0">
            <TextBox x:Name="titleTextBox" Text="Title"/>
        </Grid>
        <Grid Grid.Row="1" x:Name="ContentRoot" Margin="0,0,0,0">
            <StackPanel Height="Auto">
                <TextBox x:Name="contentTextBox" Text="" HorizontalAlignment="Stretch" VerticalAlignment="Top" AcceptsReturn="True" Width="Auto"/>
            </StackPanel>
        </Grid>
    </Grid>

Answer 1

Turning on TextWrapping helps!

<TextBox x:Name="contentTextBox" 
         TextWrapping="Wrap" 
         Text="" 
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Top" 
         AcceptsReturn="True" 
         Width="Auto" />

It means - when you're out of horizontal space, wrap to another row.

Answer 2

You need to turn on TextWrapping, and you also need to remove it from the StackPanel or give it a fixed size.

The StackPanel will allow the TextBox to grow endlessly horizontally, and since you have Width="Auto" and HorizontalAlignment="Stretch" , the TextBox has no way of knowing when it should stop stretching, and will grow with your Text.

Remove the StackPanel, and keep the HorizontalAlignment="Stretch" (Width can be removed, since auto it the default), and the TextBox will take 100% of the width of the screen, and won't resize as you type.

Answer 3

Try by setting

<TextBox ScrollViewer.HorizontalScrollMode="Disabled" TextWrapping="Wrap"/>

---

 <Grid Grid.Row="1" x:Name="ContentRoot" Margin="0,0,0,0">
        <StackPanel Height="Auto">
            <TextBox x:Name="contentTextBox" Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt." HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollMode="Disabled" VerticalAlignment="Top" AcceptsReturn="True" TextWrapping="Wrap" Width="Auto"/>
        </StackPanel>
  </Grid>

ScrollViewer.HorizontalScrollMode="Disabled " : That means that the ScrollViewer is not giving "Auto" Width to Textbox even if Textbox exceeding its bounded/visible width

TextWrapping="Wrap" : If text dosen't fit to its width it comes to next the line.