在聊天中对齐 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 ListView

MessagesList.ContainerContentChanging += OnContainerContentChanging;

在同一个文件中添加了这个函数：

private void OnContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)

{

    if (args.InRecycleQueue) return;

    // Currently we are adding messages to the ListView.ItemSource as Activity objects

    // since this handler is called when the content changes (an item is added)

    // intercept the item as an activity and set its horizontal alignment accordingly

    Activity message = args.Item as Activity;

    args.ItemContainer.HorizontalAlignment = (message.From.Name == botHandle) ? HorizontalAlignment.Right : HorizontalAlignment.Left;

}

上面的代码对应于ListView上面文件的 XAML 中的我的（及其模板）：

<Page.Resources>

    <DataTemplate x:Key="MessagesListDataTemplate">

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

            <Border>

                <TextBlock Text="{Binding Text}" TextWrapping="Wrap" MaxWidth="500" />

            </Border>

        </Grid>

    </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">

   <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" HorizontalAlignment="Left" Visibility={Binding IsUserText, Converter={StaticResource InverserBoolToVisibilityConverter}} Margin="5, 5, 5, 5" />

     </Border>

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

            <TextBlock Text="{Binding Text}" TextWrapping="Wrap" HorizontalAlignment="Right" Visibility={Binding IsUserText, Converter={StaticResource BoolToVisibilityConverter}} Margin="5, 5, 5, 5" />

     </Border>

   </Grid>

</DataTemplate>

编辑：

另外，如果您不想使用 two TextBlock's，您可以编写转换器 forHorizontalAlignment并且可以设置LeftorRight基于'IsUserText属性