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 の値に基づいてその場で追加するわけではありません。

あなたが書いたコードは合理的に見えると思います。指定しない場合はデフォルトを使用するといいのですが、残念ながらそうではありません。代わりに、1 列、1 行のグリッドを構築し、すべての子を互いに積み重ねます。

希望どおりの 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

アンドリュー氏が指摘したように、指定されたRowDefinition/ColumnDefinitionを使用して基本的に手動でレイアウトを作成するには、レイアウトをさらに定義する必要があります。レイアウト構造を定義する必要が少なく、もう少し流動的なものを探している場合は、GridView / VariableSizeWrapGridを調べる必要があります (探しているものの方が多いと思います)。

どちらも、ウェブ上で複数の例が入手可能であり、慣れるのは非常に簡単です。これが HTML から XAML への移行に役立つことを願っています (ps、私の意見では XAML > HTML)。

:)

于 2013-06-03T14:56:36.690 に答える