Útmutató: Gomb létrehozása a Microsoft Expression Blend használatával

Ez az útmutató végigvezeti a WPF testre szabott gomb Microsoft Expression Blend használatával történő létrehozásának folyamatán.

Fontos

A Microsoft Expression Blend az Extensible Application Markup Language (XAML) generálásával dolgozik, amelyet aztán lefordítanak, és ez hozza létre a végrehajtható programot. Ha inkább közvetlenül az XAML-vel dolgozna, van egy másik útmutató, amely ugyanazt az alkalmazást hozza létre, mint ez az XAML és a Visual Studio használatával a Blend helyett. További információt a Gomb létrehozása XAML használatával című témakörben talál.

Az alábbi ábrán a létrehozott testreszabott gomb látható.

Alakzat átalakítása gombtá

Az útmutató első részében az egyéni gomb egyéni megjelenését hozza létre. Ehhez először átalakít egy téglalapot egy gombra. Ezután további alakzatokat vehet fel a gomb sablonjára, így összetettebb megjelenésű gombot hozhat létre. Miért nem egy normál gombbal kezdi, és szabja testre? Mivel egy gomb beépített funkciókkal rendelkezik, amelyekre nincs szüksége; az egyéni gombok esetében egyszerűbb téglalappal kezdeni.

Új projekt létrehozása a Expression Blendben

1. A kifejezéskeverés indítása. (Kattintson a Start gombra, mutasson a Minden program elemre, mutasson a Microsoft Expressionre, majd kattintson a Microsoft Expression Blend elemre.)

2. Szükség esetén maximalizálja az alkalmazást.

3. A Fájl menüben kattintson az Új projekt gombra.

4. Válassza a Standard alkalmazás (.exe) lehetőséget.

5. Nevezze el a projektet CustomButton , és nyomja le az OK billentyűt.

Ezen a ponton van egy üres WPF-projektje. Az alkalmazás futtatásához nyomja le az F5 billentyűt. Ahogy várható volt, az alkalmazás csak egy üres ablakból áll. Ezután létrehoz egy lekerekített téglalapot, és átalakítja gombtá.

Téglalap átalakítása gombtá

1. Az Ablakháttér tulajdonság beállítása fekete színre: Jelölje ki az ablakot, kattintson a Tulajdonságok fülre, és állítsa be a tulajdonságot a Background következőre Black:

   

2. Rajzoljon egy téglalapot körülbelül akkora méretűre, mint egy gomb az ablakban: Jelölje ki a téglalap eszközt a bal oldali eszközpanelen, és húzza a téglalapot az Ablakra.

   

3. A téglalap sarkainak kerekítése: Húzza a téglalap vezérlőpontjaira, vagy állítsa be közvetlenül a RadiusX tulajdonságokat.RadiusY Állítsa be a 20-ra és RadiusX a RadiusY 20-ra vonatkozó értékeket.

   

4. Módosítsa a téglalapot egy gombra: Jelölje ki a téglalapot. Az Eszközök menüben kattintson a Make gombra.

   

5. Adja meg a stílus/sablon hatókörét: Megjelenik az alábbihoz hasonló párbeszédpanel.

   

   Az Erőforrás neve (Kulcs) beállításnál válassza az Alkalmaz az összesre lehetőséget. Így az eredményként kapott stílus és gombsablon minden olyan objektumra érvényes lesz, amely gomb. A Definiálás mezőben válassza az Alkalmazás lehetőséget. Így az eredményként kapott stílus és gombsablon hatóköre a teljes alkalmazásra kiterjed. A két mező értékeinek megadásakor a gombstílus és a sablon a teljes alkalmazás összes gombjára érvényes, és az alkalmazásban létrehozott bármely gomb alapértelmezés szerint ezt a sablont fogja használni.

A gombsablon szerkesztése

Most már van egy téglalapja, amelyet gombbá alakítottak át. Ebben a szakaszban módosíthatja a gomb sablonját, és tovább testre szabhatja annak megjelenését.

A gombsablon szerkesztése a gomb megjelenésének módosításához

1. Lépjen a sablon szerkesztési nézetébe: A gomb megjelenésének további testreszabásához szerkeszteni kell a gombsablont. Ez a sablon akkor jött létre, amikor a téglalapot gombmá alakítottuk. A gombsablon szerkesztéséhez kattintson a jobb gombbal a gombra, és válassza a Vezérlőrészek szerkesztése (Sablon) lehetőséget, majd a Sablon szerkesztése parancsot.

   

   A sablonszerkesztőben figyelje meg, hogy a gomb mostantól elkülönült, egy Rectangle-ból és egy ContentPresenter-ből áll. A ContentPresenter gombon belüli tartalom (például a "Gomb" sztring) bemutatására szolgál. Mind a téglalap és ContentPresenter egy Grid belsejében van elhelyezve.

   

