Návod: Vytvoření tlačítka pomocí aplikace Microsoft Expression Blend

Tento názorný postup vás provede procesem vytvoření přizpůsobeného tlačítka WPF pomocí aplikace Microsoft Expression Blend.

Důležité

Microsoft Expression Blend funguje tak, že generuje Extensible Application Markup Language (XAML), který se pak zkompiluje, aby se vytvořil spustitelný program. Pokud byste raději chtěli pracovat přímo s XAML, existuje jiný názorný postup, který místo Blendu vytvoří stejnou aplikaci jako tuto aplikaci pomocí XAML se sadou Visual Studio. Další informace najdete v tématu Vytvoření tlačítka pomocí XAML .

Následující obrázek znázorňuje přizpůsobené tlačítko, které vytvoříte.

Převod obrazce na tlačítko

V první části tohoto názorného postupu vytvoříte vlastní vzhled vlastního tlačítka. Uděláte to tak, že nejprve převedete obdélník na tlačítko. Potom do šablony tlačítka přidáte další obrazce a vytvoříte složitější tlačítko pro vzhled. Proč nezačínat běžným tlačítkem a přizpůsobit ho? Protože tlačítko má předdefinované funkce, které nepotřebujete; pro vlastní tlačítka je jednodušší začít s obdélníkem.

Chcete-li vytvořit nový projekt v Expression Blend

1. Spusťte Expression Blend. (Klepněte na tlačítko Start, přejděte na příkaz Všechny programy, přejděte na příkaz Microsoft Expression a klepněte na příkaz Microsoft Expression Blend.)

2. V případě potřeby maximalizujte aplikaci.

3. V nabídce Soubor klepněte na tlačítko Nový projekt.

4. Vyberte standardní aplikaci (.exe).

5. Pojmenujte projekt CustomButton a stiskněte OK.

V tuto chvíli máte prázdný projekt WPF. Aplikaci spustíte stisknutím klávesy F5. Jak můžete očekávat, aplikace se skládá pouze z prázdného okna. Dále vytvoříte zaoblený obdélník a převedete ho na tlačítko.

Převod obdélníku na tlačítko

1. Nastavte vlastnost Pozadí okna na černou: Vyberte okno, klikněte na kartu Vlastnosti a nastavte Background vlastnost na Black.

   

2. Nakreslete obdélník přibližně velikost tlačítka v okně: Vyberte nástroj obdélníku na panelu nástrojů vlevo a přetáhněte obdélník do okna.

   

3. Zaoblete rohy obdélníku: Přetáhněte ovládací body obdélníku nebo přímo nastavte RadiusX a RadiusY vlastnosti. Nastavte hodnoty RadiusX a RadiusY na hodnotu 20.

   

4. Změňte obdélník na tlačítko: Vyberte obdélník. V nabídce Nástroje klepněte na tlačítko Vytvořit.

   

5. Zadejte rozsah stylu nebo šablony: Zobrazí se dialogové okno podobné následujícímu.

   

   U název prostředku (klíč) vyberte Použít u všech. Výsledná šablona stylu a tlačítka se tak použije u všech objektů, které jsou tlačítky. Vyberte Definovat v a zvolte Aplikaci. Výsledkem bude, že výsledná šablona stylu a tlačítka bude mít obor pro celou aplikaci. Když nastavíte hodnoty v těchto dvou polích, styl tlačítka a šablona se použijí pro všechna tlačítka v celé aplikaci a jakékoli tlačítko, které vytvoříte v aplikaci, bude ve výchozím nastavení tuto šablonu používat.

Úprava šablony tlačítka

Teď máte obdélník, který se změnil na tlačítko. V této části upravíte šablonu tlačítka a dále přizpůsobíte vzhled tlačítka.

Úprava šablony tlačítka pro změnu vzhledu tlačítka

1. Přejděte do zobrazení šablony pro úpravy: Abychom mohli vzhled tlačítka dále přizpůsobit, musíme šablonu tlačítka upravit. Tato šablona byla vytvořena při převodu obdélníku na tlačítko. Pokud chcete šablonu tlačítka upravit, klikněte na tlačítko pravým tlačítkem myši a vyberte Upravit části ovládacího prvku (šablona) a pak upravit šablonu.

   

   V editoru šablon si všimněte, že tlačítko je nyní rozděleno na Rectangle a ContentPresenter. Slouží ContentPresenter k prezentaci obsahu v rámci tlačítka (například řetězec "Tlačítko"). Obdélník a ContentPresenter jsou rozloženy uvnitř Grid.

   

