Windows Phone Tutorial 8: Oprettelse af en brugerdefineret knap i Expression Blend-I

Video: Windows Phone Tutorial 8: Oprettelse af en brugerdefineret knap i Expression Blend-I

Video: Windows Phone Tutorial 8: Oprettelse af en brugerdefineret knap i Expression Blend-I
Video: Blinking Cursor When Booting Windows - Quickfix 2024, Marts
Windows Phone Tutorial 8: Oprettelse af en brugerdefineret knap i Expression Blend-I
Windows Phone Tutorial 8: Oprettelse af en brugerdefineret knap i Expression Blend-I
Anonim

Efter at have lært om, hvordan man opretter og distribuerer et program i Silverlight-versionen af CTP-værktøjer, som en del af denne Windows Phone-tutorial-serie, går vi videre til Expression Blend. Expression Blend er et forfattersystem til professionelle designere til at opbygge brugeroplevelser, der er målrettet mod.NET 3.0 + platformen, og mere specifikt WPF eller Windows Presentation Foundation.

Generelt har Silverlight kontroller en separat logik fra deres visuelle udseende ved hjælp af skabeloner. EN ControlTemplate specificerer den visuelle struktur og visuel opførsel af en kontrol. Du kan tilpasse udseendet af de fleste kontroller ved at ændre deres standard ControlTemplate indstillinger. Dette giver dig mulighed for at ændre udseendet af kontrollen uden at ændre dens funktionalitet. For eksempel kan du lave knapperne i din applikationsrunde i stedet for standardfirkantformen, men knappen vil stadig hæve Klik begivenhed.

I denne vejledning åbner du det Visual Studio-projekt, du oprettede i den foregående øvelse i Expression Blend, og erstatter ControlTemplate af knappen for at ændre sit udseende. Fordi du opretter en ControlTemplate I XAML kan du ændre en kontrol udseende uden at skrive nogen kode.

1. Åbn Microsoft Visual Studio 2010 Express til Windows Phone
1. Åbn Microsoft Visual Studio 2010 Express til Windows Phone

2. Hvis du har gennemført trinene i den foregående øvelse, kan du fortsætte med den løsning, du har oprettet for den øvelse.

3. Åbn den nuværende løsning i Expression Blend. For at gøre dette fra Visual Studio, højreklik på MainPage.xaml i Solution Explorer, og vælg derefter Open in Expression Blend. Hvis denne indstilling ikke er tilgængelig-Den mest sandsynlige årsag er, at din nuværende version af Expression Blend ikke understøtter den nødvendige projekttype - følg de næste trin for at oprette et midlertidigt projekt, som du kan redigere ved hjælp af Expression Blend

4. Åbn Microsoft Expression Blend

5. Opret et nyt ansøgningsprojekt for midlertidigt at holde dine designaktiver. For at gøre dette skal du åbne Fil menuen og vælg derefter Nyt projekt

6. I Nyt projekt dialog, vælg Silverlight projekttype og vælg derefter Silverlight 3 Application skabelon. Indstil navnet til DesignHelloPhone, vælg et egnet sted, og hold sproget som Visual C #, og klik derefter på Okay.

Image
Image

7. Dobbeltklik i Visual Studio App.xaml i Solution Explorer for at åbne denne fil i editoren. Nu skal du åbne XAML-visningen, og derefter vælge og kopiere hele Application.Resources afsnit til udklipsholderen

8. Åbn Expression Blend igen, udvid DesignHelloPhone projekt i Projekter panelet og dobbeltklik App.xaml for at åbne filen

9. peg på Aktiv dokumentvisning i Udsigt menuen og vælg XAML View.

10. Find den Application.Resources afsnit i denne fil - det skal være tomt - og derefter indsætte indholdet af udklipsholderen for at erstatte det.

11. Find nu sektionen i den nyindførte tekst, der er afgrænset med kommentaren ***** LISTBOX / LISTBOXITEM TEMPLATES ***** ”; den indeholder stilarter, der ikke er kompatible med et Silverlight 3 projekt. Slet hele sektionen mellem start- og slutgrænserne.

Image
Image

12. Nu finder du Ansøgning element øverst i filen og indsæt en ny navneområdedeklaration for at henvise til System navneområde i mscorlib samling, som vist nedenfor.

xmlns:system='clr-namespace:System;assembly=mscorlib' > # FF1F1F1F Sort ?> var13 ->

13. Gem nu den ændrede App.xaml i ekspressionsblanding.

14. Derefter skal du åbne Visual Studio igen og åbne MainPage.xaml fil i XAML visning. Vælg derefter og kopier den Grid element nævnt LayoutRoot herunder sine børn til udklipsholderen.

15. Gå tilbage til Expression Blend, åbner MainPage.xaml fil i XAML-visning, og indsæt derefter indholdet af udklipsholderen for at erstatte det tomme LayoutRootGrid element i denne fil.

16. I MainPage.xaml fil, find rod UserControl element og ændre værdierne af Højde attribut til 800 og Bredde attribut til 480.

17. Gå tilbage til Visual Studio, højreklik MainPage.xaml.cs i Solution Explorer og vælg Vis kode. Derefter kopieres ClickMeButton_Click hændelseshåndterer til udklipsholderen.

18. Endelig, vend tilbage til Expression Blend, udvide MainPage.xaml knudepunkt i Projekter panel, dobbeltklik på MainPage.xaml.cs for at åbne filen i editoren og indsætte koden i udklipsholderen i Forside klasse.

Nu har vi succesfuldt gentaget vores projekt til udtrykblanding. For at oprette et design til den brugerdefinerede knap, læs venligst næste vejledning, der offentliggøres i morgen.

Anbefalede: