Aylık arşivler: Mayıs 2014

Windows Phone Eğitimleri Gün 2 : İlk Windows Phone Uygulamamızın Yapılması

Merhabalar arkadaşlar ,

En son yaptığımız eğitimimizde,  Windows Phone’a  uygulama geliştirmek  için gereken geliştirme araçlarının kurulumlarını tamamlamıştık.Bugün ise ilk uygulamamızı beraber yapacağız.Günün sonunda bitireceğimiz uygulamanın  adımları şunlar olacaktır :

1-İlk olarak uygulamamız için yeni bir Windows Phone Projesi açıyoruz.

2-Daha sonra basit olarak ekleme çıkartma ve düzeltme eylemleri yapcağız.Bunlara örnek olarak commentlerin silinmesi , MediaControl ekleme , Button controlleri ve son olarak uygulamamızın arayüzünde ve stilinde değişiklikleri kavrayacağız.

3-Arayüzümüzde de değişiklikleri yaptıktan sonra Button kontrolü için Click Event’i yazacağız.Böylece butona bastığımızda olacak eylemleri biz belirleyeceğiz.

4-Button Click Event’i için, bir wav(ses dosyası türü) dosyasını çalacak kod parçasını geliştireceğiz.

1-) İlk olarak yeni projemizi açalım.

Resim

Resim

Okey dedikten sonra projemizi oluşturuyoruz.Bir ihtimalle Windows Phone Operating sisteminin sürümünü sorabilir. Windows Phone OS 8.0 işimizi görecektir fakat her zaman dediğim gibi eğer üst sürümü varsa ,oluşabilecek komplikasyonları önlemek için üst sürümü tercih etmelisiniz.

Resim

Operating sistemimizi de seçtikten sonra projemizi oluşturmuş bulunuyoruz.

2) Bu bölümde daha rahat kod yazmamız için gereksiz Comment satırlarını sileceğiz.Böylece projemiz daha basit ve anlaşılabilir olacak.Projemizin XAML kodlarını görmek için MainPage.xaml dosyamıza Solution Explorer’dan tıklıyoruz.Bazen Solution Explorer istenmeden ekrandan çıkartılabiliyor.Bulmakta güçlük çekiyorsanız, Visual Studio’nuzu açtıktan sonra view -> Solution Explorer’ı tıklayın. Sağ tarafta menümüz açılacaktır.

Resim

 

Konumuza geri dönelim.

Resim

Sol tarafınızda gördüğünüz 1 numaralı kısım görsel arayüzümüz.Arayüzümüzü kullanarak sürükle bırak mantığıyla uygulamalar yapabilir aynı zamanda sağ tarafta xaml kodlarında yaptığınız değişiklikleri anlık olarak izleyebilirsiniz.

Bu noktada gereksiz comment satırlarını sileceğiz.Gördüğünüz gibi kırmızı kare içerisinde olan kodlar diğerlerinden farklı renkteler.Bu bir bakıma derleyici tarafından bu kodların derlenmeyeceğinin , yani bu kodların sadece kısa notlar yada açıklamalar olduğunun kanıtı.Projelerinizi geliştirirken buna benzer kısa kısa notlar almanız takım çalışması ve sizin için son derece acantajlı olacaktır fakat bu noktada bu derece uzun commentlere ihtiyacımız yok.O yüzden şimdi bunları siliyoruz.

Resim

 

Aşağıda göreceğiniz gibi projemiz daha sade ve anlaşılır vaziyete geldi.

 

 

Resim

 

3) Bu bölümde Button controlünü içerik paneline  ekleyip renksel açıdan dizaynını yapacağız.

Aşağıda paylaşacağım xaml kod parçacığını  programımıza ekleyelim.

Resim

Kodumuzu ekledikten sonra Visual Designer’ımıza bakarak eklediğimiz  butonumuzu görelim.

Resim

 

Göründüğü Üzere Quack (Butonumuz) tüm ekranı kapladı.Bunu engellemek için butonun boyutlarını değiştirmeliyiz.Height ve Width özelliklerinden faydalanıyoruz.

Resim

Butonumuzun yeni şekli şöyle olacak .

Resim

Bu noktada nesnelerimizi hareket ettirmeyi ve renklerini değiştirmeyi öğrenelim.Düzenleyeceğimiz xaml kodu ile birlikte button nesnemizi ekranın sol üst köşesine taşıyacağız ve de arka planını kırmızı yapacağız.

Son olarak Butonumuza PlayAudioButton ismini vereceğiz.Böylece kodlarken mantıksal çağrışımlardan yararlanacağız.Bu konuyu ilerleyen derslerimizde ayrıntılı anlatacağım.

Resim

 

 

