Merhaba. Bu makalemde windows phone'da sayfalar arası geçiş efektlerine göz atacağız. Öncelikle eğer Silverlight for Windows Phone Toolkit'i indirmediyseniz buradan adresinden download'a sunulmuş .msi uzantılı dosyayı kurabilirsiniz. Sonki adım ise yeni bir silverlight for windows phone projesi başlatmak olacaktır.

Proje açıldıktan sonra yapmamız gereken ilk iş sağ taraftaki solution explorer kısmındaki References>Add Reference'a gidip açılan pencereden Microsoft.Phone.Controls.Toolkit'i eklemek olmalıdır. 

Referansımızı ekledikten sonra MainPage.xaml tasarım sayfasını açıp <phone.PhoneApplicationPage kısmının hemen altına kodumuzu yerleştirelim;

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

Yukarıdaki kod ile referans olarak eklediğimiz toolkit'i sayfaya çağırıyoruz. Bu kod sayesinde toolkit nesnelerini ve özelliklerini kullanabiliyoruz.

Bu işlem bittikten sonra ise aşağıda vereceğim kodu sayfanın en altındaki   </phone.PhoneApplicationPage> kısmının hemen üstüne yazalım. Burada dikkatli olmamız gereken nokta kodumuzu herhangi bir grid'in içine yazmamak olacaktır.

    <toolkit:TransitionService.NavigationInTransition><!--Toolkit'in TransitionService'ini sayfanın açılışında çalışması için çağırıyoruz-->

        <toolkit:NavigationInTransition>

            <toolkit:NavigationInTransition.Backward><!--Sayfaya Geri(Back) Fiziksel butonuna basılarak gelindiğinde tetiklenecek kod-->

                <toolkit:TurnstileTransition Mode="BackwardIn"/><!--Animasyon tipi-->

            </toolkit:NavigationInTransition.Backward>

            <toolkit:NavigationInTransition.Forward><!--Sayfa açıldığında çalışacak kod-->

                <toolkit:TurnstileTransition Mode="ForwardIn"/><!--Animasyon tipi-->

            </toolkit:NavigationInTransition.Forward>

        </toolkit:NavigationInTransition>

    </toolkit:TransitionService.NavigationInTransition>

    <!--Buraya kadar olan kod bloğu bulunduğu sayfanın açılışında tetikleniyor-->

    <toolkit:TransitionService.NavigationOutTransition><!--Toolkit'in TransitionService'ini sayfanın kapanışında çalışması için çağırıyoruz-->

        <toolkit:NavigationOutTransition>

            <toolkit:NavigationOutTransition.Backward><!--Sayfadan Geri(Back) butonuna basılarak çıkıldığında çalışacak kod-->

                <toolkit:TurnstileTransition Mode="BackwardOut"/><!--Animasyon Tipi-->

            </toolkit:NavigationOutTransition.Backward>

            <toolkit:NavigationOutTransition.Forward><!--Sayfadan çıkıldığında çalışacak olan kod-->

                <toolkit:TurnstileTransition Mode="ForwardOut"/><!--Animasyon Tipi-->

            </toolkit:NavigationOutTransition.Forward>

        </toolkit:NavigationOutTransition>

    </toolkit:TransitionService.NavigationOutTransition>

Yukarıdaki kodu açıklayacak olursam önce toolkit:TransitionService.NavigationInTransition kodunun içine sayfanın açıldığında gösterilmesi gereken efektleri gösteriyoruz. Sayfamız açıldığında Back fiziksel butonu ile sayfamıza gelinmişse toolkit:NavigationInTransition.Backward içerisine yazdığımız efekt çalışıyor. Eğer sayfamıza Back fiziksel butonunun dışında bir yolla gelinmişse toolkit:NavigationInTransition.Forward içerisindeki yazdığımız tipteki efekt gösteriliyor.

toolkit:TransitionService.NavigationOutTransition bu kod bloğu ise sayfa kapanırken tetikleniyor. Sayfamız Back fiziksel butonuyla kapanırsa toolkit:TurnstileTransition Mode="BackwardOut içerisinde belirttiğimiz efekt, sayfamız Back fiziksel butonu dışında kapanıyorsa ise toolkit:NavigationOutTransition.Forward içerisindeki efekt gösteriliyor.

Kodumuzu yazdıktan sonra ise Solution Explorer penceresinden projemize sağ tıklayıp->Add->New Item'a tıklayıp gelen pencereden yeni bir "Windows Phone Portrait Page" ekleyelim.

Ve yeni projeye yeni eklediğimiz sayfaya yukarıdaki transition kodunu tekrar belirttiğim şekilde ekleyin.

Sayfamızı ekledikten sonra yukarıda belirttiğim işlemler kısmını App.xaml.cs'deki RootFrame = new PhoneApplicationFrame kısmını aşağıdaki kod ile değiştirin. 

RootFrame = new TransitionFrame();

Yukarıdaki kod ile sayfa geçiş özelliğini toolkit'e devrediyoruz.

Ve sonra MainPage.xaml'e bir buton ekleyelim. Üzerinde çift tıklayarak Click event'ine(olayına) gelip şu kodu yazalım;

NavigationService.Navigate(new Uri("/Page1.xaml",UriKind.Relative));

Yukarıdaki kod ile Navigasyon servisini kullanarak /Page1.xaml yoluna gidiyoruz. /Page1.xaml ifadesini siz 2. sayfanızın adına göre değiştirebilirsiniz.

Benim yukarıda verdiğim geçiş kodu gibi bir çok birçok geçiş efektinin kodu bulunmaktadır. Yukarıda verdiğim xaml kodunu düzenleyerek istediğiniz zamanda istediğiniz efektin çalışmasını sağlayabilirsiniz. Ben size geçiş efektlerinin isimlerini aşağıdaki gibi sıralayabilirim;

• RollTransition
• RotateTransition
• SlideTransition
• SwivelTransition
• TurnstileTransition

Projenin kaynak kodlarını buradan indirebilirsiniz.

Umarım faydalı bir makale olmuştur. Sorularınız olursa cevaplandırırım. Görüşmek dileğiyle.