Lektion 15 (3 okt)

GUI:n och layout

Läsanvisningar

Instruktioner

För att skapa en mall (template) till Windows Forms-applikationer, följ dessa instruktioner:

  1. Klicka på File > New > Project..., välj Console App (.NET Framework) som vanligt och klicka på OK. (Välj inte Windows Forms App (.NET Framework).)
  2. Klicka på Project > ConsoleApp1 Properties... (eller motsvarande beroende på vad ert projekt heter).
  3. Ändra Output type till Windows Application.
  4. Klicka på Project > Add Reference....
  5. Kryssa i System.Windows.Forms och System.Drawing och klicka på OK.
  6. Om ni inte redan har fönstret Solution Explorer öppet, klicka på View > Solution Explorer.
  7. I Solution Explorer, dubbelklicka på filen Program.cs.
  8. Ersätt hela Main-metoden med följande kod:

    1. [STAThread]
    2. static void Main()
    3. {
    4. Application.EnableVisualStyles();
    5. Application.SetCompatibleTextRenderingDefault(false);
    6. Application.Run(new MyForm());
    7. }
  9. I Solution Explorer, högerklicka på ConsoleApp1 (eller motsvarande beroende på vad ert projekt heter) och klicka på Add > Class....
  10. Skriv MyForm.cs i fältet Name och klicka på Add.
  11. Lägg till raderna using System.Windows.Forms; och using System.Drawing; längst upp i båda filerna (Program.cs och MyForm.cs).
  12. Ändra klassen MyForm så att den ärver från Form (som är en inbyggd klass i .NET). Ni kan nu starta programmet och få upp ett fönster som inte gör någonting. Programmets beteende kan ni nu själva bestämma genom att skriva kod i klassen MyForm.
  13. För att öppna filen MyForm.cs igen efter att ni har stängt den, klicka på pilen bredvid filnamnet och klicka på det MyForm som dyker upp.
  14. Spara projektet som en återanvändbar mall genom att klicka på Project > Export Template.... Välj sedan Project template, klicka på Next, välj ett passande namn under Template Name och klicka på Finish.
  15. När ni hädanefter skapar nya projekt kommer den nya mallen att finnas i listan över mallar.

Övningar

Lösningsförslag

  1. Välj någon tidigare övning (inklusive de stående övningarna) som läser indata från användaren. Skriv sedan ett program som ritar upp ett GUI med lämplig design där användaren kan mata in sin indata. Tänk också på vad som händer med er design när man ändrar storlek på fönstret. Programmet ska inte ha funktionalitet, enbart en GUI-design. Funktionalitet kommer vi att lägga till nästa vecka.

    Följande är ett exempel på ett GUI för övning 4 från lektion 1:

    Och så här skulle det kunna se ut när fönstret förstoras:

  2. Välj valfri nationsflagga som består av enbart fyrkanter (exempelvis många av de europeiska flaggorna) och försök att återskapa denna med hjälp av TableLayoutPanel. Till de olika fälten i flaggan kan ni använda Panel med lämplig BackColor. Använd också Margin för att bli av med mellanrummen mellan fälten.

    Börja med någon av de enklare (exempelvis Polen eller Ukraina), fortsätt med några mer komplicerade (exempelvis Sverige eller Förenade Arabemiraten) och se om ni kan arbeta er upp till Norge eller till och med Grekland.