Windows Phone 7 de Sayfa Oryantasyonu ve Sayfa Navigasyonu

Merhaba, bu makalemizde şu ana kadar incelemiş olduğumuz windows phone konularından, biraz daha başlangıç seviyesi konulara geri dönerek atlamış olduğumuz ve oldukça önemli olan sayfa oryantasyonu ve sayfa navigasyonu konularını  incelemeye çalışacağız. 

Mobil cihaz ekranlarının doğası gereği küçük olması zaman içerisinde bu cihazların tercih edilmesinin önüne geçmemiş, tam tersine oryantasyon düzeyleri ve hareket kabiliyetleri zaman içerisinde daha da geliştirilerek çok daha fazla tercih edilir noktalara taşınmaya başlamıştır. Özellikle bu gelişimi Windows Phone 7 ile çok daha net hissetmeye başlayacağız.

Windows Phone 7 için geliştirilmiş veya geliştirilmesi planlanan uygulmaları düşünecek olursak tabiiki daha çok bilgilerin listelenmesi gibi bir işleve sahip olan, portrait (düşey) ekran kullanılmaktadır. Fakat yatay düzlemde çok daha iyi görüntülenecek bir veri için telefonumuzu landscape-left (yatayda-sola) veya landscape-right (yatayda-sağa) taraflarına doğru çevirmemiz uygulama içerisinde de dinamik bir şekilde değişim gösterecektir. 

Aşağıdaki resimlerde Portrait, Landscape-Left, Landscape-Right sayfa oryantasyonlarını görmekteyiz. (Emulatör ile portrait-down elde edilememektedir.)

Windows Phone 7 için bir uygulama geliştirirken, kullanıcının uygulamamızdaki sayfayı hangi oryantasyton ile kullanacağını bilmek bizim için oldukça önemli olacaktır. Bir PhoneApplicationPage sınıfının Orientation özelliğini kullanarak sayfamızdaki oryantasyonu yakalamamız mümkün. Aşağıdaki kod satırlarını kullanarak phone uygulamamızdan oryantasyon değişimlerini kolaylıkla elde edebiliriz.

(İlk uygulamamızı geliştirmeye başlarken Visual Studio 2010 / File / New / Project / Silverlight For Windows Phone / Windows Phone Application Template ile projemizi ekleyebiliriz.)

Constractor içerisinde sayfamızın SupportedOrientations özelliğini set edip, OrientationChanged event'ı ekliyoruz. "oryantasyon" isimli değişkenimizi switch kod snippet kullanarak oluşturduğumuzda aşağıdaki gibi 

enumarasyon değerlerinin case seçeneklerini oluşturduğunu göreceğiz.

C#

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        this.SupportedOrientations = SupportedPageOrientation.Portrait |
                                     SupportedPageOrientation.Landscape;
        this.OrientationChanged += MainPage_OrientationChanged;
    }
 
    void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
    {
        var oryantasyon = this.Orientation;
        switch (oryantasyon)
        {
            case PageOrientation.Landscape:
            case PageOrientation.LandscapeLeft:
            case PageOrientation.LandscapeRight:
                MessageBox.Show("Landscape Orientation");
                break;
            case PageOrientation.None:
                break;
            case PageOrientation.Portrait:
            case PageOrientation.PortraitDown:
            case PageOrientation.PortraitUp:
                MessageBox.Show("Portrait Orientation");
                break;
        }
    }
}

Eğer sayfamızda sabit bir oryantasyon kullanılmasının daha uygun olacağını düşünüyorsak, aşağıdaki gibi sayfamızın SupportedOrientations özelliğini xaml kodlarıyla da set etmemiz yeterli olacaktır ve SupportedOrientations özelliğini oryantasyon desteğinin olmasını istediğimiz her sayfa için belirlememiz gerekiyor.

Sayfamıza farklı oryantasyon destekleri verdikten sonra, sayfa üzerinde yer alacak nesnelerin de bu değişimlere göre konumlanması isteyeceğiz. Aksi durumda nesnelerimizin sayfanın dışına taşması, kullanıcının nesneyi görememesi gibi durumlarla karşılaşabiliriz. Aşağıdaki örneğimizde Layout kullanarak butonları yerleştireceğiz. 5 adet farklı button nesnemizin her birini ekranımızın farklı yerine koyarak Horizontal ve Vertical Layout özelliklerini belirleyelim.

XAML

<phone:PhoneApplicationPage 
...

SupportedOrientations="PortraitOrLandscape">
 

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button Name="btn1"
             Content="Sol Üst" 
             Height="72" Width="170" 
             HorizontalAlignment="Left"  
             VerticalAlignment="Top" 
             Margin="5" />
     <Button Name="btn2"
             Content="Sağ Üst" 
             Height="72" Width="170" 
             HorizontalAlignment="Right"  
             VerticalAlignment="Top" 
             Margin="5" />
     <Button Name="btn3"
             Content="Sol Alt" 
             Height="72" Width="170" 
             HorizontalAlignment="Left"  
             VerticalAlignment="Bottom" 
             Margin="5" />
     <Button Name="btn4"
             Content="Sağ Alt" 
             Height="72" Width="170" 
             HorizontalAlignment="Right"  
             VerticalAlignment="Bottom" 
             Margin="5" />
     <Button Name="btn5"
             Content="Merkez" 
             Height="72" Width="170"/>
 </Grid>

F5 ile Emulatör üzerinden uygulamamızı çalıştırdığımızda aşağıdaki ekran görnüntülerini elde edeceğiz. (Oryantasyon değişimi için emulatörün sağ yan kısmında bulunan butonları kullanabiliriz.)