2. Změňte názvy součástí šablony: Klikněte pravým tlačítkem myši na obdélník v inventáři šablony, změňte Rectangle název z "[Rectangle]" na "outerRectangle" a změňte "[ContentPresenter]" na "myContentPresenter".

   

3. Upravte obdélník tak, aby byl prázdný uvnitř (jako prstenec): Vyberte vnějšíRectangle a nastavte Fill na "Průhledné" a StrokeThickness na hodnotu 5.

   

   Potom nastavte Stroke barvu libovolné šablony. Udělejte to tak, že kliknete na malé bílé pole vedle Stroke, vyberete CustomExpression a do dialogového okna zadáte "{TemplateBinding Background}".

   

4. Vytvořte vnitřní obdélník: Nyní vytvořte další obdélník (pojmenujte ho "innerRectangle") a umístěte jej symetricky na vnitřní straně vnějšíHoRectangle . Pro tento druh práce budete pravděpodobně chtít zvětšit tlačítko v oblasti pro úpravy.

   Poznámka:

   Obdélník může vypadat jinak než ten na obrázku (například může mít zaoblené rohy).

   

5. Přesuňte ContentPresenter na začátek: V tomto okamžiku je možné, že text "Tlačítko" už nebude viditelný. Pokud ano, je to proto, že innerRectangle je nad myContentPresenter. Pokud chcete tento problém vyřešit, přetáhněte myContentPresenter pod innerRectangle. Přemísťujte obdélníky a myContentPresenter tak, aby vypadaly podobně jako dole.

   Poznámka:

   Alternativně můžete také umístit myContentPresenter nahoře tak, že na něj kliknete pravým tlačítkem myši a stisknete tlačítko Odeslat dál.

   

6. Změňte vzhled innerRectangle: Nastavte RadiusX, RadiusY a StrokeThickness na hodnotu 20. Kromě toho nastavte Fill na pozadí šablony pomocí vlastního výrazu {TemplateBinding Background}) a nastavte Stroke na "transparentní". Všimněte si, že nastavení pro FillStroke jsou opakem nastavení vnějšíRectangle.

   

7. Přidejte vrstvu skla navrchu: Posledním kusem přizpůsobení vzhledu tlačítka je přidání skleněné vrstvy navrchu. Tato sklová vrstva se skládá z třetího obdélníku. Vzhledem k tomu, že sklo pokryje celé tlačítko, má obdélník skla podobné rozměry jako vnější obdélník. Proto vytvořte obdélník jednoduše zkopírováním vnějšíhoObdélníku. Zvýrazněte vnější obdélník a pomocí CTRL+C a CTRL+V vytvořte kopii. Pojmenujte tento nový obdélník "glassCube".

8. V případě potřeby přemísťujte glassCube: Pokud glassCube není již umístěn tak, aby pokrýl celé tlačítko, přetáhněte ho na pozici.

9. Dejte skleněnéKostce trochu jiný tvar než vnějšímuObdélníku: Změňte vlastnosti skleněnéKostky. Začněte tím, že změníte vlastnosti RadiusX a RadiusY na 10 a StrokeThickness na 2.

   

10. Make glassCube look like glass:Fill Nastavte na sklový vzhled pomocí lineárního přechodu, který je 75% neprůhledné a střídá se mezi barvou Bílou a Průhlednou přes 6 přibližně rovnoměrně rozložených intervalů. Takto nastavte přechodové zarážky:

    • Přechodová zarážka 1: Bílá s alfa hodnotou 75%

    • Přechodová zarážka 2: transparentní

    • Přechodová zarážka 3: Bílá s alfa hodnotou 75%

    • Přechodová zarážka 4: Průhledná

    • Přechodová zarážka 5: Bílá s alfa hodnotou 75%

    • Přechodová zarážka 6: průhledná

    Tím se vytvoří "vlnité" sklo.

    

