uwp-xaml - 如何在 XAML 屏幕中使用 Row 和 RowSpam

Question

我将使用
的代码 Row 和 rowspan 正在使用此页面，但我希望行跨度以零索引开始，以 rowspan="3" 结束

<Grid Grid.Row="3" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Source="/Resources//Others/5.png" Margin="2 2 0 0" Stretch="Fill"/>
            </Grid>
            <Grid Grid.RowSpan="3" Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="65*"/>
                    <RowDefinition Height="68*"/>
                </Grid.RowDefinitions>
                <Image Grid.RowSpan="2" Source="/Resources//Others/6.png" Stretch="UniformToFill" Margin="0,2,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
            </Grid>
            <Grid Grid.RowSpan="3" Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Grid.RowSpan="3" Grid.Column="3" Source="/Resources//Others/6.png" Margin="2 2 0 0" Stretch="UniformToFill" />
            </Grid>
        </Grid>

像这样的输出屏幕

但我期待这个

标签： uwp-xaml

Answer 1

如何在 XAML 屏幕中使用 Row 和 RowSpam

为了理解这一点，您可以创建 3 列 3 行网格，如下所示。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
</Grid>

如果您想在整列后面占据两个。你需要设置RowSpan为 3，然后设置Column你想要开始。

<Rectangle Fill="LightCyan" Grid.RowSpan="3" Grid.Column="1"/>
<Rectangle Fill="LightGreen" Grid.RowSpan="3" Grid.Column="2"/>

以下是完整的 xaml 代码。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Gray" Grid.Column="0" Grid.Row="1"/>
    <Rectangle Fill="BlueViolet" Grid.Column="0" Grid.Row="2"/>


    <Rectangle Fill="LightCyan" Grid.RowSpan="3" Grid.Column="1"/>
    <Rectangle Fill="LightGreen" Grid.RowSpan="3" Grid.Column="2"/>

</Grid>