Xamarin Forms：HorizontalOptions 属性的对齐问题

斯瑞吉斯瑞

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

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

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

最初加载消息时，此功能工作正常。当我发送新消息时，对齐正在中断。一些消息向左移动，一些消息向右移动。如果我在发送新消息后点击编辑器，对齐问题就会出现。不知道这背后的真正问题是什么。

我在这里上传了一个示例项目。

此外，这里有一个屏幕录像机视频。

卢卡斯张

同意@ 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;
            }
        }
    }

在 Xml 中

//...

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。