Overzicht: Een knop maken met behulp van Microsoft Expression Blend

In dit overzicht wordt u stapsgewijs begeleid bij het maken van een aangepaste WPF-knop met behulp van Microsoft Expression Blend.

Belangrijk

Microsoft Expression Blend werkt door Extensible Application Markup Language (XAML) te genereren die vervolgens wordt gecompileerd om het uitvoerbare programma te maken. Als u liever rechtstreeks met XAML werkt, is er een andere walkthrough beschikbaar die dezelfde toepassing maakt als deze, maar dan met behulp van XAML en Visual Studio in plaats van Blend. Zie Een knop maken met XAML- voor meer informatie.

In de volgende afbeelding ziet u de aangepaste knop die u gaat maken.

Een shape converteren naar een knop

In het eerste deel van deze handleiding ontwikkelt u het aangepaste uiterlijk van de aangepaste knop. Hiervoor converteert u eerst een rechthoek naar een knop. Vervolgens voegt u extra shapes toe aan de sjabloon van de knop, waardoor u een complexere knop maakt. Waarom start u niet met een gewone knop en past u deze aan? Omdat een knop ingebouwde functionaliteit heeft die u niet nodig hebt; voor aangepaste knoppen is het gemakkelijker om te beginnen met een rechthoek.

Een nieuw project maken in Expression Blend

1. Start het programma Expression Blend. (Klik op Start, wijs Alle programma'saan, wijs Microsoft Expressionaan en klik vervolgens op Microsoft Expression Blend.)

2. Maximaliseer de toepassing indien nodig.

3. Klik in het menu Bestand op Nieuw project.

4. Selecteer Standaardapplicatie (.exe).

5. Geef het project een naam CustomButton en druk op OK-.

Op dit moment hebt u een leeg WPF-project. U kunt op F5 drukken om de toepassing uit te voeren. Zoals u zou verwachten, bestaat de toepassing uit slechts een leeg venster. Vervolgens maakt u een afgeronde rechthoek en converteert u deze naar een knop.

Een rechthoek converteren naar een knop

1. de eigenschap Vensterachtergrond op zwart instellen: Selecteer het venster, klik op het tabblad Eigenschappen en stel de eigenschap Background in op Black.

   

2. Teken een rechthoek ongeveer de grootte van een knop in het venster: Selecteer het hulpmiddel rechthoek in het linkerhulpvenster en sleep de rechthoek naar het venster.

   

3. De hoeken van de rechthoek afronden: Sleep de besturingspunten van de rechthoek of stel de eigenschappen van de RadiusX en RadiusY rechtstreeks in. Stel de waarden van RadiusX en RadiusY in op 20.

   maken

4. De rechthoek wijzigen in een knop: Selecteer de rechthoek. Klik in het menu Extra op Knop maken.

   

5. Geef het bereik van de stijl/sjabloon op: een dialoogvenster zoals hieronder wordt weergegeven.

   

   Voor resourcenaam (sleutel), selecteer Toepassen op alle. Hierdoor wordt de resulterende stijl- en knopsjabloon toegepast op alle objecten die knoppen zijn. Selecteer Applicationvoor Definiëren in. Hierdoor hebben de resulterende stijl- en knopsjabloon een bereik voor de hele toepassing. Wanneer u de waarden in deze twee vakken instelt, worden de knopstijl en -sjabloon toegepast op alle knoppen in de hele toepassing en elke knop die u in de toepassing maakt, wordt deze sjabloon standaard gebruikt.

De knopsjabloon bewerken

U hebt nu een rechthoek die is gewijzigd in een knop. In deze sectie wijzigt u de sjabloon van de knop en past u verder aan hoe deze eruitziet.

De knopsjabloon bewerken om het uiterlijk van de knop te wijzigen

1. Ga naar de sjabloonweergave bewerken: Als u het uiterlijk van de knop verder wilt aanpassen, moeten we de knopsjabloon bewerken. Deze sjabloon is gemaakt toen we de rechthoek hebben geconverteerd naar een knop. Als u de knopsjabloon wilt bewerken, klikt u met de rechtermuisknop op de knop en selecteert u Besturingselementonderdelen bewerken (sjabloon) en Sjabloon bewerken.

   

   In de sjablooneditor ziet u dat de knop nu is gescheiden in een Rectangle en de ContentPresenter. De ContentPresenter wordt gebruikt om inhoud in de knop weer te geven (bijvoorbeeld de string "Knop"). Zowel de rechthoek als de ContentPresenter zijn gepositioneerd binnen een Grid.

   

2. Wijzig de namen van de sjabloononderdelen: klik met de rechtermuisknop op de rechthoek in de sjablooninventaris, wijzig de naam van de Rectangle van [Rechthoek]' in 'outerRectangle' en wijzig '[ContentPresenter]' in 'myContentPresenter'.

   

3. de rechthoek zodanig wijzigen dat deze leeg is (zoals een donut): Selecteer outerRectangle- en stel Fill in op Transparant en StrokeThickness op 5.

   

   Stel vervolgens de Stroke in op de kleur die overeenkomt met de sjabloon die zal worden gebruikt. Klik hiervoor op het kleine witte vak naast Stroke, selecteer CustomExpressionen typ {TemplateBinding Background} in het dialoogvenster.

   

4. Maak een binnenste rechthoek: Maak nu een andere rechthoek (geef deze de naam innerRectangle) en plaats deze symmetrisch aan de binnenkant van outerRectangle-. Voor dit soort werk wilt u waarschijnlijk inzoomen om de knop groter te maken in het bewerkingsgebied.

   Notitie

   De rechthoek kan er anders uitzien dan de rechthoek in de afbeelding (bijvoorbeeld afgeronde hoeken).

   

5. ContentPresenter naar boven verplaatsen: Op dit moment is het mogelijk dat de tekst Knop niet meer zichtbaar is. Als dit zo is, komt dit doordat innerRectangle boven op de myContentPresenterstaat. U kunt dit oplossen door myContentPresenter onder innerRectangle-te slepen. Rechthoeken en myContentPresenter zo positioneren dat ze eruitzien als hieronder.

   Notitie

   U kunt ook myContentPresenter bovenaan plaatsen door er met de rechtermuisknop op te klikken en op verzendente drukken.

   

6. Wijzig het uiterlijk van innerRectangle: Stel de RadiusX, RadiusYen StrokeThickness waarden in op 20. Stel bovendien de Fill in op de achtergrond van de sjabloon met behulp van de aangepaste expressie {TemplateBinding Background}) en stel Stroke in op 'transparant'. U ziet dat de instellingen voor de Fill en Stroke van innerRectangle- het tegenovergestelde zijn van die voor outerRectangle-.

   

