Xamarin.Forms聊天应用实现收发消息左右分侧排布

实现步骤 #

1. 扩展Chat模型 #

在你的Model.Chat类中新增一个计算属性，用于区分消息发送方是否为当前登录用户：

public class Chat
{
    public string UserName { get; set; }
    public string UserMessage { get; set; }
    // 判断是否为当前用户发送的消息
    public bool IsOwnMessage => UserName == Preferences.Get("RandomText", string.Empty);
}

2. 修改XAML布局替换原有TextCell #

将ListView中原有的TextCell模板替换为自定义ViewCell，通过DataTrigger实现消息位置、样式的自动切换，修改后完整布局代码如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="4*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ListView 
        Grid.Row="0" 
        ItemsSource="{Binding .}" 
        x:Name="_lstChat"
        SeparatorVisibility="None"
        HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="8,4">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="7*"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>
                        <Frame 
                            CornerRadius="12"
                            Padding="10,8"
                            HasShadow="False">
                            <StackLayout Spacing="3">
                                <Label Text="{Binding UserName}" FontSize="Small" FontAttributes="Bold" TextColor="#555"/>
                                <Label Text="{Binding UserMessage}" FontSize="Body"/>
                            </StackLayout>
                            <Frame.Triggers>
                                <!-- 当前用户发送的消息：右对齐、浅绿色气泡 -->
                                <DataTrigger TargetType="Frame" Binding="{Binding IsOwnMessage}" Value="True">
                                    <Setter Property="BackgroundColor" Value="#DCF8C6"/>
                                    <Setter Property="Grid.Column" Value="1"/>
                                    <Setter Property="HorizontalOptions" Value="End"/>
                                </DataTrigger>
                                <!-- 其他用户发送的消息：左对齐、白色气泡 -->
                                <DataTrigger TargetType="Frame" Binding="{Binding IsOwnMessage}" Value="False">
                                    <Setter Property="BackgroundColor" Value="White"/>
                                    <Setter Property="Grid.Column" Value="0"/>
                                    <Setter Property="HorizontalOptions" Value="Start"/>
                                </DataTrigger>
                            </Frame.Triggers>
                        </Frame>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <Grid Grid.Row="1" RowSpacing="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Entry Placeholder="Write Message .." Grid.Column="0" x:Name="_etMessage"/>
        <Button Text="Send!" Grid.Column="1" Clicked="Button_Clicked"/>
    </Grid>
</Grid>

关键说明 #

• ListView必须开启HasUnevenRows="True"，否则消息长度变化时不会自动适配行高
• 气泡颜色、圆角、列宽占比都可以根据需求自行调整Setter中的参数值
• 现有后台C#逻辑不需要做任何修改，新增的属性会自动完成消息归属判断
• 如果不需要展示发送者用户名，直接删除模板中绑定UserName的Label控件即可

内容的提问来源于stack exchange，提问作者Berkay Kaplan