Visualizzazione a rotazione

Usa una visualizzazione a sfoglio per sfogliare immagini o altri elementi in una raccolta, ad esempio foto in un album o elementi in una pagina dei dettagli prodotto, un elemento per volta. Per i dispositivi touch, scorrere su un elemento permette di navigare nella collezione. Per un mouse, i pulsanti di spostamento vengono visualizzati al passaggio del mouse. Con una tastiera, i tasti freccia consentono di navigare nella raccolta.

È il controllo giusto?

La visualizzazione a scorrimento è ideale per consultare le immagini in raccolte di piccole e medie dimensioni (fino a circa 25 elementi). Esempi di tali raccolte includono elementi in una pagina dei dettagli di un prodotto o foto in un album fotografico. Anche se non consigliamo la visualizzazione a scorrimento per la maggior parte delle raccolte di grandi dimensioni, la funzionalità è comune per la visualizzazione di singole immagini in un album fotografico.

Consigli

• Le visualizzazioni a scorrimento funzionano meglio per le raccolte di circa 25 elementi.
• Evitare di usare un controllo di scorrimento per raccolte di grandi dimensioni, perché il movimento ripetitivo di capovolgimento di ogni elemento può essere noioso. Un'eccezione sarebbe per gli album fotografici, che spesso hanno centinaia o migliaia di immagini. Gli album fotografici passano quasi sempre a una visualizzazione a sfoglio dopo che una foto è stata selezionata nella vista griglia. Per altre raccolte di grandi dimensioni, prendere in considerazione una visualizzazione Elenco o una griglia.

Lista relativa alla globalizzazione e alla localizzazione

• Considerazioni bidirezionali: usare il mirroring standard per i linguaggi RTL. I controlli indietro e avanti devono essere basati sulla direzione della lingua, quindi per le lingue RTL, il pulsante destro dovrebbe spostarsi all'indietro e il pulsante sinistro dovrebbe spostarsi avanti.

Esempi

Esplorazione orizzontale, a partire dall'elemento più a sinistra spostandosi verso destra, è il layout tipico per una visione a scorrimento. Questo layout funziona correttamente in orientamento verticale o orizzontale in tutti i dispositivi:

Una vista a sfoglia può anche essere esplorata verticalmente.

Creare una visualizzazione a scorrimento

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

FlipView è itemsControl, quindi può contenere una raccolta di elementi di qualsiasi tipo. Per popolare la visualizzazione, aggiungere elementi all'insieme Items oppure impostare la proprietà ItemsSource a un'origine dati.

Per impostazione predefinita, un elemento di dati viene mostrato nella visualizzazione a fogli mobili come rappresentazione in forma di stringa dell'oggetto dati al quale è collegato. Per specificare esattamente come vengono visualizzati gli elementi nella vista capovolgimento, crei un DataTemplate per definire il layout dei controlli utilizzati per visualizzare un singolo elemento. I controlli nel layout possono essere associati alle proprietà di un oggetto dati oppure avere contenuto definito inline. Puoi assegnare DataTemplate alla proprietà ItemTemplate del FlipView.

Aggiungere elementi alla collezione Items

Puoi aggiungere elementi alla raccolta Items usando XAML o il codice. In genere gli elementi vengono aggiunti in questo modo se si dispone di un numero limitato di elementi che non cambiano e sono facilmente definibili in XAML oppure se si generano gli elementi nel codice in fase di esecuzione. Ecco una vista a ribalta con elementi definiti in linea.

<FlipView x:Name="flipView1">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

Quando aggiungi elementi a un flip view, questi vengono inseriti automaticamente in un contenitore FlipViewItem. Per modificare la modalità di visualizzazione di un elemento, è possibile applicare uno stile al contenitore di elementi impostando la proprietà ItemContainerStyle.

Quando definisci gli elementi in XAML, questi vengono aggiunti automaticamente alla raccolta Items.

Impostare l'origine degli elementi

Si usa un FlipView in genere per visualizzare i dati provenienti da un'origine, ad esempio un database o Internet. Per popolare un FlipView da un'origine dati, è necessario impostare la proprietà ItemsSource su una raccolta di elementi dati.

Qui, l'ItemsSource del FlipView viene configurata nel codice direttamente su un'istanza di una raccolta.

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

Puoi anche associare la proprietà ItemsSource a una raccolta in XAML. Per altre informazioni, vedere Data Binding con XAML.

In questo caso, ItemsSource è associato a CollectionViewSource denominato itemsViewSource.

<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

...

<FlipView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

Specificare l'aspetto degli elementi

Per impostazione predefinita, un elemento di dati viene mostrato nella visualizzazione flip come rappresentazione in forma di stringa dell'oggetto dati a cui è associato. In genere si vuole mostrare una presentazione più dettagliata dei dati. Per specificare esattamente come vengono visualizzati gli elementi nel FlipView, puoi creare un oggetto DataTemplate. Il codice XAML in DataTemplate definisce il layout e l'aspetto dei controlli usati per visualizzare un singolo elemento. I controlli nel layout possono essere associati alle proprietà di un oggetto dati oppure il contenuto può essere definito in-linea. DataTemplate viene assegnato alla proprietà ItemTemplate del controllo FlipView.

In questo esempio l'elemento ItemTemplate di un controllo FlipView è definito inline. Viene aggiunta una sovrimpressione all'immagine per visualizzare il nome dell'immagine.

<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
          ItemsSource="{x:Bind Items, Mode=OneWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:ControlInfoDataItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
                       VerticalAlignment="Center" />
                <Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
                    <TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
                               Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
                               HorizontalAlignment="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Ecco l'aspetto del layout definito dal modello di dati.

Impostare l'orientamento della vista a scorrimento

Per impostazione predefinita, la visualizzazione capovolgi orizzontalmente. Per farlo capovolgere verticalmente, usa un pannello pila con un orientamento verticale come ItemsPanel della vista di capovolgimento.

Questo esempio mostra come utilizzare uno StackPanel con orientamento verticale come ItemsPanel di un FlipView.

<FlipView x:Name="flipViewVertical" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
    
    <!-- Use a vertical stack panel for vertical flipping. -->
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
    
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Width="480" Height="270" Stretch="UniformToFill"
                       Source="{Binding Image}"/>
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" 
                               FontFamily="Segoe UI" FontSize="26.667" 
                               Foreground="#CCFFFFFF" Padding="15,20"/>
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Ecco come appare la vista con orientamento verticale.

Aggiunta di un indicatore di contesto

Usa un indicatore di contesto (ad esempio PipsPager o film strip) con una vista a scorrimento per fornire agli utenti un punto di riferimento all'interno del contenuto.

L'immagine seguente mostra un PipsPager usato con una piccola galleria fotografica (si consiglia di centrare il PipsPager sotto la galleria).

Questo frammento di codice mostra come associare pipsPager a un controllo FlipView.

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

Per raccolte più grandi (10 o più elementi), è altamente consigliato usare un indicatore contestuale, ad esempio una striscia di miniature. A differenza di PipsPager, che usa semplici punti o glifi, ogni miniatura nella striscia di immagini mostra una versione più piccola e selezionabile dell'immagine corrispondente.

Per un esempio completo che mostra come aggiungere un indicatore di contesto a un controllo FlipView, vedi Esempio FlipView XAML.

UWP e WinUI 2

Le API per questo controllo sono presenti nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Articoli correlati

• Linee guida per gli elenchi
• PipsPager
• Classe FlipView