UWP Bottom-Up Chat ListView with XAML

Question

So, I am making an UWP app which you can think of it as a chat client. So the problem here is how to make the listview in my XAML to be bottom-up instead of top-down. In other words the items of the listview have to be added from the bottom to the top instead of top to bottom as it is now. I have done everything I know about and I followed many instructions on the internet including the microsoft's documentation but I couldn't make it work. I need to note that the code runs and it doesnt give any error, but the list is from top to bottom and not the other way.

Here is may PageResource in my XAML:

   <DataTemplate x:Key="MessageListDataTemplate" x:DataType="disc:IMessage">
        <Border Background="#2C2F33" CornerRadius="5">
            <StackPanel Margin="5">
                <StackPanel Orientation="Horizontal" Margin="5,2,0,0">
                    <TextBlock TextAlignment="Left" Text="{x:Bind Author,Mode=OneWay}" Foreground="White" FontSize="14"/>
                    <TextBlock TextAlignment="Left" Margin="5,3,0,0" Text="{x:Bind Timestamp,Mode=OneWay,Converter={StaticResource TimeToStringConverter}}" Foreground="LightGray" FontSize="10"/>
                </StackPanel>
                <TextBlock TextAlignment="Left" Margin="10,2,0,0" TextWrapping="WrapWholeWords" Text="{x:Bind Content, Mode=OneWay}" Foreground="#99AAB5" FontSize="20" />
            </StackPanel>
        </Border>
    </DataTemplate>

Here is my ListView:

                    <ListView VerticalContentAlignment="Bottom" ItemsSource="{x:Bind ChatViewModel.MessageList, Mode=OneWay}" SelectionMode="None" ItemTemplate="{StaticResource MessageListDataTemplate}">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Margin" Value="0,0,5,5"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>

If you need clarification etc leave a comment first. Thank you :)

Answer 1

Basically, the solution that I found to my problem was simply laying behind my ObservableCollection. The way the collection was received from the server was opposite to the one I intended to be used. In other words, the collection received had the latest message at index 0 and the first at index n (depending on how many messages you loaded). I observed that when I added a message on that collection using .add(), it would add it at the end of it, so n+1. So the main reason that it wouldn't seem to be bottom to top is that the collection was reversed. New messages added come to the bottom as they should now. Thanks everyone for helping!

What I use to reverse it:

        for (int i=0; i < messageList.Count/2; i++)
        {
            IMessage temp = messageList[i];
            messageList[i] = messageList[messageList.Count - i - 1];
            messageList[messageList.Count - i - 1]= temp;
        }