Modelo de imagem (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 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="imageGalleryTemplate"
data-win-control="WinJS.Binding.Template">
<div class="imageGallery">
<img class="imageGalleryImage"
data-win-bind="src: imageUrl"/>
</div>
</div>
<!-- ListView -->
<div id="imageGallery"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: list.dataSource,
itemTemplate: select('#imageGalleryTemplate'),
layout: { type: WinJS.UI.GridLayout } }">
</div>
CSS
/* overall list dimensions */
#imageGallery
{
width: 1366px;
height: 578px;
}
/*-------------------------------------------------------------------------------------------*/
/* image-gallery - used in Picker gallery */
/*-------------------------------------------------------------------------------------------*/
/* starting margin */
#imageGallery .win-horizontal.win-viewport .win-surface
{
margin: 0px 115px;
}
/* individual item dimensions */
.imageGallery
{
width: 190px;
height: 130px;
overflow: hidden;
}
/* image */
.imageGallery img.imageGalleryImage
{
width: 190px;
height: 130px;
overflow: hidden;
}