Şu zamana kadar WPF kodlamalarında hep XMAL yani arayüzlerle ilgilendik. Şu zamana gördüğümüz panellerde de Grid de aslında panel olarak sayılıyor… Grid ve StackPaneli gördük. Stack Paneli irdeleyelim.
StackPanel içine aldığı elementleri veya kontrolleri yatay veya dikey olarak hizalandırır. Bunu da Orientation propertysi ile yapar. Bu varsayılan olarak Vertical’dir yani yukarıdan aşağıya default olarak panel içine kodlanan kontrol ve elementleri sıralar… Bunu Orientation=”Horizontal” komutuyla yatay olarak ayarlayabiliriz. StackPanel büyüklüğünü default olarak içerisindeki bileşenlerden alır. Yani genişlik ve yükseklik olarak en geniş olan kontrolün durumunu alır.
MaxHeight, MinHeight, MaxWidth, MinWidth gibi propertyler ile tekrardan yapılandırılabilir. Önceki örneklerimize göre bugün oluşturduğum StackPanel örneğini bir irdeleyelim:
Stack panel kodumuz:
<Window x:Class="TutkuTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:TutkuTest" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800" Background="WhiteSmoke"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="200" MaxWidth="230"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition MinHeight="80" MaxHeight="100"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Grid.Column="0" Grid.ColumnSpan="6" Background="Black" Orientation="Horizontal"> <Label Foreground="Yellow" Content="Logo" VerticalAlignment="Center" Margin="10"/> <Label Foreground="White" Content="Menü" VerticalAlignment="Center"/> </StackPanel> <StackPanel Grid.Row="1" Grid.RowSpan="5" Background="DarkOliveGreen" Orientation="Vertical"> <Label Foreground="White" Content="Menü"/> <Label Foreground="White" Content="Menü"/> <Label Foreground="White" Content="Menü"/> <Label Foreground="White" Content="Menü"/> <Label Foreground="White" Content="Menü"/> <Label Foreground="White" Content="Menü"/> </StackPanel> <StackPanel Grid.Column="1" Grid.Row="1" Grid.RowSpan="5" Grid.ColumnSpan="5" Background="WhiteSmoke" Margin="2" Orientation="Vertical"> <Label Content="SECURITY CONTROL" HorizontalAlignment="Center" FontSize="25" /> <Label Content="Kullanıcı Adı:"/> <TextBox Text="TextBox Metin"/> <Label Content="Parola"/> <PasswordBox /> <Button Content="Login" Margin="0,10,0,0"/> </StackPanel> </Grid> </Window>
Kodumuza göre bir gridimiz var ve bunun içinde 6 satır ve 6 sütun var. Gridimiz büyüdükçe 6 sütun ve satır da büyüyor. Çünkü 1 satır ve 1 sütun dışındaki tüm sütunların boyutları * ile ayarlandı yani bir limit vermedik. Minimum değerler atadık 1er satır ve sütun için…
WPF’e hayranlığımın tek sebebi bu esneklik diyebilirim 🙂
Şimdi StackPanel kodları ve karşımıza gelen görüntüleri eşleştiren resmimize bakalım:
Görseli irdeleyelim, Mavi kalemle çizdiğimiz kısım gridin 0.indisli (Grid.Column=”0″) sütunundan başlıyor ve 6 sütunu da birleştirip tek satırda kullanıyor (Grid.ColumnSpan=”6″) ve bu stackpanelimiz içine aldığı nesneleri yatay şekilde sıralıyor (Orientation=”Horizontal”)… Diğer renklendirme kodlarını biliyorsunuz zaten.
Kırmızı kalemle çizdiğimiz kısım koyu yeşil alan 1. indislı satırdan başlıyor (Grid.Row=”1″) ve 5 satırı da birleştirip bir sütunmuş gibi kullanıyor. (Grid.RowSpan=”5″) ve StackPanelimiz nesneleri dikey yani yukarıdan aşağı şekilde sıralıyor. Burada orientation değerini vertical olarak vermesek de olur, default olarak vertical şekilde sıralama yapar.
Yeşil kalemle çizdiğimiz kısım ise 1 indisli sütun ve 1 indisli satırdan ( Grid.Column=”1″ ve Grid.Row=”1″ ) başlıyor 5’er satır ve sütunu (Grid.ColumnSpan=”5″ ve Grid.RowSpan=”5″) birleştiriyor. Bu panelimizde de nesneler alt alta sıralanıyor.
CodeBehind kısmından da panel programlamak mümkün ancak layout konusunda XMAL üzerinden düzenleme yapmayı daha uygun buluyorum.
Bir yanıt yazın