Styling the FlipView and its items (HTML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

You can customize a FlipView in many ways. You can style the FlipView itself, the items it contains, or the templates that make up those items.

Prerequisites

• Quickstart: Adding a FlipView

Parts of the FlipView that you can style

Like most Windows Library for JavaScript controls, the FlipView also provides a set of CSS classes that you can use to style specific parts of the control. For example, to style the FlipView control's left navigation button, you override the win-leftnavCSS class.

Here's a diagram of the parts of a FlipView control that you can style.

Styling the FlipView itself

To create a FlipView, you create a div element and set its data-win-control property to "WinJS.UI.FlipView". You can apply CSS styles to this div element (the host element) just as you would apply them to any other element. In fact, always specify the width and height of the host div element.

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

You can also use the win-flipview class to style the entire FlipView. When your FlipView is created, this class is added to the host div element.

Styling the FlipView control's navigation buttons

The FlipView has four navigation buttons. When the FlipView control's orientation is "horizontal", it uses the left and right navigation buttons. When the orientation is "vertical", it uses the top and bottom navigation buttons. Here are the parts you can use to style the FlipView control's navigation buttons.

• win-navbottom
  Styles the bottom navigation button.

• win-navbutton
  Styles all the navigation buttons.

• win-navleft
  Styles the left navigation button.

• win-navright
  Styles the right navigation button.

• win-navtop
  Styles the top navigation button.

This example makes the left navigation button red and gives it a black border.

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

Pseudo-classes for styling navigation buttons

You can use pseudo-classes as selectors to style the navigation buttons when the buttons are in certain states. Here are some of the more useful pseudo-classes you can use to style the navigation buttons:

• win-navbutton:hover
  Applies styles to a FlipView control's navigation buttons when the user places the cursor over a navigation button but has not activated it by clicking.

  This example defines a style for a navigation button in the hover state.

  #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
  Applies styles to a FlipView control's navigation button when the button is active. The navigation button is active between the time the user presses the control and releases the control. If the user presses the control and drags the pointer off the button, the control is still active until the user releases the pointer.

  This example changes the background color of an active navigation button.

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

Styling items

One way to style items is to use CSS to style the HTML elements in the template itself.

This example uses CSS to style the template itself.

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

You can also use the win-item CSS class to style the div element that contains the item.

Related topics

Guidelines for FlipView controls