Xamarin Forms：Horizo​​ntalOptions 的对齐问题 属性

Question

我在我的项目中实现了聊天 UI。发送消息显示在左侧，接收消息显示在右侧。

为了在左侧和右侧显示消息，我在模型 class 上创建了一个新变量，如下所示：

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

最初加载邮件时，此功能运行良好。当我发送一条新消息时，对齐被打破了。一些消息向左移动，一些向右移动。如果我在发送新消息后点击编辑器，对齐问题就会出现。不知道这背后的真正问题是什么。

我已经上传了一个示例项目here。

还有一个屏幕录像机视频here。

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