Make grid align properly

问题:

In my app I'm displaying some info about users in a listbox. I've got most of the stuff as I want, but the layout is bugging me a bit. It's made with grids, so that it'll re-size and fit portrait/landscape modes.

However, I cannot get the layout to "fix itself"... let me try and explain with pictures:

As you can see the numbers at the right side isn't aligned to the right edge of the screen. How do I achieve this?

Landscape mode looks almost okay:

Below is some of the XAML:

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Picture, Mode=OneWay}"  Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="73" Height="73">

                        </Image>

                        <Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="0" Foreground="#FF3F9AC4" FontSize="28"
                                       HorizontalAlignment="Left" VerticalAlignment="Center"
                                       Style="{StaticResource PhoneTextSmallStyle}"
                                       TextWrapping="Wrap"> 

                                </TextBlock>

                                <TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="1"
                                       HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
                                           Style="{StaticResource PhoneTextSmallStyle}"> 

                                </TextBlock>
                            </Grid>

                            <TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1"
                                       HorizontalAlignment="Right" VerticalAlignment="Center"
                                       Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap"
                                        FontSize="24"> 
                            </TextBlock>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>

回答1:

You need to set the ItemContainerStyle of your ListBox so it'll stretch the ListBoxItems.

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    </Style>
</ListBox.ItemContainerStyle>

回答2:

You could try a simpler grid:

<Grid HorizontalAlignment="Stretch" ShowGridLines="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Image Source="{Binding Picture, Mode=OneWay}"  Grid.Column="0" Grid.RowSpan="2"
           VerticalAlignment="Center" 
           HorizontalAlignment="Center" Width="73" Height="73" />

    <TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="1" Foreground="#FF3F9AC4" FontSize="28"
                                   HorizontalAlignment="Left" VerticalAlignment="Center"
                                   Style="{StaticResource PhoneTextSmallStyle}"
                                   TextWrapping="Wrap" />

    <TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="2"
                                   HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
                                    Style="{StaticResource PhoneTextSmallStyle}" />

    <TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
               VerticalAlignment="Center" Style="{StaticResource PhoneTextSmallStyle}" 
               TextWrapping="Wrap" FontSize="24" />
</Grid>