CODEWITHSUNDEEP
windows-8microsoft-metrowindows-runtime
krrishna
krrishna

Reputation: 2078

how to display a grid with clickable tiles in windows 8 app?

I want to display a tile based grid with each tile clikable in windows metro 8 app.this grid should be in the center of the screen with equal distance from 4sides.

Upvotes: 0

Views: 1197

Answers (2)

Jeff Brand
Jeff Brand

Reputation: 5633

HTML and XAML examples below

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>

Upvotes: 1

VT Chiew
VT Chiew

Reputation: 703

You should be using GridView.

Like what Jeff mentioned, the mark up would be different for XAML and HTML5. You can find more information regarding GridView here:

Metro App - GridView and ListView (XAML)

From the link, you can toggle to it's HTML equivalent, just in case you're using that platform.

Upvotes: 2

Related Questions