Yukarıdaki buttonlar için düzenlediğimiz yöntem ile oryantasyon değişimine karşı önlem almış olduk, fakat bu seferde üst ve alt button nesnelerinin birbirine yaklaştığını görüyoruz. Böylesi bir sayfa da ihtiyacımızı karşılamayacaksa sayfa için ScrollViewer tekniğini kullanabiliriz. ScrollViewer nesnesinin içerisine 

ContentPanel isimli grid nesnemizi yerleştirelim. Bu yerleşim planının önemli bir noktası grid nesnesine vereceğimiz Height="800" özelliği olacak. ScrollViewer da kullanarak XAML kodlarımızı aşağıdaki gibi hazırlayalım.

XAML

<Grid x:Name="LayoutRoot" Background="Transparent">
   <ScrollViewer HorizontalAlignment="Stretch" 
                 VerticalAlignment="Stretch"
                 VerticalScrollBarVisibility="Auto" >
       <Grid x:Name="ContentPanel" Height="800">
           <Button Name="btn1"
               Content="Sol Üst" 
               Height="72" Width="170" 
               HorizontalAlignment="Left"  
               VerticalAlignment="Top" 
               Margin="5" />
           <Button Name="btn2"
               Content="Sağ Üst" 
               Height="72" Width="170" 
               HorizontalAlignment="Right"  
               VerticalAlignment="Top" 
               Margin="5" />
           <Button Name="btn3"
               Content="Sol Alt" 
               Height="72" Width="170" 
               HorizontalAlignment="Left"  
               VerticalAlignment="Bottom" 
               Margin="5" />
           <Button Name="btn4"
               Content="Sağ Alt" 
               Height="72" Width="170" 
               HorizontalAlignment="Right"  
               VerticalAlignment="Bottom" 
               Margin="5" />
           <Button Name="btn5"
               Content="Merkez" 
               Height="72" Width="170"/>
       </Grid>
   </ScrollViewer>
</Grid>

XAML kodlarımızda yaptığımız düzenlemeden sonra tekrar F5 ile uygulamamızı çalıştırdığımızda aşağıdaki ekran görüntüleri ile karşılaşacağız. Dikkat edecek olursak ScrollViewer nesnemizin VerticalScrollBarVisibility özelliğini Auto olarak ayarlıyoruz. Bu kullanım yöntemi ile de oryantasyon değişiminde dikey düzlemde sayfa üzerinde parmakla kaydırarak kullanarak, ekran üzerindeki nesnelerimi kaybetmeden ve sıkışık bir görüntü oluşturmadan kullanabiliriz.

ContentPanel isimli Grid nesnesinin Height özelliği 800 olarak belirlendiği için Landscape konumdayken sayfa üzerinde aşağıya ve yukarıya doğru gezinebilme olanağı yakalamış oluyoruz.Sayfa oryantasyonları ile ilgili önemli noktaları belirledikten sonra, şimdi de sayfalar arasındaki geçişleri incelemeye başlayalım;

Sayfa Navigasyonu

Şimdiye kadar örneklerimizi tek bir sayfa üzerinden gerçekleştirdik. Uygulamamız içerisinde tabiki bir den fazla sayfaya ihtiyaç duyabiliriz. Daha önceki bir makalemizde de Panorama ve Pivot Control' e değinmiştik (Windows Phone'da Panorama ve Pivot Control : http://www.yazgelistir.com/Makaleler/1000002595.ygpx) Panorama veya Pivot control kullanımı ile hızlı görüntü geçişleri elde etmiştik. Farklı sayfalara da kolaylıkla erişebiliriz.

Yukarıdaki, köşelere eklediğimiz buton nesneli örneğimizi silmeden projemize SecondPage.xaml isimli bir sayfa daha ekleyelim. Bu butonların Click event'ı üzerinden farklı navigasyon yöntemleriyle ikinci sayfayı 

görüntülemeye çalışacağız.

C# (MainPage)

private void btn1_Click(object sender, RoutedEventArgs e){
    var frame = Application.Current.RootVisual as PhoneApplicationFrame;
    frame.Source = new Uri("/SecondPage.xaml",UriKind.Relative);
}
 
private void btn2_Click(object sender, RoutedEventArgs e){
   var frame = Application.Current.RootVisual as PhoneApplicationFrame;
   frame.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}
 
private void btn3_Click(object sender, RoutedEventArgs e){
   this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}

Peki bu ana sayfadan ayrılmadan önce kullanıcının eksik bırakmış olduğu bir takım verilerin olduğunu varsayarsak, bu durumda kullanıcıdan onay alarak diğer sayfaya geçiş yapabiliriz.


C# (MainPage)

protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
{
    if (MessageBox.Show("Sayfadan ayrılmak istiyor musunuz?", "Onay", 
        MessageBoxButton.OKCancel) != MessageBoxResult.OK)
    {
        e.Cancel = true;
    }
    base.OnNavigatingFrom(e);
}

Eğer sayfalar arasındaki navigasyon geçişlerini izlemek isterseniz, App sınıfı constractor içerisine aşağıdaki kod satırlarını ekleyerek debug da iken bunu da sağlayabilirsiniz.

C# (App)

public App()
{
    UnhandledException += Application_UnhandledException;
    if (System.Diagnostics.Debugger.IsAttached)
    {
        Application.Current.Host.Settings.EnableFrameRateCounter = true;
    }
    InitializeComponent();
    InitializePhoneApplication();
 
    RootFrame.Navigating += App_Navigating;
}
 
void App_Navigating(object sender, NavigatingCancelEventArgs e){
    Debug.WriteLine("Navigating to " + e.Uri);
}

