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

时间:2019-03-05 12:17:54

标签: uwp-xaml

我将使用的代码
“行和行跨度”正在使用此页面,但我希望行跨度的值以零索引开头,以行跨度=“ 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>

这样的输出屏幕

Output Screen

但是我希望如此

Expected Screen

1 个答案:

答案 0 :(得分:0)

  

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

enter image description here

以下是完整的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>