GridDemos

Prof. Dr. Robin Nunkesser

Grid

Überblick

Das Grid-Layout ordnet Inhalte in Zeilen und Spalten mit proportionalen oder absoluten Größen an.

• Lokale Reference (10.0)
• Microsoft Learn: Grid

BasicGridPage

Einfachstes Grid mit expliziten Zeilen- und Spaltendefinitionen.

<Grid RowDefinitions="Auto,Auto"
      ColumnDefinitions="*,*">
    <Label Text="Zeile 0, Spalte 0" />
    <Label Grid.Column="1" Text="Zeile 0, Spalte 1" />
    <Label Grid.Row="1" Text="Zeile 1, Spalte 0" />
</Grid>

BasicGridSimplifiedSyntaxPage

Kurzform der Zeilen- und Spaltendefinitionen.

<Grid RowDefinitions="Auto,Auto"
      ColumnDefinitions="*,*">

entspricht der vollständigen Schreibweise mit RowDefinition- und ColumnDefinition-Objekten.

CalculatorPage

Taschenrechner-Layout als praktisches Grid-Beispiel:

• Feste Zeilen- und Spaltenbreiten für Schaltflächen
• ColumnSpan für die Anzeige über mehrere Spalten
• Zeigt reale UI-Strukturierung mit Grid

ColorSlidersGridPage

Kombination von Grid mit Datenbindung:

• 3 Zeilen: Rot, Grün, Blau
• Slider-Wert → Farbe per Binding
• Zeigt Grid + XAML-Datenbindung kombiniert

GridAlignmentPage

Ausrichtungsoptionen innerhalb einer Grid-Zelle:

Property	Werte
HorizontalOptions	Start, Center, End, Fill
VerticalOptions	Start, Center, End, Fill

Beispiele für alle Kombinationen in einem Grid.

GridSpacingPage

Abstände zwischen Zellen:

<Grid RowSpacing="10"
      ColumnSpacing="20">

• RowSpacing: vertikaler Abstand zwischen Zeilen
• ColumnSpacing: horizontaler Abstand zwischen Spalten