Language: HTML | XAML

Bild- und Textvorlage (Collection) (Windows Store-Apps mit JavaScript und HTML)

Applies to Windows only

Definiert ein Element, das ein Bild, eine große Überschrift, eine Unterüberschrift und Text enthält. Diese Vorlage dient zur Verwendung mit einer ListView mit einem Rasterlayout. Weitere Vorlagen finden Sie unter Elementvorlagen für Rasterlayouts und Elementvorlagen für Listenlayouts.

So verwenden Sie die Vorlage

Um die Vorlage zu verwenden, kopieren Sie den HTML-Code und die CSS-Formatvorlage in Ihr Projekt. Der HTML-Code enthält ein ListView-Steuerelement, das zusammen mit der Vorlage verwendet werden kann. Nachdem Sie den HTML-Code kopiert haben, legen Sie die itemDataSource des ListView-Steuerelements auf die Datenquelle Ihrer App fest, und aktualisieren Sie die data-win-bind-Attribute der Vorlage entsprechend Ihren Daten.

Damit die Vorlage richtig funktioniert, weisen Sie Ihrer ListView die win-selectionstylefilled-Klasse zu.

HTML


<!-- Item template -->
<div id="imageTextCollectionTemplate" 
     data-win-control="WinJS.Binding.Template">
  <div class="imageTextCollection">
    <img class="imageTextCollectionImage" 
         data-win-bind="src: icon" />
    <div class="imageTextCollectionDetail">
      <h3 class="imageTextCollectionTextStrong" 
          data-win-bind="innerText: largeText">
      </h3>
      <h6 class="imageTextCollectionTextLight" 
          data-win-bind="innerText: smallText">
      </h6>
      <div class="imageTextCollectionText" 
           data-win-bind="innerText: mediumText">
      </div>
    </div>
  </div>
</div>

<!-- ListView -->
<div id="imageTextCollection" class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: list.dataSource, 
        itemTemplate: select('#imageTextCollectionTemplate'), 
        layout: { type: WinJS.UI.GridLayout } }">
</div>

CSS


/* overall list dimensions */
#imageTextCollection {
    width: 1366px;
    height: 578px;
}

/*-------------------------------------------------------------------------------------------*/
/* imageText-collection - used app template collection page */
/*-------------------------------------------------------------------------------------------*/

/* style the background color of the filled-selection style items */
.win-selectionstylefilled :not(.win-footprint).win-container {
    background-color: transparent;
}

.win-selectionstylefilled .win-container.win-swipe:hover {
    background-color: transparent;
}

/* starting margin */
#imageTextCollection .win-horizontal.win-viewport .win-surface {
    margin: 0px 80px;
}

/* margin between items */
#imageTextCollection .win-horizontal.win-viewport .win-container {
    margin: 5px 30px;
}

/* individual item dimensions */
.imageTextCollection {
    width: 490px;
    height: 120px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    /* image */
    .imageTextCollection img.imageTextCollectionImage {
        margin: 5px;
        width: 110px;
        height: 110px;
        -ms-grid-column: 1;
    }

    .imageTextCollection .imageTextCollectionDetail {
        margin: 9px 5px 5px 5px;
        -ms-grid-column: 2;
    }

        /* text line 1 */
        .imageTextCollection .imageTextCollectionDetail .imageTextCollectionTextStrong {
            width: 360px;
            height: 20px;
            white-space: nowrap;
        }

        /* text line 2 */
        .imageTextCollection .imageTextCollectionDetail .imageTextCollectionTextLight {
            width: 360px;
            height: 20px;
            overflow: hidden;
        }

        /* text line 3 */
        .imageTextCollection .imageTextCollectionDetail .imageTextCollectionText {
            width: 360px;
            height: 60px;
            overflow: hidden;
        }



Verwandte Themen

Elementvorlagen für Rasterlayouts
Elementvorlagen für Listenlayouts

 

 

Anzeigen:
© 2014 Microsoft