Linguaggio: HTML | XAML

Guida introduttiva: Aggiunta di controlli FlipView (XAML)

Applies to Windows and Windows Phone

Usa un controllo FlipView per visualizzare un insieme di elementi che l'utente può scorrere in sequenza in un'app di Windows Runtime che usa C++, C# o Visual Basic.

Prerequisiti

In questa esercitazione si suppone che tu sia in grado di aggiungere controlli in un'app di Windows Runtime di base che usa C++, C# o Visual Basic. Per istruzioni sull'aggiunta di un controllo, vedi Guida introduttiva: Aggiunta di controlli e gestione di eventi.

Che cos'è un controllo FlipView?

FlipView è un controllo che ti permette di scorrere gli insiemi di elementi in sequenza, uno alla volta. È ideale per visualizzare una raccolta di immagini. FlipView è derivato dalla classe ItemsControl, come i controlli ListView e GridView, quindi condivide molte delle loro funzionalità. Puoi popolare un controllo FlipView aggiungendo gli elementi in linea o associandolo a un'origine dati.

Controllo visualizzazione miniature

Aggiungere elementi alla raccolta di elementi

Puoi aggiungere elementi alla raccolta Items con il linguaggio XAML o codice. Generalmente, gli elementi si aggiungono in questo modo quando sono pochi, non vengono modificati e sono facilmente definiti in XAML, oppure se si generano gli elementi nel codice in fase di esecuzione. Ecco FlipView con elementi definiti in linea con il linguaggio XAML.


<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <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 = ref new FlipView();
flipView1->Items->Append("Item 1");
flipView1->Items->Append("Item 2");
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

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


Quando aggiungi elementi a FlipView, questi vengono automaticamente posizionati in un contenitore FlipViewItem. Per cambiare la modalità di visualizzazione di un elemento, puoi applicare uno stile al contenitore di elementi impostando la proprietà ItemContainerStyle.

Quando definisci gli elementi in XAML (Extensible Application Markup Language), vengono automaticamente aggiunti alla raccolta Items.

Impostare l'origine degli elementi

In genere si usa FlipView per visualizzare i dati provenienti da un'origine come un database o Internet. Per popolare FlipView a partire da un'origine dati, imposta la proprietà ItemsSource su una raccolta di elementi di dati.

Nota  Per popolare FlipView puoi aggiungere elementi alla relativa raccolta Items oppure impostare la relativa proprietà ItemsSource, ma non puoi usare entrambi i metodi contemporaneamente. Se imposti la proprietà ItemsSource e aggiungi un elemento in XAML, questo viene ignorato. Se imposti la proprietà ItemsSource e aggiungi un elemento alla raccolta Items nel codice, viene generata un'eccezione.

Qui, ItemsSource di FlipView è impostato nel codice direttamente su un'istanza della raccolta.


// Data source.
Platform::Collections::Vector<String^>^ itemsList = 
    ref new Platform::Collections::Vector<String^>();
itemsList->Append("Item 1");
itemsList->Append("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView^ flipView1 = ref new FlipView();
flipView1->ItemsSource = itemsList;
flipView1->SelectionChanged += 
    ref new SelectionChangedEventHandler(this, &MainPage::FlipView_SelectionChanged);

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


Puoi anche associare la proprietà ItemsSource a un insieme in XAML. Per altre informazioni dettagliate, vedi Associazione dei dati con XAML.

Qui la proprietà ItemsSource è associata a un oggetto CollectionViewSource denominato itemsViewSource.


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



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


Specificare l'aspetto degli elementi

Per impostazione predefinita, un elemento di dati viene visualizzato in FlipView come rappresentazione stringa dell'oggetto dati a cui è associato. In genere si mostra una presentazione più dettagliata dei dati. Per specificare con precisione la modalità di visualizzazione degli elementi in 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 loro contenuto può essere definito in linea. DataTemplate è assegnato alla proprietà ItemTemplate di FlipView.

In questo esempio, la proprietà ItemTemplate di un controllo FlipView è definita in linea. La sovrimpressione viene aggiunta all'immagine per visualizzare il nome dell'immagine.


    <FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <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 l'aspetto del layout definito dal modello di dati.

Visualizzazione miniature del modello di dati.

Impostare l'orientamento del controllo FlipView

Per impostazione predefinita, il controllo FlipView scorre orizzontalmente. Per farlo scorrere verticalmente, usa un oggetto StackPanel con orientamento verticale come ItemsPanel della visualizzazione miniature.

Questo esempio mostra come specificare StackPanel con orientamento verticale come ItemsPanel di 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" Source="{Binding Image}" Stretch="UniformToFill"/>
                  <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                      <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" 
                                 Foreground="#CCFFFFFF" Padding="15,20"/>
                  </Border>
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>

  </FlipView>


Ecco l'aspetto di FlipView con orientamento verticale.

Visualizzazione miniature con orientamento verticale

Riepilogo e passaggi successivi

Hai imparato a creare un controllo FlipView per visualizzare una raccolta di dati.

Per altri esempi, puoi scaricare l'esempio di controllo FlipView XAML.

Argomenti correlati

FlipView
Linee guida per i controlli FlipView
Roadmap per app di Windows Runtime scritte in C# o Visual Basic
Roadmap per app di Windows Runtime in C++

 

 

Mostra:
© 2014 Microsoft