使网格对齐正确

在我的应用程序中，我在列表框中显示有关用户的一些信息。我已经得到了大部分的东西，但是布局让我有些烦恼。它是用网格制作的，因此它可以重新调整大小并适合纵向/横向模式。使网格对齐正确

但是，我不能得到的布局，以“自我修复” ......让我来试试，并用图片解释： gui1

正如你可以在右侧看到的数字是不是右对齐屏幕边缘。我如何实现这一目标？

风景模式看起来几乎没关系： gui2

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

来源

2011-07-21 David K

在WPF我知道你有'SharedSizeGroup'电网列，我不知道这是在Silverlight/WP7可用。你尝试过吗？ – CodingGorilla

我GOOGLE了，发现这个线程：http://stackoverflow.com/questions/4562104/creating-a-table-with-silverlight-for-windows-phone-7 但是，我不明白它将如何实施在我的情况下，因为我使用网格而不是stackpanels。或者，也许它很简单，我只是累了..：P –

我认为Claus对你有正确的想法，SharedSizeGroup在Silverlight/WP7中不可用（基于你发布的链接）。 – CodingGorilla

你需要设置你的ListBox的ItemContainerStyle所以它会舒展ListBoxItems。

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

来源

2011-07-21 20:48:13

太棒了！这么简单，解决了我的问题，非常感谢！并感谢所有其他人，热爱本网站的快速反应！克劳斯：你甚至从我的同一个城市，多好:) –

你可以尝试一个简单的网格：

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

来源

2011-07-21 20:48:43 madd0

不会解决问题，因为ItemsTemplate不会填充整个宽度，由于布局怪癖。 –

好的，我明白了，我读得太快，没有注意到实际问题。尽管如此，即使这不是正确的答案，但我仍然会尝试着照亮视觉树;） – madd0

使网格对齐正确

回答

相关问题