Formatieren der FlipView und der zugehörigen Elemente (HTML)

Artikel
03/04/2016

[ 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 FlipView-Steuerelement kann auf unterschiedlichste Weise angepasst werden. Sie können das FlipView-Steuerelement selbst, die darin enthaltenen Elemente oder die Vorlage, auf der diese Elemente basieren, formatieren.

Voraussetzungen

Schnellstart: Hinzufügen eines FlipView-Steuerelements

Teile des FlipView-Steuerelements, die formatiert werden können

Wie die meisten anderen Steuerelemente der Windows-Bibliothek für JavaScript auch verfügt das FlipView-Steuerelement über eine Reihe von CSS-Klassen, die Sie zum Formatieren bestimmter Teile des Steuerelements verwenden können. Um für das FlipView-Steuerelement beispielsweise die linke Navigationsschaltfläche zu formatieren, überschreiben Sie die win-leftnav-CSS-Klasse.

Unten sehen Sie eine Abbildung mit den Teilen eines FlipView-Steuerelements, die formatiert werden können.

Teile eines FlipView-Steuerelements, die Sie formatieren können

Formatieren des FlipView-Steuerelements selbst

Zum Erstellen eines FlipView-Steuerelements erstellen Sie ein div-Element und legen dessen data-win-control-Eigenschaft auf "WinJS.UI.FlipView" fest. Sie können CSS-Formatvorlagen auf dieses div-Element (das Hostelement) genauso wie auf andere Elemente anwenden. Geben Sie für das div-Hostelement immer width und height an.

 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

FlipView-Steuerelement mit angewendeten grundlegenden Stilen

Sie können auch die win-flipview-Klasse verwenden, um das gesamte FlipView-Steuerelement zu formatieren. Beim Erstellen des FlipView-Steuerelements wird diese Klasse dem div-Hostelement hinzugefügt.

Formatieren der Navigationsschaltflächen des FlipView-Steuerelements

Das FlipView-Steuerelement besitzt vier Navigationsschaltflächen. Wenn das orientation-Element des FlipView-Steuerelements auf "horizontal" festgelegt ist, werden die linke und die rechte Navigationsschaltfläche verwendet. Wenn das orientation-Element auf "vertical" festgelegt ist, werden die obere und die untere Navigationsschaltfläche verwendet. Unten sind die Teile aufgeführt, die Sie zum Formatieren der Navigationsschaltflächen des FlipView-Steuerelements verwenden können.

win-navbottom
Dient zum Formatieren der unteren Navigationsschaltfläche.
win-navbutton
Dient zum Formatieren aller Navigationsschaltflächen.
win-navleft
Dient zum Formatieren der linken Navigationsschaltfläche.
win-navright
Dient zum Formatieren der rechten Navigationsschaltfläche.
win-navtop
Dient zum Formatieren der oberen Navigationsschaltfläche.

In diesem Beispiel wird die linke Navigationsschaltfläche rot eingefärbt und mit einem schwarzen Rahmen versehen.

#styledHorizontalFlipview .win-navleft {
    background-color: red;
    border: 2px solid black;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

FlipView-Steuerelement mit formatierter linker Navigationsschaltfläche

Pseudoklassen zum Formatieren von Navigationsschaltflächen

Sie können Pseudoklassen als Auswahlelemente zum Festlegen des Stils von Navigationsschaltflächen für bestimmte Zustände verwenden. Hier sind einige nützliche Pseudoklassen aufgeführt, mit denen Sie den Stil von Navigationsschaltflächen festlegen können:

win-navbutton:hover
Wendet Stile auf die Navigationsschaltflächen eines FlipView-Steuerelements an, wenn der Benutzer den Cursor auf einer Navigationsschaltfläche platziert, diese aber noch nicht durch Klicken aktiviert hat.

In diesem Beispiel wird ein Stil für eine Navigationsschaltfläche im Zustand "Zeigen" definiert.

#styledHorizontalFlipview .win-navbutton:hover {
    background-color: orange;
    border: 2px solid white;
}

<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

win-navbutton:active
Wendet Stile auf eine Navigationsschaltfläche eines FlipView-Steuerelements an, wenn die Schaltfläche aktiv ist. Die Navigationsschaltfläche ist nach dem Betätigen so lange aktiv, bis der Benutzer sie wieder loslässt. Wenn der Benutzer auf das Steuerelement klickt und den Zeiger von der Schaltfläche zieht, ist das Steuerelement aktiv, bis der Zeiger losgelassen wird.

In diesem Beispiel wird die Hintergrundfarbe einer aktiven Navigationsschaltfläche geändert.
```
#styledHorizontalFlipview .win-navbutton:active {
    background-color: limegreen;
}
```
```
<div id="styledHorizontalFlipview" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>
```

Formatieren von Elementen

Eine Möglichkeit zum Formatieren von Elementen ist die Verwendung von Cascading Style Sheets (CSS), um die HTML-Elemente direkt in der Vorlage zu formatieren.

In diesem Beispiel werden Cascading Style Sheets genutzt, um die Vorlage zu formatieren.

.itemStyling p {
    margin-left: 120px;
}

.simpleItemTemplateRoot {
    width: 480px; 
    height: 310px;
}

.simpleItemTemplateImage {
    height: 270px; 
    width: 480px;
}

.simpleItemTemplateText {
    height: 40px; 
    padding: 5px;
}

 <div id="simpleItemTemplate" 
     data-win-control="WinJS.Binding.Template" 
     style="display: none">
    <div class="simpleItemTemplateRoot">
        <img class="simpleItemTemplateImage"
             src="#" 
             data-win-bind="src: picture; alt: title"
             />       
        <div class="simpleItemTemplateText" 
            data-win-bind="innerText: title" >
        </div>     
    </div>
</div>
  
 <div id="basicFlipView" 
    style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemDataSource: DefaultData.bindingList.dataSource, 
        itemTemplate: select('#simpleItemTemplate'),
        orientation: 'horizontal' 
    }">
</div>

Sie können auch die CSS-Klasse win-item verwenden, um das div-Element zu formatieren, in dem das Element enthalten ist.

Freigeben über