Sayfalar arasında veri transfer edebilmek için de 2 farklı yöntemi ele alacağız. Bunlardan ilki FragmentNavigation.  Bir sayfadan diğerini navigate ederken # işareti ile aşağıdaki kod satırlarında olduğu gibi veriyi de eklemek. btn1 isimli buton nesnemizin Click event'ını değiştirerek aşağıdaki gibi yazalım. MainPage'den SecondPage'e  "Merhaba Dünya :)" verisini gönderelim.

C# (MainPage)

private void btn1_Click(object sender, RoutedEventArgs e){
    this.NavigationService.Navigate(new Uri("/SecondPage.xaml#Merhaba Dünya :)",
                                    UriKind.Relative));
}

C# (SeconPage)

public partial class SecondPage : PhoneApplicationPage
{
    public SecondPage()
    {
        InitializeComponent();
    }
 
    protected override void OnFragmentNavigation(FragmentNavigationEventArgs e)
    {
        base.OnFragmentNavigation(e);
        MessageBox.Show("Fragment : " + e.Fragment);
    }
}

F5 ile uygulamamızı başlatalım. Bir taraftan Output penceresinden de navigate ettiğimiz bilgileri de göreceğiz.

Sayfalar arasın veri transferindeki ikinci yöntemimiz ise QueryString yöntemi. Bu yöntemde de navigate ettiğimiz sayfanın sonuna ? ekleyerek değerlerimizi & işaretcisi ile ayırarak yazmak. Aşağıdaki örnekte MainPage'den SecondPage sayfasına MusteriID ve UrunKodu değerlerini göndereceğiz.

C# (MainPage)

private void btn1_Click(object sender, RoutedEventArgs e){
    this.NavigationService.Navigate(
        new Uri("/SecondPage.xaml?MusteriID=15 & UrunKodu=77",UriKind.Relative));
}

C# (SecondPage)

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    StringBuilder sb = new StringBuilder();
    foreach (var item in NavigationContext.QueryString)
    {
        sb.AppendLine("Query String Key: " + item.Key + "  Value: " + item.Value);
    }
    MessageBox.Show(sb.ToString());
}

Tekrar F5 ile emulatör üzerinden sayfa navigasyonumuzu QueryString olarak NavigationContent nesnesi içerisinden çekerek makalemizi sonlandıralım.


Bu makalemizde sayfa yapıları, sayfalar arası geçişler/navigasyon konularına değindik. Dilerim faydalı bir yazı olmuştur.

Bir sonraki makalemizde görüşmek üzere...
Kolay gelsin.
gokhanmanduz.blogspot.com

Yaz geliştir de ayın makalesi..

Yazgeliştir ekibi WP7' de touch ve multi-touch inputs konulu makalemi ayın makalesi seçmiş.. Yaz geliştir ekibine teşekkür ediyorum... http://bit.ly/i170dB

Yaz Geliştir Forumları Yenilendi.

Yaz Geliştir Forum sayfaları yenilendi. Ziyaret etmek için tıklayınız !                               

Windows Phone Development: For update supported country list

Windows Phone Developer Account için gelen sorular üzerine aşağıdaki linki veriyorum, listeden Türkiye' nin olup olmadığı kontrol edilebilir. Bir süre daha beklememiz gerekiyor..
App Hub
https://users.create.msdn.com/Register

Windows Phone 7 Media Element

Windows Phone, ses ve görüntü dosyalarını oynatabilmek için de oldukça başarılı bir ortam sunmaktadır. Kullanımı kolay ve gelişmiş Silverlight mediaelement nesnesi ile phone uygulamalarımıza güçlü media özellikleri kazandırabiliriz. Bu makalemizde yeni bir Windows Phone 7 uygulaması oluşturarak, örneklerle mediaelement komponentini inceleyeceğiz.

Mediaelement komponenti ile, oynatacağımız .mp3 veya .wav uzantılı dosyaları projemize ekleyerek, ya da uzak bir sunucuda yayınlanan bir media kaynağına erişim sağlayarak da bu dosyaları oynatabiliriz. Uzak sunucuda yer alan media dosyasının Uri adresini mediaelement' in Source Property 'sine bağlamamız bunun için yeterli olacaktır. Eğer uzak sunucudaki bir dosyaya erişmek yerine bu dosyaları projemize eklemek istiyorsak, bu dosyaların BuildAction özelliğinin "Content" ve CopyToOutput özelliğinin de "Copy Always" 

olmasına dikkat edelim.

Dikkat edilmesi gereken önemli bir nokta da windows phone için hangi codec bileşenlerinin desteklendiğidir. Örneğimize başlamadan önce, desteklenen windows phone media codec listesini buradan (Supported 

Media Codecs for Windows Phone)  inceleyebilirsiniz.

Projemize content olarak ekleyeceğimiz bir mp3 dosyasını oynatarak örneğimize başlayalım. Tabii her zamanki gibi ilk iş olarak Visual Studio / File / New / Project / Visual C# / Silverlight For Windows Phone template'i seçip, yeni bir Windows Phone projesi oluşturalım. Toolbox penceresinden mediaelement ' i tutup sürükleyerek default olarak oluşturulmuş olan MainPage.xaml sayfamızın üzerine bırakalım.

Bilgisayarımda hazır bulunan örnek müziklerimden Sleep Away.mp3 dosyasını da projeme content olarak ekliyorum. Copy To Output Directory özelliğini Always True olarak seçiyorum. AutoPlay="True"  olarak 

seçip, ilk açılışta otomatik olarak mp3 dosyasının çalınmasını sağlayacağım.

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="2,0,2,0">
     <MediaElement x:Name="myMediaElement" Margin="10" 
                   Source="/Sleep Away.mp3" AutoPlay="True"/>
