Xamarin Forms: проблема выравнивания со свойством HorizontalOptions

Я реализовал пользовательский интерфейс чата в своем проекте. Отправленные сообщения отображаются слева, а полученные сообщения отображаются справа.

Для отображения сообщений слева и справа я создал новую переменную в классе модели, как показано ниже:

private LayoutOptions horizontalOptions;
public LayoutOptions HorizontalOptions
{
    get => horizontalOptions;
    set
    {
        horizontalOptions = value;
        NotifyPropertyChanged(nameof(horizontalOptions));
    }
}

Основываясь на значении имени пользователя, я установил значение HorizontalOptions, как показано ниже:

string myUsername = "myusername";
string tweetUser = username in the message;
if (myUsername == tweetUser)
{
    tweet.HorizontalOptions = LayoutOptions.StartAndExpand;
}
else
{
    tweet.HorizontalOptions = LayoutOptions.EndAndExpand;
}

Эта функция работает нормально при начальной загрузке сообщений. Когда я отправляю новое сообщение, выравнивание нарушается. Некоторые сообщения перемещаются влево, а некоторые вправо. Если я коснусь редактора после отправки нового сообщения, возникнут проблемы с выравниванием. Не знаю, какая реальная проблема стоит за этим.

Я загрузил пример проекта здесь.

Также, одно видео записи экрана здесь.

ты не добавил видео

— 11.12.2020 12:32

вам следует использовать селектор шаблонов данных learn.microsoft.com/en-us/xamarin/xamarin-forms/…

— 11.12.2020 12:39

Добавлена ссылка на видео @ShubhamTyagi. Как я могу решить эту проблему с помощью селектора шаблонов данных?

— 11.12.2020 13:18

@Sreejith Sree Я заметил, что ваш образец содержит ваш личный адрес запроса. Я не буду его скачивать из-за политики безопасности. Вам лучше удалить его и создать новый образец со статическими данными. Поэтому я могу предоставить вам только фрагмент кода.

— 11.12.2020 13:52

listview xamarin.forms chat

11.12.2020 12:29

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

309

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласен с @Shubham Tyagi. Вы можете использовать DataTemplateSelector в вашем случае.

в коде позади создайте собственный DataTemplateSelector .

public class ChatDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate ReceiveTemplate { get; set; }
        public DataTemplate SendTemplate { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var obj = item as YourModel;

            string myUsername = "henry.pinto";
            string tweetUser = obj.tweetUser;
            if (myUsername == tweetUser)
            {
                return SendTemplate;
            }
            else
            {
                return ReceiveTemplate;
            }
        }
    }

в XAML

//...

    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key = "ReceiveTemplate">
                <ViewCell>
                    <Frame
                                FlowDirection = "LeftToRight"
                                Rotation = "180"
                                Padding = "8"
                                Margin = "0,8,0,8"
                                CornerRadius = "5"
                                HasShadow = "False"
                                BorderColor = "#f3db92"
                                BackgroundColor = "#fdebb6"
                                HorizontalOptions = "EndAndExpand"
                                VerticalOptions = "CenterAndExpand">

                        <Label 
                                Text = "{Binding tweetData}"
                                x:Name = "tweetData"  
                                TextColor = "Black"
                                HorizontalOptions = "Start" 
                                VerticalOptions = "Center">
                           
                        </Label>
                    </Frame>
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key = "SendTemplate">
                <ViewCell>
                    <Frame
                                FlowDirection = "LeftToRight"
                                Rotation = "180"
                                Padding = "8"
                                Margin = "0,8,0,8"
                                CornerRadius = "5"
                                HasShadow = "False"
                                BorderColor = "Blue"
                                BackgroundColor = "LightBlue"
                                HorizontalOptions = "StartAndExpand"
                                VerticalOptions = "CenterAndExpand">

                        <Label 
                                    Text = "{Binding tweetData}"
                                    x:Name = "tweetData"  
                                    TextColor = "Black"
                                    HorizontalOptions = "Start" 
                                    VerticalOptions = "Center">                           
                        </Label>
                    </Frame>
                </ViewCell>
            </DataTemplate>
            <local:ChatDataTemplateSelector x:Key = "ChatDataTemplateSelector"
                ReceiveTemplate = "{StaticResource ReceiveTemplate}"
                SendTemplate = "{StaticResource SendTemplate}" />
        </ResourceDictionary>
    </ContentPage.Resources>


    <StackLayout
        Orientation = "Vertical"
        HorizontalOptions = "FillAndExpand">
        
        <ListView
            ItemsSource = "{Binding xxx}"
            //...
            ItemTemplate = "{StaticResource ChatDataTemplateSelector}" 
            >
            
            <ListView.Footer>
                <Label/>
            </ListView.Footer>
        </ListView>

      
    </StackLayout>
</ContentPage>

И вы можете удалить свойство, такое как BgColor и BorderColor, в модели. И удалите следующий код

string myUsername = "myusername";
string tweetUser = username in the message;
if (myUsername == tweetUser)
{
    tweet.HorizontalOptions = LayoutOptions.StartAndExpand;
}
else
{
    tweet.HorizontalOptions = LayoutOptions.EndAndExpand;
}

11.12.2020 13:50