Windows Forms – Del 1

Inledning

Visual Studio erbjuder en effektiv miljö för att ska skapa Windowsprogram. Just namnet Visual syftar till att programmeringen delvis kan ske visuellt genom att klicka och dra med musen. Största fördelen med detta är att det sparar tid. Vi ska nu titta närmre på hur ett Windowsprogram skapas och vilka delar det består av.

Själva ramverket för att skapa och hantera Windowsprogram kallas för Windows Forms och dök först upp med .NET 1.0. System för att underlätta skapandet av Windowsprogram har funnits länge. Ett tidigare populärt system, som användes av Visual Basic och Visual C++, kallades MFC (Microsoft Foundation Classes). Windows Forms är en modernare variant av MFC.

Det finns många saker som man förknippar med ett Windowsprogram, t. ex. utseendet, funktionerna, knappar och listor etc. För att användare lätt ska hitta i ett program är det ofta en fördel om programmen till viss del påminner om varandra. Tanken om hur ett användargränssnitt (GUI, Graphical User Interface) ska se ut kommer med Windows Forms.

Med Visual Studio Express 2005 används främst .NET version 2.0 och därmed också Windows Forms 2.0. Microsoft har under en tid arbetat på ett nytt ramverk som ska ta över Windows Forms betydelse. Detta ramverk kallas WPF (Windows Presentation Foundation) och finns med i .NET 3.0 samt .NET 3.5. Tanken med WPF är att bryta ned gränserna mellan vad som är ett webbprogram och vad som är ett Windowsprogram som körs lokalt på datorn. WPF skiljer sig markant mot tidigare ramverk för Windowsprogram, mer om detta i kommande artiklar.

Ett nytt Windows Application

Välj i menyn "File" alternativet "New Project". Under fliken "Visual C#" hittar du alternativet "Windows Application".

bild

Tryck OK så ska vi ta en titt på vad som skapas. Kör du Visual Studio Express 2005 så sparas inte projektet förrän du väljer Spara eller förrän Visual Studio avslutas. Det är hela 8 olika delar vi ska undersöka:

  • Form1.cs [Design]
  • Toolbox
  • Solution Explorer
  • Properties (properties)
  • Properties (events)
  • Form1.cs [Code]
  • Program.cs
  • Form1.Designer.cs

Form1.cs [Design]

Detta är vad som möter dig när du skapat ett nytt Windows Application. Det du ser är den visuella bilden av hur ditt formulär Form1 kommer att se ut när programmet körs igång. Du kan testa att tryck F5 en gång och se att det verkligen stämmer. Du märker också att programmet redan har en del standardfunktioner som t.ex. kryssrutan som avslutar programmet.

bild

Här kan du göra visuella ändringar i ditt program genom att t.ex. dra ut storleken på formuläret. Tillsammans med Toolbox-fönstret och Properties-fönstret kan du lägga till komponenter och göra inställningar på varje individuell komponent. Markera en komponent genom att trycka på den, flytta den genom att dra etc.

Viktigt att veta är att du fortfarande programmerar kod samtidigt som du gör visuella ändringar. Alla ändringar återspeglas nämligen automatiskt i filen Form1.Designer.cs i form av C# kod.

Toolbox

Alla komponenter som finns med i Windows Forms hittar du i Toolbox-fönstret. Här finns allt ifrån vanliga knappar och textfält till specialutformade dialoger för att välja typsnitt. Kort och gott oftast alla komponenter som du kan tänkas behöva för att göra ett Windowsprogram.

bild

Dra ut önskad komponent på Form1.cs [Design]. Har du inte någon visuell vy uppe så kommer Toolbox-fönstret att vara inaktiverat.

Skulle du inte hitta Toolbox-fönstret så väljer du i menyn; "View" -> "Toolbox" för att få fram det.

Solution Explorer

Solution Explorern är mycket viktig då den visar filer som ingår i projektet. Det mesta som visas i trädet är filer som också finns sparade, eller kommer att sparas, på disken.

bild

Form1.cs har en speciell ikon som indikerar att filen är av typen formulär. Under Form1.cs har även filen Form1.Designer.cs och Form1.resx skapats.

Ett dubbelklick i Solution Explorern öppnar upp vald fil för editering. Filer som kan kopplas till ett visst utseende, som Form1.cs, öppnas upp i design-läge. Vill man inte det så går det bra att högerklicka och välja alternativet "View Code".

Properties (properties)

De allra flesta inställningar som går att göra i formulär och komponenter finns listade i ett fönster kallat Properties. En property är en individuell inställning på en viss komponent, t. ex. texten på en knapp.

bild

Listan i Properties ändras beroende på vilken komponent som är markerad i design-läget. Är du osäker så titta överst i Properties-listan, där står namnet på den markerade komponenten samt vilken sort den är av. I bilden ovan är det Form1 av typen System.Windows.Forms.Form som är markerad.

Properties (events)

I fönstret för properties finns även en lista på events (händelser) som kan vara kopplade till en viss komponent. En händelse kan vara t.ex. att en knapp trycks ned, muspekaren åker över en komponent eller att en text blir ändrad. Olika komponenter har olika events som kan kopplas i programmet.

