使网格正确对齐

Question

在我的应用中，我在列表框中显示有关用户的一些信息。我按照自己的意愿获得了大部分内容，但布局让我感到烦恼。 它由网格制成，因此它可以重新调整大小并适合纵向/横向模式。

然而，我无法让布局“修复自己”...让我尝试用图片解释：

如您所见，右侧的数字未与屏幕右边缘对齐。我该如何实现这一目标？

风景模式看起来几乎没问题：

以下是一些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>

Answer 1

您需要设置ListBox的ItemContainerStyle，以便它将拉伸ListBoxItems。

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

Answer 2

您可以尝试更简单的网格：

<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>