Ercan Bozkurt weBlog: Windows 8: Windows Store Uygulamalarında AppBar Kullanımı

14 Aralık 2012 Cuma

Windows 8: Windows Store Uygulamalarında AppBar Kullanımı

AppBar Nedir
Uygulamaların içerik odaklı olduğunu düşündüğümüzde, menü ve komutlar gibi ihtiyaçları çözmek için başka bir öğeye ihtiyaç olduğunu söyleyebiliriz. AppBar bu iş için var. AppBar sayesinde menü ve sık kullanılan özellik ya da komutlara hızlı bir biçimde erişim sağlayabilirsiniz. Aşağıdaki ekran görüntüsünde Hava Durumu uygulaması içerisindeki AppBar nesnesinin açık durumdaki hali sunulmuştur.

Hava Durumu uygulaması içerisinde, ekranın hem alt, hem de üst kısmında AppBar kullanılmıştır. Internet Explorer’ın Windows Store sürümü de aynı şekilde bir kullanım sunar.

Biz de kendi uygulamalarımızda AppBar kullanırken, nesnemizi yerleştirmek istediğimiz bölgeler konusunda tercihte bulunabilir veya birden fazla bölgeyi aynı anda kullanabiliriz.

AppBar Kullanımı

AppBar kullanımını bir örnek ile incelemek üzere, Blank App (XAML) şablonunu kullanarak, Windows8AppBarKullanimi isminde yeni bir Windows Store projesi açalım.

Proje oluşturulduktan sonra MainPage.xaml dosyasını açalım ve sayfa üzerindeki yerleşim kontrolümüz olan Grid’in içerisinde bir AppBar kontrolü sürükleyip bırakalım.

Bu işlemin ardından sayfa üzerinde yer alan Grid’e ait kodlar aşağıdaki gibi olacaktır.

AppBar’ın VerticalAlignment özelliği varsayılan olarak Stretch değerini alacaktır ve AppBar tüm ekranı kaplayacaktır. AppBar’ı uygulamanın alt (Bottom), üst (Top) ya da orta (Center) kısmında göstermek istersek, VerticalAlignment özelliğine uygun bir değer vererek bunu sağlayabiliriz. Uygulamanın alt kısmını tercih edelim ve AppBar için yazılı olan açılış etiketini aşağıdaki gibi değiştirelim.

Bunu yaptığımızda AppBar’ın tasarım ekranındaki görünümü aşağıdaki gibi olacaktır.

Şimdi, AppBar içerisine bir Button kontrolü sürükleyip bırakalım ve Content özelliğine Exit değerini, Width özelliğine de 120 değerini verelim. Bu işlemin ardından XAML kodları aşağıdaki gibi bir hal alır.

Tasarım ekranında ise sıradaki görsele benzer bir durum görürüz.

Amacımız, butona tıklandığında ya da dokunulduğunda uygulamadan çıkılmasını sağlamak olduğu için, butonun Click olayına uygun bir metot bağlayacağız. Bunun öncesinde butona btnExit adını verelim ve ardından Click olayını tanımlayalım. Bu işlemlerin ardından butona ait XAML kodu aşağıdaki gibi olacaktır.

Buradaki koda uygun bir şekilde .cs dosyasının içerisinde de btnExit_Click isimli metodu, uygun imzası ile yazarız veya otomatik olarak oluşturulmasını sağlarız.

private void btnExit_Click(object sender, RoutedEventArgs e) {

}

Bu metodun içerisinde uygulamadan çıkmamızı sağlayacak olan aşağıdaki satırı yazmalıyız.

Application.Current.Exit();

Bu kod çalıştığında, aktif olan uygulama kapatılacaktır.

Uygulamanın Çalıştırılması
Örneğimizi test etmek amacıyla çalıştıralım. Bu işlemi F5 kısayolu ile yapabileceğiniz gibi, arayüzdeki Local Machine seçeneğini de kullanabilirsiniz.

Herhangi bir tasarım yapmadığımız için uygulama çalıştığında boş siyah bir ekranla karşılaşacağız.

