Windows Phone Tutorial 8: Mukautetun painikkeen luominen Expression Blend-I -ohjelmassa

Windows Phone Tutorial 8: Mukautetun painikkeen luominen Expression Blend-I -ohjelmassa
Windows Phone Tutorial 8: Mukautetun painikkeen luominen Expression Blend-I -ohjelmassa

Video: Windows Phone Tutorial 8: Mukautetun painikkeen luominen Expression Blend-I -ohjelmassa

Video: Windows Phone Tutorial 8: Mukautetun painikkeen luominen Expression Blend-I -ohjelmassa
Video: Ariana Grande - 7 rings (Official Video) - YouTube 2024, Huhtikuu
Anonim

Kun olet oppinut sovelluksen luomisesta ja käyttöönotosta CTP-työkalujen Silverlight-versiossa, osana tätä Windows Phone -opetusohjelmaa siirrymme Expression Blendiin. Expression Blend on ammattimaisten suunnittelijoiden kirjoittamisjärjestelmä, jonka avulla rakennetaan käyttäjäkokemuksia, jotka kohdistuvat.NET 3.0 + -alustaan ja erityisesti WPF- tai Windows Presentation Foundation -sovellukseen.

Yleensä Silverlight-ohjaimilla on erillinen logiikka niiden visuaalisesta ulkonäöstä mallien avulla. ControlTemplate määrittää valvonnan visuaalisen rakenteen ja visuaalisen käyttäytymisen. Voit muokata useimpien hallintalaitteiden ulkoasua muuttamalla niiden oletusasetuksia ControlTemplate asetukset. Näin voit muuttaa ohjaimen ulkonäköä muuttamatta sen toimintoja. Voit esimerkiksi tehdä sovelluksen pyöreitä painikkeita sen sijaan, että oletusarvoinen neliön muoto, mutta painike nostaa edelleen Klikkaus tapahtuma.

Tässä opetusohjelmassa avaat Visual Studio -projektin, jonka luotiin edellisessä harjoituksessa Expression Blendissa ja korvattiin ControlTemplate painiketta muuttaa sen ulkoasua. Koska luot a ControlTemplate XAMLissa voit muuttaa ohjaimen ulkonäköä kirjoittamatta mitään koodia.

1. Avaa Microsoft Visual Studio 2010 Express Windows Phone
1. Avaa Microsoft Visual Studio 2010 Express Windows Phone

2. Jos olet suorittanut edellisen harjoituksen vaiheet, voit jatkaa kyseiseen harjoitukseen luotua ratkaisua.

3. Avaa nykyinen ratkaisu Expression Blend -ohjelmassa. Voit tehdä tämän Visual Studio -ohjelmasta napsauttamalla hiiren kakkospainikkeella MainPage.xaml Solution Explorerissa ja valitse sitten Open in Expression Blend. Jos tämä vaihtoehto ei ole käytettävissä- Todennäköisin syy on se, että nykyinen Expression Blend -versiosi ei tue tarvittavaa hanketyyppiä - seuraa seuraavia vaiheita väliaikaisen projektin luomiseksi, jota voit muokata käyttämällä Expression Blend

4. Avaa Microsoft Expression Blend

5. Luo uusi sovellushanke, jolla voit säilyttää mallisuojasi väliaikaisesti. Voit tehdä tämän avaamalla tiedosto valikko ja valitse sitten Uusi projekti

6. Vuonna Uusi projekti valintaikkunassa, valitse Silverlight projektityyppi ja valitse sitten Silverlight 3 -sovellus sapluuna. Aseta nimi kohtaan DesignHelloPhone, valitse sopiva paikka ja pidä kieltä Visual C #, ja napsauta sitten kunnossa.

Image
Image

7. Kaksoisnapsauta Visual Studio -ohjelmaa App.xaml sisään Ratkaisu Explorer avataksesi tämän tiedoston editorissa. Avaa nyt XAML-näkymä ja valitse ja kopioi koko Application.Resources leikepöydälle

8. Avaa Expression Blend uudelleen, laajenna DesignHelloPhone projekti projektit paneeli ja kaksoisnapsauta App.xaml avaa tiedosto

9. Osoita kohtaan Aktiivinen asiakirjanäkymä vuonna näkymä valikosta ja valitse XAML View.

10. Etsi Application.Resources tässä osiossa - sen pitäisi olla tyhjä - ja liitä sen jälkeen leikepöydän sisältö korvaamaan se.

11. Etsi nyt äskettäin lisätty teksti, joka on rajattu kommenttiin ***** LISTBOX / LISTBOXITEM ASENNUS ***** ”; se sisältää tyylit, jotka eivät ole yhteensopivia Silverlight 3 -projektin kanssa. Poista koko osio aloitus- ja loppurajoittimien välillä.

Image
Image

12. Etsi nyt hakemus elementti tiedoston yläosassa ja lisää uusi nimiavaruusilmoitus viittaamaan järjestelmä nimeä mscorlib kokoonpano, kuten alla on esitetty.

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

13. Tallenna nyt muutettu App.xaml in Expression Blend.

14. Avaa sitten Visual Studio uudelleen ja avaa MainPage.xaml tiedosto XAML-näkymässä. Valitse sitten ja kopioi ruudukko nimetty elementti LayoutRoot mukaan lukien lapset leikepöydälle.

15. Palaa Expression Blendiin, avaa MainPage.xaml tiedosto XAML-näkymässä ja liitä leikepöydän sisältö tyhjäksi LayoutRootruudukko elementti tässä tiedostossa.

16 MainPage.xaml tiedosto, etsi juuresta UserControl elementti ja muuttaa arvoja Korkeus määritellä 800 ja Leveys määritellä 480.

17. Palaa Visual Studio -ohjelmaan, napsauta hiiren kakkospainikkeella MainPage.xaml.cs sisään Ratkaisu Explorer ja valitse Katso koodi. Kopioi sitten ClickMeButton_Click tapahtumakäsittelijä leikepöydälle.

18. Palaa lopulta Expression Blendiin, laajenna MainPage.xaml solmu projektit kaksoisnapsauttamalla -kuvaketta MainPage.xaml.cs avataksesi tiedoston editorissa ja liitä koodi leikepöydälle Pääsivu luokka.

Nyt olemme onnistuneesti toistaneet projektimme ilmaisumakeiksi. Jos haluat luoda mukautetun painikkeen mallin, lue seuraava opetusohjelma, joka julkaistaan huomenna.

Suositeltava: