Genomgång: Skapa en knapp med hjälp av Microsoft Expression Blend

Den här genomgången beskriver hur du skapar en WPF-anpassad knapp med Microsoft Expression Blend.

Viktigt!

Microsoft Expression Blend fungerar genom att generera XAML (Extensible Application Markup Language) som sedan kompileras för att göra det körbara programmet. Om du hellre vill arbeta med XAML direkt finns det en annan genomgång som skapar samma program som det här med XAML med Visual Studio i stället för Blend. Mer information finns i Skapa en knapp med hjälp av XAML-.

Följande bild visar den anpassade knappen som du skapar.

Konvertera en figur till en knapp

I den första delen av den här genomgången skapar du det anpassade utseendet på den anpassade knappen. För att göra detta konverterar du först en rektangel till en knapp. Sedan lägger du till ytterligare former i knappens mall och skapar en mer komplex knapp. Varför inte börja med en vanlig knapp och anpassa den? Eftersom en knapp har inbyggda funktioner som du inte behöver. för anpassade knappar är det enklare att börja med en rektangel.

Skapa ett nytt projekt i Expression Blend

1. Starta Expression Blend. (Klicka på Starta, peka på Alla program, peka på Microsoft Expressionoch klicka sedan på Microsoft Expression Blend.)

2. Maximera programmet om det behövs.

3. På menyn Arkiv klickar du på Nytt projekt.

4. Välj standardapplikation (.exe).

5. Ge projektet namnet CustomButton och tryck på OK.

Nu har du ett tomt WPF-projekt. Du kan trycka på F5 för att köra programmet. Som du kan förvänta dig består programmet bara av ett tomt fönster. Sedan skapar du en rundad rektangel och konverterar den till en knapp.

Konvertera en rektangel till en knapp

1. Ange egenskapen Fönsterbakgrund till svart: Välj fönstret, klicka på fliken Egenskaper, och ange egenskapen Background till Black.

   

2. Rita en rektangel ungefär så stor som en knapp i fönstret: Välj rektangelverktyget på den vänstra verktygspanelen och dra rektangeln till fönstret.

   

3. Avrunda rektangelns hörn: Dra antingen rektangelns kontrollpunkter eller ange egenskaperna RadiusX och RadiusY direkt. Ange värdena för RadiusX och RadiusY till 20.

   

4. Ändra rektangeln till en knapp: Välj rektangeln. På menyn Verktyg väljer du Skapa-knappen.

   

5. Ange omfånget för formatmallen: En dialogruta som följande visas.

   

   För Resursnamn (nyckel)väljer du Använd för alla. Detta gör att den resulterande formatmallen och knappmallen tillämpas på alla objekt som är knappar. För Definiera iväljer du Applikation. Detta gör att den resulterande formatmallen och knappmallen har omfång över hela programmet. När du anger värdena i dessa två rutor gäller knappformatet och mallen för alla knappar i hela programmet och alla knappar som du skapar i programmet använder som standard den här mallen.

Redigera knappmallen

Nu har du en rektangel som har ändrats till en knapp. I det här avsnittet ändrar du knappens mall och anpassar hur den ser ut.

Så här redigerar du knappmallen för att ändra knapputseendet

1. Gå till redigeringsmallsvyn: Om du vill anpassa knappens utseende ytterligare måste vi redigera knappmallen. Den här mallen skapades när vi konverterade rektangeln till en knapp. Om du vill redigera knappmallen högerklickar du på knappen och väljer Redigera kontrolldelar (mall) och sedan Redigera mall.

   

   Observera att knappen nu är uppdelad i en Rectangle och ContentPresenteri mallredigeraren. ContentPresenter används för att presentera innehåll i knappen (till exempel strängen "Knapp"). Både rektangeln och ContentPresenter är placerade inuti en Grid.

   

2. Ändra namnen på mallkomponenterna: Högerklicka på rektangeln i mallinventeringen, ändra Rectangle namn från "[Rektangel]" till "outerRectangle" och ändra "[ContentPresenter]" till "myContentPresenter".

   

3. Ändra rektangeln så att den är tom inuti (t.ex. en munk): Välj outerRectangle och ange Fill till "Transparent" och StrokeThickness till 5.

   

   Ange sedan Stroke till färgen på mallen. Om du vill göra det klickar du på den lilla vita rutan bredvid Stroke, väljer CustomExpressionoch skriver {TemplateBinding Background} i dialogrutan.

   

4. Skapa en inre rektangel: Nu skapar du en annan rektangel (ge den namnet "innerRectangle") och placerar den symmetriskt på insidan av outerRectangle . För den här typen av arbete vill du förmodligen zooma för att göra knappen större i redigeringsområdet.

   Anmärkning

   Rektangeln kan se annorlunda ut än den i figuren (till exempel kan den ha rundade hörn).

   