</Grid>

Benzer bir şekilde, yukarıdaki mediaelement nesnesinin Source özelliğine uzak bir sunucuda yer alan dosyanın Uri adresini set edeceğim. Test amacıyla uzak sunucu olarak kendi bilgisayarımda bulunan iis dizini altına 

(inetpub/wwwroot) mymuzik isminde bir klasör oluşturup Kalimba.mp3 isimli dosyamı buraya kopyalıyorum. Bu yöntem ile media dosyalarının direk olarak IIS' den yayınlanması tabiki doğru bir çözüm değildir. Sağlıklı bir çözüm için Windows Media Services veya IIS Smooth Streaming yöntemleri kullanılabilir. Eğer 

Windows Media Sevis'i kurmak istiyorsak, http://daron.yondem.com/tr/PermaLink.aspx?guid=c44b96e8-e240-4ede-8c1f-7bdc000da97f linkinde yer alan makaleyi de inceleyebilirsiniz. (Ayrıca iis smoot streaming incelemek isteyenler http://www.iis.net/download/SmoothStreaming adresini ziyaret edebilirler.) Bu makalemizin konusu media dosyalarının yayınlanması olmadığı için kaldığımız yerden devam edelim.

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="2,0,2,0">
    <MediaElement x:Name="myMediaElement" Margin="10" 
                  Source="http://localhost/mymuzik/Kalimba.mp3" 
                  AutoPlay="True"/>
</Grid>

MediaElement nesnesinin Source özelliğini direk olarak set ettiğimiz için ilgili media dosyasının yüklenmesi belirli bir zaman alabilir. Ya da oynatacağımız dosya içinde oluşmuş bozulmalardan kaynaklı yavaşlamaları 

engellemek için de öncelikle dosyayı telefonumuzun isolated storage alanına indirerek oynatmayı da deneyebiliriz. (Windows Phone Isolated Storage konusunuda ayrıca bir makalede inceleyebiliriz.) Isolated Storage alanı, adından da anlaşılacağı üzere uygulamamız tarafından kullanabileceğimiz, diğer uygulamalardan yalıtılmış bir yazma ve yazdıklarımızı okuma alnıdır. Uygulamamız için özel olarak tahsis edilmiş bir bellek alanıdır. Şimdi WebClient nesnesi ile uzak sunucumuzdaki Kalimba.mp3 dosyamıza okuma çağrısında bulunalım ve sonucu asenkron olarak elde edelim. Elde edeceğimiz result değeri Stream tipinde olacaktır. Gelen stream değerini bir döngü içerisinde öncelikle isolated storage alanına yazdıktan sonra mediaelement' 

imizin SetSource özelliğini kullanarak oynatalım.

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="2,0,2,0">
    <MediaElement x:Name="myMediaElement" Margin="10" />
</Grid>

C#

public MainPage() {
  InitializeComponent();
  Loaded += MainPage_Loaded;
}
 
void MainPage_Loaded(object sender, RoutedEventArgs e) {
  WebClient web = new WebClient();
  web.OpenReadCompleted += web_OpenReadCompleted;
  Uri myAddress = new Uri("http://localhost/mymuzik/Kalimba.mp3");
  web.OpenReadAsync(myAddress);
}
 
void web_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) {
  if (e.Error == null) {
    using (var s = e.Result) {
      using (var isolatedFile = new IsolatedStorageFileStream("Kalimba.mp3",
      FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication())) {
        int i;
        var buffer = new byte[10000];
        while ((i = s.Read(buffer, 0, buffer.Length)) > 0) {
          isolatedFile.Write(buffer, 0, i);
        }
        isolatedFile.Seek(0, SeekOrigin.Begin);
        this.myMediaElement.SetSource(isolatedFile);
      }
    }
  }
}

Şimdi de yukarıdaki örneğimizden farklı olarak, uzak bir sunucu da bulunan örnek bir videoyu oynatarak medielement nesnemizin özelliklerini tanımaya çalışalım. Xaml kodlarımızı aşağıdaki gibi hazırlayalım. 

MediaElement'in Source'una Uri adresini C# kodu ile set edeceğiz. 

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <MediaElement 
            Height="423" 
            Width="438"
            Margin="5" 
            Name="myMediaElement" 
            VerticalAlignment="Top"
            AutoPlay="True"/>
        <TextBlock 
            Height="34" 
            HorizontalAlignment="Left" 
            Margin="12,476,0,0" 
            Name="txtState" 
            Text="" 
            VerticalAlignment="Top" 
            Width="152" FontSize="24" />
        <TextBlock 
            Height="34" 
            HorizontalAlignment="Left" 
            Margin="175,476,0,0" 
            Name="txtPercentage" 
            Text="" 
            VerticalAlignment="Top" 
            Width="90" FontSize="24" />
    </Grid>
</Grid>

Videomuz otomatik olarak öncelikle telefonumuzun belleğine alınacaktır. Playing (Oynatma) başlamadan önce, buffering (arabelleğe alma) için gereken süreyi de dilersek belirtebiliriz. Bunun için mediaelement' in BufferingTime özelliğine TimeStamp türünde değer atanabilir. 

Şimdi C# ile uzuk sunucudaki video ile bağlantı kurarak, media element nesnemizde oluşacak state'leri (opening, buffering, playing), buffering olan miktarı ekranımıza yazdıralım.

C#