11. Skryjte vrstvu skla: Teď, když vidíte, jak vypadá sklová vrstva, přejděte do podokna Vzhledna panelu Vlastnosti a nastavte neprůhlednost na hodnotu 0%, aby se skryla. V dalších částech použijeme spouštěče vlastností a akce k zobrazení a manipulaci s vrstvou skla.

    

Přizpůsobení chování tlačítka

V tomto okamžiku jste upravili prezentaci tlačítka úpravou její šablony, ale tlačítko nereaguje na akce uživatelů jako typická tlačítka (například změna vzhledu při přechodu myší, příjem fokusu a kliknutí.) Následující dva postupy ukazují, jak vytvořit podobné chování do vlastního tlačítka. Začneme jednoduchými triggery vlastností a poté přidáme triggery událostí a animace.

Nastavení spouštěčů vlastností

1. Vytvořte novou aktivační událost vlastnosti: Pokud je vybraná možnost glassCube, klikněte na panelu Aktivační události na tlačítko + Vlastnost (viz obrázek, který následuje za dalším krokem). Tím se vytvoří spouštěč vlastnosti s výchozím spouštěčem vlastnosti.

2. Udělejte z IsMouseOver vlastnost použitou triggerem: Změňte vlastnost na IsMouseOver. Tím se aktivuje spoušť vlastnosti, když je vlastnost IsMouseOvertrue (když uživatel ukáže myší na tlačítko).

   

3. IsMouseOver aktivuje neprůhlednost 100% pro glassCube: Všimněte si, že záznam triggeru je zapnutý (viz předchozí obrázek). To znamená, že všechny změny provedené v hodnotách vlastností glassCube během aktivního nahrávání se stanou akcí, která proběhne, když IsMouseOver je true. Při nahrávání změňte Opacity hodnotu skleněná kostka na 100%.

   

   Nyní jste vytvořili svůj první spouštěč vlastnosti. Všimněte si, že panel Triggers v editoru zaznamenal změnu Opacity na 100%.

   

   Stisknutím klávesy F5 spusťte aplikaci a přesuňte ukazatel myši na tlačítko a mimo něj. Po najetí myší na tlačítko by se měla zobrazit vrstva skla a po opuštění ukazatele zmizí.

4. Funkce IsMouseOver aktivuje změnu hodnoty tahu: Pojďme ke spouštěči přidružit některé další akce. Během pokračování nahrávání přepněte výběr ze glassCube na vnějšíObdélník. Potom nastavte StrokevnějšíObdélník na uživatelský výraz "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Tím se nastaví Stroke na typickou barvu zvýraznění používanou tlačítky. Stisknutím klávesy F5 zobrazíte efekt, když na tlačítko najedete myší.

   

5. IsMouseOver aktivuje rozmazaný text: Pojďme k triggeru IsMouseOver vlastnosti přidružit ještě jednu akci. Nastavte, aby se obsah tlačítka zobrazoval trochu rozmazaně, když se nad ním objeví sklo. Provedeme rozostření BitmapEffect na ContentPresenter (myContentPresenter).

   

   Poznámka:

   Chcete-li vrátit panel Vlastnosti do původního stavu před provedením hledání BitmapEffect, odstraňte text z pole Vyhledávání.

   V tuto chvíli jsme použili trigger vlastnosti s několika přidruženými akcemi k vytvoření zvýrazňování chování při vstupu ukazatele myši a opuštění oblasti tlačítka. Dalším typickým chováním tlačítka je zvýraznění, když je fokus (stejně jako po kliknutí). Takové chování můžeme přidat přidáním další spouštěcí události pro vlastnost IsFocused.

6. Vytvořte trigger vlastnosti pro IsFocused: Stejným postupem jako pro IsMouseOver (viz první krok tohoto oddílu) vytvořte další trigger vlastnosti pro IsFocused. Když je záznam triggeru zapnutý, přidejte do triggeru následující akce:

   • glassCube obdrží Opacity o hodnotě 100%.

   • outerRectangle získá vlastní hodnotu výrazu Stroke {DynamicResource {x:Static SystemColors.HighlightBrushKey}}.

Jako poslední krok v tomto názorném postupu přidáme animace na tlačítko. Tyto animace budou spuštěny událostmi – konkrétně událostmi MouseEnter a Click.

