Reputation: 3098

WinJS Multicolumn Listview

I am looking for a template example for replicating a typical grid into WinJS. Any help would be extremely useful.

Upvotes: 0

Answers (1)

Allan.C

Reputation: 140

There is a great bunch of examples of Jeremy Foster in CodeShow, you can go and download it from codeplex.

This is the html, css, and js related with "CSS Grid" example in the codeshow demo, that consists in 4 different grids from the simplest one to some more "complex". I hope this help you, I encourage you to download it and play with the demo.

Grid.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS Grid</title>
    <meta name="tags" content="" />
    <meta name="keywords" content="grid layout css" />
    <meta name="description" content="Multiple ways to use a CSS grid." />
    <meta name="author" content="Jeremy Foster" />

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="grid.css" rel="stylesheet" />
    <script src="grid.js"></script>
</head>
<body>
    <div class="grid fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Grid</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main" class="swiper">
            <div id="simple">
                <h2>Simple</h2>
                <div class="explanation">This simple 2x2 grid has 4 elements that are each assigned their own "cell".</div>
                <div class="msgrid">
                    <div>A</div>
                    <div>B</div>
                    <div>C</div>
                    <div>D</div>
                </div>
            </div>

            <div id="rowspans">
                <h2>Rowspans</h2>
                <div class="explanation">This grid is actually 3x3. The blue item is spanning 2 rows and the green item is spanning 2 columns</div>
                <div class="msgrid">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>

            <div id="fancyGrid">
                <h2>Fancy</h2>
                <div class="explanation">As you can see, grids can be used to create some cool Windows 8 design.</div>
                <div class="msgrid">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>

            <div id="bigGrid">
                <h2>Big</h2>
                <div class="explanation">We would want to build a grid this big declaratively. In this demo, we start with a mere div element and then use JavaScript to easily set the grid properties and manipulate the child items. You can imagine the possibilities.</div>
                <div class="msgrid"></div>
            </div>
        </section>
    </div>
</body>
</html>

Grid.css

/* Simple */
.grid #simple > div.msgrid { display: -ms-grid; -ms-grid-columns: 250px 250px; -ms-grid-rows: 250px 250px; }
.grid #simple > div.msgrid > div { border: 1px solid gray; }
.grid #simple > div.msgrid > div:nth-child(2) { -ms-grid-column: 2; -ms-grid-row: 1; }
.grid #simple > div.msgrid > div:nth-child(3) { -ms-grid-row: 2; }
.grid #simple > div.msgrid > div:nth-child(4) { -ms-grid-column: 2; -ms-grid-row: 2; }

/* Rowspans */
.grid #rowspans > div.msgrid {
    display: -ms-grid;
    -ms-grid-columns: 100px 1fr 100px;
    -ms-grid-rows: 100px 1fr 100px;
    width:600px;
    height: 400px;
}

.grid #rowspans > div.msgrid > div:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    border: solid 2px blue;
}

.grid #rowspans > div.msgrid > div:nth-child(2) {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-column-span: 2;
    border: solid 2px green;
}

.grid #rowspans > div.msgrid > div:nth-child(3) {
    -ms-grid-column: 2;
    -ms-grid-row: 3;
    border: solid 2px red;
}

/* Fancy Grid */
.grid #fancyGrid > div.msgrid {
    display: -ms-grid;
    -ms-grid-columns: 240px 300px 240px;
    -ms-grid-rows: 174px 174px 174px;
}

    .grid #fancyGrid > div.msgrid > div { border: 1px solid; margin: 5px; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(1) { -ms-grid-row: 1; -ms-grid-column: 1; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(2) { -ms-grid-row: 2; -ms-grid-column: 1; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(3) { -ms-grid-row: 3; -ms-grid-column: 1; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(4) { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-row-span: 3; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(5) { -ms-grid-row: 1; -ms-grid-column: 3; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(6) { -ms-grid-row: 2; -ms-grid-column: 3; }
        .grid #fancyGrid > div.msgrid > div:nth-of-type(7) { -ms-grid-row: 3; -ms-grid-column: 3; }

/* Animate Grid */

Grid.js

(function () {
    "use strict";

    var element;
    var COLS = 80;
    var ROWS = 40;

    WinJS.UI.Pages.define("/demos/grid/grid.html", {
        ready: function (e, options) {
            element = e;
            this.buildBigGrid(element);
        },
        buildBigGrid: function () {
            var grid = q("#bigGrid .msgrid", element);
            grid.style.display = "-ms-grid";
            grid.style.msGridColumns = Ocho.Array.repeat("10px",COLS).join(" ");
            grid.style.msGridRows = Ocho.Array.repeat("10px", ROWS).join(" ");
            for (var i = 1; i <= COLS; i++) {
                for (var j = 1; j <= ROWS; j++) {
                    var childDiv = document.createElement("div");
                    childDiv.style.msGridColumn = i;
                    childDiv.style.msGridRow = j;
                    childDiv.style.width = "9px";
                    childDiv.style.height = "9px";
                    childDiv.style.backgroundColor = format("rgb({0},{1},{2})", Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255));
                    childDiv.style.margin = "1px";
                    grid.appendChild(childDiv);
                }
            }
        }
    });
})();

Upvotes: 1

WinJS Multicolumn Listview

Answers (1)

Related Questions