Vad är ett GUI?

• Ta emot indata från användaren
• Utför beräkningar
• Visa upp utdata för användaren

Vad skiljer sig?

• Vi tar emot indatan på ett nytt sätt
• Vi visar upp utdatan på ett nytt sätt
• Men:
  • Beräkningarna är samma

Övergripande struktur

• Kod som använder Windows Forms för att ta emot indata
• Kod som använder Windows Forms för att visa upp utdata
• Kod som utför beräkningarna, utan Windows Forms

Exempel

1. class MyForm : Form {
2. public MyForm() {
3. Button button = new Button {
4. Text = "Calculate Tax"
5. };
6. button.Click += OnButtonClick;
7. Controls.Add(button);
8. }
9. private void OnButtonClick(object sender, EventArgs e) {
10. double result = Tax.Calculate();
11. MessageBox.Show("Total tax: " + result);
12. }
13. }

Varför denna uppdelning?

• GUI:n är komplicerade
  • Många olika delar av .NET
  • Fler möjligheter och scenarion som kan inträffa
  • Utseende, layout och användarvänlighet
• Ju mindre kod som behöver hantera denna komplexitet desto bättre

Undantag

• Ibland är beräkningarna väldigt korta
• Ibland är beräkningarna väldigt nära knutna till GUI:t
• Principen är "uppdelning", men slutmålet är "enkelhet"

Områden i Windows Forms

• Kontroller (controls)
  • Färdiga GUI-komponenter ("widgets")
• Layout
  • Hur och var kontroller placeras
• Utseende
  • Färger, typsnitt och andra ytliga egenskaper
• Händelser (events)
  • Vad som händer när användaren gör något

Kontroller

• Button
• TextBox
• ProgressBar
• TabControl
• MonthCalendar
• ...

Layout

• TableLayoutPanel
• FlowLayoutPanel
• Koordinater

TableLayoutPanel

1. TableLayoutPanel panel = new TableLayoutPanel {
2. RowCount = 2,
3. ColumnCount = 2,
4. BackColor = Color.Orange
5. };
6. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
7. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
8. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
9. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
10. Controls.Add(panel);

Dock

1. TableLayoutPanel panel = new TableLayoutPanel {
2. RowCount = 2,
3. ColumnCount = 2,
4. BackColor = Color.Orange
5. };
6. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
7. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
8. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
9. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
10. panel.Dock = DockStyle.Right;
11. Controls.Add(panel);

DockStyle.Fill

1. TableLayoutPanel panel = new TableLayoutPanel {
2. RowCount = 2,
3. ColumnCount = 2,
4. BackColor = Color.Orange,
5. Dock = DockStyle.Fill
6. };
7. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
8. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
9. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
10. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
11. Controls.Add(panel);

Innehåll i cellerna

1. TableLayoutPanel panel = new TableLayoutPanel {
2. RowCount = 2,
3. ColumnCount = 2,
4. BackColor = Color.Orange,
5. Dock = DockStyle.Fill
6. };
7. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
8. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
9. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
10. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
11. Button button1 = new Button {
12. Text = "My Button 1",
13. Dock = DockStyle.Fill
14. };
15. panel.Controls.Add(button1);
16. Button button2 = new Button { ... };
17. panel.Controls.Add(button2);
18. ...
19. Controls.Add(panel);

Innehåller över flera rader/kolumner

1. TableLayoutPanel panel = new TableLayoutPanel {
2. RowCount = 2,
3. ColumnCount = 2,
4. BackColor = Color.Orange,
5. Dock = DockStyle.Fill
6. };
7. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
8. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50));
9. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
10. panel.RowStyles.Add(new RowStyle(SizeType.Percent, 50));
11. Button button1 = new Button {
12. Text = "My Button 1",
13. Dock = DockStyle.Fill
14. };
15. panel.Controls.Add(button1);
16. Button button2 = new Button { ... }
17. panel.Controls.Add(button2);
18. ...
19. panel.SetColumnSpan(button1, 2);
20. Controls.Add(panel);

Tabeller inuti tabeller

1. TableLayoutPanel innerPanel = new TableLayoutPanel {
2. RowCount = 2,
3. ColumnCount = 2,
4. BackColor = Color.Pink,
5. Dock = DockStyle.Fill
6. };
7. innerPanel.Controls.Add(new Button {
8. Text = "My Button 4-1"
9. });
10. ...
11. panel.Controls.Add(innerPanel);

Större exempel

1. TableLayoutPanel panel = new TableLayoutPanel
2. {
3. RowCount = 2,
4. ColumnCount = 2,
5. Dock = DockStyle.Fill
6. };
7. panel.ColumnStyles.Add(new ColumnStyle(SizeType.AutoSize));
8. panel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100));
9. panel.RowStyles.Add(new RowStyle(SizeType.AutoSize));
10. panel.RowStyles.Add(new RowStyle(SizeType.AutoSize));
11. panel.Controls.Add(new Label {
12. Text = "Name",
13. TextAlign = ContentAlignment.MiddleRight
14. });
15. panel.Controls.Add(new TextBox {
16. Text = "Please enter name here",
17. Dock = DockStyle.Fill
18. });
19. panel.Controls.Add(new Label {
20. Text = "Age",
21. TextAlign = ContentAlignment.MiddleRight
22. });
23. panel.Controls.Add(new NumericUpDown {
24. Value = 20,
25. Dock = DockStyle.Fill
26. });
27. Controls.Add(panel);

Dokumentation

• Visual Studio
  • F1
  • Autocomplete
• Google
• Testa!
• Visual Studio Designer
  • Men bara för experimenterande