Modelo de sobreposição de imagem (pasta da galeria) (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
Define um item para uma pasta em uma galeria de imagem. Este modelo deve ser usado com um ListView que tenha layout de grade. Para obter mais modelos, veja Modelos de item para layouts de grade e Modelos de item para layouts de lista.
Usar o modelo
Para usar o modelo, copie o código HTML e os estilos CSS em seu projeto. O HTML inclui um ListView que foi criado para ser usado com o modelo. Depois de copiar o HTML, defina os itemDataSource do controle ListView em suas fontes de dados de aplicativo e atualize os atributos data-win-bind do modelo para que eles funcionem com seus dados.
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;
}