XAML MAUI.滚动视图至结束

bkhjykvo  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(240)

我遇到了这样一个问题,我在Scrollview中与一个对话者进行了一些聊天,它会随着新消息的动态更新。不知怎么的,我不得不一直降低聊天。我调用了下面的方法来降低聊天:Body.ScrollToAsync(0, Body.ContentSize.Height, true);但是在第一次迭代中,它没有降低chat,在第二次迭代中,它也没有降低到最后。我的问题如下:如何始终将聊天内容降到最后?
C#程式码:

namespace MessengerMAUI;

public partial class ChatProcessor : ContentView
{
    public ChatProcessor(string Name)
    {
        InitializeComponent();
        MessagesGrid.VerticalOptions = LayoutOptions.End;
        MessagesGrid.HorizontalOptions = LayoutOptions.Fill;
        ChatName.Text = Name;
    }

    List<Bubble> Messages = new();

    public int LastMessageIndex = 0;

    private void SendButtonClicked(object sender, EventArgs e)
    {
        //DrawMessage(TextBox.Text, true);//Разкоменть это когда будешь писать соединение с сервером и закоменть то что ниже
        if (testSenderCheckBox.IsChecked)// HACK: UI Test "Кто отправляет сообщение"
        {
            DrawMessage(TextBox.Text, false);//Отправитель - собеседник
        }
        else
        {
            DrawMessage(TextBox.Text, true);//Отправитель - Я
        }
        TextBox.Text = "";//Очистка поля ввода
    }

    public async void DrawMessage(string message, bool IsMyMessage)//Adding Message like a bubble
    {
        if (message != null)
        {
            
            Messages.Add(new Bubble());
            Messages[LastMessageIndex].BubbleCreator(message, IsMyMessage);
            MessagesGrid.AddRowDefinition(new RowDefinition());
            MessagesGrid.Add(Messages[LastMessageIndex], 0, LastMessageIndex);
            Body.Content = MessagesGrid;//Update chat content

            Body.ScrollToAsync(0, Body.ContentSize.Height, true);//scrolling to end

            LastMessageIndex++;
        }
    }

    
}

XAML程式码:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MessengerMAUI.ChatProcessor">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="84"/>
            <RowDefinition/>
            <RowDefinition Height="45"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Header" 
            HeightRequest="84" 
            Grid.Row="0">
            <Label Text="Чат" 
                FontSize="32"
                FontAttributes="Bold"
                 VerticalOptions="Center"/>
            <Label x:Name="ChatName"
                Text="Test Name" 
                VerticalOptions="Center" 
                HorizontalOptions="End" 
                FontSize="32"
                FontAttributes="Bold"/>
        </Grid>
        <ScrollView x:Name="Body"  
            Grid.Row="1">
            <Grid x:Name="MessagesGrid">
                <!--Сюда генерируются диалоги (bubbles)-->
            </Grid>
        </ScrollView>
        <Grid x:Name="Footer"  
            Grid.Row="2">
            <Grid.ColumnDefinitions >
                <ColumnDefinition/>
                <ColumnDefinition Width="105"/>
            </Grid.ColumnDefinitions>
            <Rectangle Fill="#272B2C" 
                Grid.Column="0"/>
            <Editor  x:Name="TextBox" 
                Grid.Column="0"
                VerticalTextAlignment="Center">
                <Editor.Keyboard>
                    <Keyboard x:FactoryMethod="Create">
                        <x:Arguments>
                            <KeyboardFlags>
                                CapitalizeSentence, Spellcheck, Suggestions
                            </KeyboardFlags>
                        </x:Arguments>
                    </Keyboard>
                </Editor.Keyboard>
            </Editor>
            <Button x:Name="SendButton" 
                Text="Отправить" 
                BackgroundColor="#0066DC" 
                TextColor="White" Clicked="SendButtonClicked" 
                Grid.Column="2"/>
            <CheckBox x:Name="testSenderCheckBox"/> <!--Удали это, когда сделаешь общение с сервером-->
        </Grid>
    </Grid>
</ContentView>
de90aj5v

de90aj5v1#

您可以尝试滚动MessagesGrid的最后一个子项,如下所示:

var lastChild = MessagesGrid.Children.LastOrDefault(); 
if (lastChild != null)
{
    //await Body.ScrollToAsync(0, MessagesGrid.Height, true);
      await Body.ScrollToAsync(MessagesGrid, ScrollToPosition.End, true);
}

相关问题