Rasteransichten
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Programmieren von Rasteransichten (Android-Apps im Vergleich zu Windows Store-Apps)

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

Das GridView-Steuerelement in Windows Store-Apps ist mit dem GridView-Steuerelement in Android-Apps vergleichbar. Hier erfahren Sie, wie Sie eine Windows Store-App mit dem GridView-Steuerelement erstellen..

Rasteransichten in Android-Apps

In Android wird ein GridView-Steuerelement häufig zum Anzeigen von Datenlisten verwendet, die Bilder oder eine Auflistung anderer Elemente in einer rasterähnlichen Struktur anordnen. Rasterähnliche Layouts zählen besonders in Android-Apps zu den am häufigsten verwendeten UI-Steuerelementen. Im Vergleich zu Elementlisten wird bei einem Rasterlayout die verfügbare Bildschirmfläche besser genutzt. Rasterlayouts erfüllen zahlreiche Funktionen, beispielsweise:

  • Anzeigen einer Liste von Elementen, unter denen auch Bilder sein können.
  • Navigieren durch hierarchisch-strukturierte Daten.
  • Organisieren von Daten in visuell voneinander unterscheidbare Gruppierungen

Nach oben

Rasteransichten in Windows Store-Apps

Die Windows 8-Bibliothek für Steuerelemente enthält das GridView-Steuerelement, das Sie für die Anzeige von Listen in einem rasterähnlichen Layout verwenden können. Das GridView-Steuerelement wird verwendet, um eine Liste von Elementen horizontal anzuordnen. Dies ist ein Beispiel für ein GridView-Steuerelement, das verwendet wird, um eine Liste mit Elementen in einem rasterähnlichen Layout anzuordnen.

Eine Sammlungsansicht in Windows 8

Rasteransichten können als Datenquelle eine statische speicherinterne Liste, eine lokale Datenbank oder Remotedatenbank, ein XML-Dokument, einen Remotewebdienst oder einen Feed verwenden. Das GridView-Steuerelement kann mit einer als Datenbindung bezeichneten Technik mit den Datenquellen verknüpft werden. Die Datenbindung bietet eine einfache Möglichkeit für Windows Store-Apps, Daten anzuzeigen, hinzuzufügen, zu löschen oder zu verwalten. Weitere Informationen finden Sie unter Übersicht Datenbindung und Schnellstart: Datenbindung an Steuerelemente.

Nach oben

Vergleich der Codierungsschritte für Rasteransichten in Android-Apps und Windows Store-Apps

Sie erfahren nun Schritt für Schritt, wie Sie einer App eine Rasteransicht hinzufügen. Dabei werden Android und Windows 8 miteinander verglichen.

SchritteAndroidWindows 8

Erstellen Sie das UI-Steuerelement.

Verwenden Sie GridView.

Verwenden Sie das Steuerelement GridView. Weitere Informationen finden Sie unter So wird's gemacht: Hinzufügen einer Rasteransicht.

Definieren des Erscheinungsbilds der Rasteransicht

Definieren Sie Anzeigeeigenschaften mit deklarativem XML-Markup.

Definieren Sie eine GroupStyle-Eigenschaft für das Steuerelement GridView, und legen Sie seine Attribute fest. Verwenden Sie die Eigenschaft ItemsPanel des Steuerelements GridView, um das Layout von Elementen zu ändern. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen.

Legen Sie das Erscheinungsbild der Elemente fest.

Definieren Sie Anzeigeeigenschaften mit deklarativem XML-Markup.

Definieren Sie die ItemTemplate-Eigenschaft der ItemsControl-Klasse, um das Erscheinungsbild der einzelnen Elemente zu bearbeiten.

Binden Sie das Steuerelement an eine Datenquelle.

Legen Sie mit der setAdapter-Methode des GridView-Steuerelements die Rasteransicht auf ein Objekt fest, mit dem BaseAdapter erweitert wird.

Legen Sie für die ItemsSource-Eigenschaft des GridView-Steuerelements eine Collection von Elementen fest. Wenn Sie eine gruppierte Liste erstellen möchten, legen Sie als ItemsSource-Eigenschaft eine CollectionViewSource-Klasseninstanz fest. Weitere Informationen zum Erstellen einer gruppierten Liste finden Sie unter So wird's gemacht: Gruppieren von Elementen in einer Liste oder einem Raster.

 

