Formatieren der ListView und der zugehörigen Elemente (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 ]
Ein ListView-Steuerelement kann auf unterschiedlichste Weise angepasst werden. Sie können das ListView-Steuerelement selbst, die darin enthaltenen Elemente oder die Vorlage, auf der diese Elemente basieren, formatieren.
Verwenden der CSS-Klassen der Windows-Bibliothek für JavaScript
Wie andere Steuerelemente der Windows-Bibliothek für JavaScript bietet das ListView-Steuerelement eine Reihe von Klassen, die Sie zum Anpassen des Erscheinungsbilds überschreiben können. In den nächsten Abschnitten wird beschrieben, wie Sie das ListView-Steuerelement mit diesen Klassen anpassen.
Formatieren der ListView selbst
Bevor wir uns mit dem Formatieren von Elementen im ListView-Steuerelement befassen, werfen wir zunächst einen Blick auf das Formatieren des ListView-Steuerelements selbst. Die folgende Liste enthält die wichtigsten Klassen zum Formatieren des ListView-Steuerelements:
win-listview: formatiert die gesamte ListView.win-viewport: formatiert den Viewport. Im Viewport wird bei Bedarf die Bildlaufleiste angezeigt.win-surface: formatiert den bildlauffähigen Bereich der ListView. Wenn die Oberfläche größer als der Viewport ist, werden im Viewport Bildlaufleisten angezeigt.
Das folgende Beispiel zeigt ein typisches ListView-Steuerelement mit gruppierten Elementen.
.png "ListView mit gruppierten Elementen")
Die nächste Abbildung zeigt die gleiche ListView, in der die Teile win-listview, win-viewport und win-surface hervorgehoben sind:
.png "Hauptkomponenten einer ListView")
Allgemeine Empfehlungen für die Formatierung
Weisen Sie der ListView immer eine ID zu, und fügen Sie diese wie im folgenden Beispiel am Anfang der CSS-Auswahl ein:
#myListView .win-listview {
background-image: url('../images/icecream.png');
border: 2px solid red;
}
Das ListView-Steuerelement verfügt über viele Standardformate. Wenn Sie eines der Formate überschreiben möchten, jedoch keinen Effekt erzielen, liegt es möglicherweise daran, dass die CSS-Auswahl zu unspezifisch ist, um die Standardformate zu überschreiben.
Formatieren des gesamten ListView-Steuerelements
Wenn Sie dem ListView-Steuerelement ein festes Hintergrundbild hinzufügen möchten, das hinter den Elementen angezeigt wird, oder einen Rahmen für das gesamte Steuerelement anwenden möchten, überschreiben Sie die win-listview-Klasse. In diesem Beispiel erhält das ListView-Steuerelement ein Hintergrundbild und einen roten Rahmen.
#myListView .win-listview {
background-image: url('../images/icecream.png');
border: 2px solid red;
}
So sieht das ListView-Steuerelement jetzt aus:
.png "ListView mit Rahmen und Hintergrundbild")
Formatieren von Rändern in der ListView
Verwenden Sie die win-surface-Klasse, um Ränder auf die ListView anzuwenden. Fügen Sie dem div-Element, das die ListView hostet, keine Ränder hinzu, da es nicht richtig formatiert wird. Verwenden Sie stattdessen win-surface. Wenn Sie win-surface einen Rand hinzufügen, müssen Sie die Höhe der ListView entsprechend anpassen. Sie können die Höhe anpassen, indem Sie das div-Element formatieren, das die ListView hostet.
Fügen Sie win-surface keine Ränder oder Abstände hinzu, wenn Sie ein list layout verwenden.
Gruppenköpfe verfügen standardmäßig über einen linken Rand von 70 Pixeln (px). Wenn Sie win-surface bei der Anzeige von Gruppen überschreiben, empfehlen wir, für den linken Rand 70 px zuzüglich des gewünschten Rands zu verwenden.
Formatieren des Viewports auf Grundlage der Bildlaufrichtung
Mit den Klassen win-horizontal und win-vertical können Sie Formate auf eine ListView mit horizontalem oder vertikalem Bildlauf anwenden. In diesem Beispiel wird dem Viewport ein linker Rand hinzugefügt, wenn in der ListView ein horizontaler Bildlauf durchgeführt werden kann.
#myListView .win-listview .win-viewport.win-horizontal {
margin-left: 10px;
}
Im nächsten Beispiel wird der linke Rand entfernt, wenn im ListView-Steuerelement ein vertikaler Bildlauf durchgeführt werden kann. Im Allgemeinen wird für ein ListView-Steuerelement mit dem Ansichtszustand "Snapped" eine vertikale Ausrichtung verwendet.
#myListView .win-listview .win-viewport.win-vertical {
margin-left: 0px;
}
Formatieren des gesamten bildlauffähigen Bereichs
Um den bildlauffähigen Bereich der ListView zu formatieren, überschreiben Sie die win-surface-Klasse. In diesem Beispiel wird ein Hintergrundbild auf die ListView angewendet, das sich entsprechend bewegt, wenn der Benutzer einen Bildlauf durch Elemente durchführt.
#myListView .win-listview .win-surface {
background-image: url('../images/icecream.png');
}
.png "ListView mit formatierter Oberfläche")
Formatieren des Ladestatusindikators
Das ListView-Steuerelement zeigt beim Laden von Elementen einen progress-Indikator an. Sie können diesen Indikator formatieren, indem Sie die win-progress-Klasse überschreiben. In diesem Beispiel wird der progress-Indikator ausgeblendet.
#myListView .win-listview .win-progress{
display: none;
}
Formatieren von Elementen und Gruppen
Das ListView-Steuerelement enthält Gruppen und Elemente.
- Jede Gruppe befindet sich in einem Gruppenkopf, der durch die
win-groupheader-Klasse dargestellt wird. - Jedes Element befindet sich in einem Elementcontainer, der durch die
win-container-Klasse dargestellt wird.
.png "Gruppenkopf- und Containerkomponenten eines \"ListView\"-Steuerelements")
Formatieren eines Elements
Zum Formatieren der Elemente im ListView-Steuerelement stehen Ihnen zwei Methoden zur Auswahl. Sie können Formate auf die Elementvorlage anwenden oder die win-container-Klasse überschreiben. Eine Einstellung müssen Sie in Ihrer Vorlage immer festlegen: die Größe der Elemente. Legen Sie die Größe der Elemente nicht fest, erhalten Sie u. U. nicht das gewünschte Layout.
So legen Sie die Größe der Elemente fest
Wenn Sie ein WinJS.Binding.Template-Steuerelement verwenden, legen Sie wie in diesem Beispiel gezeigt das untergeordnete Element des WinJS.Binding.Template-Elements fest:
<!-- The WinJS.Binding.Template element. --> <div id="templateExample" data-win-control="WinJS.Binding.Template"> <!-- This is the root element. Be sure to set its width and height. --> <div style="width: 120px; height: 125px;"> <img src="#" data-win-bind="alt: title; src: picture" style="width: 60px; height: 60px;" /> <div> <h4 data-win-bind="innerText: title"> </h4> <h6 data-win-bind="innerText: text"> </h6> </div> </div> </div>Wenn Sie eine Vorlagenfunktion verwenden, legen Sie die Breite und Höhe des von der Funktion zurückgegebenen DOM-Elements fest.
Formatieren des Elementcontainers
Um den Elementcontainer zu formatieren, überschreiben Sie die win-container-Klasse. In diesem Beispiel wird dem Container jedes Elements ein Rand hinzugefügt.
#myListView .win-listview .win-container{
margin: 2px;
}
Für win-container können nur zwei Eigenschaften formatiert werden: margin und background.
Um ein transparentes Element zu erstellen, legen Sie die Hintergrundfarbe auf transparent fest. In diesem Beispiel wird ein transparentes Element erstellt:
#myListView .win-container:not(.footprint):not(.hover)
{
background-color: transparent;
}
Formatieren von Rändern und Abständen für Elemente
Um Abstände zwischen Elementen einzufügen, legen Sie einen Rand für die win-container-Klasse fest. Wir empfehlen Ränder zu verwenden, um Platz zwischen Elementen zu schaffen, und keine Abstände. Alle Elemente in der gleichen ListView müssen über den gleichen Rand verfügen.
Ändern Sie den Rand oder den Abstand für win-container nicht, nachdem die ListView mit der Anzeige von Elementen begonnen hat.
Formatieren des Gruppenkopfs
Um den Gruppenkopf zu formatieren, überschreiben Sie die win-groupheader-Klasse. In diesem Beispiel wird den Gruppenköpfen ein grauer Hintergrund hinzugefügt.
#myListView .win-listview .win-groupheader {
background-color: #bfbfbf;
}
.png "ListView mit formatierten Gruppenköpfen")
Formatieren von Elementinteraktionen
Formatieren eines Elements im Zustand "Zeigen"
Wenn der Benutzer den Zeiger über ein Element bewegt, wechselt das Element in den Zustand "Zeigen". Um das Format für ein Element im Zustand "Zeigen" zu ändern, verwenden Sie die hover-Pseudoklasse. In diesem Beispiel werden der Hintergrund und der Rand eines Elements im Zustand "Zeigen" geändert.
#myListView .win-container:hover {
background-color: red;
outline: orange solid 5px;
}
.png "ListView mit Element im Zustand \"Zeigen\"")
Formatieren von Elementen mit Fokus
Zum Formatieren eines Elements, das den Fokus hat, verwenden Sie die win-focus-Klasse beim Formatieren des Elementcontainers als Teil der Formatauswahl. Verwenden Sie zum Formatieren des Fokusrands die win-focusedoutline-Klasse. In diesem Beispiel wird der Fokusrand in eine rote gestrichelte Linie geändert.
#myListView .focusExample.win-listview .win-focusedoutline {
outline: red dashed 2px;
}
Formatieren ausgewählter Elemente
Standardmäßig wird für ausgewählte Elemente ein Auswahlrand angezeigt. Wenn Sie die ausgewählten Elemente "ausfüllen" möchten, fügen Sie die CSS-Klasse win-selectionstylefilled an Ihre ListView an.
Um die Darstellung von ausgewählten Elementen weiter anzupassen, können Sie die folgenden Klassen überschreiben:
win-selectionborderFormatiert den Rahmen um ein ausgewähltes Element.
win-selectionbackgroundFormatiert den Hintergrund von ausgewählten Elementen.
win-selectionhintFormatiert den Auswahlhinweis, ein zweites Häkchen, das hinter dem ausgewählten Element angezeigt wird. Mit einer Streifbewegung über das Element wird der Auswahlhinweis eingeblendet.
win-selectioncheckmarkDas Häkchen für ein ausgewähltes Element.
win-selectioncheckmarkbackgroundDer Hintergrund des Häkchens für ein ausgewähltes Element.
Sie können die "win-selected"-Klasse auch als Teil der Formatauswahl hinzufügen, um andere Komponenten anzupassen, z. B. den Elementcontainer, wenn ein Element ausgewählt wird.