Silverlight Öğreniyorum - Grid, Canvas, Stack Panel Kullanımı

Yusuf Karakaş tarafindan 11:48 tarihinde Silverlight | Silverlight Eğitim Serisi kategorisine eklenmistir.

Grid

Grid kullanacağımız Layout kontrolleri arasında en önemli kontrollerin başında geliyor. Sayfa tasarımında özellikle çözünürlük ile sıkıntı yaşamak istemiyor isek ve satır – sütun ayrımlı bir mimari kullanmamız gerektiğinde Grid kullanmamız doğru tercih olacaktır. Grid için bir benzetme yapacak olursak Html tarafında table yapısına benzetebiliriz. Kolon ayrımları, nesnelere ait konum özellikleri gibi ayarları yaptığımız yer olacaktır.

Peki, yavaş yavaş Grid in tasarımsal özelliklerine değinelim.

Grid Layout Properties

Grid in en önemli özelliklerinden biri satır ve sütun ayrımı yapabilmemize olanak sağlamasıdır.Böylelikle hayali bir web sitesi tasarladığımızı düşünecek olursak header ,content ve footer kısımlarını yapacağımız yer grid olacaktır.Aşağıdaki şekili inceleyecek olursak;
Koyu kısımlı yerlerin bir satır ayrımına uğradığını görüyoruz. Header ve Footer kısımları tamamıyla strect modda ve browser üzerinde çözünürlük her ne olursa olsun ona göre hareket edecektir.Yani büyültme ve küçültme işlemleri yaptığımızda herhangi bir değişiklik olmayacak.

Yapmış olduğumuz tasarımın xaml çıktısı ise aşağıdaki gibi olacaktır.

Yukarıdaki yapıda Genel Grid yapısının 3 satıra ayrıldığını görüyoruz.Daha sonra header ve footer kısımlarında birer rectangle nesnesi yerleştirildiğini görmekteyiz.Buradaki en önemli husus RectangleFooter nesnesinin Grid.Row özelliğinin bulunmasıdır.Böylelikle footer kısmı Grid’in üçüncü satırına denk gelecektir.Örneğimizde kolon yapısını kullanmamıza rağmen satır ve sütun yapısını matrislere benzetebiliriz.Grid içerisinde yapmış olduğumuz bu ayrımlara göre nesneler konumlanmış olacaktır.Örneğimize birde sütun ekleyerek oluşacak değişikliklere göz atalım.

Canvas

Canvas, Layout kontroller içerisinde inceleyeceğimiz ikinci yapı olarak karşımıza çıkıyor. Grid in Html de table yapısına benzediğini söylemiştik. Canvas ise Html tarafında Div yapısına benzer. Yalnız Grid gibi içine aldığı nesneyi set etme işlemine tabi tutmazlar. Örneğin Canvas’ın içine bir buton koyduğumuzu düşünecek olursak butonun Canvastan daha büyük olacağını söyleyebiliriz. Çünkü Grid deki gibi sağdan veya soldan mesafe hesaplanmaz. Peki, Canvasların kontrollere yaklaşımı nasıldır?

Canvas Layout Properties

Canvasların görevi kendi yükseklik ve genişlikleri olup, içine aldıkları nesneleri aşağıdan ve sağdan hizalamakla yükümlüdür. Nesneler de kendi genişlik ve yüksekliklerine sahiptir. Şimdi de bu kavramlara aşağıdaki şekil üzerinden bakalım.

Yukarıdaki şekle göre Xaml çıktısı aşağıdaki gibi olacaktır.

Görüldüğü üzere Silverlight da nesneler bağlı oldukları kontrole ait özellikleri taşırlar. İleriki bölümlerde programlama kısmında bu kontrollere nasıl erişebileceğimizi göreceğiz.

Stack Panel

Stack Panel en basit tanımıyla içine aldığı nesneleri yatay ve dikey olarak hizalamakla yükümlüdür. Görevi bakımından oldukça kullanışlı olan Stack Panel ile menu, liste, sayfalama işlemlerini rahatlıkla yapabiliriz. Stack Panel ‘in en önemli özelliği nesnelere yatay ve dikey konum kazandıran Orientation özelliğidir.

Yukarıdaki örneğimizde en basit şekilde Stack panel kullanımını görüyoruz. Yine diğer Layout kontrollerde olduğu gibi Stack Panel de içindeki nesnelere de genişlik, yükseklik ve margin değerleri verilebilir.