对齐聊天中的ListView项目

时间：2019-01-15 04:44:19

标签： c# uwp-xaml

现在，此聊天机器人将其所有显示文本向左对齐。用户输入应与右侧对齐，但不确定如何执行此操作。我尝试将HorizontalAlignment="Right"添加到ListView，但是它将整个漫游器/用户聊天列表移到右侧。我只希望用户输入的文本右对齐。但是如何？我还为ItemTemplate查找了不同的ListView选择，但没有一个满足我的需求。我会接受XAML或以C＃编程方式提供的解决方案。

{{0}}

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

2 个答案:

答案 0 :(得分：0)

您可以在模型中添加一个IsUserText之类的其他属性，然后创建两个TextBlock，一个属性左对齐，另一个属性右对齐，您可以设置TextBlock的Visibility基于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>

编辑：

如果您不想使用两个TextBlock's，则可以为HorizontalAlignment编写转换器，并可以基于{{1}来设置Left或Right }属性

答案 1 :(得分：0)

找到了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;
}

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

<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"/>
相关问题
最新问题