Nach oben

Beispiel-App mit Rasteransicht

Wir werden nun eine einfache Windows Store-App erstellen, die das GridView-Steuerelement verwendet, um eine Auflistung von Fotos in einem Rasterlayout anzuzeigen.

So sieht die Android-Version der App aus.

Android-Version der App

Und so sieht die Windows Store-App aus.

Windows 8-Version der App

Nach oben

Erstellen der Beispiel-App

  1. Erstellen der App: In diesem Beispiel erstellen wir die App mit der C#-Vorlage "Leere App".

    1. Starten Sie Microsoft Visual Studio.
    2. Klicken Sie im Menü Datei auf Neues Projekt.
    3. Falls Windows Store noch nicht ausgewählt ist, erweitern Sie die Option Installiert > Vorlagen > Visual C# und klicken Sie auf Windows Store.
    4. Falls Blank App (XAML) nicht bereits ausgewählt ist, klicken Sie darauf.
    5. Geben Sie in die Felder Name und Speicherort den Namen der App (z. B. PhotoGallery) und einen Speicherort ein, oder übernehmen Sie die Standardeinstellungen.
    6. Klicken Sie auf OK.
  2. Definieren der Datenquelle: Windows 8 unterstützt die Verwendung zahlreicher Datenquellen in Apps. Für diese App verwenden wir programmatisch definierte und im Speicher instanziierte Daten. (Informationen zur Verwendung anderer Datenquellen finden Sie unter Übersicht Datenbindung.) Unsere App ist eine Fotogalerie, in der das Foto zusammen mit einem Titel und einer Beschreibung angezeigt wird. Zuerst definieren wir eine Klasse für die Erstellung einer Liste unserer Elemente, um die Datenquelle zu definieren. Dies ist im folgenden Code dargestellt.

    1. Klicken Sie im Menü Projekt auf Klasse hinzufügen.
    2. Ersetzen Sie im Feld Name den Standardtext durch Photo.cs.
    3. Klicken Sie auf OK.
    4. Fügen Sie oben in der Datei folgende using-Anweisungen hinzu:
      
      using Windows.UI.Xaml.Media;
      using Windows.UI.Xaml.Media.Imaging;
      
      
    5. Ersetzen Sie den Code class Photo { } durch den hier angezeigten Code:
      
      public class Photo
      {
          public Photo(string imagePath)
          {
              this._imagePath = imagePath;
          }
      
          private ImageSource _image = null;
          private String _imagePath = null;
      
          public ImageSource Image
          {
              get
              {
                  if (this._image == null && this._imagePath != null)
                  {
                      this._image = new BitmapImage(new Uri(this._imagePath));
                  }
                  return this._image;
              }
          }
      }
      
      
  3. Wir erstellen im MainPage.xaml.cs-Klassenkonstruktor eine Liste von Fotos, die als Datenquelle für unser Steuerelement für die Rasteransicht fungieren, wie in diesem Code dargestellt.

    1. Erweitern Sie in Visual Studio im Fenster Projektmappen-Explorer die Option MainPage.xaml und doppelklicken Sie auf MainPage.xaml.cs.
    2. Fügen Sie in der MainPage-Klasse vor dem MainPage-Konstruktor die folgende Codezeile hinzu:private List<Photo> photos = new List<Photo>();
    3. Fügen Sie im MainPage-Konstruktor vor der Codezeile this.InitializeComponent(); den Rest des folgenden Codes ein:
      
      Photo photo1 = new Photo("http://www.nasa.gov/images/content/64883main_image_feature_211_jw4.jpg");
      photos.Add(photo1);
      Photo photo2 = new Photo("http://www.nasa.gov/images/content/162283main_image_feature_693_ys_4.jpg");
      photos.Add(photo2);
      Photo photo3 = new Photo("http://www.nasa.gov/images/content/59802main_pia05389-516.jpg");
      photos.Add(photo3);
      Photo photo4 = new Photo("http://www.nasa.gov/images/content/53254main_MM_image_feature_97_jw4.jpg");
      photos.Add(photo4);
      Photo photo5 = new Photo("http://www.nasa.gov/images/content/151232main_image_feature_601_ys_4.jpg");
      photos.Add(photo5);
      Photo photo6 = new Photo("http://www.nasa.gov/images/content/63375main_image_feature_202_jw4.jpg");
      photos.Add(photo6);
      Photo photo7 = new Photo("http://www.nasa.gov/images/content/111199main_image_feature_290_ys4.jpg");
      photos.Add(photo7);
      
      
      Die Liste der Fotos vom Typ List<Photo> wird als generische C#-Liste definiert. Weitere Informationen hierzu finden Sie unter Eine Einführung in C#-Generika.
  4. Hinzufügen eines GridView-Steuerelements zur Seite: Fügen Sie der App mit XAML-Code wie diesem ein GridView-Steuerelement hinzu.

    1. Doppelklicken Sie in Visual Studio im Fenster Projektmappen-Explorer auf MainPage.xaml.
    2. Ersetzen Sie die Codezeilen <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"></Grid> durch den folgenden Code:
      
      <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
          <GridView Grid.Row="0" Grid.Column="0" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                    Name="photoGridView" ItemsSource="{Binding}" SelectionMode="Single" Padding="50,100,50,0"/>
      </Grid>
      
      

      Die Datenbindung wird in XAML (Extensible Application Markup Language) mithilfe der {Binding..}-Syntax erstellt. Die Quelle für die Datenbindung wird durch Festlegen der DataContext-Eigenschaft des GridView-Steuerelements erstellt. Der {Binding}-Wert des ItemsSource-Attributs gibt an, dass die Listenelemente an die DataContext-Eigenschaft des GridView-Steuerelements selbst gebunden sind.

      Außerdem können Sie Ihrer App das GridView-Steuerelement programmatisch hinzufügen: Einzelheiten hierzu finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen.

  5. Entwerfen des Erscheinungsbilds für das Raster: Wir wählen für das Raster das Standarderscheinungsbild, das dem Raster in Android ähnelt. Weitere Informationen zum Ändern des Erscheinungsbilds für das GridView-Steuerelement finden Sie unter Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen.
  6. Entwerfen des Erscheinungsbilds der Elemente in der Liste: Fügen Sie in Visual Studio in der Datei MainPage.xaml zwischen dem Anfangstag <GridView Grid.Row="0" Grid.Column="0" ...> und dem Endtag </GridView> den folgenden XAML-Code hinzu:
    
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Height" Value="250"></Setter>
            <Setter Property="Width" Value="250"></Setter>
            <Setter Property="Margin" Value="20"></Setter>
        </Style>
    </GridView.ItemContainerStyle>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Gray" BorderThickness="12">
                <Image  Source="{Binding Image}" />
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
    
    

    Wenn wir das Erscheinungsbild der Elemente im Raster festlegen möchten, müssen wir für die ItemTemplate-Eigenschaft des GridView-Steuerelements ein DataTemplate-Objekt festlegen. Dazu verwenden wir den oben dargestellten XAML-Code. Die Steuerelemente im Layout können an Eigenschaften eines Datenobjekts gebunden werden. Es ist auch möglich, den Inhalt intern zu definieren. In diesem Beispiel wurde die Vorlage für die Elemente inline im GridView-Steuerelement definiert.

    Die Vorlage besteht aus einem Bild mit einem Rahmen der Stärke 12 in Grau. Die Source-Eigenschaft des Image-Objekts ist als {Binding Image} angegeben und wird damit an die Image-Eigenschaft des Photo-Objekts gebunden, von dem das Element unterstützt wird.

  7. Festlegen der Elementquelle: Nach der Erstellung der Elementliste können Sie die Quelle des Elements ganz einfach angeben. Fügen Sie in Visual Studio in der Datei MainPage.xaml.cs der OnNavigatedTo-Methode den Code photoGridView.ItemsSource = photos; hinzu.

Nach oben

Verwandte Themen

Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen
So wird's gemacht: Hinzufügen einer Rasteransicht
So wird's gemacht: Gruppieren von Elementen in einer Liste oder einem Raster
Schnellstart: Definieren von Layouts
GridView class
Übersicht Datenbindung

 

 

Anzeigen:
© 2017 Microsoft