7. Een glaslaag aan de bovenkant toevoegen: Het laatste stuk van het aanpassen van het uiterlijk van de knop is het toevoegen van een glaslaag bovenaan. Deze glaslaag bestaat uit een derde rechthoek. Omdat het glas de hele knop bedekt, is de glazen rechthoek vergelijkbaar met de afmetingen van de outerRectangle. Maak daarom de rechthoek door simpelweg een kopie te maken van de outerRectangle-. Markeer outerRectangle- en gebruik Ctrl+C en Ctrl+V om een kopie te maken. Noem deze nieuwe rechthoek "glassCube".

8. GlasKubus verplaatsen indien nodig: Als glasCube nog niet is geplaatst zodat deze de hele knop bedekt, sleept u deze naar positie.

9. Geef de glaskubus een iets andere vorm dan de buitenrechthoek: Wijzig de eigenschappen van glaskubus. Begin met het wijzigen van de eigenschappen RadiusX en RadiusY in 10 en de StrokeThickness in 2.

   

10. Glaskubus eruit laten zien als glas: Stel de Fill in op een glasachtig uiterlijk met behulp van een lineaire kleurovergang die 75% ondoorzichtig is en wisselt tussen de kleur Wit en Transparant over ongeveer 6 gelijkmatig verdeelde intervallen. Dit is waarvoor u de kleurovergangsstops moet instellen:

    • Kleurovergangsstop 1: Wit met alfa-waarde van 75%

    • Kleurovergangsstop 2: transparant

    • Kleurovergangsstop 3: Wit met alfawaarde van 75%

    • Kleurovergangsstop 4: Transparant

    • Kleurovergangsstop 5: Wit met alfawaarde van 75%

    • Kleurovergangsstop 6: Transparant

    Hierdoor ontstaat er een 'golvend' glas.

    

11. De glaslaag verbergen: Nu u ziet hoe de glaslaag eruitziet, gaat u naar het deelvenster Vormgeving van het deelvenster Eigenschappen en stelt u de dekking in op 0% om deze te verbergen. In de volgende secties gebruiken we eigenschapstriggers en gebeurtenissen om de glaslaag weer te geven en te bewerken.

    

Het gedrag van de knop aanpassen

