1 
<Page
    x:Class="AllControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AllControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">



        <Rectangle Width="100" Height="100" Fill="Red" Grid.Column="0" Grid.Row="0"/>
        <Rectangle Width="100" Height="100" Fill="Orange"  Grid.Column="1"  Grid.Row="0"/>
        <Rectangle Width="100" Height="100" Fill="Yellow"  Grid.Column="0" Grid.Row="1"/>
        <Rectangle Width="100" Height="100" Fill="Green" Grid.Column="1"  Grid.Row="1"/>
        <Rectangle Width="100" Height="100" Fill="Blue" Grid.Column="0" Grid.Row="2"/>
        <Rectangle Width="100" Height="100" Fill="Indigo" Grid.Column="1" Grid.Row="2"/>
        <Rectangle Width="100" Height="100" Fill="Violet" Grid.Column="0" Grid.Row="3"/>
        <Rectangle Width="100" Height="100" Fill="Purple" Grid.Column="1" Grid.Row="3"/>
    </Grid>
</Page>

在这种情况下，我为每个元素提供行号和列号矩形。我还为它们中的每一个提供了高度和宽度。

我来自 HTML 背景。

有人可以向我解释标签 RowDefinitions 和 ColumnDefinitions 在这里如何工作吗？

4

2 回答 2

2

您必须指定 RowDefinitions 和 ColumnDefinitions 以便它知道如何调整行和列的大小。否则它不知道你是想要 auto-sizing 还是star-sizing。它还需要预先知道您需要多少行和列；它不会根据您的 Grid.Row 和 Grid.Column 的值即时添加它们。

我认为您编写的代码看起来很合理，如果在您不指定时使用默认值会很好，但不幸的是它没有。相反，它构建了一个单列单行网格并将所有子项堆叠在一起。

我可以想出几种方法来编写一些 XAML 来满足您的需求。

单程：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Rectangle Width="100" Height="100" Fill="Red" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Width="100" Height="100" Fill="Orange"  Grid.Column="1"  Grid.Row="0"/>
    ...
</Grid>

其他方式：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Orange"  Grid.Column="1"  Grid.Row="0"/>
    ...
</Grid>
于 2013-06-03T13:55:55.203 回答
1

就像 Andrew 先生指出的那样，您必须更多地定义您的布局才能使用指定的RowDefinition/ColumnDefinition来完成它，以基本上手动布置您的东西。如果您正在寻找更流畅且对定义布局结构的要求更少的东西，您应该查看GridView / VariableSizeWrapGrid（我认为您正在寻找更多的东西。）

两者都在网络上提供了多个示例，并且很容易习惯。希望这有助于您从 HTML 过渡到 XAML（ps，在我看来 XAML > HTML）

:)

于 2013-06-03T14:56:36.690 回答