2. A sablonösszetevők nevének módosítása: Kattintson a jobb gombbal a téglalapra a sablonleltárban, módosítsa a Rectangle nevet "[Téglalap]" értékről "outerRectangle" értékre, és módosítsa a "[ContentPresenter]" értéket "myContentPresenter" értékre.

   

3. Módosítsa a téglalapot úgy, hogy belül üres legyen (például fánk): Válassza az outerRectangle lehetőséget, és állítsa Fill be az "Átlátszó" és StrokeThickness az 5 értéket.

   

   Ezután állítsa be a Stroke színét a sablon színére. Ehhez kattintson a Stroke melletti kis fehér mezőre, válassza a CustomExpression lehetőséget, és írja be a "{TemplateBinding Background}" szöveget a párbeszédpanelen.

   

4. Belső téglalap létrehozása: Most hozzon létre egy másik téglalapot (nevezze el "innerRectangle"-nek), és helyezze szimmetrikusan a outerRectangle belsejébe . Ilyen típusú munkához valószínűleg nagyítania kell a gombot, hogy nagyobb legyen a szerkesztési területen.

   Megjegyzés:

   A téglalap eltérhet az ábrán láthatótól (például lekerekített sarkokkal).

   

5. A ContentPresenter áthelyezése felülre: Ezen a ponton lehetséges, hogy a "Gomb" szöveg többé nem lesz látható. Ha ez így van, ennek az az oka, hogy az innerRectangle a myContentPresenter tetején van. A probléma megoldásához húzza a myContentPresentert az innerRectangle alá. Helyezze át a téglalapokat és a myContentPresentert az alábbihoz hasonló módon.

   Megjegyzés:

   Másik lehetőségként a myContentPresentert is felülre helyezheti, ha a jobb gombbal kattint rá, és lenyomja a Küldés továbbítása gombot.

   

6. Az innerRectangle megjelenésének módosítása: Állítsa be a RadiusX, RadiusYés StrokeThickness az értékeket 20 értékre. Emellett állítsa be a Fill sablon hátterét a "{TemplateBinding Background}" egyéni kifejezéssel, és állítsa a "transzparens" értékre Stroke . Figyelje meg, hogy az Fill és Stroke beállításai az innerRectangle-nél ellentétesek a outerRectangle beállításaival.

   

7. Adjon hozzá egy üvegréteget a tetejére: A gomb megjelenésének testreszabásának utolsó darabja egy üvegréteg hozzáadása felül. Ez az üvegréteg egy harmadik téglalapból áll. Mivel az üveg lefedi a teljes gombot, az üveg téglalapja hasonló a külsőRectangle méretéhez. Ezért hozza létre a téglalapot úgy, hogy egyszerűen másolatot készít a outerRectangle-ről. Jelölje ki az outerRectangle elemet , és a CTRL+C és a CTRL+V billentyűkombinációval készítsen másolatot. Nevezze el ezt az új téglalapot "glassCube"- nak.

8. Szükség esetén helyezze át a glassCube-t: Ha a glassCube még nincs elhelyezve, hogy az lefedje a teljes gombot, húzza a kívánt helyre.

9. Az outerRectangle-től kissé eltérő formát adjon a glassCube-nak: Módosítsa a glassCube tulajdonságait. Először módosítsa a RadiusX tulajdonságokat RadiusY 10-re, a StrokeThickness tulajdonságokat pedig 2-re.

   

10. A glassCube úgy nézzen ki, mint az üveg: Állítsa be az Fill üveges megjelenést egy 75% átlátszatlan lineáris színátmenettel, és váltogatja a Fehér és az Átlátszó színt 6 körülbelül egyenletes távolságra. Ez az, amire a színátmeneti leállásokat be kell állítani:

    • 1. színátmeneti pont: Fehér, alfa értéke 75 (%)

    • 2. színátmeneti pont: átlátszó

    • 3. színátmeneti leállítás: Fehér, alfa értéke 75%

    • Gradient Stop 4: átlátszó

    • 5. színátmenet-megállás: Fehér, alfa értéke 75%

    • 6. színátmenet zárójel: átlátszó

    Ez egy "hullámos" üveg megjelenést hoz létre.

    

11. Az üvegréteg elrejtése: Most, hogy láthatja, hogyan néz ki az üveges réteg, lépjen a Tulajdonságok panelMegjelenés paneljére, és állítsa az Átlátszatlanságot 0% értékre, hogy elrejtse. Az előttünk álló szakaszokban tulajdonságindítókat és eseményeket használunk az üvegréteg megjelenítéséhez és kezeléséhez.

    

