2014-09-22 126 views
0

我有一個用戶控件中下面的XAML代碼:網格增加不必要的額外的垂直空間

<StackPanel VerticalAlignment="Top"> 
    <Grid Background="LimeGreen"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Top" Fill="Yellow" Width="80" Height="80" /> 

     <Rectangle Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" /> 
     <Rectangle Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" /> 
     <Rectangle Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" /> 
    </Grid> 
</StackPanel> 

並可以產生以下佈局:

extra space

出於某種原因,這是增加額外的黃色正方形之後的無用空間。我想下面的佈局,而不是:

correct

只有當綠色網格是一個堆疊面板內發生的額外空間。我可以通過以下方式獲得正確的佈局:

  • 將綠色網格置於網格內而不是堆疊面板。
  • 或者將第二列的寬度設置爲「自動」。雖然這是不受歡迎的。

我的問題是:

  1. 是第一張圖片正確的佈局/預期?如果是這樣,爲什麼增加額外的空間?
  2. 爲什麼設置第二列的寬度「自動」甩掉多餘的垂直空間?
  3. 如何獲得第二列寬度設置爲*(星號)的堆棧面板內的佈局#2?

回答

0

我可以用這個替代xaml來回答問題3,但是它使用嵌套網格繞過使用黃色方塊的行跨度。理想情況下,這應該可能只使用一個網格。總之,這裏的XAML:

<StackPanel VerticalAlignment="Top"> 
    <Grid Background="LimeGreen"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 

     <Rectangle VerticalAlignment="Top" Fill="Yellow" Width="80" Height="80" /> 

     <Grid Grid.Column="1"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 

      <Rectangle Grid.Row="0" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" /> 
      <Rectangle Grid.Row="1" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" /> 
      <Rectangle Grid.Row="2" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" /> 
     </Grid> 
    </Grid> 
</StackPanel> 

我還是難倒回答問題1和2

相關問題