右对齐列表框中的内容 [英] Right align content in ListBox

问题描述

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

I'd like to right align some content in ListBox ItemTemplatein a way that its position doesn't change based on the width of the remaining ItemTemplate elements.

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

Here's a screenshot of what I'd like to achieve:

这是我尝试使用的 XAML:

Here's the XAML I'm trying to use:

<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 的结尾对齐.如果文本太宽而无法容纳，图标甚至可能会被推出屏幕.

In the snippet I've named the element I'm having problems with as FixedWidthGrid. With the above XAML the icon is right aligned inside the ParentStackPanel, the width of which depends on the NameText, i.e. the widthest element inside it. In the image above the icon would be aligned with the end of the word Ukova. If the text is too wide to fit, the icon might even be pushed out of the screen.

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

I can solve that by setting fixed width to FixedWidthGrid but since I want my page to work both in portrait and landscape mode, I can't do that. And I haven't even tested it with different resolutions, supported on WP8.

有没有办法绑定 FixedWidthGrid 相对于页面宽度的宽度，这样每次页面宽度改变时它都会改变(因为方向切换)?或者是否有另一种方法可以让图标按照我想要的方式对齐?

Is there a way to bind the width of FixedWidthGrid relative to page width so that it would change every time the page width changes (because of orientation switch)? Or is there another way to get the icon aligned as I want it to?

推荐答案

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

This answer describes the main problem with using a ListBox to display data all the way to the right. For your example, I would not use a StackPanel on the outside and instead use a Grid that had three columns defined that make the middle column take up as much space as it can

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

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

In the first column place your 60x60 image. In the second column place your text. This can be a StackPanel. And in the third Column place your small image. This alignment, combined with changing the HorizontalAlignment of the ListBoxItem will render what you desire.

这篇关于右对齐列表框中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！