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