UWP: dynamische Grids – dieses Mal wieder eher ein sehr technisches Thema. Eigentlich wollte ich mal nur ganz kurz etwas ausprobieren. Doch dann fing die Suche an: wie erstellt man in einer Universal Windows Platform App eigentlich ein dynamisches Grid. 

Ziel war es, ein Formular mit folgendem Aussehen zu erhalten: 

Da ich das Formular aus einer Steuerdatei aufbauen wollte, waren die Parameter wie Textfeld-Inhalt, Inhalt von Frage 1 – 4 sowie der Yes/No-Buttons nicht von Anfang an definiert. Daher entschied ich mich, das Grid dynamisch mit C# aufzubauen.

Ich habe dazu viele Artikel gefunden. Letztendlich musste ich aber immer wieder feststellen, dass der letzte – wahrscheinlich entscheidende – Schritt fehlte. 

Hier meine Erkenntnisse:

Aufbau des Grids:

Grid gGrid = new Grid();
// Grid-Eigenschaften
gGrid.Width = 1000;
gGrid.Height = 700;

Anlage der Spalten:

ColumnDefinition spalte1 = new ColumnDefinition();
ColumnDefinition spalte2 = new ColumnDefinition();
ColumnDefinition spalte3 = new ColumnDefinition();

spalte1.Width = new GridLength(0, GridUnitType.Auto);
spalte2.Width = new GridLength(0, GridUnitType.Auto);
spalte3.Width = new GridLength(1, GridUnitType.Auto);

gGrid.ColumnDefinitions.Add(spalte1);
gGrid.ColumnDefinitions.Add(spalte2);
gGrid.ColumnDefinitions.Add(spalte3);

Aufbau der Zeilen

Nach der Definition der Zeilen habe ich mich an den Aufbau der Zeilen gemacht. Die Anzahl der Zeilen wurden durch die Steuerdatei festgelegt.

Wenn man nach UWP und dynamische Grid sucht, findet man wenig über die Anlage von Zeilen. Dies war meine Lösung für die Anlage von Zeilen (in dem Beispiel die Anlage von 2 Zeilen)

var tabellenZeile1 = new RowDefinition();
tabellenZeile1.Height = GridLength.Auto;
gGrid.RowDefinitions.Add(tabellenZeile1);

var tabellenZeile2 = new RowDefinition();
tabellenZeile2.Height = GridLength.Auto;
gGrid.RowDefinitions.Add(tabellenZeile2);

Füllen mit Inhalten

Nun ging es darum, die Zeilen mit Inhalt zu füllen. Meine Elemente (wie im Screenshot gezeigt) waren:
1. ein Textfeld
2. ein Radiobutton z. B. mit „Yes“
3. ein Radiobutton z, B, mit „No“

Das Textfeld (qKatalog ist eine Liste, die den Inhalt der eingelesenen Rohdaten enthält): 

Tb_Answer1.Text = qKatalog[iPos].answer1;
Tb_Answer1.Width = 774;
Tb_Answer1.HorizontalAlignment = HorizontalAlignment.Left;
Tb_Answer1.Margin = new Thickness(10);

Radiobuttons

Danach werden die beiden Radio-Buttons erzeugt und einer Gruppe zugeordnet:

RadioButton RB_Y1 = new RadioButton();
RadioButton RB_N1 = new RadioButton();

RB_Y1.Content = qKatalog[iPos].lText1;
RB_Y1.GroupName = "YN1";
RB_Y1.HorizontalAlignment = HorizontalAlignment.Left;

RB_N1.Content = qKatalog[iPos].lText1;
RB_N1.GroupName = "YN1";
RB_N1.HorizontalAlignment = HorizontalAlignment.Left;

Anordnen im Grid

Nun kommt ein wichtiger Schritt, der in vielen Beschreibungen gefehlt hatte: 

gGrid.Children.Add(Tb_Answer1);
gGrid.Children.Add(RB_Y1);
gGrid.Children.Add(RB_N1);

Damit sind die Elemente dem Grid zugeordnet. 

Anschließend müssen die Inhalte „nur“ noch den entsprechenden Zeilen und Spalten zugeordnet werden:

Grid.SetRow(Tb_Answer1, 0);
Grid.SetRow(RB_Y1, 0);
Grid.SetRow(RB_N1, 0);

Grid.SetColumn(Tb_Answer1, 0);
Grid.SetColumn(RB_Y1, 1);
Grid.SetColumn(RB_N1, 2);

Das bedeutet, dass die Elemente der Zeile (SetRow) 0 zugeordnet wurden. Danach werden Tb_Answer1 in die Spalte 0, RB_Y1 in die Spalte 1 und RB_N1 in die Spalte 2 platziert.  

Danach müssen eigentlich nur noch die weiteren Zeilen mit Inhalt gefüllt werden.

 

Die genutzten Quellen: