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

在片段中,我已经将我遇到问题的元素命名为as FixedWidthGrid.使用上面的XAML,图标在其内部右对齐ParentStackPanel,其宽度取决于其内部的最宽NameText元素.在上图中,图标将与单词的结尾对齐Ukova.如果文字太宽而不适合,图标甚至可能会被推出屏幕.

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

有没有办法绑定FixedWidthGrid相对于页面宽度的宽度,以便每次页面宽度更改时都会更改(因为方向切换)？或者是否有其他方法可以将图标对齐,因为我想要它？

Answer 1

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

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

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