Olika sorters layout

• TableLayoutPanel
  • Statiskt antal rader och kolumner
  • Lämpligt för layout som alltid är likadan
• FlowLayoutPanel
  • Dynamiskt antal rader
  • Lämplig för layout som varierar beroende på data

Exempel på flöde

1. FlowLayoutPanel panel = new FlowLayoutPanel {
2. Dock = DockStyle.Fill
3. };
4. Controls.Add(panel);
5. panel.Controls.Add(new Panel {
6. Width = 100, Height = 100, BackColor = Color.Orange
7. });
8. panel.Controls.Add(new Panel {
9. Width = 100, Height = 100, BackColor = Color.Green
10. });
11. panel.Controls.Add(new Panel {
12. Width = 100, Height = 100, BackColor = Color.Pink
13. });
14. panel.Controls.Add(new Panel {
15. Width = 100, Height = 100, BackColor = Color.Blue
16. });

Varierande bredd

1. FlowLayoutPanel panel = new FlowLayoutPanel {
2. Dock = DockStyle.Fill
3. };
4. Controls.Add(panel);
5. panel.Controls.Add(new Panel {
6. Width = 100, Height = 100, BackColor = Color.Orange
7. });
8. panel.Controls.Add(new Panel {
9. Width = 200, Height = 100, BackColor = Color.Green
10. });
11. panel.Controls.Add(new Panel {
12. Width = 100, Height = 100, BackColor = Color.Pink
13. });
14. panel.Controls.Add(new Panel {
15. Width = 100, Height = 100, BackColor = Color.Blue
16. });

Vertikalt flöde

1. FlowLayoutPanel panel = new FlowLayoutPanel {
2. Dock = DockStyle.Fill,
3. Direction = FlowDirection.TopDown
4. };
5. Controls.Add(panel);
6. panel.Controls.Add(new Panel {
7. Width = 100, Height = 100, BackColor = Color.Orange
8. });
9. panel.Controls.Add(new Panel {
10. Width = 200, Height = 100, BackColor = Color.Green
11. });
12. panel.Controls.Add(new Panel {
13. Width = 100, Height = 100, BackColor = Color.Pink
14. });
15. panel.Controls.Add(new Panel {
16. Width = 100, Height = 100, BackColor = Color.Blue
17. });

Tabeller inuti flöde

1. FlowLayoutPanel flow = new FlowLayoutPanel {
2. Dock = DockStyle.Fill
3. };
4. Controls.Add(flow);
6. Person[] people = ...;
7. foreach (Person p in people) {
8. TableLayoutPanel table = new TableLayoutPanel {
9. RowCount = 2,
10. ColumnCount = 2,
11. BackColor = Color.Orange
12. };
13. flow.Controls.Add(table);
14. table.Controls.Add(new Label { Text = "Name" });
15. table.Controls.Add(new Label { Text = p.Name });
16. table.Controls.Add(new Label { Text = "Country" });
17. table.Controls.Add(new Label { Text = p.Country });
18. }

Pixelstorlek: Width och Height

1. FlowLayoutPanel flow = new FlowLayoutPanel {
2. Dock = DockStyle.Fill
3. };
4. Controls.Add(flow);
6. Person[] people = ...;
7. foreach (Person p in people) {
8. TableLayoutPanel table = new TableLayoutPanel {
9. RowCount = 2,
10. ColumnCount = 2,
11. BackColor = Color.Orange,
12. Width = 200,
13. Height = 200
14. };
15. flow.Controls.Add(table);
16. table.Controls.Add(new Label { Text = "Name" });
17. table.Controls.Add(new Label { Text = p.Name });
18. table.Controls.Add(new Label { Text = "Country" });
19. table.Controls.Add(new Label { Text = p.Country });
20. }

AutoSize

1. FlowLayoutPanel flow = new FlowLayoutPanel {
2. Dock = DockStyle.Fill
3. };
4. Controls.Add(flow);
6. Person[] people = ...;
7. foreach (Person p in people) {
8. TableLayoutPanel table = new TableLayoutPanel {
9. RowCount = 2,
10. ColumnCount = 2,
11. BackColor = Color.Orange,
12. AutoSize = true
13. };
14. flow.Controls.Add(table);
15. table.Controls.Add(new Label { Text = "Name", AutoSize = true });
16. table.Controls.Add(new Label { Text = p.Name, AutoSize = true });
17. table.Controls.Add(new Label { Text = "Country", AutoSize = true });
18. table.Controls.Add(new Label { Text = p.Country, AutoSize = true });
19. }

Rutnät

1. DataGridView grid = new DataGridView {
2. ColumnCount = 3,
3. Dock = DockStyle.Fill
4. };
5. Controls.Add(grid);
7. grid.Columns[0].Name = "Country";
8. grid.Columns[1].Name = "Capital";
9. grid.Columns[2].Name = "Leader";
11. grid.Rows.Add(new string[] { "Sweden", "Stockholm", "Stefan" });
12. grid.Rows.Add(new string[] { "USA", "Washington", "Donald" });
13. grid.Rows.Add(new string[] { "Germany", "Berlin", "Angela" });

Rutnät som inte kan redigeras

1. DataGridView grid = new DataGridView {
2. ColumnCount = 3,
3. Dock = DockStyle.Fill,
4. AllowUserToAddRows = false,
5. AllowUserToDeleteRows = false,
6. ...
7. };

Egna abstraktioner

1. void MakeFlowAutoSize(FlowLayoutPanel flow)
2. void MakeFlowFixedSize(FlowLayoutPanel flow, int width, int height)
3. FlowLayoutPanel CreateImageGallery(Image[] images, int size)
4. ...
6. DataGridView CreateGrid(string[] columns, string[][] values)
7. DataGridView CreateGrid(string[] columns, string[][] values, bool editable)
8. void PopulateGrid(DataGridView grid, string[][] values)
9. ...