Windows Dev Center

Language: HTML | XAML

Vorlage für Bildüberlagerungen (Galerieordner) (HTML)

Definiert ein Element für einen Ordner in einer Bildergalerie. 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.

HTML


<!-- Item template -->
<div id="imageOverlayGalleryFolderTemplate" 
     data-win-control="WinJS.Binding.Template">
  <div class="imageOverlayGalleryFolder">
    <img class="imageOverlayGalleryFolderImage" 
         data-win-bind="src: imageUrl" />
    <div class="imageOverlayGalleryFolderOverlay">
      <h4 class="imageOverlayGalleryFolderOverlayText" 
          data-win-bind="innerText: text">
      </h4>
    </div>
  </div>
</div>

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

CSS


/* overall ListView dimensions */
#imageOverlayGalleryFolder {
    width: 1366px;
    height: 578px;
}

    /*-------------------------------------------------------------------------------------------*/
    /* imageOverlay-galleryFolder - used for folders in the Picker gallery view. The overlay and */
    /*   the background color are the same color so that they will visually read as one element  */ 
    /*   when there is no image.                                                                 */
    /*-------------------------------------------------------------------------------------------*/
    /* starting margin */
    #imageOverlayGalleryFolder .win-horizontal.win-viewport .win-surface {
        margin: 0px 115px;
    }

/* individual item dimensions and grid */
.imageOverlayGalleryFolder {
    width: 190px;
    height: 130px;
    overflow: hidden;
    background-color: #333333;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

    /* image */
    .imageOverlayGalleryFolder .imageOverlayGalleryFolderImage {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* overlay properties */
    .imageOverlayGalleryFolder .imageOverlayGalleryFolderOverlay {
        height: 30px;
        overflow: hidden;
        -ms-grid-row-align: end;
        color: rgb(255,255,255);
        background-color: #333333;
        padding: 0px 15px 0px 15px;
    }

        /* text properties */
        .imageOverlayGalleryFolder .imageOverlayGalleryFolderOverlay .imageOverlayGalleryFolderOverlayText {
            line-height: 30px;
        }

Verwandte Themen

Elementvorlagen für Rasterlayouts
Elementvorlagen für Listenlayouts

 

 

Anzeigen:
© 2015 Microsoft