bild

Knappen "Events" (som ser ut som en blixt) växlar läge och visar events istället för properties. Knappen "Properties" växlar tillbaka till properties.

Form1.cs [Code]

Exempel: Form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    }
}

Det finns inte mycket i Form1.cs till att börja med, men det beror främst på att autogenererade inställningar lagras i filen Form1.Designer.cs. Metoden Form1() är en så kallad konstruktor för formuläret Form1. Denna körs endast en gång då formuläret skapas. Metoden InitializeComponent();, som anropas, återfinns i filen Form1.Designer.cs.

Detta är den fil som vi nästan uteslutande kommer att jobba med när vi bygger ut Form1.

Program.cs

Exempel: Program.cs

using System;
using System.Collections.Generic;
using System.Windows.Forms;

namespace WindowsApplication1
{
    static class Program
    {
        /// 
        /// The main entry point for the application.
        /// 
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Form1());
        }
    }
}

Filen Program.cs har du nästan aldrig någon anledning att ändra på. Den innehåller den statiska metoden Main() som startar ditt formulär som ett Windowsprogram. På så vis startar även ett Windowsprogram på samma sätt som ett Console Application, skillnaden är dock att formuläret hålls igång av operativsystemet trots det att Main är klar. Det finns en osynlig loop som sköts av operativsystemet som sköter hanteringen av programmet och vi lämnas till att reagera på händelser (events) som kan uppstå i programmet.

Form1.Designer.cs

Exempel: Form1.Designer.cs

namespace WindowsApplication1
{
    partial class Form1
    {
        /// 
        /// Required designer variable.
        /// 
        private System.ComponentModel.IContainer components = null;

        /// 
        /// Clean up any resources being used.
        /// 
        /// true if managed resources should be disposed; otherwise, false.
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// 
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// 
        private void InitializeComponent()
        {
            this.SuspendLayout();
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(292, 139);
            this.Name = "Form1";
            this.Text = "Form1";
            this.ResumeLayout(false);

        }

        #endregion
    }
}

Här återfinns metoden InitializeComponent() som sätter alla properties som du ställt in i design-läget. Även alla kopplingar till events kommer att synas här. Komponenterna som du lägger till i ditt program kommer också att skapas och ställas in här. Filen Form1.Designer.cs är en del av klassen Form1. Nyckelordet partial talar om att det är en delvis beskrivning av klassen Form1. På så vis kan definitioner av klasser delas upp i fler filer vilket inte är så vanligt i andra programmeringsspråk.

Nu har alltså MicroSoft valt att tydligt separera autogenererade inställningar. Det är viktigt att veta att man ganska lätt kan göra ändringar i Form1.cs som gör att du måste gå in i den autogenererade koden och rätta till vissa saker. Det gäller främst kopplingar till events (mer om detta senare). I .NET 1.1 så ser ett default Windows Application lite annorlunda ut i uppbyggnaden av filer även om innehållet är nära identiskt.

En knapp och en event

Standardknappar heter kort och gott Button och återfinns i Toolbox'en. Dra ut en knapp på Form1 [Design] och ställ in storleken genom att dra i någon hörna av knappen. Knappen kommer automatiskt att döpas till button1.

Se till att knappen är markerad och ställ in propertyn Text till "Tryck på mig!".

bild

I det visuella läget kan du även skapa och binda events automatiskt. Ofta gör man detta av misstag i början. För att skapa en del i ditt program som tar hand om vad-som-ska-göras-när-man-trycker-på-knappen så kan du dubbelklicka på på knappen i design-läget. Då händer tre saker:

  • Metoden button1_Click(..) skapas i filen Form1.cs.
  • Kopplingar till knappens event Click görs i filen Form1.Designer.cs.
  • Filen Form1.cs visas i kod-läge.

Om du navigerar till Properties (events), för button1 så kan du se att bindningen är gjord. Nästan alla event som finns i listan måste du dock skapa manuellt. Enklast är att markera den event du vill skapa, skriva namn på den metod som du vill ska skapas och trycka enter.

bild

I koden för button1_Click() ska vi lägga till ett kommando som avslutar Windowsprogrammet. Eftersom metoden button1_Click() skapas som en del av Form1 så kan vi härifrån använda oss av allt som Form1 innehåller, t.ex. andra komponenter eller metoder som hör till Form1. Eftersom vår klass Form1 är av typen Form så har vi tillgång till en hel del fördefinierade metoder. Den vi ska använda är Close(). Ändra koden i Form1.cs till följande:

Exempel: Form1.cs ändrad

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            Close();
        }
    }
}

Starta programmet och testa att trycka på knappen.

Avslutning

Detta var de absoluta grunderna i hur ett Windowsprogram är uppbyggt. Mycket handlar nu om att utforska vilka komponenter som ingår i Windows Forms 2.0 samt vad man kan göra med dem. Många komponenter fungerar på liknande sätt vilket underlättar. Det kan vara bra att utforska en del olika events också så att du är säker på när de inträffar.

I nästa del ska vi använda fler komponenter och fler events.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Scroll to top