Question

I am creating a chat windows for a game, and I am using WinRT XAML for the UI.

1.What is the most efficient way to design the chat window to be able to be scrollable and handle multicolored text? At the very least each line should be able to be a separate color. At the moment I have something simple such as:

<ScrollViewer x:Name="chatViewScroller" Height="201" Width="475">
    <StackPanel x:Name="chatViewContent" />
</ScrollViewer>

And then as I create new TextBlocks as I need them and add them as children to the chatViewContent. This seems like a very inefficient way of doing things.

2.When I add a new line of text, how do I update the scroller to automatically scroll to the end?

Answer 1

You would be better off using a ListView.

1. Set the ListView’s ItemsSource property to an ObservableCollection.
2. Your MessageViewModel would have a Text property as well as Brush.

3. Set your ListView’s ItemTemplate to the template below

   <DataTemplate>
       <TextBlock Text={Binding Text} Foreground="{Binding Brush}" />
   </DataTemplate>
   

4. When you add a new item to your collection – it will automatically appear in the ListView.

5. To scroll it into view call something like this

   await Task.Delay(100);
   MyListView.ScrollIntoView(MyListView.Items[MyListView.Items.Count - 1]);
   

   You need the delay to wait for the ListView to add the new item.

You can check WinRT XAML Toolkit for example – specifically the ListViewExtensionsTestPage:

    private async void AddItem(object sender, RoutedEventArgs e)
    {
        var vm = (ListViewExtensionsTestViewModel)this.DataContext;
        vm.MyItems.Add(Guid.NewGuid().ToString());

        // Need to wait for the ListView to update
        await Task.Delay(100);

        SourceListView.ScrollToBottom();
        //SourceListView.ScrollIntoView(SourceListView.Items[SourceListView.Items.Count - 1]);
    }