Universal App ListView Item HorizontalAlignment

Question

我想创建一个既有右对齐项目又有左对齐项目的 ListView。到目前为止，在我对 DataTemplates 和 ItemContainerStyles 的所有尝试中，我都无法正常工作。左对齐工作正常，因为这是默认设置，但我无法弄清楚如何使某些项目右对齐。例如，这类似于 chat/conversation 类型的视图，如 Windows Phone 消息应用程序。

我目前的 XAML 看起来像这样：

<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>

    <DataTemplate x:Key="SentMessageTemplate">
        <StackPanel Padding="10" Margin="5" Background="Teal" HorizontalAlignment="Right" Width="Auto">
            <TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White"/>
            <TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
            <TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="ReceivedMessageTemplate">
        <StackPanel Padding="10" Margin="5" Background="LightGray">
            <TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap"/>
            <TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap"/>
            <TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" TextAlignment="Right" FontStyle="Italic" FontSize="12"/>
        </StackPanel>
    </DataTemplate>

    <Style TargetType="ListViewItem" x:Key="SentMessageStyle">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>

    <Style TargetType="ListViewItem" x:Key="ReceivedMessageStyle">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>

    <local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
        SentMessageTemplate="{StaticResource SentMessageTemplate}"
        ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
    </local:MessageListTemplateSelector>

    <local:MessageListContainerStyleSelector x:Key="MessageListContainerStyleSelector"
        SentMessageStyle="{StaticResource SentMessageStyle}"
        ReceivedMessageStyle="{StaticResource ReceivedMessageStyle}">
    </local:MessageListContainerStyleSelector>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemContainerStyleSelector="{StaticResource MessageListContainerStyleSelector}" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False"/>
</Grid>

我可以更改什么以使 "Sent" 消息右对齐？目前他们显示的是我想要的蓝绿色背景，但他们仍然左对齐而不是右对齐。我对 XAML 有点陌生，所以请原谅我。

更新：解决方案

网格是关键，我最终不得不使用多个网格来实现正确的右对齐，并结合 ItemContainerStyle 设置 HorizontalContentAlignment.

<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>

    <DataTemplate x:Key="SentMessageTemplate">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Right">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Padding="10" Background="Teal">
                    <TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White" />
                    <TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
                    <TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
                </StackPanel>
            </Grid>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="ReceivedMessageTemplate">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Left">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Padding="10" Background="LightGray">
                    <TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" />
                    <TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" />
                    <TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
                </StackPanel>
            </Grid>
        </Grid>
    </DataTemplate>

    <local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
        SentMessageTemplate="{StaticResource SentMessageTemplate}"
        ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
    </local:MessageListTemplateSelector>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>

Answer 1

您应该使用 HorizontalAlignment 属性，它定义元素在父元素中的位置。<Grid x:Name="simpleGrid" height = 50 width = 100 HorizontalAlignment="right" />

Answer 2

问题出在您的 DataTemplates 中，而不是样式中，或者 etc.You 必须在 DataTemplate 中使用 Grid 而不是 Stackpanel 才能实现。

Stackpanels 不会延伸到 parent.They，只会得到 it.Try 内所有控件的宽度/高度，类似于

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

Universal App ListView Item HorizontalAlignment