5. Flytta ContentPresenter längst upp: I det här läget är det möjligt att texten "Button" inte längre visas. Om så är fallet beror det på att innerRectangle är ovanpå myContentPresenter. Åtgärda detta genom att dra myContentPresenter nedanför innerRectangle. Flytta rektanglar och myContentPresenter så att de ser ut på ett sätt som liknar det som visas nedan.

   Anmärkning

   Du kan också placera myContentPresenter överst genom att högerklicka på den och trycka på Skicka framåt.

   

6. Ändra utseendet på innerRectangle: Ange värdena RadiusX, RadiusYoch StrokeThickness till 20. Ange dessutom Fill till mallens bakgrund med det anpassade uttrycket {TemplateBinding Background}" ) och ange Stroke till "transparent". Observera att inställningarna för Fill och Stroke för innerRectangle är motsatsen till dem för outerRectangle.

   

7. Lägg till ett glasskikt ovanpå: Den sista delen av anpassningen av knappens utseende är att lägga till ett glasskikt ovanpå. Det här glasskiktet består av en tredje rektangel. Eftersom glaset täcker hela knappen har glasrektangeln liknande dimensioner som yttreRectangle. Skapa därför rektangeln genom att helt enkelt göra en kopia av outerRectangle. Markera outerRectangle och använd CTRL+C och CTRL+V för att göra en kopia. Ge den här nya rektangeln namnet "glassCube".

8. Flytta glassCube om det behövs: Om glassCube inte redan är placerad så att den täcker hela knappen, dra den på plats.

9. Ge glassCube en något annorlunda form än outerRectangle: Ändra egenskaperna för glassCube. Börja med att ändra egenskaperna för RadiusX och RadiusY till 10 och StrokeThickness till 2.

   

10. Gör glassCube ser ut som glas: Ställ in Fill på ett glasigt utseende genom att använda en linjär toning som är 75% ogenomskinlig och växlar mellan färgen Vit och Transparent över 6 ungefär jämnt fördelade intervall. Så här ställer du in stoppunkterna för övergången:

    • Gradientstopp 1: Vit med alfavärdet 75%

    • Toningsstopp 2: Genomskinlig

    • Toningsstopp 3: Vit med alfavärdet 75%

    • Toningsstopp 4: Transparent

    • Toningsstopp 5: Vit med alfavärdet 75%

    • Toningsstopp 6: Transparent

    Detta skapar en "vågig" glas look.

    

11. Dölj glasskiktet: Nu när du ser hur det glasiga lagret ser ut går du till fönstret Utseende i panelen Egenskaper och anger Opacitet till 0% för att dölja det. I de kommande avsnitten använder vi egenskapsutlösare och händelser för att visa och ändra glasskiktet.

    

Anpassa knappbeteendet

Nu har du anpassat presentationen av knappen genom att redigera dess mall, men knappen reagerar inte på användaråtgärder som vanliga knappar gör (till exempel ändra utseende vid muspekaren, ta emot fokus och klicka.) De följande två procedurerna visar hur du skapar beteenden som dessa i den anpassade knappen. Vi börjar med enkla egenskapsutlösare och lägger sedan till händelseutlösare och animeringar.

Att ange egenskapsutlösare

1. Skapa en ny egenskapsutlösare: Med glassCube markerat klickar du på + egenskap i panelen Utlösare (se bilden som följer nästa steg). Då skapas en egenskapsutlösare med en standardegenskapsutlösare.

2. Gör IsMouseOver till egenskapen som används av utlösaren: Ändra egenskapen till IsMouseOver. Detta gör att egenskapsutlösaren aktiveras när egenskapen IsMouseOver är true (när användaren pekar på knappen med musen).

   

3. IsMouseOver utlöser 100% opacitet% för glassCube: Observera att Trigger-inspelning är på (se föregående bild). Det innebär att alla ändringar du gör i egenskapsvärdena för glassCube när inspelningen är på blir en åtgärd som utförs när IsMouseOver är true. När du spelar in ändrar du Opacity av glassCube till 100%.

   

   Nu har du skapat din första egenskapsutlösare. Observera att panelen Utlösare i redigeraren har registrerat att Opacity har ändrats till 100%.

   

   Tryck på F5 för att köra programmet och flytta muspekaren över och av knappen. Du bör se att glasskiktet visas när du för muspekaren över knappen och försvinner när pekaren lämnar.

4. IsMouseOver utlöser ändring av strokevärde: Låt oss associera några andra åtgärder med utlösaren IsMouseOver. Medan inspelningen fortsätter växlar du ditt val från glassCube till outerRectangle. Ange sedan Stroke för outerRectangle till det anpassade uttrycket "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Detta anger Stroke till den typiska markeringsfärgen som används av knappar. Tryck på F5 för att se effekten när du muspekaren över knappen.

   

