So wird’s gemacht: Hinzufügen einer Rasteransicht (XAML)

Applies to Windows and Windows Phone

Dieses Lernprogramm führt Sie durch die Schritte zum Hinzufügen einer Rasteransicht zu einer Windows-Runtime-App mit C++, C# oder Visual Basic.

Sie fügen eine Rasteransicht i. d. R. im XAML-Editor (Extensible Application Markup Language) oder mit einem Entwicklungstool wie Blend für Visual Studio hinzu. Sie können eine Rasteransicht aber auch im Code zur Laufzeit hinzufügen.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Wissenswertes

Technologien

Voraussetzungen

Anweisungen

Schritt 1: Hinzufügen einer Rasteransicht in XAML

Hh943061.wedge(de-de,WIN.10).gifSo fügen Sie eine Rasteransicht in XAML hinzu

  1. Fügen Sie im übergeordneten Container ein GridView-Steuerelement hinzu.
  2. Wenn Sie der Rasteransicht einen Namen zuweisen möchten, legen Sie das x:Name-Attribut auf einen Zeichenfolgenwert fest.

    Wenn Sie im Code auf ein Steuerelement verweisen möchten, muss dieses einen Namen besitzen. Ansonsten ist kein Name erforderlich.

  3. Fügen Sie der Rasteransicht Elemente hinzu, indem Sie die Items-Auflistung füllen oder die ItemsSource-Eigenschaft an eine Datenquelle binden.

    In diesem Beispiel wird die Items-Auflistung in XAML gefüllt.

    
    <GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
        <x:String>Item 1</x:String>
        <x:String>Item 2</x:String>
    </GridView>
    
    
    

    In diesem Beispiel wird die ItemsSource an eine Auflistung in XAML gebunden. Die ItemsSource wird an den DataContext des GridView gebunden.

    
    <GridView ItemsSource="{Binding}" SelectionChanged="GridView_SelectionChanged"/>
    
    
    
  4. Damit bei einer Auswahländerung in der Rasteransicht eine Aktion ausgeführt wird, fügen Sie einen Ereignishandler für das SelectionChanged-Ereignis hinzu. Fügen Sie im SelectionChanged-Ereignishandler Code hinzu, damit Aktionen ausgeführt werden.
    
    private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    Zur Überprüfung des ausgewählten Elements im Steuerelement außerhalb des SelectionChanged-Ereignisses verwenden Sie die SelectedItem-Eigenschaft oder die SelectedIndex-Eigenschaft.

Schritt 2: Hinzufügen einer Rasteransicht in Code

Hh943061.wedge(de-de,WIN.10).gifSo fügen Sie eine Rasteransicht in Code hinzu

  1. Erstellen Sie ein neues GridView.
  2. Fügen Sie der Rasteransicht Elemente hinzu, indem Sie die Items-Auflistung füllen oder die ItemsSource-Eigenschaft auf eine Datenauflistung festlegen.
  3. Damit bei einer Auswahländerung in der Rasteransicht eine Aktion ausgeführt wird, fügen Sie einen Ereignishandler für das SelectionChanged-Ereignis hinzu. Fügen Sie im SelectionChanged-Ereignishandler Code hinzu, damit Aktionen ausgeführt werden.
  4. Fügen Sie das GridView in der visuellen Struktur einem übergeordneten Container hinzu. Dies ist erforderlich, damit die Rasteransicht auf der Benutzeroberfläche angezeigt wird.

    In diesem Beispiel wird gezeigt, wie Sie ein GridView hinzufügen und die Items-Auflistung im Code füllen.

    
    // Create a new grid view, add content, 
    // and add a SelectionChanged event handler.
    GridView gridView1 = new GridView();
    gridView1.Items.Add("Item 1");
    gridView1.Items.Add("Item 2");
    gridView1.SelectionChanged += GridView_SelectionChanged;
    
    // Add the grid view to a parent container in the visual tree.
    stackPanel1.Children.Add(gridView1);
    
    
    

    In diesem Beispiel wird gezeigt, wie Sie ein GridView hinzufügen und die ItemsSource im Code festlegen.

    
    // Data source.
    List<String> itemsList = new List<string>();
    itemsList.Add("Item 1");
    itemsList.Add("Item 2");
    
    // Create a new grid view, add content, 
    // and add a SelectionChanged event handler.
    GridView gridView1 = new GridView();
    gridView1.ItemsSource = itemsList;
    gridView1.SelectionChanged += GridView_SelectionChanged;
    
    // Add the grid view to a parent container in the visual tree.
    stackPanel1.Children.Add(gridView1);
    
    
    
  5. Damit bei einer Auswahländerung in der Rasteransicht eine Aktion ausgeführt wird, fügen Sie einen Ereignishandler für das SelectionChanged-Ereignis hinzu. Fügen Sie im SelectionChanged-Ereignishandler Code hinzu, damit Aktionen ausgeführt werden.
    
    private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Add code to perform some action here.
    }
    
    
    

    Zur Überprüfung des ausgewählten Elements im Steuerelement außerhalb des SelectionChanged-Ereignisses verwenden Sie die SelectedItem-Eigenschaft oder die SelectedIndex-Eigenschaft.

