20/3/2009
Merhaba bu makalede Expression Blend 2’deki layout kontrollerini, yani Grid, Canvas, DockPanel, StackPanel, WrapPanel’i inceleyeceğiz.

Grid
Blend’de yeni bir proje açtığınızda default layout kontrolü olarak Grid gelir. Window üst ve sol barı üstünde mouse’nuzu hareket ettirirseniz. Turuncu bir çizgi belirecektir. Bu gridiniz için satırları ve sütunları belirleyecek olan çizgidir.

İstediğiniz yerde çizgiye tıklarsanız rengi maviye dönüşür ve bu artık gridinizin belirlediğiniz yerden sütuna ya da satıra ayrıldığını gösterir. Bu çizgiyi istediğiniz zaman hareket ettirebilir ve üstüne çift tıklayarak silebilirsiniz.

Window’un sol üst köşesindeki ikoncuğa basarak Grid moduna geçebilirsiniz.

Bunu yapınca alttaki gibi her satır ve sütun için bir kilit ikonu belirir. Bu kilitler o sütun ya da satırın, en – boy uzunluğunu değiştirip değiştirmeyeceğini belirler.

İki sütunlu gridimin sol sütununa bir dikdörtgen çizdim.

Dikdörtgenin marginlerini sıfırlayarak içinde durduğu sütunu tam olarak kaplamasını sağladım.

Aynı işlemi sağ sütun içinde yaptım.

F5’e basarak projenizi çalıştırdım.

Eğer pencereyi daraltırsam sütun enlerinin de değiştiğini görürüz. Çünkü bu sütunlar için kilitleri kapamadım.

Örneğin sol sütunu kilitlersek

Aynı şekilde pencerenin boyunu değiştirdiğimizde sol sütunda bir değişiklik olmayacaktır.

Canvas
Blendle yeni bir proje açtığınızda default gelen kontrolün Grid olduğunu söylemiştim. Bunu değiştirmek için Object panelinde LayoutRoot’a sağ klik yapıyoruz. Açılan menüde Change Layout Type>Canvas’a tıklıyoruz.

Canvas objeleri sol üst köşeyi orijin alarak içinde tutan bir kontroldür.

Alttaki Left, Top değerleri yukarıdaki dikdörtgenlerden sola en yakın olana ait.

Ve kesiksiz çizgiler bu left, top değerlerini temsil ediyor.

Eğer projeyi çalıştırıp, pencerenin boyunu değiştirseniz de bu karelerin orijin noktasına olan uzaklıklarının sabit kaldığını göreceksiniz.

DockPanel
DockPanel’i incelemek için LayoutRoot’u daha önce belirttiğim gibi değiştiriyoruz.

Properties tabındaki Layout panelinde LastChildFill’in kutucuğuna basıp, onu işaretlenmemiş duruma getiriyoruz.

Çalışma alanına bir kare çizince bu dört kenardan birine yapışacaktır.

Bu kenarı Layout panelindeki Dock açılır menüsü ile değiştirebiliriz.

Altta Dock’u Right olarak ayarladım.

Objenizi mouse ile sürüklerseniz ortada çukan üçgenleri üstüne gelip mouse u serbest bırakarak da objenin hangi kenara yapışacağını belirleyebilirsiniz.

DockPanel her zaman üst kenara yapışık kalmasını istediğiniz bir header için ya da altta yapışık kalmasını istediniz footer için mükemmel bir çözümdür.

StackPanel
LayoutRoot’u StackPanel’e ayarlıyoruz.

Altı tane kare çizdim. StackPanel bunları düşey olarak dizdi.

Tüm kareleri seçip Top Margin’i değiştirdim.

Sonuç altta.

Çift tıklayarak Layout’u seçiyorum

Ve Layout Panelinde HorizontalAligment’i düşey’den yataya çekiyorum.

Sonuç altta.

Yine tüm kareleri seçiyorum ve Left Marginlerini değiştiriyorum.

Sonuç altta.

Projeyi çalıştırdığınızda karelerimiz yatayda ortalanmış olarak yatak dizilmişlerdir.

Pencerenin boyunu değiştirdiğimde objelerim yatay ortalamayı korurlar ama pencereye sığmaya çalışmazlar. Peki bunu nasıl sağlarız? O da başka bir kontrol şimdi onu görelim.

WrapPanel
LayoutRoot’u WrapPanel’e ayarlıyoruz.

Aynı karelerden bu sefer 24 tane çizdim. Bu kareler WrapPanel içinde çalışma alanına sığmadıkları yerden alt satıra geçip devam ediyorlar. WrapPanel, StackPanel’in gelişmişidir.

Tüm karelerin marginleri altta. StackPanel deki dikey, düşey ayarları WrapPanel içinde bulunmaktadır.

Projeyi çalıştırıyoruz.

Pencereyi daralttığımızda WrapPanel içindeki objeler yeni boya göre kendilerini ayarlıyorlar. Bu örneğin imaj galeri hazırlamak için çok iyi bir kontrol.

Gruplama
Objelerinizi layout kontrolleri içinde gruplayabilirsiniz. Örneğin ben çalışma alanına alttaki gibi bir kare, bir daire, bir buton ekledim.

Tüm objeleri Shift ile seçip sağ klik yapıyorum ve açılan menüde Group Into>Canvas’a basıyorum.

Böylece objelerimi Canvas kontrolü içinde gruplamış oldum.

Eğer gruba tıklarsanız, tüm grubun tek bir obje gibi hareket ettiğini görürsünüz. Ama örneğin dairenin yerini değiştirmek istiyorsanız gruba çift tıklayarak içine girmelisiniz.

Çalışma alanına bir dikdörtgen ekledim.

Eğer bu yeni objeyi ALT ile grubun üstüne sürüklersem onu gruba eklerim.

Aynı şekilde bir objeyi dahil olduğu gruptan çıkarabilirsiniz.

Grubun üzerine sağ klik yapıp “Ungroup” a basarsanız. Grubu bozarsanız.

Objelerinizi hangi kontrol altında grupladığınıza dikkat edin. Alttaki örnekte, objelerimiz StackPanel içinde gruplanmış durumdalar ve bu yüzden StackPanel’in dizilimini aldılar.

Bu makalede Expression Blend 2’de layout kontrollerini inceledik

İyi çalışmalar

Teşekkürler.