windows-8 - 如何在 Windows 8 应用程序中显示带有可点击磁贴的网格？

Question

我想在 Windows Metro 8 应用程序中显示一个基于磁贴的网格，每个磁贴都可以点击。这个网格应该在屏幕的中心，与 4sides 的距离相等。

Answer 1

你应该使用GridView.

就像 Jeff 提到的那样，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>