Schnellstart: Hinzufügen von FlipView-Steuerelementen
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern
Language: HTML | XAML

Schnellstart: Hinzufügen von FlipView-Steuerelementen (XAML)

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

Mit einem FlipView-Steuerelement können Sie eine Sammlung von Elementen anzeigen, durch die ein Benutzer Ihrer mit C++, C# oder Visual Basic erstellten Windows-Runtime-App nacheinander blättern kann.

Voraussetzungen

Es wird davon ausgegangen, dass Sie einer einfachen Windows-Runtime-App mit C++, C# oder Visual Basic Steuerelemente hinzufügen können. Anweisungen zum Hinzufügen eines Steuerelements finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen.

Was ist ein FlipView-Steuerelement?

FlipView ist ein Steuerelement, mit dem Sie nacheinander Element für Element durch eine Sammlung blättern können. Es eignet sich gut zum Anzeigen einer Bildergalerie. FlipView wird wie die Steuerelemente ListView und GridView von der ItemsControl-Klasse abgeleitet, sodass diese Steuerelemente viele Features gemeinsam haben. Sie können eine FlipView auffüllen, indem Sie die Elemente direkt einbinden oder an eine Datenquelle binden.

Flip-Ansicht-Steuerelement

Hinzufügen von Elementen zur Items-Sammlung

Sie können der Items-Sammlung Elemente per XAML oder Code hinzufügen. Üblicherweise fügen Sie Elemente auf diese Weise hinzu, wenn Sie nur über eine geringe Anzahl von Elementen verfügen, die sich nicht ändern und einfach in XAML definiert werden können, oder wenn die Elemente zur Laufzeit im Code generiert werden. Hier sehen Sie eine FlipView mit Elementen, die mithilfe von XAML inline definiert wurden.


<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 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");
flipView1.SelectionChanged += FlipView_SelectionChanged;

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


Wenn Sie einer FlipView Elemente hinzufügen, werden diese automatisch in einem FlipViewItem-Container platziert. Um die Art und Weise zu ändern, wie ein Element angezeigt wird, können Sie dem Elementcontainer einen Stil zuordnen. Legen Sie dazu die ItemContainerStyle-Eigenschaft fest.

Wenn Sie die Elemente in Extensible Application Markup Language (XAML) definieren, werden sie automatisch der Items-Sammlung hinzugefügt.

Festlegen der Quelle von Elementen

In der Regel verwenden Sie eine FlipView, um Daten aus einer Quelle (beispielsweise einer Datenbank oder dem Internet) anzuzeigen. Um FlipView mithilfe einer Datenquelle aufzufüllen, legen Sie die ItemsSource-Eigenschaft auf eine Sammlung mit Datenelementen fest.

Hinweis  Sie können ein FlipView auffüllen, indem Sie entweder der Items-Sammlung Elemente hinzufügen oder die ItemsSource-Eigenschaft festlegen. Die beiden Methoden können aber nicht gleichzeitig verwendet werden. Wenn Sie die ItemsSource-Eigenschaft festlegen und dann ein Element in XAML hinzufügen, wird das hinzugefügte Element ignoriert. Wenn Sie die ItemsSource-Eigenschaft festlegen und der Items-Sammlung ein Element in Code hinzufügen, wird eine Ausnahme ausgelöst.
 

Hier ist die ItemsSource der FlipView im Code direkt auf eine Instanz einer Sammlung festgelegt.


// 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);


Sie können auch die ItemsSource-Eigenschaft an eine Sammlung in XAML binden. Weitere Informationen finden Sie unter Datenbindung mit XAML.

Hier wird die ItemsSource an eine CollectionViewSource mit der Bezeichnung itemsViewSource gebunden.


<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}}"/>


Festlegen der Darstellung von Elementen

Datenelemente werden standardmäßig in der FlipView als Zeichenfolgendarstellung des Datenobjekts angezeigt, an das sie gebunden sind. Meist möchten Sie eine ansprechendere Darstellung Ihrer Daten anzeigen. Wenn Sie präzise festlegen möchten, wie die Elemente in der FlipView angezeigt werden sollen, erstellen Sie eine DataTemplate. Der XAML-Code in der DataTemplate definiert das Layout und das Erscheinungsbild von Steuerelementen, die zum Anzeigen eines einzelnen Elements verwendet werden. Die Steuerelemente im Layout können an Eigenschaften eines Datenobjekts gebunden werden. Es ist auch möglich, den Inhalt intern zu definieren. Die DataTemplate wird der ItemTemplate-Eigenschaft der FlipView zugeordnet.

In diesem Beispiel wird die ItemTemplate einer FlipView im Code definiert. Dem Bild wird eine Überlagerung hinzugefügt, um den Bildnamen anzuzeigen.


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


Hier sehen Sie das durch die Datenvorlage definierte Layout.

Datenvorlage für die Flip-Ansicht.

Festlegen der Ausrichtung von FlipView-Steuerelementen

In der Standardeinstellung blättert die FlipView horizontal. Damit sie vertikal blättert, verwenden Sie ein StackPanel mit einer vertikalen Ausrichtung als ItemsPanel der Flip-Ansicht.

Dieses Beispiel zeigt, wie ein StackPanel mit einer vertikalen Ausrichtung als ItemsPanel einer FlipView angegeben wird.


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


So sieht die FlipView mit einer vertikalen Ausrichtung aus.

Flip-Ansicht mit vertikaler Ausrichtung

Zusammenfassung und nächste Schritte

Sie haben erfahren, wie Sie FlipView-Steuerelemente erstellen, um Datenauflistungen anzuzeigen.

Weitere Beispiele finden Sie, wenn Sie das Beispiel für XAML FlipView herunterladen.

Verwandte Themen

FlipView
Richtlinien für FlipView-Steuerelemente
Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
Roadmap für Windows-Runtime-Apps mit C++

 

 

Anzeigen:
© 2017 Microsoft