Ve sonunda butonumuz son şeklini aldı 🙂 Sonraki bölümde ise Butonumuza tıkladığımızda ses dosyasının çalınmasını geliştireceğiz.

 

Resim

4) Bu bölümde ise Media Element kontrolü eklemeyi öğreneceğiz.

Butonumuzun altına xaml kodlarımızdan bir MediaElement ekleyelim.Nesnelerimizi sürükle bırak mantığıyla da ekleyebileceğimizi biliyorsunuz.Ama kod ile eklemeyi ben daha çok seviyorum 🙂

 

Resim

 

Gördüğünüz gibi Button nesnemizden sonra boşluk bırakarak MediaElementi ekledim ve bu hiç bir kötü sonuç çıkarmadı.Visual Studio’nun otomatik olarak boşlukları görme ve kodları ona göre derleme özelliği vardır.Bu yüzden hiç bir olumsuz  etki oluşmayacaktır.Ayrıca görüldüğü üzere ‘   Source=””   ‘ yaptım.Bunun amacı şuan adresini göstereceğim bir ses dosyasının projede mevcut olmamasıdır.Ses dosyamızı ekledikten sonra Source kısmına o dosyamızı ekleyeceğim.

5) Bu bölümde ise projemize wav (ses) dosyası ekleyeceğiz.

Resim

Assets klasörüne eklediğiniz müzikler yada diğer tipdeki dosyaları projemizde Solution Explorer kısmından görebiliriz.

Projemize bazı ses dosyaları ekledim.Sizde arzu ettiklerinizi , butona basınca hangi sesin çalmasını istiyorsanız onun wav tipindeki ses dosyasını projenize ekleyebilirsiniz.

Solution Explorer kısmından dosyalarımızı görüyoruz.

Resim

 

Şimdi ise eklediğimiz ses dosyamızı MediaControl elementimize bağlayacağız.

Resim

Göründüğü üzere MediaElement’imizin Source (kaynak) bölümüne çalmasını istediğimiz dosyanın adresini yazıyoruz.Böylece butona bastığımızda arzu ettiğimiz ses dosyası çalacaktır.

Ayrıca AutoPlay kısmını False yaptım.Böylece projemizi deploy ettiğimizde(başlattığımızda ) otomatik olarak ses dosyası çalınmayacaktır.

 

 6) Bu bölümümüzde  Butonumuzun click eventine  event handler ekleyerek, Buton nesnemize tıkladığımızda neler olacağını belirleyeceğiz.

ilk olarak Buton nesnemize Click eventi oluşturuyoruz.Gördüğünüz gibi Visual Studio otomatik   olarak New Event Handler                     oluşturmayı öneriyor.

 

Resim

Resim

 

Click eventimize PlayAudioButton_Click ismini verdim.Bunun anlamı butona basıldığında  PlayAudioButton_Click() methodumuz C# dili çerçevesinde  derleneceğidir.

 

Click eventimizin üzerine sağ  tıkladıktan sonra Navigate to Event Handler seçeneğini tıklıyoruz ve Visual Studio bizim için otomatik olarak Click methodunu oluşturuyor.Butona basıldığında olmasını istediğimiz eylemler için kodlarımızı bu methodun içerisine kodlayacağız.

Resim

PlayAudioButton_Click methodumuz oluşmuş bulunmakta.

Resim

 

Ve son olarak MediaElementimizi Click methodumuzun içerisinde aktifleştiriyoruz.Böylece uygulamamızın kodlama kısmının sonuna geldik.

Resim

Şimdi ise uygulamamızı test edelim.

 

7) Bu bölümde uygulamamızı çalıştırıyoruz.

Uygulamamızı basit bir F5 yaparak çalıştırabiliriz.Ya da  Emülatörümüzü de seçebileceğimiz menümüzden kolayca başlatabiliriz.

Resim

 

Şu noktada göreceğiniz şey ise sanal makina üzerinden çalışan Windows Phone 8.0 operating sistemine sahip bir emülatör olacak.Unutmayın emilatörler hayatımızı kolaylaştıran , uygulamalarımızı kolayca test etmemize yarayan süper araçlardır 🙂

Resim

Şu noktada eklediğiniz ses dosyasını işitmeye sadece 1 tık uzaktasınız.Quack butonuna tıkladığınız anda ,eğer hoparlörünüz de açık ise , seçtiğiniz dosyayı işiteceksiniz.Kapatmak isterseniz menümüzden STOP simgesine tıklayarak projenin yürütülmesini durdurabilirsiniz.

Resim

Hepinize sabrınızdan ötürü teşekkür ederim şimdiden iyi çalışmalar bir sonraki eğitimde görüşmek üzere 🙂