使網格對齊正確

在我的應用程序中，我在列表框中顯示有關用戶的一些信息。我已經得到了大部分的東西，但是佈局讓我有些煩惱。它是用網格製作的，因此它可以重新調整大小並適合縱向/橫向模式。使網格對齊正確

但是，我不能得到的佈局，以「自我修復」 ......讓我來試試，並用圖片解釋： 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

使網格對齊正確

回答

相關問題