使网格正确对齐 [英] Make grid align properly

问题描述

在我的应用程序中，我在列表框中显示有关用户的一些信息。我已经得到了大部分的东西，但是布局让我有些烦恼。
它是用网格制作的，因此它可以重新调整大小并适合纵向/横向模式。然而，我无法让布局修复自己......让我试着解释一下图片：

/peecee.dk/uploads/072011/gui1.pngalt =gui1>

正如您所看到的，右侧的数字并不与屏幕右边缘。我如何实现这一目标？

风景模式看起来差不多：

以下是一些XAML：

 < / p> ListBox.ItemTemplate> 
< DataTemplate> 
< Grid Horizo​​ntalAlignment =StretchVerticalAlignment =StretchShowGridLines =False> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =auto/> 
< ColumnDefinition Width =*/> 
< /Grid.ColumnDefinitions> 
< Image Source ={Binding Picture，Mode = OneWay}Grid.Column =0VerticalAlignment =CenterHorizo​​ntalAlignment =CenterWidth =73Height =73> 
 
< /图像> 
 
< Grid Grid.Column =1Horizo​​ntalAlignment =StretchVerticalAlignment =StretchShowGridLines =False> 
< Grid.RowDefinitions> 
< RowDefinition Height =auto/> 
< RowDefinition Height =auto/> 
< /Grid.RowDefinitions> 
 
< Grid Grid.Row =0Horizo​​ntalAlignment =StretchVerticalAlignment =StretchShowGridLines =False> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =*/> 
< ColumnDefinition Width =auto/> 
< /Grid.ColumnDefinitions> 
 
  Horizo​​ntalAlignment = LeftVerticalAlignment =Center
 Style ={StaticResource PhoneTextSmallStyle}
 TextWrapping =Wrap> 
 
< / TextBlock> 
 
< TextBlock Text ={Binding Mode = OneWay，Path = amount}Grid.Column =1
 Horizo​​ntalAlignment =RightVerticalAlignment =CenterFontSize =28 
 Style ={StaticResource PhoneTextSmallStyle}> 
 
< / TextBlock> 
< / Grid> 
 
< TextBlock Text ={Binding Mode = OneWay，Path = description}Grid.Row =1
 Horizo​​ntalAlignment =RightVerticalAlignment =Center
 Style ={StaticResource PhoneTextSmallStyle}TextWrapping =Wrap
 FontSize =24> 
< / TextBlock> 
< / Grid> 
< / Grid> 
< / DataTemplate> 
< /ListBox.ItemTemplate> 
  

解决方案

您需要设置ListBox的ItemContainerStyle，将伸展ListBoxItems。

 < ListBox.ItemContainerStyle> 
< Style TargetType =ListBoxItem> 
< Setter Property =Horizo​​ntalContentAlignmentValue =Stretch>< / Setter> 
< / style> 
< /ListBox.ItemContainerStyle> 
  

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>

解决方案

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>

这篇关于使网格正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！