public MainPage()
{
    InitializeComponent();
    Loaded += MainPage_Loaded;
}
 
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    myMediaElement.CurrentStateChanged +=
      myMediaElement_CurrentStateChanged;
    myMediaElement.BufferingProgressChanged +=
      myMediaElement_BufferingProgressChanged;
    myMediaElement.Source =
      new Uri("http://mschannel9.vo.msecnd.net/o9/mix/09/wmv/key01.wmv");
}
 
void myMediaElement_BufferingProgressChanged(object sender, RoutedEventArgs e)
{
    double percent = myMediaElement.BufferingProgress;
    string str = percent == 1d ? "Ok." : string.Format("{0:P}", percent);
    txtPercentage.Text = str;
}
 
void myMediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)
{
    txtState.Text = myMediaElement.CurrentState.ToString();
}

F5 ile emulatör üzerinden uygulamamızı başlatalım, txtState TextBlock üzerinde o an ki durumu, txtPercentage TextBlock üzerinde ise yüzde olarak ne kadarlık buffer miktarının tamamlandığını göreceğiz.

Buffering tamamlandıktan sonra video'nun oynamaya başladığını ve txtState TextBlock nesnesine "Playing", txtPercentage üzerine ise "Ok." yazılacağını göreceğiz. Media Element komponentimizin genel olarak ne tür de özelliklere ve methodlara sahip olduğunu bir tablo üzerinden inceleyerek makalemizi sonlandıralım.

Property (Özellik)	Açıklama
Source	Oynatılacak media dosyasının Uri adresidir.
Volume	Oynayan dosyanın ses düzeyini belirlemek için kullanılır. Default olarak 0.5'dir (Orta seviye).
Position	TimeStamp türü ile oynayan media dosyasının zaman çizelgesinde, hangi pozisyonda olduğu bilgisidir. Dilersek Position değerini set ederek, istediğimiz pozisyondan başlatabiliriz.
NaturalDuration	TimeSpan türünde oynayan dosyanın ne kadar uzunlukta olduğunu belirtir.
IsMuted	İstenirse oynayan dosya sessiz duruma getirilebilir. O an ki ses durumu da (kapalı/açık) elde edilebilir.
DownloadProgress	Yüzdelik olarak ne kadar download edildiği bilgisini tutar.
CanPause	Oynayan media'nın pause olup, olamayacağı bilgisini verir. ReadOnly'dir.
CanSeek	Position değerine müdahale edilip edilemeyeceği bilgisini döner.
Methods
Pause	Eğer CanPause property true ise Pause methodu ile media durdurulur. Pause durumunda oynayan son film karesi görüntülenecektir.
Play	Media dosyasını oynatır. Eğer durum stop veya pause ise tekrar oynamaya başlayacaktır.
Stop	Oynayan media dosyası durdurulacaktır. Bu durumda ilk film karesi ekranda gösterilecektir.
SetSource	Stream bir değeri parametre olarak set edebiliriz. Yukarıdaki örneğimizde de yaptığımız gibi Isolated Storage alanına depolanmış bir media' yı oynatmak için oldukça kullanışlıdır.

Bir sonraki makalemizde görüşmek üzere.
Kolay gelsin.

Windows Phone 7 de Touch, Multi-Touch Inputs (Dokunmatik-Girişler)

Teknolojik bir gelişme ya da buluş, bereberinde çok farklı alanların da gelişmesinin tetikleyicisi olmuştur. Bu gelişme, özellikle insan duyu organları ile daha çok hissedilebilir türden bir gelişme ise son kullanıcılar tarafından yaygınlaşması ve popüleritesi de o oranda çok olmaktadır. Son yıllarda touch screen (dokunmatik ekran) ya da özellikle multi-touch screen 'in (çoklu-dokunmatik ekran) gelişmesi ile birlikte telefon dünyasına da bu özelliklerin hızla girdiğini ve bu tür özellikleri destekleyen uygulamaların da gün geçtikçe çoğaldığını gözlemlemekteyiz. Bu makalemizde bir Windows Phone 7 uygulaması ile touch ve multi-touch ekran özelliklerini incelemeye çalışacağız. Öncelikle hangi tür touch ve multi-touch özelliklerin kullanıldığına göz atalım. (Bu özelliklere literatürde geçtiği gibi Gestures (el hareketleri) olarak adlandıracağız.)

Tap Gesture
Kullanıcının ekrana dokunması ve hemen elini çekmesiyle elde edilir. Ekran üzerindeki pek çok kontrol bu event ile çalışmaktadır. Mouse ile sıkça kullandığımız click event'ıyla aynı özelliktedir. Kullanıcı tarafından
bilinen en temel dokunma türüdür.

Double-Tap Gesture
Çok kısa bir zaman dilimi içerisinde Tap gesture'ın tekrar etmesi ile elde edilen harekettir. Çoğu zaman bu gesture da kullanılmaktadır. Ard arda hızlıca iki kez dokunma da diyebiliriz. 2 dokuma arası yaklaşık olarak 1sn veya daha az bir süre olmalıdır.

Pan Gesture
Ekrana parmağımızı koyup parmağın hareket ettirilmesi ile sağlanan harekettir. Örneğin bir resmin touch screen üzerindeki hareketi/yer değiştirmesi bu event'ın yakalanması ile sağlanabilir. Ya da windows phone giriş ekranında bulunan bir tile, öncelikle seçilir daha sonra da pan gesture ile yeri değiştirilebilir. Desktop
uygulamalarında mouse ile kullandığımız Drag and Drop ile benzer işlevdedirler.

Flick Gesture
Parmağımızı touch-screen üzerinde belirli bir yönde hızlıca hareket ettirerek elde edilen harekettir. Örneğin bir Windows Phone list kontrol üzerinde parmağımızı aşağı veya yukarı yönde hareket ettirdiğimizde list box item'ların da o yönde hareket ettiğini hatta parmağımızı çektiğimizde bir süre daha list box item'ların o yönde hareket ettiğini görebiliriz.