A gomb viselkedésének testreszabása

Ezen a ponton testreszabta a gomb bemutatóját a sablon szerkesztésével, de a gomb nem reagál a felhasználói műveletekre, ahogyan a szokásos gombok teszik (például az egérmutatón való megjelenés módosítása, a fókusz fogadása és a kattintás.) A következő két eljárás bemutatja, hogyan hozhat létre ilyen viselkedéseket az egyéni gombra. Először egyszerű tulajdonság-eseményindítókkal kezdjük, majd eseményindítókat és animációkat adunk hozzá.

Tulajdonság-eseményindítók beállítása

1. Hozzon létre egy új tulajdonság-eseményindítót: Ha a glassCube van kiválasztva, kattintson a + Tulajdonság elemre az Eseményindítók panelen (lásd a következő lépést követő ábrát). Ez létrehoz egy tulajdonság-eseményindítót egy alapértelmezett tulajdonság-eseményindítóval.

2. Állítsa be az IsMouseOvert az eseményindító által használt tulajdonságra: Módosítsa a tulajdonságot a következőre IsMouseOver: . Ez aktiválja a tulajdonság eseményindítóját, amikor a IsMouseOver tulajdonság true értékre vált, vagyis amikor a felhasználó az egérrel a gombra mutat.

   

3. Az IsMouseOver beállítja a glassCube átlátszatlanságát 100% értékre: Vegye észre, hogy a trigger rögzítés be van kapcsolva (lásd az előző ábrát). Ez azt jelenti, hogy a glassCube tulajdonságértékeinek a rögzítés közben végzett módosítása olyan műveletté válik, amely akkor történik, amikor IsMouseOver be van kapcsolva true. A rögzítés során állítsa a OpacityglassCube értékét 100-ra a%formátum szerint.

   

   Ezzel létrehozta az első tulajdonság-eseményindítót. Figyelje meg, hogy a szerkesztő Eseményindítók panelje rögzítette, hogy Opacity 100%-ra változott.

   

   Nyomja le az F5 billentyűt az alkalmazás futtatásához, majd mozgassa az egérmutatót a gomb fölé és le róla. Az üvegrétegnek akkor kell megjelennie, amikor az egérmutatót a gomb fölé viszi, és eltűnik, amikor a mutató elmozdul.

4. Az IsMouseOver aktiválja a stroke értékének módosítását: Társítsunk néhány más műveletet az IsMouseOver eseményindítóhoz. Amíg a felvétel folytatódik, váltsa át a kijelölést a glassCube-ról az outerRectangle-re. Ezután állítsa a StrokeouterRectangle értékét a következő egyéni kifejezésre: "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Ez a Stroke gombok által használt tipikus kiemelési színre állítja be a beállítást. Nyomja le az F5 billentyűt az effektus megjelenítéséhez, amikor az egérmutatót a gomb fölé viszi.

   

5. Az IsMouseOver elmosódott szöveget aktivál: Társítsunk még egy műveletet a IsMouseOver tulajdonság-eseményindítóhoz. A gomb tartalma kissé homályosan jelenik meg, amikor az üveg megjelenik rajta. Ehhez elmosódást BitmapEffect alkalmazhatunk a ContentPresenter (myContentPresenter) elemre.

   

   Megjegyzés:

   Ha vissza szeretné állítani a Tulajdonságok panelt a keresés BitmapEffect előtti állapotra, törölje a szöveget a Keresőmezőből.

   Ezen a ponton egy tulajdonság-eseményindítót használtunk több társított művelettel, hogy kiemelő viselkedést hozzunk létre, amikor az egérmutató bejön, és elhagyja a gombterületet. Egy gomb másik tipikus viselkedése az, hogy kiemelt állapotba kerül, amikor fókuszba kerül (például ha rákattintanak). Ilyen viselkedést úgy adhatunk hozzá, hogy hozzáadunk egy másik tulajdonság-eseményindítót a IsFocused tulajdonsághoz.

6. Tulajdonság-eseményindító létrehozása az IsFocusedhez: A jelen szakasz első lépésével megegyező eljárással IsMouseOver hozzon létre egy másik tulajdonság-eseményindítót a IsFocused tulajdonsághoz. Ha az eseményindító rögzítése be van kapcsolva, adja hozzá a következő műveleteket az eseményindítóhoz:

   • glassCube kap egy Opacity értékelést 100%.

   • az outerRectangle a következő egyéni kifejezésértéket Stroke kapja: "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Az útmutató utolsó lépéseként animációkat adunk hozzá a gombhoz. Ezeket az animációkat események aktiválják – különösen a MouseEnter és Click események.

