使网格正确对齐答案

【问题标题】：Make grid align properly使网格正确对齐
【发布时间】：2011-10-10 13:55:13
【问题描述】：

在我的应用程序中，我在列表框中显示了一些有关用户的信息。我有我想要的大部分东西，但布局有点让我烦恼。它由网格制成，因此可以重新调整大小并适合纵向/横向模式。

但是，我无法让布局“自行修复”……让我试着用图片来解释一下：

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

横向模式看起来几乎没问题：

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

【问题讨论】：

我知道在 WPF 中您有用于网格列的 SharedSizeGroup，我不确定 Silverlight/WP7 中是否可用。你试过吗？
我在 google 上搜索了一下，发现了这个线程：stackoverflow.com/questions/4562104/… 但是，由于我使用的是网格而不是堆栈面板，所以我看不到它在我的情况下将如何实现。或者也许这很简单，我只是累了..：P
我认为 Claus 对您有正确的想法，SharedSizeGroup 在 Silverlight/WP7 中不可用（基于您发布的链接）。

标签： layout grid windows-phone

【解决方案1】：

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

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

【讨论】：

太棒了！如此简单，解决了我的问题，非常感谢！也感谢其他所有人，喜欢这个网站的快速回复！克劳斯：而且你甚至和我来自同一个城市，真好:)

【解决方案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>

【讨论】：

无法解决问题，因为由于布局怪癖，ItemsTemplate 不会填满整个宽度。
好的，我明白了，我读的太快了，没有注意到实际的问题是什么。尽管如此，即使这不是正确的答案，我仍然会尝试减轻视觉树的亮度；）