Windows 8 Metro İlk Adım Uygulamamız

 

Herkese Merhaba;

Bu gün internette Windows 8 Metro yazılım geliştirme adına makale bakarken pek türk yazılarına rastlamadım. Bu yüzden burada zamanım el verdiği sürece sizlere Windows 8 Metro arayüzünde nasıl program tasarlanız bazı bilgiler vereceğim. Öncelikle Visual Studio 2012 ve Windows 8 ikilisi yanyana ise artık program yazmaya hazırız demektir. Öncelikle Visual Studio’yu açıyoruz ve FILE -> New -> Project kısmından kendi projemizi Yaratıyoruz. Ardından Visual C# sekmesinin tam altındaki Windows Store alanını seçiyoruz. Ardından Blank App(XAML)’yi Seçiyoruz. Diğer seçeneklere ileriki yazılarımda değineceğim. Ardından bu ilk uygulamanız ise sistem size developer hesabı almanızı isteyecek ve sol alttaki “I Agree” Seçeneğini Seçiyorsunuz.

d1

 

Ardından Microsoft hesabınızı ve şifrenizi girdikten sonra hesabınız kullanıma hazırdır. Şimdi programımızı tasarlamaya başlayalım. Visual Studio’da Solution Explorer Bölümünden projemizin adının yazılı olduğu kısımda MainPage.xaml dosyamızı çift tıklıyoruz. İşlem biraz uzun sürebilir.

d2

 

İşlemin ardından dizayn penceremiz hazır hale geliyor.  Şimdi değişiklik vakti. Görmüş olduğunuz üzere bir Windows logolu tablet ve siyah arka planlı bir ekran. Şimdi arka plan’ın yerini değiştirelim. Bunu yapmak çok ama çok basit. Siyah ekranda boşluğa bir kere tıklayalım ve bunun ardından sağ tarafta Properties bölümü aktifleşecektir. Her görsel objenin düzenlemesini buradan yapabilirsiniz. Kod kısmında da tabiki yapabilirsiniz fakat bunu ilerleyen zamanlarda ve ilerleyen yazılarımda anlatacağım.  Properties kıskından brush sekmesine bir kere tıklayın ve renk seçimleri karşınıza gelecektir. Istediginiz rengi verin ve işlem bu kadar.

d3

 

Bunun ardından kullanacağımız ui classlarımız ise TextBlock, TextBox, Button. Bu Üçlü ile şimdi neler yapacağız görelim.

Sol taraftan Toolbar yazan yere bir kere tıkladığımızda karşımıza kullanılabilir gui nesnelerimizi görüyoruz. Bir textblock’un üzerine gelip tabletimizin ekranına sürükleyelim. ardından üzerine çift tıklayıp ismini “Adınız:” olarak atayalım.  Kutucuğun boyutunu köşelerden çekerek arttıralım ardından Properties kısmına gelip Text sekmesini tıklayıp font boyutunu 24 Yapalım ve B kutucuğunu işaretleyelim. Sırada

TextBox nesnemiz var. Aynı Şekilde Toolbox kısmından nesnemizi seçip tabletimize sürükleyelim.  Boyutları istediğimiz gibi ayarlayalım. İçine girilecek yazının boyutunu ayarlamak için aynı şekilde Properties – Text kısmına göz atıp font boyutunu 24 Yapıyoruz ve Bold Seçeneğini İşaretliyoruz. Button’umuzu sürüklüyoruz ve Çift Tıklayarak İçerisini Değiştiriyoruz. Aynı şekilde içerisindeki yazıları ve boyutu ayarlamak için Properties kısmından düzenlemelerini yapıyoruz. Son olarak tek bir TextBlock daha yerleştiriyoruz ve bu bizim sonuç penceremiz olacak. Properties olayını aynen buraya da uyguluyoruz. En son olarak belirlediğimiz objelerimizin adlarını tanımlamamız gerekiyor. Ben şöyle bir yol tercih ediyorum. Objemizin tipi ne ise ona göre isimlendirmeye gidiyorum. Örn: TextBlock_Sonuc. Böylelikle bir objeyi kullanmamız

gerekiyorsa adını unutmadan istediğimiz zaman Visual Studio’nun Intellisense özelliği sayesinde kullanabileceğiz. Nesnelerimizin her birinin üzerine gelip sol taraftaki Properties kısmının içinde ve en üstte ol

an Name kısmını söylediğim şekilde yapıyoruz.

d5

 

Ardından butonumuzun üzerine çift tıklayalım ve kod kısmına geçelim. Aslında yapacağımız işlem çok basit. Buton’un üzerine çift tıkladıktan sonra Visual Studio bizi uğraştırmadan bir buton olayı oluşturuyor ve bizi kodun tam ortasına atıyor.

d6

Resimde belirtilen fonksiyonumuzu biraz dolduralım.

Ardından programımızı çalıştıralım.

d7

Ayrıca programımız Metro Arayüzüne Eklendi. Istersek Visual Studio’yu Açmadan da Metro arayüzünden programımızı istediğimiz zaman çalıştırabiliriz.

Kolay Gelsin…

 

Bu yazı Yazılarım kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir