WPF如何绑定Grid的HorizontalAlignment属性控制ListBox聊天消息对齐

实现方案 #

步骤1：创建消息数据模型 #

你现在直接往ListBox里加字符串，无法携带「发送/接收状态」这个额外信息，首先需要定义一个消息类来承载完整的消息数据：

public class ChatMessage
{
    // 消息内容
    public string Content { get; set; }
    // 是否为自己发送的消息：true=发送，false=接收
    public bool IsSentByMe { get; set; }
}

如果后续需要动态修改消息属性并同步到UI，可以让类实现INotifyPropertyChanged接口。

步骤2：修改XAML绑定逻辑 #

这里直接用DataTrigger实现状态判断，无需额外写值转换器，对新手更友好：
修改你的DataTemplate部分代码即可，其余ListBox配置保持不变：

<DataTemplate>
    <Grid Background="#bd93f9">
        <Grid.Style>
            <Style TargetType="Grid">
                <!-- 先设置接收消息的默认样式（靠左） -->
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="Margin" Value="8,0,64,0"/>
                <Style.Triggers>
                    <!-- 当是自己发送的消息时，切换为靠右样式 -->
                    <DataTrigger Binding="{Binding IsSentByMe}" Value="True">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                        <Setter Property="Margin" Value="64,0,8,0"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
        <!-- TextBlock的Text绑定改为绑定Content属性，同时对齐方式也可以同步适配 -->
        <TextBlock Text="{Binding Content}" TextWrapping="Wrap" LineStackingStrategy="MaxHeight" Foreground="White" VerticalAlignment="Stretch" Margin="16,8,32,0" LineHeight="Auto" TextTrimming="None" Width="Auto" Padding="0" UseLayoutRounding="True">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="TextAlignment" Value="Left"/>
                    <Setter Property="HorizontalAlignment" Value="Left"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSentByMe}" Value="True">
                            <Setter Property="TextAlignment" Value="Right"/>
                            <Setter Property="HorizontalAlignment" Value="Right"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <!-- 后面的Button代码保持你原来的不变即可 -->
        <Button HorizontalAlignment="Right" VerticalAlignment="Center" Width="32" Height="32" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" Margin="0">
            <!-- 原有Button样式代码无需修改 -->
        </Button>
    </Grid>
</DataTemplate>

步骤3：修改添加消息的C#代码 #

现在往ListBox里添加的是ChatMessage实例，而不是纯字符串：

// 发送消息时调用
list_chat.Items.Add(new ChatMessage { Content = textRange.Text, IsSentByMe = true });

// 收到消息时调用
// list_chat.Items.Add(new ChatMessage { Content = 对方发送的消息内容, IsSentByMe = false });

如果需要收到新消息后自动滚动到最底部，可以在添加完消息后加一行代码：

list_chat.ScrollIntoView(list_chat.Items[list_chat.Items.Count - 1]);

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