c# - 在聊天中对齐 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"/>

        <StackPanel Grid.Column="1" >
            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" Height="380" Width="900" Margin="20,25,15,0" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="20*"/>
                    <RowDefinition Height="300*"/>
                    <RowDefinition Height="50*"/>
                    <RowDefinition Height="60*"/>
                </Grid.RowDefinitions>
                <ListView x:Name="MessagesList" Grid.Row="1" ItemTemplate="{StaticResource MessagesListDataTemplate}" />
                <TextBox x:Name="NewMessageTextBox" Grid.Row="2" KeyUp="NewMessageTextBox_KeyUp" VerticalAlignment="Center" />
                <Button x:Name="button" Content="SEND" Foreground="#2f5cb6" Margin="15,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Button_Send" Grid.Row="3" />

                <Button BorderBrush="Transparent" Margin="779,0,20,0" Grid.Row="3" HorizontalAlignment="Right" Click="Button_Mic">
                    <SymbolIcon Symbol="Microphone" Foreground="#2f5cb6"/>
                </Button>
            </Grid>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="20,20,20,20">
            <Pivot x:Name="rootPivot" HorizontalAlignment="Center" VerticalAlignment="Top" Height="Auto" Width="1150">
                <Pivot.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding}" Foreground="White" />
                        </Grid>
                    </DataTemplate>
                </Pivot.HeaderTemplate>

                <Pivot.RightHeader>
                    <CommandBar ClosedDisplayMode="Compact">
                        <AppBarButton Icon="Back" Label="Previous" Click="BackButton_Click"/>
                        <AppBarButton Icon="Forward" Label="Next" Click="NextButton_Click"/>
                    </CommandBar>
                </Pivot.RightHeader>
                <PivotItem Header="Encyclopedia">
                    <WebView x:Name="Encyclopedia" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="1150" MinHeight="500" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                    </WebView>
                </PivotItem>
                <PivotItem Header="Microsoft Academic">
                    <WebView x:Name="MicrosoftAcademic" Width="1150" HorizontalAlignment="Center" VerticalAlignment="Stretch" LoadCompleted="Journals_LoadCompleted" MinHeight="500" UseLayoutRounding="False" d:LayoutRounding="Auto" />
                </PivotItem>
                <PivotItem Header="News / Blogs">
                    <WebView x:Name="NewsBlogs" Width="1150" HorizontalAlignment="Center" VerticalAlignment="Stretch" MinHeight="500" UseLayoutRounding="False" d:LayoutRounding="Auto" />
                </PivotItem>
            </Pivot>
        </StackPanel>
        <Image Width="160" Source="Assets/robot-face.png" HorizontalAlignment="Center" Margin="15,60,10,10" VerticalAlignment="Center" Height="160" />
        <TextBlock Foreground="White" FontSize="38" HorizontalAlignment="Center" Margin="15,70,10,10" Text="Study Bot"/>
    </Grid>
</Page>

更新 MainPage.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" 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>
    </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"/>

        <StackPanel Grid.Column="1" >
            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" Height="380" Width="900" Margin="20,25,15,0" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="20*"/>
                    <RowDefinition Height="300*"/>
                    <RowDefinition Height="50*"/>
                    <RowDefinition Height="60*"/>
                </Grid.RowDefinitions>
                <ListView x:Name="MessagesList" Grid.Row="1" ItemTemplate="{StaticResource MessagesListDataTemplate}" />
                <TextBox x:Name="NewMessageTextBox" Grid.Row="2" KeyUp="NewMessageTextBox_KeyUp" VerticalAlignment="Center" />
                <Button x:Name="button" Content="SEND" Foreground="#2f5cb6" Margin="15,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Button_Send" Grid.Row="3" />

                <Button BorderBrush="Transparent" Margin="779,0,20,0" Grid.Row="3" HorizontalAlignment="Right" Click="Button_Mic">
                    <SymbolIcon Symbol="Microphone" Foreground="#2f5cb6"/>
                </Button>
            </Grid>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="20,20,20,20">
            <Pivot x:Name="rootPivot" HorizontalAlignment="Center" VerticalAlignment="Top" Height="Auto" Width="1150">
                <Pivot.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding}" Foreground="White" />
                        </Grid>
                    </DataTemplate>
                </Pivot.HeaderTemplate>

                <Pivot.RightHeader>
                    <CommandBar ClosedDisplayMode="Compact">
                        <AppBarButton Icon="Back" Label="Previous" Click="BackButton_Click"/>
                        <AppBarButton Icon="Forward" Label="Next" Click="NextButton_Click"/>
                    </CommandBar>
                </Pivot.RightHeader>
                <PivotItem Header="Encyclopedia">
                    <WebView x:Name="Encyclopedia" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="1150" MinHeight="500" UseLayoutRounding="False" d:LayoutRounding="Auto" >
                    </WebView>
                </PivotItem>
                <PivotItem Header="Microsoft Academic">
                    <WebView x:Name="MicrosoftAcademic" Width="1150" HorizontalAlignment="Center" VerticalAlignment="Stretch" LoadCompleted="Journals_LoadCompleted" MinHeight="500" UseLayoutRounding="False" d:LayoutRounding="Auto" />
                </PivotItem>
                <PivotItem Header="News / Blogs">
                    <WebView x:Name="NewsBlogs" Width="1150" HorizontalAlignment="Center" VerticalAlignment="Stretch" MinHeight="500" UseLayoutRounding="False" d:LayoutRounding="Auto" />
                </PivotItem>
            </Pivot>
        </StackPanel>
        <Image Width="160" Source="Assets/robot-face.png" HorizontalAlignment="Center" Margin="15,60,10,10" VerticalAlignment="Center" Height="160" />
        <TextBlock Foreground="White" FontSize="38" HorizontalAlignment="Center" Margin="15,70,10,10" Text="Study Bot"/>
    </Grid>
</Page>

标签： c#uwp-xaml

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