Použití aktivačních událostí a animací k přidání interaktivity

1. Vytvoření události MouseEnter ve spouštěči: Přidejte nový spouštěč události a vyberte MouseEnter jako událost pro použití ve spouštěči.

   

2. Vytvoření časové osy animace: Dále přidružte časovou osu MouseEnter animace k události.

   

   Po stisknutí OK pro vytvoření nové časové osy se zobrazí Panel časové osy a na panelu návrhu je viditelný text "záznam časové osy je zapnutý". To znamená, že můžeme začít zaznamenávat změny vlastností na časové ose (animovat změny vlastností).

   Poznámka:

   Abyste viděli zobrazení, budete možná muset změnit velikost okna nebo panelů.

   

3. Vytvoření klíčového rámce: Pokud chcete vytvořit animaci, vyberte objekt, který chcete animovat, vytvořte dva nebo více klíčových snímků na časové ose a u těchto klíčových snímků nastavte hodnoty vlastností, mezi nimiž má animace interpolovat. Následující obrázek vás provede vytvořením klíčového rámce.

   

4. Zmenšete glassCube na tomto klíčovém snímku: S vybraným druhým klíčovým snímkem zmenšete velikost glassCube na 90% jeho plné velikosti pomocí Transformace velikosti.

   

   Stisknutím klávesy F5 spusťte aplikaci. Přesuňte ukazatel myši na tlačítko. Všimněte si, že vrstva skla se zmenší nad tlačítkem.

5. Vytvořte další trigger události a přidružte k ní jinou animaci: Pojďme přidat ještě jednu animaci. Použijte podobný postup, který jste použili k vytvoření předchozí animace aktivační události:

   1. Vytvořte novou aktivační událost pomocí Click události.

   2. Přidružte k události novou časovou osu Click .

      

   3. Pro tuto časovou osu vytvořte dva klíčové snímky, jeden v 0,0 sekundách a druhý v 0,3 sekundách.

   4. Když je klíčový snímek zvýrazněný v čase 0,3 sekundy, nastavte úhel otočení transformace na 360 stupňů.

      

   5. Stisknutím klávesy F5 spusťte aplikaci. Klikněte na tlačítko. Všimněte si, že se vrstva skla otáčí.

Závěr

Dokončili jste přizpůsobené tlačítko. Provedli jste to pomocí šablony tlačítka, která byla použita pro všechna tlačítka v aplikaci. Pokud necháte režim úprav šablony (viz následující obrázek) a vytvoříte další tlačítka, uvidíte, že vypadají a chovají se jako vaše vlastní tlačítko místo výchozího tlačítka.

Stisknutím klávesy F5 spusťte aplikaci. Klikněte na tlačítka a všimněte si, jak se všechny chovají stejně.

Mějte na paměti, že při přizpůsobení šablony jste nastavili Fill vlastnost innerRectangle a Stroke vlastnost vnějšíRectangle na pozadí šablony ({TemplateBinding Background}). Z tohoto důvodu se při nastavení barvy pozadí jednotlivých tlačítek použije pozadí, které nastavíte pro tyto příslušné vlastnosti. Zkuste změnit pozadí. Na následujícím obrázku se používají různé přechody. I když je šablona užitečná pro celkové přizpůsobení ovládacích prvků, jako je tlačítko, dají se ovládací prvky se šablonami dál upravovat tak, aby vypadaly jinak.

Na závěr jste se v procesu přizpůsobení šablony tlačítka naučili, jak v Aplikaci Microsoft Expression Blend provést následující kroky:

• Přizpůsobte vzhled ovládacího prvku.

• Nastavte spouštěče vlastností. Triggery vlastností jsou velmi užitečné, protože se dají použít u většiny objektů, nejen u ovládacích prvků.

• Nastavte triggery událostí. Triggery událostí jsou velmi užitečné, protože se dají použít u většiny objektů, nejen u ovládacích prvků.

• Vytváření animací

• Různé: vytváření přechodů, přidání BitmapEffects, použití transformací a nastavení základních vlastností objektů.

Viz také

• Vytvořit tlačítko pomocí XAML
• stylování a šablonování
• Přehled animací
• Malování s jednobarevnými barvami a přechody – přehled
• Přehled rastrových efektů