Transparent Form i C#
Förord
Artikeln handlar om hur man kan använda bilder för att designa utseendet på en Form. Detta sker via transparency , det vill säga genomskinlighet. Hur man kan låta användare flytta formen utan att använda namnlisten/titlebar, så den inte är låst i ett läge, behandlas även i artikeln.Innehåll
»»
»
Steg 1 – Skapa Projekt
Vi börjar med att skapa ett nytt WindowsApplication-projekt för C#. Skapa sedan en form, om det inte gjordes automatiskt. För att sedan kunna få transparency på formen behöver vi ändra egenskapen FormBorderStyle till None. Se även till att StartPosition och WindowState är inställt på CenterScreen respektive Normal. Title till valfri ?
Steg 2 – Bakgrund
Det första vi behöver är en design över hur vår form ska se ut. Detta inledande designsteg kan lösas med olika tekniker, till exempel med hjälp av GDI+ eller liknande, men jag tycker det är enklast att helt enkelt skapa en (eller flera) bild(er) av typen bmp, gif, jpg, med mera, som också används som bakgrund för formen. I detta exempel ska vi använda oss av nedan stående bild, av gif-format med storleken 323x166px. 
Här vill vi uppnå en form med rundade hörn och bakgrunden är således klar. För att nu inte vita hörn ska ritas ut runt omkring bildens svarta ram, kan vi ställa in form-egenskapen TransparencyKey till valfri färg. Jag har valt att använda färgen Magenta på denna egenskap, mer känd som #FF00FF eller RGB (255,0255), som av tradition används för transparens inom programmering. Bilden har då förändrats till:
Då har vi en fullt fungerande transparant form och kan nu addera valfria kontroller. Här gäller det dock att se upp, om bakgrundsfärgen på kontrollen är den samma som TransparencyKey så kommer även den att bli transparant ?
Steg 3 – Gör formen flyttbar
Eftersom vi satt FormborderStyle till None har vi även tagit bort formens namnlist och således även den inbyggda funktionen för att flytta form med musen. Därför ska vi nu fixa detta manuellt. Det som behövs är tre händelser: när musknapp trycks ner, när musen flyttas och när musknapp släpps upp. Vi lägger till dessa för formen MouseDown, MouseMove och MouseUp, detta gör vi genom att öppna Events i Properties för formen och dubbelklicka för respektive event. Vi behöver en variable för om huruvida formen är i ”drag-läge” samt en variable för formens nuvarande koordinater.
private Boolean drag = false;
private Point currentPos = new Point();
// MouseDown
private void frmMain_MouseDown(object sender, MouseEventArgs e) {
drag = true;
currentPos = e.Location;
}
// MouseMove
private void frmMain_MouseMove(object sender, MouseEventArgs e) {
if (drag) {
Point newPos = this.PointToScreen(e.Location);
this.Location = new Point(newPos.X - currentPos.X, newPos.Y - currentPos.Y);
}
}
// MouseUp
private void frmMain_MouseUp(object sender, MouseEventArgs e) {
drag = false;
}
That’s it! Första steget är ner musknapp trycks ner då ställs drag till true och musens position sparas i currentPos. Sedan i funktionen MouseMove kontrolleras om drag är true, då räknas ut den nya positionen ut med hjälp av currentPos och musens nuvarande position. När slutligen musknappen släpps upp ställs drag till false.
Här ser vi en bild på formen där ett par kontroller har lagts till för att demonstrerar formen när den körs och som i övrigt, förutom transparanta effekten, beter sig som vilken ”vanlig” form som helst. Samma funktion som används för att göra flyttbar går givetvis att lägga till på vilken eller vilka kontroller man vill.
Det går även att specificera vilken knapp som ska styra dragningen, om man vill till exempel kunna flytta formen genom att högerklicka. Följande kod behöver ändras för MouseUp- och MouseDown-event.
private void frmMain_MouseUp(object sender, MouseEventArgs e) {
if (e.Button == MouseButtons.Left)
drag = false;
}
private void frmMain_MouseMove(object sender, MouseEventArgs e) {
if (drag) {
Point newPos = this.PointToScreen(e.Location);
this.Location = new Point(newPos.X - currentPos.X, newPos.Y - currentPos.Y);
}
}
Och där har vi det!
En ”egen-disgnad-flyttbar-form”, mycket nöje!
Ladda ner exempel projekt här
Johannes Strömberg
Om jag laddar ner ditt exempel och testar så blir det en fräsch magentaram runt allt även när jag kör det. Något är galet, antingen på min dator eller i projektet. Mycket intressant koncept dock. :)
Jari Ivanoff
Men som Johannes säger: Jag får en vacker magenta ram runt formuläret.... Iofs så satte min Visual Studio "Transparent Key" till Fuchsia men jag ändrade till Magenta utan resultat.