16 Aralık 2012 Pazar

Windows 8: Kutucuklarla (Tiles) Çalışmak

Windows Store üzerinden uygulamanın indirilmesinin ardından, otomatik kurulum gerçekleşir ve uygulamayı başlatacak olan kutucuk yani kısayol başlangıç ekranına yerleşir. Kendi geliştirmiş olduğumuz uygulamalar için bu kutucukların nasıl gözükmesi gerektiğini tasarlayabiliriz.


Yukarıdaki ekran görüntüsünde görüldüğü üzere iki faklı boyutta kutucuk tasarlanabiliyor. Küçük boyutta (150x150) ya da geniş boyutta (310x150) pixel. Uygulamamız içerisinde geniş boyuta destek vermek zorunda değiliz. Buna rağmen geniş boyut için de bir görsel tanımlamak kullanıcıya, kutucuğu istediği boyutta başlangıç ekranına yerleştirme özgürlüğü vermek açısından güzel olacaktır. Aşağıdaki görselde, uygulamalara ait kutucuklardan bazıları farklı boyutlarda kullanılmıştır.


Yeni bir Windows Store uygulaması oluşturduğumuzda varsayılan olarak bir kutucuk görseli tanımlı gelir. Aşağıda, takvim kutucuğunun hemen sağında bu varsayılan kutucuk görselini görebilirsiniz.


Hazır tanımlı gelen bu görsel, projemiz içerisinde bulunan Assets klasörünün altında Logo.png adıyla yer alır.


Küçük boyuttaki kutucuk görselini değiştirmenin en kolay yolu, Logo.png adıyla 150x150 boyutlarında yeni bir görsel hazırlayıp mevcut dosyanın üzerine yazmaktır. Assets klasöründe yer alan diğer dosyalar ve amaçları aşağıda listelenmiştir.

SmallLogo.png: Başlangıç ekranında uygulamalar arasında arama yapıldığında ya da tüm uygulamalar listelendiğinde bizim uygulamamız için kullanılan görseldir.
SplashScreen.png: Uygulamanın ilk açılışı sırasında karşılama ekranı olarak sunulan görseldir. Bu konuda detaylı bilgiyi Windows 8: Windows Store Uygulamalarında Splash Screen Kullanımı başlıklı yazıda bulabilirsiniz.
StoreLogo.png: Uygulamanızı Windows Store üzerinde yayınladığınızda, Store içerisinde kullanılacak olan görseldir.

Uygulamamızı başlatacak olan kutucuk için geniş boyutta bir görsel tanımlamak istiyorsak bu işi Package.appxmanifest dosyasından yaparız. Package.appxmanifest dosyasına çift tıklayalım ve Application UI sekmesinden Tile başlığına gelelim.


Tile başlığı altındaki seçeneklerden Logo, başlangıç ekranındaki küçük boyutlu kutucuğun tanımlanacağı yerdir. Görüldüğü üzere varsayılan görsel tanımlı durumda bulunuyor. Daha önce belirtmiş olduğum gibi, bu görseli başka bir görsel ile değiştirebiliriz. Alternatif olarak burada Logo alanına başka bir görsel de verebiliriz. Dikkat edilmesi gereken nokta, küçük boyuttaki kutucuk için kullanılacak olan görselik kesinlikle 150x150 boyutlarında olması gerekliliğidir.

Wide logo alanında ise geniş boyuttaki görseli tanımlarız. Bunun için öncelikle kullanmak istediğimiz görseli, projemiz içerisinde yer alan Assets klasörüne ekleriz ve dosyanın özelliklerinden Build Action özelliğini Content olarak ayarlarız. Ardından, Wide logo alanında gerekli tanımlamayı yaparız. Bu alan için kullanacağımız görsel, kesinlikle 310x150 pixel boyutlarında olmalıdır.

Small logo alanında kullanılacak olan görseli 30x30 pixel boyutlarında tanımlamamız gerekir. Mevcut dosyanın üzerine yazabilir ya da farklı bir dosya tanımlayabiliriz. Dosyanın Build Action özelliğini Content olarak ayarlamak unutulmamalıdır.

Short name alanında uygulamanın kısa adı tanımlanabilir. Bu isim, uygulama kutucuğu üzerinde görüntülenecek olan isimdir.

Show name alanında, uygulama adının hangi kutucuklar (logolar) üzerinde görüntüleneceği tanımlanır.


All Logos seçeneği ile hem küçük hem de geniş boyuttaki kutucuk üzerinde uygulama adı gösterilirken, No Logos seçeneği sadece görseli sunmaya yarar. Bu seçenek tercih edildiğinde uygulama adı, kutucuklar üzerinde yer almaz. Standard Logo Only seçeneği uygulama adını sadece küçük boyuttaki kutucuk üzerinde sunarken, Wide Logo Only seçeneğiyle geniş boyuttaki kutucuk üzerinde uygulama adı görüntülenirken, küçük boyutlu kutucuğa geçiş yapıldığında uygulama adı gösterilmez.

Forground text alanında ihtiyaca göre Light (açık renk) ya da Dark (koyu renk) seçeneklerinden birisi tercih edilir.

Son olarak, Background color alanında kutucuklar için arkaplan rengi tanımlarız. Bu alan gereksiz gibi gözükse de aslında kullanışlı bir alandır. Kutucuklar için kullanılacak olan görselleri tanımlarken görselde boş kalacak alanları transparan olarak bırakıp, arkaplan rengi üzerinden bu tanımlamayı yaparız. Böylece, daha sonra bu rengin kolayca değiştirilebilmesine imkan vermiş oluruz.

Hiç yorum yok: