在聊天中对齐 ListView 项目

Question

现在，这个聊天机器人将其所有显示文本都向左对齐。用户输入应该向右对齐，但不知道如何做到这一点。我尝试向 中添加一个HorizontalAlignment="Right"，ListView但它会将整个机器人/用户聊天列表移动到右侧。我只希望用户输入的文本右对齐。但是怎么做？我还查找了不同ItemTemplate的选择，ListView但没有一个有我需要的。我会接受 XAML 中的解决方案或 C# 中的编程方式。

主页.xaml

<Page

    x:Class="StudyBot.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:StudyBot"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

        <DataTemplate x:Key="MessagesListDataTemplate">

            <Grid x:Name="Text" Background="White" VerticalAlignment="Center" Margin="5, 5, 5, 5">

                <Border BorderThickness="2" BorderBrush="deepskyblue" CornerRadius="7">

                    <TextBlock Text="{Binding Text}" TextWrapping="Wrap" Margin="5, 5, 5, 5" />

                </Border>

            </Grid>

        </DataTemplate>

    </Page.Resources>

    <Grid HorizontalAlignment="Center" VerticalAlignment="Stretch" >

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="1.3*"/>

            <ColumnDefinition Width="5*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="0.9*"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Border Background="#2f5cb6"/>

        <Border Grid.Column ="1" Background="#1f3d7a"/>

        <Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951"/>

Answer 1

找到了一个有效的 C#、XAML 组合。我将此添加到我的MainPage()：// Add an event handler for the ContainerContentChanging event of the ListViewMessagesList.ContainerContentChanging += OnContainerContentChanging;在同一个文件中添加了这个函数：private void OnContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args){&nbsp; &nbsp; if (args.InRecycleQueue) return;&nbsp; &nbsp; // Currently we are adding messages to the ListView.ItemSource as Activity objects&nbsp; &nbsp; // since this handler is called when the content changes (an item is added)&nbsp; &nbsp; // intercept the item as an activity and set its horizontal alignment accordingly&nbsp; &nbsp; Activity message = args.Item as Activity;&nbsp; &nbsp; args.ItemContainer.HorizontalAlignment = (message.From.Name == botHandle) ? HorizontalAlignment.Right : HorizontalAlignment.Left;}上面的代码对应于ListView上面文件的 XAML 中的我的（及其模板）：<Page.Resources>&nbsp; &nbsp; <DataTemplate x:Key="MessagesListDataTemplate">&nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="TextB" Background="White" VerticalAlignment="Center" Margin="5, 5, 5, 5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextBlock Text="{Binding Text}" TextWrapping="Wrap" MaxWidth="500" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; </DataTemplate></Page.Resources><ListView x:Name="MessagesList" Grid.Row="1" ItemTemplate="{StaticResource MessagesListDataTemplate}" Margin="5, 5, 5, 15"/>

Answer 2

您可以在模型中添加一个附加属性，例如IsUserText，然后创建两个TextBlock左对齐和另一个右对齐，您可以根据属性设置VisibilityTextBlock 的IsUserText属性。你DataTemplate应该看起来像这样：<DataTemplate x:Key="MessagesListDataTemplate">&nbsp; &nbsp;<Grid x:Name="Text" Background="White" VerticalAlignment="Center" Margin="5, 5, 5, 5">&nbsp; &nbsp; &nbsp;<Border BorderThickness="2" BorderBrush="deepskyblue" CornerRadius="7">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<TextBlock Text="{Binding Text}" TextWrapping="Wrap" HorizontalAlignment="Left" Visibility={Binding IsUserText, Converter={StaticResource InverserBoolToVisibilityConverter}} Margin="5, 5, 5, 5" />&nbsp; &nbsp; &nbsp;</Border>&nbsp; &nbsp; <Border BorderThickness="2" BorderBrush="deepskyblue" CornerRadius="7">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TextBlock Text="{Binding Text}" TextWrapping="Wrap" HorizontalAlignment="Right" Visibility={Binding IsUserText, Converter={StaticResource BoolToVisibilityConverter}} Margin="5, 5, 5, 5" />&nbsp; &nbsp; &nbsp;</Border>&nbsp; &nbsp;</Grid></DataTemplate>编辑：另外，如果您不想使用 two TextBlock's，您可以编写转换器 forHorizontalAlignment并且可以设置LeftorRight基于'IsUserText属性