Right align content in ListBox

Question

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:

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>

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.

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.

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?

Answer 1

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>

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.