Merhaba arkadaşlar, araya bayram tatili girmesinden dolayı yazı yazmamıştım, bugün kaldığımız yerden devam edeceğiz. Geçen hafta sizlere Visual Studio 2012'de Windows Store uygulaması geliştirirken Visual Studio içerisinde kullanacağımız araçlardan bahsetmiştim. Bu hafta da uygulamamızın görselliğini daha da güzelleştirebilen bir tasarım programından; Blend adlı programdan bahsedeceğim.
İlk olarak biraz Blend'in ne olduğundan bahsedelim. Blend yapacağımız uygulamaların tasarım kısmında daha detaylı geliştirmeler yapabilmemizi sağlayan bir programdır. Örneğin programımızda kullanacağımız bir tuşun rengini Blend aracılığı ile çok farklı biçimde tasarlayabiliriz. Bu program Visual Studio programının kurulması ile birlikte otomatik olarak bilgisayarımıza kuruluyor. Daha önceki yazılarımda Visual Studio'nun kurulumundan bahsetmiştim zaten. Eğer Visual Studio programını kurduysanız Blend programını da açabilirsiniz. Bu programa Windows 8'deki tüm programları gösteren kısımdan, Visual Studio 2012 başlığı altından erişebilirsiniz, dilerseniz direkt olarak "Program Files" kısmından da Blend programını bulup açabilir veya masaüstüne kısayol olarak ekleyebilirsiniz.
İsterseniz şimdi Blend programının arayüzüne biraz bakalım. Arayüz aşağıdaki gibi karşımıza çıkıyor:
Buradan da görebileceğimiz gibi arayüzde 3 ana kısım karşımıza çıkıyor. Sol taraftaki menüde programımızda kullanacağımız araçlar yer alıyor. Orta kısımda ekranımız var ve sağ kısımda da araçların özelliklerine erişebileceğimiz menü bulunuyor. Kullanmak istediğimiz araçları sol taraftaki menüden tutup ekranda olmasını istediğimiz yere bırakabiliyoruz.
Şimdi de Blend ile basit bir uygulama yapalım. Blend programımızı açalım, karşımıza aşağıdaki gibi bir ekran gelecektir:
Bu kısımda da projemizin nasıl bir taslakta olabileceğini ayarlayabiliyoruz. Eğer tasarımımızı tamamen kendimiz tasarlayacak isek burada boş uygulama manasındaki "Blank App" menüsünü seçebiliriz. Eğer varhazır tasarımlar üzerinden gideceksek diğer seçenekleri seçmemiz daha mantıklı olabilir. Diğer seçeneklere de kısaca değinecek olursak "Grid App" seçeneği ile yeni bir proje açtığımızda bize hazır bir taslak oluşturuyor. Bu taslak aşağıdaki gibi:
Daha çok resimli tanıtımlar kullanacaksak güzel bir seçim olabilir. "Split App" seçeneği de buna benziyor.
Bu taslaklardan hangisini seçeceğiniz yapacağınız uygulamaya bağlı olarak değişecektir. Şimdi biz kendi projemizi yapmak için boş bir proje açıyoruz. Bu projedeki amacımız kod yazmak değil daha çok programımızın tasarımı için ne gibi değişiklikleri nasıl yapabiliriz ona bakmak olacak bu yüzden kod yazmayacağım sadece tasarım üzerinde değişiklikler yapacağız. Eğer kullandığımız bileşenlerin arkalarına kod yazmak istiyorsak önce bileşeni seçiyoruz ardından sağ taraftaki "Properties" menüsünden yukardaki sekmelerden bileşenin olaylarını gösteren küçük şimşek şeklindeki işarete tıklıyoruz ve hangi olayın arkasına kodumuzu yazacaksak o olayın içersine iki kez tıkladığımızda c sharp kodlarını içeren sayfamız Blend uygulaması içersinde açılıyor ve istediğimiz kodları burdan yazabiliyoruz. Çalıştırmak için de aynı Visual Studio programındaki gibi f5 tuşuna basarak programımızın nasıl çalıştığını kontrol edebiliyoruz.
Programımıza bir adet "Listbox", bir adet "Button", bir adet "Checkbox", bir adet de "Progressbar" ekliyoruz. Daha sonra "Button" üzerine tıklıyoruz ve sağdaki özellikler menüsünden arkaplan renginin ayarlandığı kısımdan "Gradient Brush" özelliğini seçiyoruz ve kırmızının tonlarından seçiyoruz. Bu "Gradient Brush" özelliği benim sevdiğim özelliklerden. Böylece tuşumuzun rengi kırmızı tonlarından oluşacak. Şimdi de "Listbox" kontrolümüzün görünümü ile biraz oynayalım. "Listbox" üzerine tıklıyoruz ve tekrar özellikler kısmından common başlığı altından "Items(collection)" yazan özelliğini yanındaki üç noktaya tıklıyoruz. Burdan "Listbox" kontrolümüze 3 adet "Button" ekliyoruz ve "Button" isimlerini isteğimize göre değiştiriyoruz. "Listbox" kontrolü üzerine tıklıyoruz ve daha önce "Button" rengini değiştirdiğimiz gibi bunun da rengini değiştiriyoruz. İçerisindeki "Button" genişliklerini ayarlıyoruz. İstediğimiz tüm değişiklikleri özellikler kısımından ayarlayabiliriz. Ben genellikle renk ve yazı üzerinde durdum, siz tüm özellikleri daha detaylı inceleyerek bilgi edinebilirsiniz. Mesela eklediğimiz "Checkbox" kontolünü çevirmek için en sağ üst köşesine gelip döndürebiliyoruz. Eklediğimiz "Textbox" kontrolü içerisindeki yazıyı yine sağdaki menüden birçok fonta değiştirebiliriz. Ekranın arka plan rengini de aynı şekilde ekrana tıkladıktan sonra sağdaki menüden ayarlayabiliriz veya isteğe göre resim ekleyebilirsiniz. Kontrol menüsünden şekiller de ekleyebiliyoruz. İstediğimiz şekli ekran üzerine sürükleyip bırakmamız yeterli olacaktır. Uygulamanın ekran görüntüsü aşağıdaki gibidir:
Değinmek istediğim önemli bir nokta daha var. Tasarımımızı burada yaptıktan sonra sol taraftaki menüden "Projects" menüsüne tıkladığımızda Windows Store uygulamamızın tüm dosyalarını görebiliyoruz ve örneğin .cs uzantılı dosyalara sağ tıkladığımızda Visual Studio ile düzenle seçeneği karşımıza geliyor. Böylece tasarımdan sonra yazacağımız kodları da buradan hemen Visual Studio programına geçiy yaparak yazabiliyoruz. Aynı şekilde F5 tuşuna bastığımızda Blend programında iken de programımızı çalıştırabiliyoruz.
Bu haftalık anlatacaklarım bu kadar. Programda bir çok kontrol bulunduğundan ve her kontrolün farklı özellikleri olduğundan çok fazla detaylara giremiyorum. Sizlere tavsiyem Blend altında bir proje açıp tüm özellikleri ile oynamanız böylece daha detaylı bilgi edinebilirsiniz. Haftaya Windows 8 uygulamaları için geliştirici hesabı oluşturmaktan bahsedeceğim. İyi programlamalar...
0 yorum:
Yorum Gönder