как отобразить сетку с интерактивными плитками в приложении Windows 8?

Я хочу отобразить сетку на основе плитки с каждой плиткой, доступной для клика в приложении Windows Metro 8. Эта сетка должна быть в центре экрана на равном расстоянии от 4 сторон.


person krrishna    schedule 24.08.2012    source источник
comment
Xaml или HTML? Наценка у всех разная.   -  person Jeff Brand    schedule 24.08.2012


Ответы (2)


Вы должны использовать GridView.

Как упомянул Джефф, разметка для XAML и HTML5 будет отличаться. Дополнительную информацию о GridView можно найти здесь:

Приложение Metro — GridView и ListView (XAML)

По ссылке вы можете переключиться на HTML-эквивалент на тот случай, если вы используете эту платформу.

person VT Chiew    schedule 24.08.2012

Примеры 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>
person Jeff Brand    schedule 24.08.2012