Kezdőlap > .NET, Windows Phone 7 > PageTransition – Windows Phone 7 Toolkit

PageTransition – Windows Phone 7 Toolkit

2012. április 19. csütörtök Hozzászólás Go to comments

Amikor navigálunk két oldal között, semmilyen animációt nem kapunk, tulajdonképpen csak felugrik az új oldal. Viszont ha szeretnénk valamilyen oldalak közötti átmeneti animációt készíteni, akkor bizony vagy mi készítjük el azt, vagy felhasználjuk például a Toolkit adta lehetőségeket. Ennek a lépései a következők:

1. Készítsünk egy új Windows Phone 7 alkalmazást!

2. Adjunk hozzá egy új oldalt (Second.xaml)!

3. A MainPage –re dobjunk fel egy gombot, a Content-je legyen a „Navigáció”, majd kattintsunk kétszer rá, és a klikk eseményében navigáljunk át a Second oldalra!

NavigationService.Navigate(new Uri("/Second.xaml", UriKind.RelativeOrAbsolute));

4. Indítsuk el az alkalmazást, és nézzük meg, hogy amikor rákattintunk a gombra, hirtelen felugrik a másik oldal (Second.xaml), és semmilyen átmenet nincs a két oldal között!

5. A referenciákhoz adjuk hozzá a Microsoft.Phone.Controls.Toolkit assembly-t!

6. Nyissuk meg a MainPage.xaml-t, és az XML névterek közé vegyük fel a toolkit-et!

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

7. A Page element alá adjuk a következő kódsorokat:

<toolkit:TransitionService.NavigationInTransition>

    <toolkit:NavigationInTransition>

        <toolkit:NavigationInTransition.Backward>

            <toolkit:TurnstileTransition Mode="BackwardIn"/>

        </toolkit:NavigationInTransition.Backward>

        <toolkit:NavigationInTransition.Forward>

            <toolkit:TurnstileTransition Mode="ForwardIn"/>

        </toolkit:NavigationInTransition.Forward>

    </toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>

    <toolkit:NavigationOutTransition>

        <toolkit:NavigationOutTransition.Backward>

            <toolkit:TurnstileTransition Mode="BackwardOut"/>

        </toolkit:NavigationOutTransition.Backward>

        <toolkit:NavigationOutTransition.Forward>

            <toolkit:TurnstileTransition Mode="ForwardOut"/>

        </toolkit:NavigationOutTransition.Forward>

    </toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

Ugyanez C# kódban (ritkábban használatos):

NavigationInTransition navInTransition = new NavigationInTransition();

navInTransition.Backward = turnstileTransition;

turnstileTransition.Mode = TurnstileTransitionMode.ForwardIn;

navInTransition.Forward = turnstileTransition;

NavigationOutTransition navOutTransition = new NavigationOutTransition();

turnstileTransition.Mode = TurnstileTransitionMode.BackwardOut;

navOutTransition.Backward = turnstileTransition;

turnstileTransition.Mode = TurnstileTransitionMode.ForwardOut;

navOutTransition.Forward = turnstileTransition;

PhoneApplicationPage phoneApplicationPage = (PhoneApplicationPage)(((PhoneApplicationFrame)Application.Current.RootVisual)).Content;

TransitionService.SetNavigationInTransition(phoneApplicationPage, navInTransition);

TransitionService.SetNavigationOutTransition(phoneApplicationPage, navOutTransition);

8. Egy lépés maradt még hátra. Nyissuk meg az App.Xaml.cs fájlt, és a RootVisual meghatározásánál a RootFrame-et az alábbiak szerint hozzuk létre:

RootFrame = new Microsoft.Phone.Controls.TransitionFrame();

9. Indítsuk el az alkalmazást, és próbáljunk meg elnavigálni, majd vissza a két oldal között!

Észre fogjuk venni, hogy az oldalak közötti navigációnál egy rövid animáció fog végbemenni, és az alkalmazásunk máris dinamikusabbá vált. A példában a Trunstile Transitiont használtuk, ami a Windows Phone 7-en az egyik leggyakrabban használatos animáció, hisz ilyen animáció történik a fő képernyőn is. De ezen kívül használhatjuk még a slide, rotate swivel vagy a roll animációkat is.

Néhány animáció képekben:

image

Kategóriák:.NET, Windows Phone 7 Címke: , , ,
  1. Horváth Károly
    2012. december 11. kedd - 01:02

    Egy kis segítségre lenne szükségem, ha lehetséges.

    Nagyon kezdő vagyok még, de végigcsináltam a leírás alapján az egészet, de vissza gomb nyomásánál nem animál nekem. Ez normális vagy valamit elronthattam?

  2. 2012. december 11. kedd - 09:52

    Szia,

    A fentebbi “transition”-ök akkor játszódnak le ha az adott oldalra navigálsz vagy épp elnavigálsz róla. Ha a másik oldalon is szeretnél átmenetek akkor ezt azon az oldalon is meg kell valósítanod.

    A NavigationInTransition – akkor játszódik le amikor naviágálsz az oldalra. Out amikor elnavigálsz egy oldalról.

    Attila

  3. Horváth Károly
    2012. december 11. kedd - 12:53

    Értem. Köszönöm!

    Panorama page ről egy pivot page-re navigálok, és vissza is. Tehát ha jól értem, akkor annyi a teendőm, hogy a PivotPage1.xaml -be is bele kell szerkesztenem az itt leírt dolgokat?

    Bocsánat a kérdésekért, de tényleg nagyon kezdő vagyok 🙂

  4. 2012. december 11. kedd - 17:34

    Így van.
    Ha az animáció nem tetszik válaszhatsz mást is.
    Ennél a sornál: (IntelliSense majd segíts benne)

  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: