moe van de gebruikelijke look van uw knoppen in WPF? Wil je een glanzend ogende knop met glazen glans en gloedeffect zodra je de muiscursor over de knop beweegt?

Het zijn slechts zes eenvoudige stappen verwijderd …

Volg de onderstaande tutorial en geef een frisse blik op uw apps.

Gebruikte tools:

Visual Studio 2008

Expression Blend

1. Maak een nieuwe WPF -applicatie

2. Maak een canvas

Voeg de rechthoek toe van de werkbalk aan de linkerkant:

Sleep de hoeken van de rechthoek naar de juiste afmetingen die de grootte is die u wilt voor de knop.

Klik op de rechthoek.

Selecteer het tabblad ‘Eigenschappen’ rechts.

Selecteer ‘Fill’ -> ‘Geen penseel’.

Selecteer ‘Stroke’-> ’Geen borstel’

Verander in de verschijningssectie de eigenschappen RADIUSX en RADIUSY in 4 (om de hoeken af ​​te ronden).

Maak de slagdikte 0 (slag is grens).

Klik met de rechtermuisknop op de rechthoek die u hebt gemaakt.

Kopieer het.

Plak het twee keer.

Je layoutroot zou er op dezelfde manier uit moeten lijken:

Selecteer de rechthoek zoals getoond:

Klik er met de rechtermuisknop op.

Selecteer ‘Groep in’-> ’canvas’

3. Maak de basecoat

Hernoem het canvas als ‘knop’ op het tabblad Eigenschappen.

Selecteer in de sectie Layout Sectie de ‘Hand’ in de opties voor ‘Cursor’

Klik op de eerste rechthoek vanaf de bovenkant in de layoutroot:

Selecteer ‘Vul’ -> ‘Solid Color Brush’

Selecteer de kleur zwart in de editor.

Hernoem de rechthoek op het tabblad Eigenschappen als ‘basecoat’:

4. Maak de gloed

Selecteer de tweede rechthoek uit de layoutroot zoals voorheen

Noem het ‘gloeien’ op het tabblad Eigenschappen

Selecteer ‘Fill’-> ‘Gradient Brush’-> ‘Radial Gradient’

Klik op ‘Borsteltransformatie’ in de toolbox links:

De borsteltransformatie zal worden gebruikt om de positionering van de gradiënt aan te passen.

Sleep de onderkant van de rechthoek een beetje om de gradiënt verticaal te vergroten:

Verplaats je cursor rond het midden van de rechthoek totdat je de vierkoppige cursor ziet.

Sleep het hoogtepunt een beetje naar beneden:

Selecteer ‘Vul’-> ’gradiëntborstel’-> ’Lineaire gradiënt’

Klik op de eerste gradiëntstop en selecteer de gewenste kleur voor het gloeiende effect.

Selecteer de tweede gradiëntstop.

Verminder de A -waarde tot 0 om transparantie te bereiken.

Maak de dekking 0% voor nu in het uiterlijk gedeelte:

5. Maak het glaseffect

Selecteer de derde rechthoek.

Noem het ‘glas’.

Selecteer ‘Vul’-> ’gradiëntborstel’-> ’Lineaire gradiënt’

Selecteer de ‘Borsteltransformatie’

Selecteer de achterkant van de pijl en draai deze om de gradiënt dienovereenkomstig te wijzigen:

Verplaats je cursor rond in het bovenste middelste deel van de rechthoek totdat je de cursor als een hand ziet:

Sleep de cursor naar de rechthoek (alsof je iets in een doos van bovenaf duwt) totdat je zoiets ziet:

Selecteer de eerste gradiëntstop.

Stel A in op 0

Klik twee keer op de gradiëntbalk op ongeveer 60% om twee gradiëntstops te krijgen.

Krijg de ene gradiënt stop een paar percentages lager dan de andere.

U kunt het glazige effect in uw raam zien:

Wijzig de dekking in 80%.

6. Code een beetje

Bewaar uw project in Blend en sluit het.

Open uw project met Visual Studio.

Dubbelklik op ‘Canvas’ in de XAML -code van het venster:

Raak niet in de war met de roze kleur. Ik heb net de achtergrondkleur gewijzigd om te testen.

Selecteer de optie ‘Evenement’ in het venster Eigenschappen.

Dubbelklik op de kolom rechts van de muis.

Dubbelklik op de kolom rechts van muisverlof.

Het dubbele klikken veroorzaakte de XAML -code van het venster en de methode headers werden automatisch gegenereerd voor de gebeurtenissen.

Voer de volgende code in om de gloed alleen te laten verschijnen wanneer de muis over de knop staat:

privé void button_mouseenter (objectafzender, mouseEventargs e)
{
Glow.Opacity = 100;
}

privé void button_mouseSeave (objectafzender, mouseEventargs e)
{
Glow.Opacity = 0;
}

En je bent klaar

Uw vragen zijn altijd welkom!