Op dit moment hebt u de presentatie van de knop aangepast door de sjabloon te bewerken, maar de knop reageert niet op gebruikersacties zoals gewone knoppen doen (bijvoorbeeld het wijzigen van de weergave bij de muisaanwijzer, het ontvangen van de focus en klikken.) De volgende twee procedures laten zien hoe u gedrag zoals deze kunt bouwen in de aangepaste knop. We beginnen met eenvoudige eigenschaptriggers en voegen vervolgens gebeurtenistriggers en animaties toe.

Eigenschap-triggers instellen

1. Een nieuwe eigenschapstrigger maken: Met glassCube geselecteerd, klikt u op + Eigenschap in het deelvenster Triggers (zie de afbeelding die volgt op de volgende stap). Hiermee maakt u een eigenschapstrigger met een standaardeigenschapstrigger.

2. Maak van IsMouseOver de eigenschap die door de trigger wordt gebruikt: Wijzig de eigenschap in IsMouseOver. Hierdoor wordt de eigenschap-trigger geactiveerd wanneer de eigenschap IsMouseOvertrue is (wanneer de gebruiker met de muis naar de knop wijst).

   

3. IsMouseOver activeert ondoorzichtigheid van 100% voor glassCube: U ziet dat de Trigger-opname op staat (zie de voorgaande afbeelding). Dit betekent dat wijzigingen die u aanbrengt in de eigenschapswaarden van glassCube terwijl de opname is ingeschakeld, een actie worden die plaatsvindt wanneer IsMouseOver is true. Wijzig tijdens het opnemen de Opacity van glassCube in 100%.

   

   U hebt nu uw eerste eigenschapstrigger gemaakt. U ziet dat in het deelvenster Triggers van de editor de Opacity is gewijzigd in 100%.

   

   Druk op F5 om de toepassing uit te voeren en beweeg de muis aanwijzer over en uit de knop. U ziet dat de glazen laag wordt weergegeven wanneer u met de muis over de knop beweegt en verdwijnt wanneer de aanwijzer vertrekt.

4. IsMouseOver activeert wijziging van de streepwaarde: Laten we enkele andere acties koppelen aan de IsMouseOver-trigger. Terwijl de opname doorgaat, schakelt u uw selectie over van glassCube naar outerRectangle. Stel vervolgens de Stroke van outerRectangle in op de aangepaste expressie "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Hiermee stelt u de Stroke in op de typische markeringskleur die wordt gebruikt door knoppen. Druk op F5 om het effect te zien wanneer u met de muis over de knop beweegt.

   

5. IsMouseOver activeert wazige tekst: We gaan nog een actie aan de IsMouseOver eigenschapstrigger koppelen. Maak de inhoud van de knop een beetje wazig wanneer het glas erboven verschijnt. Hiervoor kunnen we een vervaging BitmapEffect toepassen op de ContentPresenter (myContentPresenter).

   

   Notitie

   Als u het deelvenster Eigenschappen wilt terugzetten terug naar wat het was voordat u BitmapEffecthebt gezocht, wist u de tekst uit het zoekvak.

   Op dit moment hebben we een eigenschapstrigger gebruikt met verschillende gekoppelde acties om markeringsgedrag te maken voor wanneer de muisaanwijzer binnenkomt en het knopgebied verlaat. Een ander typisch gedrag voor een knop is om te markeren wanneer deze focus heeft (net als nadat erop is geklikt). We kunnen dergelijk gedrag toevoegen door een andere eigenschapstrigger toe te voegen voor de eigenschap IsFocused.

6. Eigenschapstrigger maken voor IsFocused: Met dezelfde procedure als voor IsMouseOver (zie de eerste stap van deze sectie), maakt u een andere eigenschapstrigger voor de eigenschap IsFocused. Terwijl Trigger-opname opstaat, voeg de volgende acties toe aan de trigger:

   • glassCube heeft een Opacity van 100%.

   • outerRectangle- krijgt een Stroke aangepaste expressiewaarde van "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Tot slot zullen we als laatste stap in deze handleiding animaties toevoegen aan de knop. Deze animaties worden geactiveerd door gebeurtenissen, met name de MouseEnter en Click gebeurtenissen.

Gebeurtenistriggers en animaties gebruiken om interactiviteit toe te voegen

1. Een MouseEnter-gebeurtenistrigger maken: Een nieuwe gebeurtenistrigger toevoegen en MouseEnter selecteren als de gebeurtenis die in de trigger moet worden gebruikt.

   

