unavené obvyklým vzhledem k tlačítkům ve WPF? Chcete lesklé tlačítko se skleněným leskem a záři, jakmile přesunete kurzor myši přes tlačítko?
Je to jen šest snadných kroků odtud …
Postupujte podle níže uvedeného tutoriálu a dávejte si nový pohled na své aplikace.
Použité nástroje:
Visual Studio 2008
Výrazová směs
1. Vytvořte novou aplikaci WPF
2. Vytvořte plátno
Přidejte obdélník z panelu nástrojů vlevo:
Přetáhněte rohy obdélníku do příslušných rozměrů, které jsou velikosti, kterou chcete pro tlačítko.
Klikněte na obdélník.
Vpravo vyberte kartu „Vlastnosti“.
Vyberte „Vyplňte“ -> „Žádný kartáč“.
Vyberte „zdvih“-> „žádný kartáč“
V části vzhledu změňte vlastnosti RADIUSX a RADIUSY na 4 (aby se zaoblené rohy).
Vytvořte tloušťku tahu 0 (tah je hranice).
Klikněte pravým tlačítkem na obdélník, který jste vytvořili.
Zkopírujte to.
Vložte to dvakrát.
Váš layOuttroot by měl vypadat podobně jako toto:
Vyberte obdélník, jak je znázorněno:
Klikněte na něj pravým tlačítkem.
Vyberte „Skupinu do“-> „plátno“
3. Vytvořte základní naor
Na kartě Vlastnosti přejmenujte plátno jako „tlačítko“.
V sekci rozvržení vyberte „ruku“ v možnostech „kurzoru“
Klikněte na první obdélník shora v layoutroot:
Vyberte „Výplně“ -> „Brush s pevným barevným“
V editoru vyberte barvu černé.
Přejmenujte obdélník na kartě Vlastnosti jako „základní naoat“:
4. Vytvořte záře
Vyberte druhý obdélník z layoutroot jako dříve
Pojmenujte to „Glow“ na kartě Vlastnosti
Vyberte „Vyplňte“-> „Gradient Brush“-> „Radiální gradient“
Klikněte na „Transform Brush Transform“ v sadě nástrojů vlevo:
Transformace štětce se použije k úpravě polohování gradientu.
Trochu přetáhněte spodní část obdélníku, abyste svisle zvětšili gradient:
Přesuňte kurzor kolem uprostřed obdélníku, dokud neuvidíte kurzor se čtyřmi.
Trochu přetáhněte zvýraznění:
Vyberte „vyplňte“-> „Gradient Brush“-> „Lineární gradient“
Klikněte na první zastavení gradientu a vyberte požadovanou barvu pro zářící efekt.
Vyberte druhou zastavení gradientu.
Snižte hodnotu A na 0 pro dosažení transparentnosti.
Prozatím prozatím 0% v sekci vzhledu:
5. Vytvořte skleněný efekt
Vyberte třetí obdélník.
Pojmenujte to „sklo“.
Vyberte „vyplňte“-> „Gradient Brush“-> „Lineární gradient“
Vyberte „transformaci štětce“
Vyberte zadní část šipky a otočte ji, abyste odpovídajícím způsobem změnili gradient:
Přesuňte kurzor kolem horní střední části obdélníku, dokud neuvidíte kurzor jako ruku:
Přetáhněte kurzor do obdélníku (jako by něco zatlačili do krabice shora), dokud neuvidíte něco takového:
Vyberte první zastavení gradientu.
Nastavte A na 0
Kliknutím dvakrát na gradientní lištu přibližně 60% získáte dvě zastávky gradientu.
Získejte jeden gradient zastavte o několik procent nižší než druhé.
V okně můžete vidět sklovitý efekt:
Změňte neprůhlednost na 80%.
6. Kód trochu
Uložte svůj projekt ve směsi a zavřete jej.
Otevřete svůj projekt pomocí Visual Studio.
Dvojitá klikněte na „Canvas“ v kódu XAML okna:
Nenechte se zmateni s růžovou barvou. Právě jsem změnil barvu pozadí pro testování.
V okně Vlastnosti vyberte možnost „událost“.
Poklepejte na sloupec vpravo od ENTER Mouse.
Poklepejte na sloupec vpravo od dovolené myši.
Dvojité kliknutí způsobilo, že kód XAML v okně a záhlaví metody byly pro události automaticky generovány.
Zadejte následující kód, aby se záře objevila pouze tehdy, když je myš přes tlačítko:
Private Void Button_Mouseenter (odesílatel objektu, MouseEventArgs E)
{
glow.opacity = 100;
}
Private Void Button_MouseLeave (odesílatel objektu, MouseEventArgs E)
{
glow.opacity = 0;
}
A jste hotovi
Vaše dotazy jsou vždy vítány!
