Modèle de superposition d’images (dossier galerie) (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Définit un élément d’un dossier d’une galerie d’images. Ce modèle doit être utilisé avec un objet ListView ayant une disposition en grille. Pour obtenir des modèles supplémentaires, voir Modèles d’éléments pour les dispositions en grille et Modèles d’éléments pour les dispositions en liste.
Pour utiliser le modèle
Pour utiliser le modèle, copiez le code HTML et les styles CSS dans votre projet. Le code HTML inclut un élément ListView conçu pour être utilisé avec le modèle. Après avoir copié le code HTML, définissez le paramètre itemDataSource du contrôle ListView sur la source de données de votre application et mettez à jour les attributs data-win-bind du modèle pour qu’ils fonctionnent avec vos données.
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;
}