Applicazione di stili a un controllo FlipView e ai relativi elementi (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Esistono molti modi per personalizzare un controllo FlipView. Puoi applicare stili al controllo FlipView stesso, agli elementi presenti al suo interno o ai modelli che compongono questi elementi.

Prerequisiti

• Guida introduttiva: Aggiunta di un controllo FlipView

Parti del controllo FlipView a cui è possibile applicare uno stile

Come la maggior parte dei controlli della Libreria Windows per JavaScript, anche il controllo FlipView fornisce un set di classi CSS che puoi usare per applicare uno stile a parti specifiche del controllo. Ad esempio, per applicare uno stile al pulsante di spostamento a sinistra del controllo FlipView devi eseguire l'override della classe CSS win-leftnav.

Ecco uno schema delle parti di un controllo FlipView a cui puoi applicare uno stile.

Applicazione di uno stile al controllo FlipView stesso

Per creare un controllo FlipView, devi creare un elemento div e impostare la proprietà data-win-control su "WinJS.UI.FlipView". Puoi applicare stili CSS a questo elemento div (l'elemento host) esattamente come si fa con qualsiasi altro elemento. Di fatto, devi sempre specificare le proprietà width e height dell'elemento host 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>  

Puoi anche usare la classe win-flipview per applicare uno stile all'intero controllo FlipView. Durante la creazione del controllo FlipView, questa classe viene aggiunta all'elemento host div.

Applicazione di uno stile ai pulsanti di spostamento del controllo FlipView

Il controllo FlipView ha quattro pulsanti di spostamento. Quando la proprietà orientation del controllo FlipView è "horizontal", vengono usati i pulsanti di spostamento a sinistra e a destra. Quando la proprietà orientation è "vertical", vengono usati i pulsanti di spostamento in alto e in basso. Ecco le parti che puoi usare per applicare uno stile ai pulsanti di spostamento del controllo FlipView.

• win-navbottom
  Applica uno stile al pulsante di spostamento in basso.

• win-navbutton
  Applica uno stile a tutti i pulsanti di spostamento.

• win-navleft
  Applica uno stile al pulsante di spostamento a sinistra.

• win-navright
  Applica uno stile al pulsante di spostamento a destra.

• win-navtop
  Applica uno stile al pulsante di spostamento in alto.

Questo esempio fa diventare il pulsante di spostamento a sinistra rosso con un bordo nero.

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

Pseudoclassi per l'applicazione di stili ai pulsanti di spostamento

Puoi usare le pseudoclassi seguenti come selettori per applicare uno stile ai pulsanti di spostamento quando si trovano in determinati stati. Ecco alcune delle pseudoclassi più utili per l'applicazione di uno stile ai pulsanti di spostamento:

• win-navbutton:hover
  Applica stili un pulsante di spostamento del controllo FlipView quando l'utente posiziona il cursore sul pulsante di spostamento ma non lo attiva facendovi clic.

  Questo esempio definisce uno stile per un pulsante di spostamento nello stato di passaggio del mouse.

  #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
  Applica stili a un pulsante di spostamento del controllo FlipView quando il pulsante è attivo. Il pulsante di spostamento è attivo tra il momento in cui l'utente preme il controllo e il momento in cui lo rilascia. Se l'utente preme il controllo e trascina il puntatore lontano dal pulsante, il controllo rimane attivo fino al rilascio del puntatore da parte dell'utente.

  Questo esempio modifica il colore di sfondo di un pulsante di spostamento attivo.

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

Applicazione di uno stile agli elementi

Un modo per applicare uno stile agli elementi consiste nell'usare CSS per applicare uno stile agli elementi HTML nel modello stesso.

Questo esempio usa CSS per applicare uno stile al modello stesso.

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

Puoi anche usare la classe CSS win-item per applicare uno stile all'elemento div che contiene l'elemento.

Argomenti correlati

Linee guida per i controlli FlipView