Gewusst wie: Hinzufügen von Zeilen und Spalten zu einem Raster

Mit dem Grid-Steuerelement von Windows Presentation Foundation (WPF) können Sie Steuerelemente durch Erstellen von rasterbasierten Layouts schnell und einfach positionieren und ausrichten. Zur Entwurfszeit können Sie einem Grid-Steuerelement im WPF-Designer Zeilen und Spalten hinzufügen. Für neue Zeilen und Spalten wird standardmäßig die Star-Größenanpassung verwendet.

Wichtig

Wenn Sie die Größe einer Zeile oder Spalte auf Auto festlegen, bevor Sie ihr Inhalte hinzufügen, wird sie im Designer nicht angezeigt. Dadurch ist es möglicherweise schwierig, Steuerelemente in der richtigen Zeile oder Spalte zu positionieren. Um dies zu vermeiden, können Sie beim Arbeiten die Star-Größenanpassung verwenden und nach Abschluss zur automatischen Größenanpassung wechseln.

In diesem Thema werden drei Methoden erläutert, mit denen Sie einem Grid Zeilen und Spalten hinzufügen können. Sie können Zeilen und Spalten auch aus einem Raster entfernen. Weitere Informationen finden Sie unter Gewusst wie: Entfernen von Zeilen und Spalten aus einem Raster.

Verwenden des Designers

Wenn Sie im WPF-Designer ein Grid-Steuerelement auswählen, werden oben und links Schienen angezeigt. Mithilfe dieser Schienen können Sie dem Grid Zeilen und Spalten direkt hinzufügen. Die XAML-Ansicht wird automatisch mit den neuen Zeilen und Spalten aktualisiert.

Tipp

Wenn die FlowDirection-Eigenschaft auf RightToLeft festgelegt ist, wird die Schiene für die Zeilen auf der rechten Grid-Seite angezeigt.

So fügen Sie einem Raster Zeilen mit dem Designer hinzu

  1. Wählen Sie im WPF-Designer ein Grid-Steuerelement aus.

  2. Bewegen Sie den Mauszeiger über den äußeren Rand der Seitenschiene. Der Mauszeiger ändert sich in ein Fadenkreuz, und eine Rasterlinie wird angezeigt, die die Position angibt, an der die Zeile hinzugefügt wird.

  3. Klicken Sie auf die Schiene, um die Zeile festzulegen.

    Die Rasterlinie wird an dieser Stelle fixiert, und auf der Schiene wird am Ende der Rasterlinie ein Rasterlinienindikator angezeigt.

    Tipp

    Sie können die Größe der Zeile anpassen, indem Sie mit der Maus die Rasterlinien im Raster oder den Rasterlinienindikator auf der Schiene verschieben.

  4. (Optional) Wiederholen Sie die Schritte 2 und 3, um weitere Zeilen hinzuzufügen.

So fügen Sie einem Raster Spalten mit dem Designer hinzu

  1. Wählen Sie im WPF-Designer ein Grid-Steuerelement aus.

  2. Bewegen Sie den Mauszeiger über den oberen Rand der obersten Schiene. Der Mauszeiger ändert sich in ein Fadenkreuz, und eine Rasterlinie wird angezeigt, die die Position angibt, an der die Spalte hinzugefügt wird.

  3. Klicken Sie auf die Schiene, um die Spalte festzulegen.

    Die Rasterlinie wird an dieser Stelle fixiert, und auf der Schiene wird am Ende der Rasterlinie ein Rasterlinienindikator angezeigt.

    Tipp

    Sie können die Größe der Spalte anpassen, indem Sie mit der Maus die Rasterlinien im Raster oder den Rasterlinienindikator auf der Schiene verschieben.

  4. (Optional) Wiederholen Sie die Schritte 2 und 3, um weitere Spalten hinzuzufügen.

Verwenden des Auflistungs-Editors

Sie können einem Grid Zeilen und Spalten auch mit dem Auflistungs-Editor hinzufügen. Wenn Sie Zeilen und Spalten mit dem Auflistungs-Editor konfigurieren, werden die Entwurfsansicht und die XAML-Ansicht automatisch aktualisiert.

So fügen Sie einem Raster Zeilen mit dem Auflistungs-Editor hinzu

  1. Wählen Sie im WPF-Designer ein Grid-Steuerelement aus.

  2. Suchen Sie im Fenster Eigenschaften die RowDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit dem Auslassungszeichen.

    Das Dialogfeld Auflistungs-Editor wird angezeigt.

  3. Klicken Sie auf Hinzufügen, um eine neue Zeile hinzuzufügen.

  4. (Optional) Legen Sie die Eigenschaften der Zeile fest.

  5. (Optional) Wiederholen Sie die Schritte 3 und 4, um weitere Zeilen hinzuzufügen.

  6. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.

So fügen Sie einem Raster Spalten mit dem Auflistungs-Editor hinzu

  1. Wählen Sie im WPF-Designer ein Grid-Steuerelement aus.

  2. Suchen Sie im Fenster Eigenschaften die ColumnDefinitions-Eigenschaft, und klicken Sie in der Spalte mit dem Eigenschaftswert auf die Schaltfläche mit dem Auslassungszeichen.

    Das Dialogfeld Auflistungs-Editor wird angezeigt.

  3. Klicken Sie auf Hinzufügen, um eine neue Spalte hinzuzufügen.

  4. (Optional) Legen Sie die Eigenschaften der Spalte fest.

  5. (Optional) Wiederholen Sie die Schritte 3 und 4, um weitere Spalten hinzuzufügen.

  6. Klicken Sie auf OK, um den Auflistungs-Editor zu schließen und zum WPF-Designer zurückzukehren.

Verwenden des XAML-Editors

Sie können einem Grid Zeilen und Spalten auch manuell durch Eingaben im XAML-Editor hinzufügen. Die Entwurfsansicht wird automatisch mit den neuen Zeilen und Spalten aktualisiert.

So fügen Sie einem Raster Zeilen mit dem XAML-Editor hinzu

  1. Suchen Sie im XAML-Editor nach einem Grid-Element.

  2. Fügen Sie ein Grid.RowDefinitions-Element als untergeordnetes Element des Grid-Elements hinzu. Der Code sollte wie folgt aussehen:

    <Grid>
        <Grid.RowDefinitions>
        </Grid.RowDefinitions>
    </Grid>
    
  3. Fügen Sie RowDefinition-Elemente hinzu. Das folgende Markup enthält ein Beispiel:

    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="5*" />
    </Grid.RowDefinitions>
    

So fügen Sie einem Raster Spalten mit dem XAML-Editor hinzu

  1. Suchen Sie im XAML-Editor nach einem Grid-Element.

  2. Fügen Sie ein Grid.ColumnDefinitions-Element als untergeordnetes Element des Grid-Elements hinzu. Der Code sollte wie folgt aussehen:

    <Grid>
        <Grid.ColumnDefinitions>
        </Grid.ColumnDefinitions>
    </Grid>
    
  3. Fügen Sie ColumnDefinition-Elemente hinzu. Das folgende Markup enthält ein Beispiel:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
    

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen eines dynamischen Layouts

Konzepte

Ausrichtung im WPF-Designer

Layout mit absoluter und dynamischer Positionierung

Weitere Ressourcen

WPF-Containersteuerelemente