Блог

Главная - Вопросы по программированию - Формы Xamarin: проблема с выравниванием свойства HorizontalOptions

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

#listview #xamarin.forms #chat

#listview #xamarin.forms #Чат

Вопрос:

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

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

 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;
}

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

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

Кроме того, здесь есть одно видео для записи экрана.

Комментарии:

1. вы не добавили видео

2. вы должны использовать селектор шаблонов данных docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals /…

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

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

Ответ №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;
}