Tap and Hold Gesture
Kullanıcı ekrana dokunur, aynı noktada belirli bir süre parmağını bekletir, bir süre sonra bir context menünü açılır. Windows Mobile işletim sistemli cihazlardan da anımsayacağımız gibi bu event mouse sağ click event'ı elde etmek için kullanılır.

Multi-Touch Gesture (Pinch and Stretch)
Kullanıcının ekranın birden fazla yerine aynı anda dokunarak elde ettiği harekettir. Örneğin yaygın olarak kullanımı bir içeriği veya resmi zoom-in veya zoom-out yapmak için kullanılır.

Windows Phone 7 Developer Tools ile Gestures yakalayabilmenin oldukça kolay olduğunu birazdan örnek kodlarla inceleyeceğiz. Şimdi örneklerle en temel gesture'dan başlayarak incelemeye başlayalım.

Tap Gesture Örneği
Windows Phone Developer Tools ile birlikte gelen component'lerin tümünde click event'ı yer almadığı için bu örneğimizde click event'ı olmayan bir component üzerinden kendi TapEvent'ımızı oluşturacağız. Tabiki bu component için mouse-down ve mouse-up gibi eventlardan faydalanacağız. İlk örneğimizi geliştirmeye başlayalım. Şimdi Visual Studio / File / New Project / Silverlight for Windows Phone / Windows Phone Application seçerek phone projemizi oluşturalım. Default olarak gelen MainPage.xaml içeriğini aşağıdaki gibi
oluşturalım. Örnek nesne olarak bir button ve bir de border nesnelerini kullanacağız.Button nesnesi kendi içerisinde click event'a sahip durumda fakat border için custom bir sınıf oluşturacağız. Bu sınıfı daha sonra yalnızca border nesnesi ile değil dilediğimiz kontrol'e bir Behavior olarak ekleyebilir olacağız.
Sınıfımızı TapAction olarak isimlendirelim ve base sınıf olarak Behavior jenerik sınıfından türetelim. Jenerik tip olarak tabiki UIElement kullanacağız.

Dikkat etmemiz gereken önemli bir nokta da Behavior base sınıfını kullanabilmek için referans olarak eklememiz gereken System.Windows.Interactivity.dll dir.

C#
public class TapAction : Behavior<UIElement>

{
    public event EventHandler Tap;
    protected bool MouseDown { get; set; }
 
    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.MouseLeftButtonDown +=AssociatedObject_MouseLeftButtonDown;
        this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
    }
 
    protected override void OnDetaching()
    {
        this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
        this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
        base.OnDetaching();
    }
 
    private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        MouseDown = true;
    }

    private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (MouseDown)
        {
            OnTap();
        }
        MouseDown = false;
    }
 
    protected virtual void OnTap()
    {
        if (Tap != null)
        {
            Tap(this.AssociatedObject, EventArgs.Empty);
        }
    }
}

Yukarıdaki kod satırlarını inceleyecek olursak base sınıfımızın OnAttached methodunu override ederek mouse-down ve mouse-up event handler'larını ekliyoruz. Tap isimli event'ımız da mouse-down olduğunda tetiklenecektir. TapAction sınıfımızı oluşturduktan sonra MainPage.xaml içerisine nesnelerimizi ve ilişkili
olacakları behavior tanımlamalarını ekleyelim.

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Border x:Name="border_1" 
          BorderBrush="#FFF5C013" BorderThickness="10" 
          HorizontalAlignment="Left" VerticalAlignment="Top"
          Margin="39,42,0,0" Height="111" Width="142">
                <i:Interaction.Behaviors>
                   <local:TapAction x:Name="myTapAction" Tap="myTapAction_Tap"/>
                </i:Interaction.Behaviors>
        </Border>
        <Button Name="button_1" 
                    Content="Button" 
                    Height="72" 
                    HorizontalAlignment="Left" 
                    Margin="235,63,0,0"  VerticalAlignment="Top" Width="160" Click="button_1_Click" />
        </Grid>

Yukarıdaki xaml kodlarına dikkat edecek olursak button nesnesinin Click event'ı Border nesnesinin ise kodsal olarak oluşturduğumuz Tap event'ı kullanılacak. TapAction behavior'ı da Expression Blend tarafına geçerek de ekleyebiliriz.

MainPage.cs içerisinde myTapAction_Tap ve button_1_Click event handler içerisine örnek messagebox görüntüleyecek kod satırlarımızı da ekledikten sonra F5 ile uygulamamızı çalıştırarak sonuçlara birlikte göz atabiliriz.

C#
public partial class MainPage : PhoneApplicationPage

{
    public MainPage()
    {
        InitializeComponent();
    }
    private void button_1_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Tap Event Button üzerinden gerçekleşti.");
    }
 
    private void myTapAction_Tap(object sender, EventArgs e)
    {
        MessageBox.Show("Tap Event Border üzerinden gerçekleşti.");
    }
}

Double-Tap Gesture Örneği
Yukarıda kullandığımız örneğe benzer şekilde DoubleTapAction sınıfını da TapAction sınıfından miras alarak kolaylıkla yazabiliriz. Double-Tap Action yazarken 2 Tap arasında geçen kısa zaman dilimi (1 sn) kontrol edilerek geliştirilmelidir. 2 tap arasındaki sürenin 1 sn olduğunu kontrol edebilmek için öncelikle 1. Tap Action gerçekleştiğinde ne zaman gerçekleştiğini bir değişken de tutarak eğer yeni bir Tap Action gerçekleşir ise değişken de tutuğumuz zaman ile karşılaştırıp 1sn'den küçük ise DoubleTap event'ı oluşturabiliriz.

