6

我想以某种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相对于页面宽度的宽度，以便每次页面宽度发生变化时它都会改变（因为方向切换）？还是有另一种方法可以让图标按照我的意愿对齐？

4

1 回答 1

7

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

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

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

于 2013-01-27T02:12:40.037 回答