Schritt 3: Hinzufügen einer Rasteransicht mit einem Entwicklungstool

Hh943061.wedge(de-de,WIN.10).gifSo fügen Sie eine Rasteransicht mit einem Entwicklungstool hinzu

  1. Wählen Sie das GridView-Steuerelement aus.
    • Wählen Sie in Microsoft Visual Studio im Bereich Toolbox die GridView aus.
    • Wählen Sie in Blend für Visual Studio im Bereich Assets die GridView aus.

      Wählen Sie auf der linken Seite im Bereich Objekte den Eintrag Steuerelemente aus.

  2. Fügen Sie auf der Entwurfsoberfläche einen GridView hinzu. Führen Sie dann eine der folgenden Aktionen aus:
    • Doppelklicken Sie auf die Rasteransicht. Die Rasteransicht wird dem ausgewählten übergeordneten Container mit den Standardeinstellungen für Position und Größe hinzugefügt.
    • Ziehen Sie die Rasteransicht auf die Entwurfsoberfläche. Die Rasteransicht wird an der Position hinzugefügt, an der Sie sie loslassen, wobei die Standardeinstellungen für Größe und Inhalt verwendet werden.
    • Zeichnen Sie das Steuerelement für die Rasteransicht auf der Entwurfsoberfläche. Die Rasteransicht wird mit den von Ihnen gezeichneten Einstellungen für Größe und Position hinzugefügt.
  3. Weisen Sie dem GridView bei Bedarf einen Namen zu. Geben Sie den Namen bei ausgewählter Rasteransicht im Textfeld der Name-Eigenschaft ein.

    Die Name-Eigenschaft befindet sich ganz oben im Bereich Eigenschaften. Wenn Sie im Code auf ein Steuerelement verweisen möchten, muss dieses einen Namen besitzen. Ansonsten ist kein Name erforderlich.

  4. Fügen Sie der Rasteransicht Elemente hinzu, indem Sie die Items-Auflistung füllen oder die ItemsSource-Eigenschaft an eine Datenquelle binden.
  5. Damit bei einer Auswahländerung in der Rasteransicht eine Aktion ausgeführt wird, fügen Sie einen Ereignishandler für das SelectionChanged-Ereignis hinzu. Fügen Sie im SelectionChanged-Ereignishandler Code hinzu, damit Aktionen ausgeführt werden.
    1. Wählen Sie die Ansicht Ereignis im Bereich Eigenschaften aus.
    2. Wählen Sie die Rasteransicht auf der Entwurfsoberfläche aus, und führen Sie dann eine der folgenden Aktionen aus:
      • Doppelklicken Sie in das Textfeld des SelectionChanged-Ereignisses, um einen Handler mit einem Standardnamen hinzuzufügen.
      • Geben Sie einen Namen in das Textfeld des SelectionChanged-Ereignisses ein, um einen Handler mit einem benutzerdefinierten Namen hinzuzufügen.

Verwandte Themen

GridView
Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen
Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
Roadmap für Windows-Runtime-Apps mit C++

 

 

Anzeigen:
© 2014 Microsoft