Tasarlamış olduğumuz menüyü görmek amacıyla ekranın herhangi bir yerinde farenin sağ tuşu kullanılabileceği gibi, dokunmatik ekranlarda ekranın alt kısmından içeriye doğru yapılacak bir parmak hareketi ile de AppBar görüntülenebilir.

Hatırlayacağınız gibi, Exit butonunun işlevselliğini de kodlamıştık. AppBar üzerinde yer alan Exit butonuna tıklayarak uygulamamızı kapatabiliriz.

İkinci AppBar’ın Tanımlanması
Uygulamamız içerisinde birden fazla AppBar nesnesine ihtiyaç duyduğumuzda, farklı lokasyonlarda iki AppBar nesnesini bir arada kullanmamız mümkündür. Uygulamamız içerisinde üst bölüme de bir AppBar nesnesi yerleştirmek üzere kod sayfamıza geri dönelim. Toolbox içerisinden, Grid üzerine bir AppBar daha sürükleyip bırakalım.

AppBar nesnemizin VerticalAllignment özelliğini Top olarak ayarlayalım. Sonrasında AppBar içerisine bir StackPanel sürükleyip bırakalım ve StackPanel nesnemizin Orientation özelliğini Horizontal olarak belirleyelim. Ardından, StackPanel içerisinde iki ayrı Button nesnesi tanımlayalım ve özelliklerini, genişlik 140, yükseklik 60 olacak şekilde belirleyelim. Butonlarımız için Content olarak da B1 ve B2 değerlerini kullanalım. Bu işlemler sonrasında XAML sayfasındaki kodlar aşağıdaki gibi olmalıdır.

Burada, butonları AppBar üzerinde yatay olarak sıralayabilmek amacıyla StackPanel nesnesinden faydalandık. StackPanel yerine başka bir yerleşim kontrolü de tercih edilebilirdi.

Uygulamanın Tekrar Çalıştırılması
Şimdi, F5 kısayolu ya da Local Machine butonu ile uygulamamızı tekrar çalıştıralım ve AppBar nesnelerimizin ikisini de görebilmek amacıyla uygulama açıldıktan sonra ekranın herhangi bir yerinde farenin (mouse) sağ tuşunu kullanalım.

Üst kısımdaki AppBar için herhangi bir fonksiyonellik kodlamadık sadece görsel olarak bir tanımlama yaptık. Burada kullanmış olduğumuz butonların da işlevselliğini ihtiyaçlarınız doğrultusunda kodlayabilirsiniz.

AppBar Nesnesinin Fon Rengini Tanımlamak
Tasarımınız ile uyumlu olması için AppBar nesnesinin fon rengini tanımlamak isterseniz, Background özelliğine uygun değeri atayarak bu işlemi gerçekleştirebilirsiniz. AppBar nesnesinin açılış etiketini aşağıdaki gibi kodlayarak, fon renginin kırmızı olmasını sağlayabilmek mümkün.

<AppBar VerticalAlignment="Top" Background="Red">

Bu işlemin ardından, üst kısımda yer alan AppBar kırmızı olarak karşımıza çıkacaktır.

AppBar’ın Programatik Olarak Kapatılması

B1 ve B2 isimli butonların uygulama ile ilgili bir işlevsellik sağladıklarını düşünürsek butona tıklandıktan sonra, kullanıcı AppBar’ı kapatmak için ek olarak bir hamle daha yapmak zorunda bırakılmamalıdır. AppBar’ın otomatik olarak kapatılması için AppBar nesnesinin IsOpen özelliğine false değer atamak yeterli olacaktır. Aynı şekilde, true değer atayarak, AppBar nesnesinin programatik olarak açılması da sağlanabilir. Bu işlemlerin programatik olarak gerçekleştirilebilmesi için AppBar nesnesinin Name özelliğinin önceden tanımlanması gerektiğini unutmamak gerekir.

Kullanıcı etkileşimi ile tüm AppBar nesneleri aynı anda açılır veya kapanırken, programatik olarak bu nesneleri ayrı ayrı açmak ya da kapatmak mümkündür.

Hiç yorum yok:

Yorum Gönder