5. IsMouseOver utlöser suddig text: Vi kopplar ytterligare en åtgärd till IsMouseOver egenskapsutlösare. Gör så att knappens innehåll blir lite suddigt när glaset visas över den. För att göra detta kan vi använda en oskärpa BitmapEffect på ContentPresenter (myContentPresenter).

   

   Anmärkning

   Om du vill återställa egenskaper-panelen till vad den var innan du gjorde sökningen efter BitmapEffect, raderar du texten från sökrutan .

   Nu har vi använt en egenskapsutlösare med flera associerade åtgärder för att skapa markeringsbeteende för när muspekaren kommer in och lämnar knappområdet. Ett annat typiskt beteende för en knapp är att markera när den har fokus (som när den har klickats). Vi kan lägga till ett sådant beteende genom att lägga till en annan egenskapsutlösare för egenskapen IsFocused.

6. Skapa egenskapsutlösare för IsFocused: Med samma procedur som för IsMouseOver (se det första steget i det här avsnittet) skapar du en annan egenskapsutlösare för egenskapen IsFocused. När Utlösarinspelning är pålägger du till följande åtgärder i utlösaren:

   • glassCube får en Opacity på 100%.

   • outerRectangle får ett Stroke anpassat uttrycksvärde för {DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Som det sista steget i den här genomgången lägger vi till animeringar till knappen. De här animeringarna utlöses av händelser – särskilt MouseEnter och Click händelser.

Så här använder du händelseutlösare och animeringar för att lägga till interaktivitet

1. Skapa en MouseEnter-händelseutlösare: Lägg till en ny händelseutlösare och välj MouseEnter som den händelse som ska användas i utlösaren.

   

2. Skapa en tidslinje för animering: Nästa kopplar du en tidslinje för animering till händelsen MouseEnter.

   

   När du trycker på OK för att skapa en ny tidslinje visas en tidslinjepanel och "Tidslinjeinspelning är på" i designpanelen. Det innebär att vi kan börja registrera egenskapsändringar i tidslinjen (animera egenskapsändringar).

   Anmärkning

   Du kan behöva ändra storlek på fönstret och/eller panelerna för att se skärmen.

   

3. Skapa en nyckelram: Om du vill skapa en animering väljer du det objekt som du vill animera, skapar två eller flera nyckelrutor på tidslinjen och anger de egenskapsvärden som du vill att animeringen ska interpolera mellan för dessa nyckelrutor. Följande bild vägleder dig genom skapandet av en nyckelram.

   

4. Krymp glassCube vid denna nyckelram: Med den andra nyckelramen markerad, krymper du storleken på glassCube till 90% av sin fulla storlek med hjälp av Storleksförändring.

   

   Tryck på F5 för att köra programmet. Flytta muspekaren över knappen. Observera att glasskiktet krymper ovanpå knappen.

5. Skapa en annan händelseutlösare och associera en annan animering med den: Vi lägger till en animering till. Använd en liknande procedur som du använde för att skapa animeringen för föregående händelseutlösare:

   1. Skapa en ny händelseutlösare med hjälp av händelsen Click.

   2. Associera en ny tidslinje med händelsen Click.

      

   3. För den här tidslinjen skapar du två nyckelrutor, en vid 0,0 sekunder och den andra på 0,3 sekunder.

   4. Med nyckelramen 0,3 sekunder markerad anger du Rotera transformeringsvinkel till 360 grader.

      

   5. Tryck på F5 för att köra programmet. Klicka på knappen. Observera att glasskiktet snurrar runt.

Slutsats

Du har slutfört en anpassad knapp. Du gjorde detta med hjälp av en knappmall som tillämpades på alla knappar i programmet. Om du lämnar mallredigeringsläget (se följande bild) och skapar fler knappar ser du att de ser ut och fungerar som din anpassade knapp i stället för som standardknappen.

Tryck på F5 för att köra programmet. Klicka på knapparna och se hur alla beter sig på samma sätt.

Kom ihåg att när du anpassade mallen anger du egenskapen Fill för innerRectangle och egenskapen StrokeouterRectangle till mallbakgrunden ({TemplateBinding Background}). På grund av detta, när du anger bakgrundsfärgen för de enskilda knapparna, kommer den bakgrund som du anger att användas för respektive egenskaper. Prova att ändra bakgrunderna nu. I följande bild används olika toningar. Även om en mall är användbar för övergripande anpassning av kontroller som knapp, kan kontroller med mallar fortfarande ändras så att de ser annorlunda ut än varandra.

Avslutningsvis har du lärt dig hur du gör följande i Microsoft Expression Blend när du anpassar en knappmall:

• Anpassa utseendet på en kontroll.

• Ange egenskapsutlösare. Egenskapsutlösare är mycket användbara eftersom de kan användas på de flesta objekt, inte bara kontroller.

• Ange händelseutlösare. Händelseutlösare är mycket användbara eftersom de kan användas på de flesta objekt, inte bara kontroller.

• Skapa animeringar.

• Diverse: skapa toningar, lägg till BitmapEffects, använd transformeringar och ange grundläggande egenskaper för objekt.

Se även

• Skapa en knapp med XAML-
• Styling och Mallhantering
• Översikt över animering
• Målning med enkla färger och övertoningar Översikt
• Översikt över Bitmappseffekter