使用RowDefinitions和ColumnDefinitions定製xaml佈局

Question

我是UWP中的新成員，並且我在oficial doc中提到了一些誤解網格RowDefinitions和ColumnDefinitions。我必須做一個自定義列表元素，像這樣：

但我無法處理它。實際上主要的問題是如何爲子視圖設置fill_parent屬性。

Answer 1

您可以使用此方法，如您在提及的docs中指出的那樣。正如你的img它在垂直中的最後一個元素被描述，所以這種佈局將是：

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition 
       Height="24" /> 
      <RowDefinition 
      Height="20" /> 
    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition 
      Width="44" /> 
     <ColumnDefinition 
      Width="*" /> 
     <ColumnDefinition 
      Width="10" /> 
    </Grid.ColumnDefinitions> 

    <Rectangle 
     Fill="Red" 
     Grid.RowSpan="2" 
     Grid.Column="0"/> 

    <Rectangle 
     Fill="Green" 
     Grid.Row="0" 
     Grid.Column="1" /> 

    <Rectangle 
     Fill="Yellow" 
     Grid.Row="1" 
     Grid.Column="1" /> 

    <Grid 
     Grid.RowSpan="2" 
     Grid.Column="2"> 

     <Grid.RowDefinitions> 
      <RowDefinition 
       Height="*" /> 
      <RowDefinition 
       Height="*" /> 
      <RowDefinition 
       Height="*" /> 
     </Grid.RowDefinitions> 

     <Rectangle 
      Fill="Gray" 
      Grid.Row="1"/> 

    </Grid> 

</Grid> 

爲了簡單和清楚我是用Rectangle

Answer 2

填充的空間可以用

width="*" 

進行，並在佈局小的複雜性可以與網格嵌套系統來處理。 這是開始，而不是您佈局的完整解決方案。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="44"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="44"/> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="10"/> 
    </Grid.ColumnDefinitions> 

    <Grid Grid.Row="0" Grid.Column="1"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="24"/> 
      <RowDefinition Height="20"/> 
     </Grid.RowDefinitions> 
    </Grid> 
</Grid>