İlkay İlknur

just a developer...

İlk Windows 8 Metro Style Uygulamamız - C# & XAML

Merhaba Arkadaşlar,

Bir önceki yazımızda sizlerle Windows 8 uygulama geliştirme platformunu detaylı olarak incelemiştik. Bu yazımızda ise artık Windows 8 Metro Style Uygulama Geliştirme konusuna giriş yapıyor olacağız. Şimdi ilk olarak uygulama geliştirme ortamına bakalım.

Windows 8 Metro Style Apps Uygulama Geliştirme Ortamı

Şu anda Windows 8 üzerinde çalışacak olan bir Metro Style uygulama geliştirmek isterseniz geliştirme yapacağınız ortam Windows 8 olmalı. Yani Windows 7 üzerinde Windows 8 uygulama geliştirme desteği yok. İlerde olur mu bilemem ;) Uygulama geliştirme platformumuz da tabi Visual Studio 2011 olmalı.

Kısaca özetlemem gerekirse şu anda Windows 8 Metro Style uygulama geliştirmeye başlayacak iseniz bilgisayarınızda (veya sanal makinanızda) Windows 8 Consumer Preview ve Visual Studio 2011 Beta kurulu olmalı. Bunlar haricinde herhangi bir zorunluluğumuz yok.

Şimdi uygulamamızı geliştirme kısmına geçiş yapalım.

İlk XAML & C# Windows 8 Metro Style Uygulamamız

Bir önceki yazımızdan da hatırlayacağımız üzere Windows 8 Metro Style Uygulama geliştirmek isterseniz pek çok alternatifinizi bulunmakta. Biz bu yazımızda C#, XAML ikilisini kullanarak ilk Windows 8 uygulamamızı geliştiriyor olacağız.

Şimdi ilk olarak C# ve XAML kullanacağımız Windows 8 uygulamamızı yaratıyor olacağız. Bunun için izleyeceğimiz yol zaten tanıdık ;) File =>New Project

New Project ekranına geldiğimizde Visual Studio 2011 ile beraber Visual C# kategorisi altında Windows Metro Style isimli yeni bir uygulama geliştirme seçeneğinin geldiğini görüyor oluyor olacağız. Bu  seçenek altında da daha önceki uygulama geliştirme modellerinden(MVC, Silverlight vb.) de alışkın olduğumuz gibi developerların işlerini kolaylaştırmak adına pek çok template proje bulunmakta. Ancak biz bu yazımızda Blank Application'ı seçerek boş proje üzerinden ilerliyor olacağız. Şimdi uygulamamıza bir isim verelim ve solution'ı yaratalım.

Projemizi yarattık ve yukarıdaki gibi bir proje yapısı Visual Studio tarafından bizim için üretildi. Peki bu proje yapısı içerisindeki elemanlar ne işe yarıyorlar hemen kısaca inceleyelim.

Assets klasörü : Bu klasör içerisinde uygulamanızda kullanacağınız resourceları tutabilirsiniz. Uygulamanızın logo, splash screen, foto, icon vb.. gibi tüm kaynaklarını bu klasör içerisinde saklayabilirsiniz. Kaynakları bu klasör içerisinde tutma gibi bir zorunluluğunuz yok. Ancak Visual Studio bu gibi klasörleri yaratarak size yardımcı olmakta.

Common Klasörü : Bu klasör içerisinde uygulama geliştirmemiz sırasında bizim işimizi kolaylaştıracak olan bir takım yapılar hazır olarak gelmekte. Şimdi bunları kısaca inceleyelim.

Bindablebase tipi : Uygulamamız içerisinde bulunan tiplerimizin bindable olabilmesi için yani property içerisinde olacak bir değer değişikliğinden ilgili kontrolün de haberinin olması için tipimizin INotifyPropertyChanged interface'ini implemente etmesi gerekmekte. İşte bunun için BindableBase tipi bize yardımcı olmakta. Bu tip kendi içerisinde ilgili interface'i implemente ederek bize SetProperty isimli bir metot sunmakta.  Biz de tipimizi Bindable tipinden türeterek bu SetProperty metodunu kullanabilmekteyiz ve çok daha hızlı bir şekilde tiplerimizin bindable olmasını sağlayabilmekteyiz.

BooleanNegationConverter : Bu tip de adından anlayacağımız üzere binding işlemi sırasında kullanabileceğimiz bir converter. Yaptığı ise boolean bir değerin tersini döndürmek. ;)

BooleanToVisibilityConverter : Bu tip de yine aynı şekilde binding işlemi sırasında kullanabileceğimiz bir converter. Görevi ise bool olarak aldığı değerin Visibility Enum değerini döndürmesi. True ise Visibility.Visible, False ise Visibility.Collapsed gibi ;)

LayoutAwarePage : LayoutAwarePage bizim bir Windows 8 uygulaması geliştirmemiz sırasında sayfalar içerisinde yapmış olduğumuz ortak işlemlerin bir üst tipe alınmış hali. Biz de sayfalarımızı doğrudan LayoutAwarePage tipinden türeterek içerisindeki özelliklere sahip olabilmekteyiz. Bu özellikler nedir diye baktığımızda navigasyon işlemleri, cihazın orientation'ı değiştiğinde bunun otomatik olarak algılanması ve ilgili aksiyonların alınması gibi özelliklerden bahsedebiliriz.

RichTextColumns : Richtextbox kontrolü içerisinde yazıların kolonlar şeklinde görünebilmesi için kullanılabilecek bir base tip.

StandartStyles.xaml : Bu XAML dosyası ise uygulamamız içerisinde bulunan kontrollerin, sayfaların templatelarını tutmakta. Bunun yanında içerisinde Font ayarları, Metro Style ile ilgili stil tanımlamalarda bulunmakta.

