右对齐ListBox中的内容

Question

我想在ListBox ItemTemplate中对齐某些内容，使其位置不会因剩余的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>

在片段中，我将{I} FixedWidthGrid命名为元素。使用上面的XAML，图标在ParentStackPanel内右对齐，其宽度取决于NameText，即其中最宽的元素。在上图中，图标将与单词Ukova的结尾对齐。如果文字太宽而不适合，图标甚至可能会被推出屏幕。

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

有没有办法将FixedWidthGrid的宽度相对于页面宽度绑定，以便每次页面宽度更改时都会更改（因为方向切换）？或者是否有另一种方法可以按照我的要求对齐图标？

Answer 1

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

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

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