Formatieren der "ListView" und der zugehörigen Elemente (Windows Store-Apps mit JavaScript und HTML)

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.

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:

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:

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'); 
} 

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.

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;           
}    

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;
}  

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-selectionborder

    Formatiert den Rahmen um ein ausgewähltes Element.

  • win-selectionbackground

    Formatiert den Hintergrund von ausgewählten Elementen.

  • win-selectionhint

    Formatiert 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-selectioncheckmark

    Das Häkchen für ein ausgewähltes Element.

  • win-selectioncheckmarkbackground

    Der 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.

Halten Sie sich an das Windows 8-Typ- und Layoutraster.

Windows 8-Features und -Anwendungen folgen einem allgemeinen Typ- und Layoutraster, das einen konsistenten Charakter innerhalb des Systems aufrecht erhält – weitere Informationen finden Sie unter Gestalten einer App-Seite. Ihre ListView sollte Elemente darstellen, die von der Größe und Ausrichtung an dieses Typ- und Layoutraster angepasst sind. Mithilfe der folgenden drei Methoden können Sie überprüfen, ob dies angemessen eingehalten wurde:

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.