右对齐 ListBox 中的内容

Question

我想右对齐ListBoxItemTemplate中的一些内容，使其位置不会根据剩余ItemTemplate元素的宽度而改变。

这是我想要实现的屏幕截图：

这是我尝试使用的 XAML：

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Grid Margin="12 12 0 0" 
                  Width="60" Height="60" 
                  VerticalAlignment="Top"
                  Background="{StaticResource PhoneAccentBrush}">
                <Image Source="/Assets/Mystery.png" />
            </Grid>
            <StackPanel x:Name="ParentStackPanel">
                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" x:Name="NameText" />
                <TextBlock Text="{Binding Owner, StringFormat='by {0}'}"
                           Style="{StaticResource PhoneTextSmallStyle}" />
                <Grid HorizontalAlignment="Left" x:Name="FixedWidthGrid" >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Width="18"
                                   Text="{Binding ContainerSize, Converter={StaticResource ContainerSizeConverter}}"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                        <TextBlock Margin="0" Text="{Binding Difficulty, StringFormat='{}{0:N1}'}"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                        <TextBlock Margin="0" Text="/"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                        <TextBlock Margin="0" Text="{Binding Terrain, StringFormat='{}{0:N1}'}"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                        <Image Source="/Assets/Favorite.png" Height="24" />
                    </StackPanel>
                </Grid>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

在 sn-p 中，我将遇到问题的元素命名为 FixedWidthGrid。使用上面的 XAML，图标在 ParentStackPanel 内右对齐，其宽度取决于 NameText，即其中最宽的元素。在上图中，图标将与单词 Ukova 的末尾对齐。如果文本太宽而无法容纳，图标甚至可能会被推出屏幕。

我可以通过将固定宽度设置为FixedWidthGrid 来解决这个问题，但由于我希望我的页面在纵向和横向模式下都可以工作，所以我不能这样做。而且我什至没有用 WP8 支持的不同分辨率对其进行测试。

有没有办法将FixedWidthGrid 的宽度相对于页面宽度绑定，以便每次页面宽度发生变化时它都会改变（因为方向切换）？还是有其他方法可以让图标按照我的意愿对齐？

Answer 1

This answer 描述了使用 ListBox 将数据一直显示到右侧的主要问题。对于您的示例，我不会在外部使用 StackPanel，而是使用定义了三列的 Grid 以使中间列占用尽可能多的空间

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

在第一列放置您的 60x60 图片。在第二列中放置您的文本。这可以是 StackPanel。在第三列中放置您的小图像。这种对齐方式与更改 ListBoxItem 的 Horizo​​ntalAlignment 相结合，将呈现您想要的效果。