2. Een animatietijdlijn maken: Volgende koppelt u een animatietijdlijn aan de MouseEnter gebeurtenis.

   

   Nadat u op OK hebt ingedrukt om een nieuwe tijdlijn te maken, wordt er een tijdlijnvenster weergegeven en is 'Tijdlijnopname is ingeschakeld' zichtbaar in het ontwerpvenster. Dit betekent dat we wijzigingen in eigenschappen kunnen opnemen in de tijdlijn (eigenschappenwijzigingen animeren).

   Notitie

   Mogelijk moet u het formaat van het venster en/of de panelen aanpassen om het scherm te kunnen zien.

   

3. Een sleutelframe maken: Als u een animatie wilt maken, selecteert u het object dat u wilt animeren, maakt u twee of meer sleutelframes op de tijdlijn en stelt u voor deze sleutelframes de eigenschapswaarden in waartussen de animatie moet worden geïnterpoleerd. In de volgende afbeelding wordt u begeleid bij het maken van een sleutelframe.

   

4. GlassCube op dit sleutelframe verkleinen: Met het tweede sleutelframe geselecteerd, verkleint u de grootte van de glassCube tot 90% van de volledige grootte met behulp van de Groottetransformatie.

   

   Druk op F5 om de toepassing uit te voeren. Beweeg de muis aanwijzer over de knop. U ziet dat de glaslaag op de knop afneemt.

5. Een andere gebeurtenistrigger maken en er een andere animatie aan koppelen: We gaan nog een animatie toevoegen. Gebruik een vergelijkbare procedure als die u hebt gebruikt om de vorige animatie voor gebeurtenistriggers te maken:

   1. Maak een nieuwe gebeurtenistrigger met behulp van de Click-gebeurtenis.

   2. Koppel een nieuwe tijdlijn aan de Click gebeurtenis.

      

   3. Maak voor deze tijdlijn twee sleutelframes, één bij 0,0 seconden en de tweede bij 0,3 seconden.

   4. Met het sleutelframe op 0,3 seconden gemarkeerd, stelt u de rotatiehoek in op 360 graden.

      

   5. Druk op F5 om de toepassing uit te voeren. Klik op de knop. U ziet dat de glaslaag rondloopt.

Conclusie

U hebt een aangepaste knop voltooid. U hebt dit gedaan met behulp van een knopsjabloon die is toegepast op alle knoppen in de toepassing. Als u de bewerkingsmodus voor sjablonen verlaat (zie de volgende afbeelding) en meer knoppen maakt, ziet u dat deze eruitzien en zich gedragen als uw aangepaste knop in plaats van de standaardknop.

Druk op F5 om de toepassing uit te voeren. Klik op de knoppen en kijk hoe ze zich allemaal hetzelfde gedragen.

Houd er rekening mee dat u tijdens het aanpassen van de sjabloon de eigenschap Fill van innerRectangle- en de eigenschap StrokeouterRectangle- instelt op de sjabloonachtergrond ({TemplateBinding Background}). Als u daarom de achtergrondkleur van de afzonderlijke knoppen instelt, wordt de achtergrond die u instelt, gebruikt voor deze respectieve eigenschappen. Probeer nu de achtergronden te wijzigen. In de volgende afbeelding worden verschillende kleurovergangen gebruikt. Hoewel een sjabloon handig is voor het aanpassen van besturingselementen zoals knoppen, kunnen besturingselementen met sjablonen nog steeds worden aangepast om er anders uit te zien.

Tot slot hebt u tijdens het aanpassen van een knopsjabloon geleerd hoe u het volgende kunt doen in Microsoft Expression Blend:

• Pas het uiterlijk van een besturingselement aan.

• Eigenschappentriggers instellen. Eigenschaptriggers zijn erg nuttig omdat ze kunnen worden gebruikt voor de meeste objecten, niet alleen besturingselementen.

• Triggers voor gebeurtenissen instellen. Gebeurtenistriggers zijn erg nuttig omdat ze kunnen worden gebruikt voor de meeste objecten, niet alleen besturingselementen.

• Animaties maken.

• Diversen: kleurovergangen maken, BitmapEffects toevoegen, transformaties gebruiken en basiseigenschappen van objecten instellen.

Zie ook

• een knop maken met behulp van XAML-
• Stijlen en Sjablonen
• Overzicht van animatie
• Schilderen met effen kleuren en kleurovergangen overzicht
• Overzicht van bitmapeffecten