Zoomvorlage für alphabetische Sortierung (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
Definiert ein Element in einer ListView für die verkleinerte alphabetische Auflistung für einen SemanticZoom. Diese Vorlage wird mit einer ListView mit Rasterlayout verwendet. 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.
HTML
<!-- Item template -->
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template">
<div class="semanticZoom">
<h2 data-win-bind="innerText: text"></h2>
</div>
</div>
<!-- ListView -->
<div id="semanticZoomAlpha"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#semanticZoomTemplate'), layout: { type: WinJS.UI.GridLayout } }">
</div>
CSS
/* overall grid dimensions */
#semanticZoomAlpha {
position: absolute;
top: calc(50% - 210px); /* vertically center tiles */
left: calc(50% - 630px); /* horizontally center tiles */
width: 1260px;
height: 430px;
}
/*-------------------------------------------------------------------------------------------*/
/* semantic zoom alpha template */
/*-------------------------------------------------------------------------------------------*/
#semanticZoomAlpha .win-container {
margin: 5px 10px;
}
/* individual item */
.semanticZoom {
color: white;
width: 140px;
height: 52px;
overflow: hidden;
padding: 9px 15px;
white-space: nowrap;
display: -ms-flexbox;
-ms-flex-pack: end;
-ms-flex-direction: column;
background-color: rgba(70,23,180,1.0);
}
/* High Contrast */
@media (-ms-high-contrast) {
/* add a border to the item */
.semanticZoom {
padding: 8px;
color: ButtonText;
background-color: ButtonFace;
border: 2px solid ButtonText;
}
/* outline shown on mouse hover */
#semanticZoomAlpha .win-container:hover {
outline: 3px solid Highlight;
}
/* use high contrast colors for hover state */
.semanticZoom:hover {
background-color: Highlight;
color: HighlightText;
border-color: HighlightText;
}
/* style the focus visual for edge-to-edge items */
#semanticZoomAlpha .win-focusedoutline {
outline-color: WindowText;
}
}