C#
public class DoubleTapAction : TapAction

{
    public event EventHandler DoubleTapEvent;
    protected DateTime? FirstTapTimeValue { get; set; }
    public int DoubleTapTimeoutInMilliseconds
    {
        get { return (int)GetValue(DoubleTapTimeoutInMillisecondsProperty); }
        set { SetValue(DoubleTapTimeoutInMillisecondsProperty, value); }
    }
    public static readonly DependencyProperty
    DoubleTapTimeoutInMillisecondsProperty = DependencyProperty.Register("DoubleTapTimeoutInMilliseconds", typeof(int),typeof(DoubleTapAction),new PropertyMetadata(1000));
    protected override void OnTap()
    {
        base.OnTap();
        if (FirstTapTimeValue.HasValue && FirstTapTimeValue.Value.AddMilliseconds(DoubleTapTimeoutInMilliseconds) > DateTime.Now)
        {
            OnDoubleTap();
            FirstTapTimeValue = null;
        }
        else
        {
            FirstTapTimeValue = DateTime.Now;
        }
    }
    protected virtual void OnDoubleTap()
    {
        if (DoubleTapEvent != null)
        {
            DoubleTapEvent(this.AssociatedObject, EventArgs.Empty);
        }
    }
}

Pan, Flick, TouchAndHold Gestures Örnekleri (Silverlight for Windows Phone Toolkit ile)


Şimdiye kadar örneklendirdiğimiz Tap ve DoubleTap'den farklı olarak Pan, Flick ve Hold Gesture' ları yakalayabilmek içim daha fazla kod ve sınıf eklemeden Silververlight for Windows Phone Toolkit' den faydalanacağız. Bu Toolkit indirilip kurulduktan sonra Gestures ile ilgili örnek kaynak kodlara da erişilebilir. İlgili Toolkit'i indirmek için http://silverlight.codeplex.com/ adresinden download silverlight on WP7 tıklanarak erişilebilir.

Silverlight on Windows Phone Toolkit kurulumu tamamlandıktan sonra projemize ilgili dll referansını da eklemeyi unutmayalım.

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

XML namespace bölümüne yukarıdaki xaml kod satırında olduğu gibi toolkit olarak isimlendirdiğimiz namespace'i ekliyoruz. Toolkit Controls altında bulunan GestureListener isimli sınıfdan faydalanacağız.
Şimdi MainPage.xaml içerisine bir Canvas kontrol ekleyerek Pan, Flick ve Hold event' ları yakalamaya çalışalım.

XAML
<Canvas Background="Aqua"

        Height="124" 
        HorizontalAlignment="Left" 
        Margin="76,256,0,0" 
        Name="canvas1" 
        VerticalAlignment="Top" 
        Width="218">
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener DragDelta="GestureListener_DragDelta"
                                 Flick="GestureListener_Flick"
                                 Hold="GestureListener_Hold" 
                                  />
    </toolkit:GestureService.GestureListener>
</Canvas>

C#
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)

{
    double horizontalChange = e.HorizontalChange;
    canvas1.Margin = new Thickness(canvas1.Margin.Left + horizontalChange, canvas1.Margin.Top, canvas1.Margin.Right, canvas1.Margin.Bottom);
}
 
private void GestureListener_Hold(object sender, GestureEventArgs e)
{
    resultText.Text = "Hold: Canvas üzerinde bir süre basılı tutuldu.";
}
 
private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
    resultText.Text = string.Format("{0} Flick: Angle {1} Velocity {2},{3}",
        e.Direction, Math.Round(e.Angle), e.HorizontalVelocity, e.VerticalVelocity);
}

Uygulamamızı F5 ile çalıştırarak sonucu emulatör üzerinden mouse yardımıyla izleyelim. Öncelikle Hold hareket için, Aqua renk olan Canvas kontrol üzerinde mouse pointer'ı bir süre basıl tutalım, ardından tekrar mouse yardımıyla Flick hareketleri yakalayacağız. Bu iki denemeden sonra DragDelta içindeki kod satırlarının çalışması için Pan hareket ile canvas1 isimli Canvas nesnemizi yatay eksende hareket ettireceğiz.

Yukarıdaki resimlerde de görüleceği üzere en son yaptığımız Pan hareketle canvas nesnesinin yerini yatayda soldan sağa doğru kaydırdık fakat aynı zamanda Pan hareketinin sonlanması ile birlike Horizantal Flick hareketinde oluştuğunu gözlemleyebiliriz. Buradan şu sonucu çıkarabiliriz: 2 tür Flick hareket vardır.
Bunlardan ilki Pan hareketin sonunda otomatik olarak oluşan Flick, diğeride kendimizin bilinçli olarak oluşturduğu Flick hareketi.

Multi-Touch Gestures Örnekleri

Windows Phone 7 cihazımız var ise Pinch hareket başladığında, hareket halindeyken ve hareket sonlandığında hız, açı ve x,y pozisyonu değerlerini elde etmek oldukça kolay olacaktır. Multi-touch özelliği Windows Phone Emulatör üzerinden de simule etme şansımız var. Simulasyon için öncelikle bilgisayarımızın işletim sisteminin Windows 7 olması gerekiyor. Ekranınız multi-touch özellikte ise ayrıca yeni bir yapılandırmaya gerek kalmadan emulatör üzerinden deneyebilirsiniz. Eğer ekranınız multi-touch özelliğe sahip değilse de
bilgisayarınızın diğer usb girişine de mouse takarak multi-touch simulasyonu gerçekleştirme
şansımız olacak.

