Trött på det vanliga utseendet på dina knappar i WPF? Vill du ha en glansig knapp med glasskina och glödeffekt så snart du flyttar musmarkören över knappen?
Det är bara sex enkla steg bort …
Följ tutorialen nedan och ge en ny look till dina appar.
Verktyg som används:
Visual Studio 2008
Uttrycksblandning
1. Skapa en ny WPF -applikation
2. Skapa en duk
Lägg till rektangeln från verktygsfältet till vänster:
Dra hörnen på rektangeln till lämpliga dimensioner som är den storlek du vill ha för knappen.
Klicka på rektangeln.
Välj fliken “Egenskaper” till höger.
Välj ‘Fyll’ -> ‘ingen borste’.
Välj ‘Stroke’-> ‘No Brush’
I avsnittet Utseende ändrar du Radiusx och Radiusy -egenskaperna till 4 (för att göra hörnen rundade).
Gör slagtjockleken 0 (stroke är gräns).
Högerklicka på den rektangel du har skapat.
Kopiera det.
Klistra in den två gånger.
Din layoutroot ska se ut som detta:
Välj rektangeln som visas:
Högerklicka på den.
Välj ‘Grupp till’-> ‘Canvas’
3. Skapa basäcken
Byt namn på duken som “knapp” på fliken Egenskaper.
I avsnittet Layoutavsnitt väljer du ‘handen’ i alternativen för ‘markör’
Klicka på den första rektangeln uppifrån i layoutroot:
Välj ‘Fill’ -> ‘Solid Color Brush’
Välj färg svart i redaktören.
Byt namn på rektangeln på fliken Egenskaper som ‘Basecoat’:
4. Skapa glödet
Välj den andra rektangeln från layoutroot som tidigare
Namnge det “glöd” på fliken Egenskaper
Välj ‘Fill’-> ‘Gradient Brush’-> ‘Radial Gradient’
Klicka på “Brush Transform” i verktygslådan till vänster:
Borsttransformen kommer att användas för att justera placeringen av lutningen.
Dra rektangelns botten lite för att förstora gradienten vertikalt:
Flytta markören runt mitt i rektangeln tills du ser den fyra ledda markören.
Dra höjdpunkten lite:
Välj ‘Fill’-> ‘Gradient Brush’-> ‘Linear Gradient’
Klicka på det första gradientstoppet och välj den färg du vill ha för den glödande effekten.
Välj det andra gradientstoppet.
Minska A -värdet till 0 för att uppnå transparens.
Gör opaciteten 0% för nu i avsnittet Utseende:
5. Skapa glaseffekten
Välj den tredje rektangeln.
Namnge det “glas”.
Välj ‘Fill’-> ‘Gradient Brush’-> ‘Linear Gradient’
Välj ‘Brush Transform’
Välj pilens baksida och rotera den för att ändra lutningen i enlighet därmed:
Flytta markören runt på den övre mellersta delen av rektangeln tills du ser markören som en hand:
Dra in markören till rektangeln (som om du trycker på något i en låda uppifrån) tills du ser något liknande:
Välj det första gradientstoppet.
Ställ in en till 0
Klicka på två gånger på gradientstången till cirka 60% för att få två gradientstopp.
Få en lutningstopp några procentsatser lägre än den andra.
Du kan se den glasartade effekten i ditt fönster:
Ändra opaciteten till 80%.
6. Kod lite
Spara ditt projekt i blandning och stäng det.
Öppna ditt projekt med Visual Studio.
Dubbelklicka på “Canvas” i fönsterkoden i fönstret:
Bli inte förvirrad med den rosa färgen. Jag har precis ändrat bakgrundsfärgen för testning.
Välj alternativet ‘Händelse’ i fönstret Egenskaper.
Dubbelklicka på kolumnen till höger om musen ENTER.
Dubbelklicka på kolumnen till höger om musens ledighet.
Dubbelklickningen fick XAML -koden i fönstret och metodrubrikerna att genereras automatiskt för händelserna.
Ange följande kod för att få glödet att visas endast när musen är över knappen:
Privat void Button_MouseEnter (Object Sender, MouseEventArgs E)
{
GLOW.OPACITY = 100;
}
Privat void -knapp_mouseleave (objekt avsändare, MouseEventArgs E)
{
GLOW.OPACITY = 0;
}
Och du är klar
Dina frågor är alltid välkomna!