Eseményindítók és animációk használata az interaktivitás hozzáadásához

1. MouseEnter eseményindító létrehozása: Adjon hozzá egy új eseményindítót, és válassza ki MouseEnter az eseményindítóban használni kívánt eseményt.

   

2. Animációs ütemterv létrehozása: Ezután társítson egy animációs ütemtervet az MouseEnter eseményhez.

   

   Miután lenyomta az OK billentyűt egy új ütemterv létrehozásához, megjelenik egy Ütemterv panel , és megjelenik az "Ütemterv rögzítése bekapcsolva" felirat a tervezőpanelen. Ez azt jelenti, hogy megkezdhetjük a tulajdonságváltozások rögzítését az idővonalon (a tulajdonságmódosítások animálása).

   Megjegyzés:

   Előfordulhat, hogy a kijelző megjelenítéséhez át kell méreteznie az ablakot és/vagy a paneleket.

   

3. Kulcskeret létrehozása: Animáció létrehozásához jelölje ki az animálni kívánt objektumot, hozzon létre két vagy több kulcskeretet az ütemterven, és a kulcskeretek esetében állítsa be azokat a tulajdonságértékeket, amelyek között interpolálni szeretné az animációt. Az alábbi ábra végigvezeti egy kulcskeret létrehozásának folyamatán.

   

4. A glassCube zsugorítása ezen a kulcskereten: A második kulcskeret kiválasztásával a méretátalakítással a glassCube méretét 90% méretre zsugorítja.

   

   Nyomja le az F5 billentyűt az alkalmazás futtatásához. Vigye az egérmutatót a gomb fölé. Figyelje meg, hogy az üvegréteg a gomb tetején zsugorodik.

5. Hozzon létre egy másik eseményindítót, és társítson hozzá egy másik animációt: Adjunk hozzá még egy animációt. Hasonló eljárást használjon az előző eseményindító animáció létrehozásához használt eljáráshoz:

   1. Hozzon létre egy új eseményindítót az Click esemény használatával.

   2. Új ütemterv társítása az Click eseményhez.

      

   3. Ehhez az ütemtervhez hozzon létre két kulcskeretet, egyet 0,0 másodpercnél, a másodikat pedig 0,3 másodpercnél.

   4. A kulcskeret 0,3 másodperces kiemelésével állítsa az Átalakítás elforgatási szögét 360 fokra.

      

   5. Nyomja le az F5 billentyűt az alkalmazás futtatásához. Kattintson a gombra. Figyelje meg, hogy az üvegréteg forog.

Következtetés

Elkészítettél egy testreszabott gombot. Ezt egy olyan gombsablon használatával tette, amelyet az alkalmazás összes gombjára alkalmaztak. Ha elhagyja a sablon szerkesztési módját (lásd az alábbi ábrát), és további gombokat hoz létre, látni fogja, hogy azok az alapértelmezett gomb helyett az egyéni gombhoz hasonlóan néznek ki és viselkednek.

Nyomja le az F5 billentyűt az alkalmazás futtatásához. Kattintson a gombokra, és figyelje meg, hogy mindegyik ugyanúgy viselkedik.

Ne feledje, hogy a sablon testreszabása közben az FillinnerRectangle tulajdonságot és az StrokeouterRectangle tulajdonságot a sablon hátterére állította ({TemplateBinding Background}). Emiatt az egyes gombok háttérszínének beállításakor a rendszer a megadott háttérszínt fogja használni az adott tulajdonságokhoz. Próbálja meg most módosítani a hátteret. Az alábbi ábrán különböző színátmeneteket használunk. Ezért bár a sablon hasznos a vezérlők, például a gombok általános testreszabásához, a sablonokkal rendelkező vezérlők továbbra is módosíthatók, hogy különbözjenek egymástól.

Összefoglalva, egy gombsablon testreszabása során megtanulta, hogyan végezheti el a következőket a Microsoft Expression Blendben:

• A vezérlők megjelenésének testreszabása.

• Tulajdonságindítók beállítása. A tulajdonság-eseményindítók nagyon hasznosak, mert a legtöbb objektumon használhatók, nem csak a vezérlőkön.

• Eseményindítók beállítása. Az eseményindítók nagyon hasznosak, mert a legtöbb objektumon használhatók, nem csak a vezérlőkön.

• Animációk létrehozása.

• Egyéb: színátmenetek létrehozása, BitmapEffects hozzáadása, átalakítások használata és az objektumok alapvető tulajdonságainak beállítása.

Lásd még

• Gomb létrehozása XAML- használatával
• Stílus és sablonkészítés
• Az animáció áttekintése
• Tömör színekkel és színátmenetekkel való festés áttekintése
• Bitképeffektusok áttekintése