App.xaml & App.cs : App tipi WPF,SL, WP gibi platformlardan da bildiğimiz üzere uygulamamız içerisinde genel olarak gerçekleşen eventleri(uygulama açıldı, kapandı vb..)  yakalayabileceğimiz yerdir. Uygulama genelinde yapacağımız işlemleri burada gerçekleştirebiliriz.

Package.appxManifest : Manifest dosyası bizim Windows 8 uygulamamız ile ilgili tüm metadatayı içerisinde barındıran dosyadır. Bu dosya içerisinde uygulamamızın logosundan tutun da nasıl özellikleri bulunduğuna, Windows 8 içerisinde bulunan özelliklerden hangilerine ihtiyacı olduğuna kadar tüm detaylı bilgiyi içerisinde barındıran dosyadır. Bu dosyayı daha doğrusu manifest kavramını bir sonraki yazımızda detaylı olarak inceliyor olacağız.

Şimdi uygulamamızı yarattıktan ve içerisindeki bileşenleri de inceledikten sonra sıra geldi "Hello World" kısmını yapmaya. Şimdi öncelikle XAML tarafına geçelim ve bir TextBlock ve bir Button alıp sahneye ekleyelim.(Daha önceden WPF, WP, SL uygulaması geliştirmiş olanlar için kısacası XAML Developerlar için deneyim tamamen aynı ;) )

[sourcecode language="xml"] <button></button> [/sourcecode]

Şimdi ise butona tıklandığında ilgili TextBlock elementinin içeriğini değişterecek olan kodumuzu yazalım.

[sourcecode language="csharp"] private void btnTikla_Click(object sender, RoutedEventArgs e) { tbHello.Text = "Hello Windows 8 World !!!"; } [/sourcecode]

Gördüğünüz gibi bildiğimiz C# ve bildiğimiz XAML :) Daha önceden bildiğimiz ve kullandığımız programlama modeli doğrudan Windows 8 Metro Style uygulaması geliştirme tarafına da aktarılmış. Tabi ki her yeni teknolojide olduğu gibi API'ları öğrenmemiz gerekmekte :) Burdan kaçışımız yok. Ancak yeni bir programlama dili, yeni bir programlama mantığı vs.. öğrenmeden doğrudan Windows 8 Metro uygulamaları geliştirmeye başlayabilmekteyiz.

Şimdi isterseniz F5'e basarak uygulamamızı çalıştıralım.

Windows 8 Metro Style Uygulama geliştirmeye giriş yaptığımız bu yazımızda aslında temel amacım sizlere uygulama geliştirme deneyiminin çokta alışkın olduğumuzdan farklı olmadığını göstermekti. Tabi eğer daha önce WPF, Silverlight, Windows Phone taraflarına bulaşmadıysanız bu konsept size yabancı gelecektir. :) Bu noktada da eğer HTML & CSS & Javascript Developer değilseniz bu yolun dışında ilerleyeceğiniz maalesef başka bir yol bulunmuyor :)

Development deneyimi hemen hemen aynı demişken tabi ki Windows 8 ile beraber gelen pek çok farklı kavram da bulunmakta. Bu kavramları da bir sonraki yazımızdan itibaren inceliyor olacağız. Maalesef bu noktada kullandıklarımızı daha önce kullanmıştık diyemiyorum ;) Pek çok yeni API ve kavram bizleri bekliyor olacak ;)

Umarım başlangıç yazısı olarak faydalı bir yazı olmuştur.

Bir sonraki makalede görüşmek üzere,



Yorum Gönder


Yorumlar

  • profile

    İlkay İlknur

    • 26
    • 8
    • 2012

    Merhaba, Evet sadece Windows 8 üzerine kurulu bir Visual Studio 2012 içerisinde Metro Style uygulama geliştirebilirsiniz.

  • profile

    Yavuz

    • 21
    • 8
    • 2012

    Merhaba; Metro uygulama geliştirmek için, Visual Studio 2012'yi mecburen Windows 8 üzerindemi kullanmalıyız, daha doğrusu Server 2012 için de bu mümkünmü ?

  • profile

    İlkay İlknur

    • 10
    • 5
    • 2012

    @ahmet Alt+F4 ile kapatabiliyorsun. Yada uygulamayı yukarıdan aşağıya doğru sürüklersen de uygulamayı kapatabilme şansına sahipsin. Onun haricinde navigasyon içinde ekranın en solundan sağa doğru parmakla swipe yaparsan uygulamalar arası gezebilirsin.

  • profile

    ahmet

    • 9
    • 5
    • 2012

    Bu uygulamaları kapatmak için bir kısayol falana yok mu? Ne bir çarpı butonu, ne alt+f4 hiçbir şey işe yaramıyor. Acaba MS ne düşünmüş bu programların navigasyonları ile ilgili? Uygulama tam ekran oluyor ve diğerine geçiş için bir ton uğraşıyorsun.

  • profile

    İlkay İlknur

    • 8
    • 5
    • 2012

    Frame mantığı var. Frame içerisinde pageler açıyorsun. Şuradaki içerik yardımcı olabilir. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/Hh771188(v=win.10).aspx

  • profile

    bekir

    • 6
    • 5
    • 2012

    bişey soracam sayfalar arası geçiş için ne kullanıcaz show kullanamıyoruz baya baktım ama bi türlü bulamadım

  • profile

    İlkay İlknur

    • 1
    • 5
    • 2012

    :) Birinci maddeye dikkat :) http://visualstudio.uservoice.com/forums/121579-visual-studio

  • profile

    Ahmet Ongun

    • 1
    • 5
    • 2012

    Facebook timeline normal kullanıcılar için neyse VS2011 geliştiriciler için o. Grafikleri çok kötü vs2003 sandım ilk fotoğrafı görünce.