Longlistselector scroll down automatically upon input expands

Question

So I have a longlistselector with textboxes inside. The user can interact with these textboxes, and insert more text. When the text is inserted the textbox expands and the user can continue writing and have an overview.

But when the user gets to the bottom in the longlistselector and starts writing in the last textbox the textbox expands outside the longlistselector. Which means the user has to stop writing and scroll the longlistselector down, and then continue writing.

So the issue is, that when the textbox is in the bottom of the longlistselector and the text expands out of view the longlistselector does not scroll down.

This is my xaml code for the longlistselector

<Grid x:Name="ContentPanel" Margin="12,49,12,0" Grid.RowSpan="2">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <phone:LongListSelector x:Name="ChatList"  Grid.Row="0" HorizontalAlignment="Left" Width="456" Padding="0" >
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <local:ChatRoomTemplateSelector Content="{Binding}">
                        <local:ChatRoomTemplateSelector.YourSelf>
                            <DataTemplate x:Name="YourSelf">
                                <StackPanel>
                                    <Grid x:Name="YourSelfGrid">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <UserControl Grid.Row="0">
                                            <Path Data="Data" Fill="LawnGreen" StrokeThickness="0" Stretch="Fill" UseLayoutRounding="True"/>
                                        </UserControl>
                                        <TextBox Background="LawnGreen" Text="{Binding Path=Post, Mode=TwoWay,UpdateSourceTrigger=Explicit}" IsReadOnly="{Binding readOnly}" FontSize="20" Margin="39,10" TextWrapping="Wrap" BorderBrush="LawnGreen" Style="{StaticResource TextBoxStyleYourself}" TextChanged="OnTextBoxTextChanged"/>

                                    </Grid>
                                    <StackPanel Orientation="Horizontal">

                                        <Path Data="Data" Fill="LawnGreen" StrokeThickness="0" Stretch="Fill" UseLayoutRounding="True" Margin="50,-1,0,0"/>

                                        <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="25" TextWrapping="Wrap"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </local:ChatRoomTemplateSelector.YourSelf>
                        </local:ChatRoomTemplateSelector>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>

    </Grid>
</Grid>

And I add content to the longlistselector with this snippet of the code

source.Add(new Data() { Name = ChatRoomOverview.userName, User = "YourSelf", readOnly = false, Post = "" });
ChatList.ItemsSource = source;

Edit

I know how to scroll to the last element when starting up and the LLS works fine. But when the user in the last inserted element inputs to much text such that the textbox expands outside of the view I cannot get the LLS to keep the item in view. How do I do this?

Answer 1

If you're programmatically adding items you'll also need to programmatically ensure that they are scrolled into view. You can do this with the LongListSelector.ScrollTo method.
The LLS does not automatically scroll newly added items into view.

---

Update:

As a solution to the expanding textbox at the bottom of the LLS issue. You could instead do the following:

XAML:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ScrollViewer x:Name="MyScrollViewer">
        <StackPanel>
        <ItemsControl x:Name="MyItems">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}"
                                TextWrapping="Wrap"
                                Text="{Binding}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <TextBox AcceptsReturn="True"
                    FontSize="36"
                    TextWrapping="Wrap"
                    VerticalScrollBarVisibility="Auto"
                    Text="{Binding}"
                    TextChanged="OnTextChanged"
                    Margin="0,0,0,48" />
        </StackPanel>
    </ScrollViewer>
</Grid>

Code behind:

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        this.InitializeComponent();

        // Some sample existing items
        this.MyItems.ItemsSource = new[] { "one", "two", "three", "four", "five" };
    }

    private void OnTextChanged(object sender, TextChangedEventArgs e)
    {
        // This is a brute force attempt to scroll to the bottom of all content.
        // You may want to be smarter about when this is done, such as when a "\r"
        // is added to the end of the text in the textbox or the text is added
        // such that it forces a new line. Beware text being changed in the middle
        // of a large block of text as may not want that to trigger a scroll to the bottom.
        this.MyScrollViewer.ScrollToVerticalOffset(double.MaxValue);
    }
}

All a bit crude but hopefully you get the idea.

This uses a separate ItemsControl and TextBox inside a ScrollViewer to mimic the LLS behaviour and will always expand keeping the bottom of the TextBox visible while still allowing scrolling of all content.
Obviously this won't work if you're heavily tied to the LLS though.