obosit de aspectul obișnuit al butoanelor dvs. din WPF? Doriți un buton cu aspect lucios, cu un efect de strălucire și strălucire de sticlă imediat ce mutați cursorul mouse-ului peste buton?
Este la doar șase pași simpli …
Urmați tutorialul de mai jos și dați un aspect nou aplicațiilor dvs.
Instrumente utilizate:
Visual Studio 2008
Amestec de expresie
1. Creați o nouă aplicație WPF
2. Creați o pânză
Adăugați dreptunghiul din bara de instrumente din stânga:
Trageți colțurile dreptunghiului la dimensiunile corespunzătoare care este dimensiunea pe care o doriți pentru buton.
Faceți clic pe dreptunghi.
Selectați fila „Proprietăți” din dreapta.
Selectați „Completați” -> „Fără perie”.
Selectați „Stroke”-> „Fără perie”
În secțiunea Aspect, schimbați proprietățile RADIUSX și RADIUSY la 4 (pentru a face colțurile rotunjite).
Faceți grosimea cursei 0 0 (cursa este graniță).
Faceți clic dreapta pe dreptunghiul pe care l -ați creat.
Copiați -l.
Lipiți -l de două ori.
Layoutroot ar trebui să arate similar cu acesta:
Selectați dreptunghiul așa cum este arătat:
Faceți clic dreapta pe el.
Selectați „Grupul în”-> „Canvas”
3. Creați basecoat
Redenumiți pânza ca „buton” în fila Proprietăți.
În secțiunea de aspect, selectați „Mâna” în opțiunile pentru „cursor”
Faceți clic pe primul dreptunghi din partea de sus în layoutroot:
Selectați „Completați” -> „Peria de culoare solidă”
Selectați culoarea neagră din editor.
Redenumiți dreptunghiul din fila Proprietăți ca „Basecoat”:
4. Creați strălucirea
Selectați al doilea dreptunghi din layoutroot ca înainte
Numiți -l „strălucire” în fila Proprietăți
Selectați „Completați”-> „Peria de gradient”-> „Gradient radial”
Faceți clic pe „Transformarea periei” din cutia de instrumente din stânga:
Transformarea periei va fi utilizată pentru a regla poziționarea gradientului.
Trageți puțin din partea inferioară a dreptunghiului pentru a mări gradientul pe verticală:
Mutați -vă cursorul în mijlocul dreptunghiului până când vedeți cele patru cursuri cu capul.
Trageți puțin punctul culminant în jos:
Selectați „Completați”-> „Peria de gradient”-> „Gradient liniar”
Faceți clic pe prima oprire a gradientului și selectați culoarea dorită pentru efectul strălucitor.
Selectați a doua oprire a gradientului.
Reduceți valoarea la 0 pentru a obține transparență.
Faceți opacitatea 0% pentru moment în secțiunea de apariție:
5. Creați efectul de sticlă
Selectați al treilea dreptunghi.
Numiți -l „sticlă”.
Selectați „Completați”-> „Peria de gradient”-> „Gradient liniar”
Selectați „Transformarea periei”
Selectați partea din spate a săgeții și rotiți -o pentru a modifica gradientul în consecință:
Mutați -vă cursorul în jurul părții din mijlocul de sus a dreptunghiului până când vedeți cursorul ca o mână:
Trageți cursorul în dreptunghi (ca și cum ar fi împins ceva într -o cutie din partea de sus) până când vedeți ceva de genul acesta:
Selectați prima oprire a gradientului.
Setați A la 0
Faceți clic de două ori pe bara de gradient la aproximativ 60% pentru a obține două opriri de gradient.
Obțineți un gradient STOP cu câteva procente mai mic decât celălalt.
Puteți vedea efectul sticlos în fereastra dvs .:
Modificați opacitatea la 80%.
6. Cod puțin
Salvați -vă proiectul în amestec și închideți -l.
Deschideți -vă proiectul cu Visual Studio.
Faceți dublu clic pe „Canvas” în codul XAML al ferestrei:
Nu vă confundați cu culoarea roz. Tocmai am schimbat culoarea de fundal pentru testare.
Selectați opțiunea „Eveniment” în fereastra Proprietăți.
Faceți dublu clic pe coloana din dreapta mouse -ului.
Faceți dublu clic pe coloana din dreapta concediului de mouse.
Clicul dublu a determinat codul XAML al ferestrei și anteturile metodei să fie generate automat pentru evenimente.
Introduceți următorul cod pentru a face ca strălucirea să apară numai atunci când mouse -ul este peste buton:
privat void buton_mouseenter (expeditor obiect, mouseEventArgs e)
{
GLOW.OPACITY = 100;
}
Private void Button_MouseAve (expeditor de obiect, mouseEventArgs e)
{
GLOW.OPACITY = 0;
}
Și ai terminat
Întrebările dvs. sunt întotdeauna binevenite!