WPF uygulamalarında kullanılan ekranlara ait denetimlerin mutlaka bir “Layout” bileşeni içerisinde konuşlandırılmış olması gerekmektedir.Her bir Layout bileşeni içeriğinde taşıdığı denetimleri kendine özgü düzen ve yerleştirme stiline sahiptir. Bu bileşenlerden biriside Grid‘ dir.
Grid satır ve sütun bazında yerleşime olanak sağlamaktadır. Grid oluşturulduktan sonra istenilen sayıda satır ve sütuna bölünebilir ve bu satır veya sütunların genişlikleri istenilen ölçü yada yüzdesel olarak ayarlanabilir.
“Grid” bileşeni içerisinde yer alacak elementlerin hangi hücrelere geleceğini belirlemek için eklenmiş özellik (Attached Property) tekniğinden yararlanılmaktadır. Buna göre “Row” ve “Column” özelliklerine atanan değerler ile yerleşim hücresi belirlenir. “Span” özelliği ile denetimin satırda veya sütunda kaç adet hücre içerisine yerleştirileceği bildirilir.
Yeni bir WPF projesi açıldığında XAML kodlarını incelediğimizde Grid bileşeninin varsayılan olarak geldiğini görebiliriz.
Grid içerisine satır ve sütun ekleme işini yapmak için ister XAML kodlarını kullanabileceğimiz gibi fare yardımıyla XAML kodlarının otomatik olarak oluşturulmasını sağlayabiliriz. Daha sonra oluşturulan bo kodlar üzerinde gerekli ayarlamaları yapabiliriz. ‘i sütunlara bölmek için fareyle üst tarafa satırlara bölmek için ise sol tarafa doğru gittiğimizde aşağıdaki şekilde çizgilerin belirdiğini görebilirsiniz.
Bu şekilde Grid‘i böldüğümüzde
XAML kodlarının oluştuğunu görüyoruz.“Grid” içerisindeki satırları belirlemek için “RowDefinitions”, sütunları belirlemek içinse “ColumnDefinitions” kullanılır. Satırlar için yükseklik değeri “Height” özelliği ile sütunlar için genişlik değeri “Width” özelliği ile belirlenir. Dikkat çekici noktalardan birisi de “Auto” ve “*” kullanımıdır. “Auto” ifadesine göre yükseklik veya genişlik değeri içerideki denetimin boyutuna göre otomatik olarak ayarlanır. Diğer taraftan “*”, kalan tüm mesafeyi kullan anlamında düşünülebilirsiniz.
Grid içine kontrolleri eklerken;
Grid.Row ve Grid.Columns özellikleri kullanılır.
Alttaki örneği inceleyerek TextBlock Kontrollerinin Grid içinde hangi satır ve sütunda olması gerektiğinin nasıl ayarlanabileceğini görebilirsiniz.
[css] <Window x:Class="grid_ornek1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="45" />
<RowDefinition Height="45" />
</Grid.RowDefinitions>
<TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="0" Foreground="Green"
Text="Adı Soyadı" Height="20" VerticalAlignment="Top" />
<TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="1" Foreground="Green"
Text="Yaşı" Height="20" VerticalAlignment="Top" />
<TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="2" Foreground="Green"
Text="Telefonu" Height="20" VerticalAlignment="Top"/>
<TextBlock FontSize="12" Grid.Row="1" Grid.Column="0">Ali Akın</TextBlock>
<TextBlock FontSize="12" Grid.Row="1" Grid.Column="1">33</TextBlock>
<TextBlock FontSize="12" Grid.Row="1" Grid.Column="2">125440</TextBlock>
<TextBlock FontSize="12" Grid.Row="2" Grid.Column="0">Kaan Güler</TextBlock>
<TextBlock FontSize="12" Grid.Row="2" Grid.Column="1">35</TextBlock>
<TextBlock FontSize="12" Grid.Row="2" Grid.Column="2">124622</TextBlock>
</Grid>
</Window>
[/css]
.
Grid Kullanımı ile ilgili bir başka örneği video’ dan izleyebilirsiniz.