Bu simulasyon için öncelikle codeplex.com adresinden Multi-Touch Vista projesini download etmemiz gerekiyor. Sitenin ana sayfasındaki örnek video ile kurulum adımlarını inceleyebilirsiniz.

Multi-Touch Vista http://multitouchvista.codeplex.com/ adresinden ulaşılabilir.

Multi-Touch Vista'yı bilgisayarınıza indirdikten sonra yapılması gerekenleri kısaca sıralamak gerekirse;

1. Command Prompt'u administrator modda açın.
2. İndirilen klasörü açıp işlemcinize göre Driver\32x veya Driver\64x klasörüne gidin.
3. Install Driver komut dosyasını çalıştırın. Güvenlik ile ilgili adımda Install this driver seçeneğini seçiniz.
4. Bilgisayarınızın Aygıt Yöneticisi / İnsan Arabirim Aygıtları / Universal Software HID device'ı görün. Disable ve tekrar Enable yapın.
5. Start menüden "kalem ve dokunma" (pen and touch) olarak arayın. Bu uygulamayı
çalıştırın. Gelen pencerenin "Dokun" (Touch) sekmesine geçerek "Dokunma işaretçisini göster" checkbox seçeneğini seçiniz ve Tamam diyerek bu pencereyi kapatalım.
6. İndirilen klasörü tekrar açıp Multitouch.Service.Console.exe'yi çift tıklayarak çalışır durumda bırakalım.
7. Aynı klasörde bulunan Multitouch.Driver.Console.exe'yi çift tıklayarak çalışır durumda bırakalım. USB'den takdığımız mouse kadar kırmızı nokta göreceğiz.
8. Son olarak Multitouch.Configuration.WPF.exe'yi de çalıştırarak "configurasyon" butonunu seçiniz. Default mouse işaretçisini de burada kaldırıyoruz. Artık multi-touch simulasyonumuz hazır durumda. :)

Kalem ve Dokunma uygulaması içerisinden "Dokun" sekmesine geçin.

Dokunma işaretçisi seçildikten sonra "Tamam" butonu ile çıkalım. Multi-Touch Vista console uygulamalarının da aşağıdaki gibi açık durumda olması gerekecektir.


Bilgisayarımızda Multi-Touch özelliği simule ettikten sonra tekrar Windows Phone 7 projemize geri dönerek kaldığımız yerden devam edelim. Multi-Touch hareketleri 2 adet usb mouse kullanarak Emulatör üzerinden yakalayacağız. Öncelikle MainPage.xaml'da bulunan Canvas nesnemizi aşağıdaki gibi yeniden düzenleyelim.

XAML
<Canvas Background="Aqua"

        Height="124" 
        HorizontalAlignment="Left" 
        Margin="76,256,0,0" 
        Name="canvas1" 
        VerticalAlignment="Top" 
        Width="218">
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener DragDelta="GestureListener_DragDelta"
                                 Flick="GestureListener_Flick"
                                 Hold="GestureListener_Hold" 
                                 PinchStarted="GestureListener_PinchStarted"
                                 PinchDelta="GestureListener_PinchDelta"
                                 PinchCompleted="GestureListener_PinchCompleted"/>
    </toolkit:GestureService.GestureListener>
    <Canvas.RenderTransform>
        <CompositeTransform x:Name="myTransform"/>
                </Canvas.RenderTransform>
</Canvas>

Multi-Touch hareketleri PinchStarted, PinchDelta ve PinchComplated event handler ile elde edeceğiz.

C#
private double initialAngle;

private double initialScale;
 
private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    canvas1.Background = new SolidColorBrush(Colors.Green);
    initialAngle = myTransform.Rotation;
    initialScale = myTransform.ScaleX;
}
private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
{
    myTransform.Rotation = initialAngle + e.TotalAngleDelta;
    myTransform.ScaleX = myTransform.ScaleY = initialScale * e.DistanceRatio;
}
private void GestureListener_PinchCompleted(object sender, PinchGestureEventArgs e)
{
    canvas1.Background = new SolidColorBrush(Colors.Blue);
}

Tekrar F5 ile Emulatör üzerinden projemizi çalıştırarak multi-touch özelliği Pinch hareket ile elde etmeye çalışalım.

Dokunmatik giriş türlerini kullanmak, cihaza özgü donanımsal özelliklerden faydalanmak hem uygulamalarımızı daha güçlü ve farklı bir hale getirecek hem de son kullanıcılar tarafından daha çok tercih edilir yapacaktır. Kendi özel uygulamalarımız dışında da Windows Phone 7 ile internet explorer üzerinden gezindiğimizde de otomatik olarak touch özelliklerin aktif durumda olduğunu gözlemleyebiliriz.
Bu makalemizde, kullanımı son derece basit olan GestureListener mekanizmasını ve Behavior sınıfından türeyen örnek TapAction ve DoubleTapAction sınıfları yardımıyla dokunmaları yakaladık. Windows Phone için ayrıca XNA Touch Panel ve Silverlight'ın kendi manipulasyonlarıyla da Touch girişler kullanılmaktadır. Dilerim faydalı bir makale olmuştur.. Bir sonraki makalemizde görüşmek üzere.
Kolay gelsin.

http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.input.touch.gesturetype.aspx
http://msdn.microsoft.com/en-us/library/gg490775.aspx
http://multitouchvista.codeplex.com/
http://silverlight.codeplex.com/


Gökhan Manduz
gokhanmanduz.blogspot.com

gokhanmanduz@hotmail.com
gmanduz@gmail.com