Right align content in ListBox

Question

I would like to properly align the contents in the ListBox ItemTemplate so that its position does not change depending on the width of the remaining ItemTemplate elements.

Here is a screenshot of what I would like to achieve:

Here is 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 named the element I'm having problems with with FixedWidthGrid . Using the above XAML, the icon is right-aligned inside the ParentStackPanel , the width of which depends on the NameText , i.e. the widest element inside it. In the image above, the icon will be aligned with the end of the word Ukova . If the text is too wide to fit, the icon may even be popped out of the screen.

I can solve this by setting the fixed width to FixedWidthGrid , but since I want my page to work in both portrait and landscape modes, I cannot do this. And I have not even tested it with different resolutions supported on WP8.

Is there a way to bind the Width of the FixedWidthGrid to the width of the page so that it changes every time the page width changes (due to the orientation switch)? Or is there another way to align the icon the way I want?

Answer 1

This answer describes the main problem using ListBox to display data all the way to the right. For your example, I would not use a StackPanel externally and instead use a Grid that has three columns 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 a 60x60 image. In the second column, place your text. It could be a StackPanel. And in the third column, place your small image. This alignment, combined with changing the HorizontalAlignment of the ListBoxItem, will do what you want.