Šī ir 11. apmācība kā daļu no Windows Phone apmācības sērijas. Šajā uzdevumā jūs izveidosiet izklājlapu Expression Blend, lai animētu ikona, kad tiek nospiesta poga.
1. Atveriet aktīvo darbvietu animācijas darbvietā. Iekš Logu izvēlieties, norādiet uz Darba vietas un izvēlieties Animācija. Ņemiet vērā, ka tas pārkārto logus, lai maksimāli palielinātu pieejamo vietu, lai rediģētu laika skalu.
2. Ja nepieciešams, izejiet no pogas vadības veidnes rediģēšanas apgabala. Lai to izdarītu, noklikšķiniet uz Darbības joma poga blakus FancyButton (pogas veidne) elements in Objekti un laika skala lai parādītu lapas elementu koku.
3. Tagad, jo Objekti un laika skala paneļa, noklikšķiniet uz Jauns lai izveidotu izklāsts. Šī poga ir marķēta ar + zīmi un atrodas paneļa augšējā labajā stūrī.
4. In Izveidot izklāsts resursu Dialoglodziņā iestatiet Nosaukums uz AnimateBanner un noklikšķiniet uz labi.
5. Lai izveidotu galvenos kadrus animācijā, noklikšķiniet uz BannerTextBlock elements elementa kokā Objekti un laika skala paneļa, lai to atlasītu.
6. Tagad spiediet un velciet pašreizējā grafika atskaņotāja pozīciju, lai kompensētu 1 otrais
7. Pēc tam pārejiet uz Īpašības panelis, izvērsiet Pārveidot kategorija un izvēlieties Mērogs pārveidot. X īpašuma vērtība ir -1. Šis pārveidojums spoguļo elementu gar horizontālo asi.
9. Tagad mainiet grafika atskaņošanas galdiņu līdz 2 sekundes.
10. Pārslēdzieties uz Īpašības panelis, izvērsiet Pārveidot kategorija un izvēlieties Mērogs pārveidot. Mainīt vērtību X īpašums atpakaļ uz 1 lai atjaunotu elementu sākotnējā stāvoklī. Ņemiet vērā, ka šī maiņa izraisīja otro taustiņu kadru.
11. Lai pārbaudītu animāciju dizainerā, jums jāpievieno kāds teksts reklāmkarim. Vispirms noklikšķiniet uz sarkanā apļa, kas atrodas pa kreisi no AnimateBanner izklājlapas vārdu paneļa augšējā kreisajā stūrī, lai īslaicīgi izslēgtu ierakstīšanu - nevēlaties, lai pievienotais teksts kļūtu par animācijas daļu.
12. Tagad ar peles labo pogu noklikšķiniet uz BannerTextBlock elementu uz dizainera virsmas un izvēlieties Rediģēt tekstu. Ievadiet atbilstošu reklāmkaroga tekstu un nospiediet ENTER.
13. Lai pārbaudītu animāciju, nospiediet Spēlēt pogas virs laika skalas. Norādiet, kā reklāmkaroga teksts horizontāli rotē par tā vidējo asi un kā kustība ir vienāda visā animācijas ciklā.
14. Izvēlieties pirmo atslēgas rāmi, noklikšķinot uz pelēkās apļa ikonas laika skalā. Ievērojiet, ka, izvēloties rāmi, dizainera skats tiek atjaunināts, lai parādītu lietotāja interfeisa elementu stāvokli, jo tie ir redzami šajā rāmī; šajā gadījumā reklāmkaroga teksts ir atspoguļots. Tagad, jo Īpašības panelis, zem Atvieglošana kategorijas, pārliecinieties, ka EasingFunction ir atlasīts, izvērsiet nolaižamo sarakstu, lai parādītu pieejamo funkciju sarakstu, un pēc tam izvēlieties Cubic Out funkcija. Šī konkrētā atvieglošanas funkcija liek pārejai samazināt tā ātrumu, kad tā tuvojas galvenajam rāmim.
15. Iepriekšējā posmā atkārtojiet procedūru, lai konfigurētu otrā taustiņa kadra atvieglošanas funkciju. Šoreiz izvēlies Kubiskais izlikums funkcija, lai pāreja sāktu lēnu ātrumu, pakāpeniski paātrinātu un, visbeidzot, samazinās ātrumu, kad tas tuvojas beigu rāmim.
16. Lai pārbaudītu animācijas funkciju atvieglošanas funkciju efektu, nospiediet Spēlēt virs grafika. Norādiet, kā baneris sāk savu rotāciju ar augstu ātrumu, pēc tam palēnina, jo teksts tiek atspoguļots, pēc tam atkal uzņem ātrumu un beidzot palēnina, lai atgrieztos sākotnējā pozīcijā.
17. Tagad, kad lietotāja interfeisa dizains ir pabeigts, nākamais solis ir kopēt atjaunināto XAML atpakaļ uz galveno projektu.
- Pirmkārt, Expression Blend, noklikšķiniet uz cilnes XAML loga labajā malā vai lodziņā Skats izvēlne
- Norādiet uz Aktīvais dokumentu skatījums un izvēlieties XAML skatsTas ļaus jums redzēt XAML skatu MainPage.xaml dokuments.
- Tālāk izvēlieties un kopējiet saknes bērnus UserControl elementu starpliktuvē. Tas ietver arī UserControl.Resources sadaļa un Režģis elementa nosaukumsLayoutRoot bet ne UserControl pats elements.
18. Tagad programmā Visual Studio atveriet MainPage.xaml dokumentu XAML skatā un aizstāt visu saknes bērna saturu navigācija: PhoneApplicationPage elementu ar tekstu starpliktuvē, nodrošinot, ka saknes elements paliek nemainīgs.
19. Kā pēdējais solis, MainPage.xaml failu, atrodiet UserControl.Resources sāciet un beidziet birkas un aizstājiet tos ar navigācija: PhoneApplicationPage.Resources tagi.
20. Nospiediet CTRL + S lai saglabātu MainPage.xaml fails
21. Līdz šim jūs esat izveidojis baneri tekstu animācijas izklāsts, taču tas vienkārši pastāv kā neizmantots resurss projektā.Lai atskaņotu animāciju, jums ir jāaktivizē izklāsts, atbildot uz notikumu, šajā gadījumā katru reizi, kad Noklikšķiniet uz Manis poga ir nospiesta. Lai atvērtu Klikšķis notikuma apstrādātājs šai pogai:
- Iet uz Dizains skats uz MainPage.xaml fails
- Veiciet dubultklikšķi uz dizaina virsmas pogas, lai atvērtu failu ar kodu
- Novietojiet kursoru uz notikuma apstrādi
22. Lai atjauninātu notikuma apstrādātāju animācijas atskaņošanai, ievietojiet šādu koda fragmentu "treknrakstā" vietā tieši pirms beigām.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
