如何在 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>

像这样的输出屏幕

但我预料到了这一点

Answer 1

How to use Row and RowSpam in XAML Screens

为了理解这一点，您可以创建如下所示的 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>

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

How to use Row and RowSpam in XAML Screens

uwp-xaml