windows-8 - Windows 8アプリでクリック可能なタイルでグリッドを表示する方法は？

Question

Windows Metro 8アプリでタイルごとにクリック可能なタイルベースのグリッドを表示したいのですが、このグリッドは画面の中央にあり、4辺から等距離にある必要があります。

Answer 1

を使用する必要がありますGridView。

ジェフが述べたように、マークアップはXAMLとHTML5で異なります。GridViewの詳細については、次を参照してください。

Metroアプリ-GridViewおよびListView（XAML）

そのプラットフォームを使用している場合に備えて、リンクからHTMLに相当するものに切り替えることができます。

Answer 2

以下のHTMLとXAMLの例

CSS

.outergrid{
display: -ms-grid;
-ms-grid-rows: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr 1fr;
width: 100%;
height: 100%;}

.innergrid{
display: -ms-grid;
-ms-grid-rows: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-column: 2;
-ms-grid-row: 2;
width: 100%;
height: 100%;}

<div class='outergrid'><div class='innergrid'/></div>

XAML

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="1" Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
    </Grid>
</Grid>