Date zoom template
Collapse the table of content
Expand the table of content

Date zoom template (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Defines an item in a ListView that provides the zoomed out, date listing for a SemanticZoom. This template is for use with a ListView that has a grid layout. For additional templates, see Item templates for grid layouts and Item templates for list layouts.

To use the template

To use the template, copy the HTML and the CSS styles into your project. The HTML includes a ListView that's designed to be used with the template.


<!-- Item template -->
<div id="semanticZoomDateTemplate" data-win-control="WinJS.Binding.Template">
    <div class="semanticZoomDate">
        <div class="semanticZoomDateText">
            <h2 class="semanticZoomDateDayMonth" data-win-bind="innerText: dayMonth"></h2>
            <h2 class="semanticZoomDateYear" data-win-bind="innerText: year"></h2>

<!-- ListView -->
<div id="semanticZoomDate" style="position: relative; left: -1px; border: none"
    data-win-options="{ itemTemplate: select('#semanticZoomDateTemplate'), layout: { type: WinJS.UI.GridLayout } }">


/* overall grid dimensions */
#semanticZoomDate {
    position: absolute;
    top: calc(50% - 70px);
    width: 1366px;
    height: 158px;

    /* semantic zoom date template */
    /* starting margin */
    #semanticZoomDate .win-surface {
        margin: 0px 115px;

/* individual item */
.semanticZoomDate {
    color: white;
    width: 170px;
    height: 110px;
    padding: 10px;
    overflow: hidden;
    display: -ms-flexbox;
    -ms-flex-pack: end;
    -ms-flex-direction: column;
    background-color: rgba(70,23,180,1.0);

    /* Text line 1: month */
    .semanticZoomDate .semanticZoomDateDayMonth {
        width: 170px;
        white-space: nowrap;

    /* Text line 2: year */
    .semanticZoomDate .semanticZoomDateYear {
        width: 170px;
        white-space: nowrap;

/* High Contrast */
@media (-ms-high-contrast) {
    /* add a border to the item */
    .semanticZoomDate {
        padding: 8px;
        color: ButtonText;
        background-color: ButtonFace;
        border: 2px solid ButtonText;

    /* outline shown on mouse hover */
    #semanticZoomDate .win-container:hover {
        outline: 3px solid Highlight;

    /* use high contrast colors for hover state */
    .semanticZoomDate:hover {
        background-color: Highlight;
        color: HighlightText;
        border-color: HighlightText;

    /* style the focus visual for edge-to-edge items */
    #semanticZoomDate .win-focusedoutline {
        outline-color: WindowText;

Related topics

Item templates for grid layouts
Item templates for list layouts



© 2018 Microsoft