xaml - 右对齐 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>

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

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

有没有办法绑定(bind) 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 相结合，将呈现您想要的效果。