GridSplitter Elemanı

Önceki başlıklarda gördüğünüz gibi Grid ile mevcut alanı bağımsız hücrelere ayırmak çok kolay. Satır ve sütun tanımlamalarını kullanarak her satır veya sütunun ne kadar alan işgal edeceğine kolayca karar verebilirsiniz, fakat ya kullanıcının bunu değiştirmesini mümkün kılmak isterseniz? İşte burada GridSplitter kontrolü sahneye çıkar.

GridSplitter'i bir Grid'de satır ya da sütuna onun için yeterli miktarda boşluk (örn. 5 piksel) eklenerek kullanılır. Bu kullanıcıya onu sürükleyip çekerek iki yanındaki alanların büyüklüklerini ayarlama imkanı sunar. İşte bir örnek :

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterSample" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>
</Window>

Göreceğiniz gibi ortasında 5 piksellik bir kolonla alanı iki eşit sütuna böldüm. Her iki yana gösterim için birer TextBlock kontrolü ekledim. Ekran görüntüsünden görüldüğü üzere GridSplitter iki kolon arasına yerleştirilmiş ve mouse üzerine getirilince işaretçi tutup çekerek boyutu değiştirebileceğinizi gösteren iki tarafa ok şeklini alıyor.

Yatay GridSplitter

GridSplitter'i kullanmak çok kolay ve tabi ki yatay olarak da bölme yapabiliyor. Gerçekte onu yatay yerine dikey çalıştırmak için yapmanız gereken fazla bir şey yok, sonraki örneğe bakalım :

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>

Gördüğünüz gibi satırları sütunlara dönüştürdüm ve GridSplitter için genişlik yerine yükseklik belirledim. GridSplitter bundan sonrasını kendi yönetir, ama yapamazsa ResizeDirection özelliği ile onu satır ya da sütun moduna zorlayabilirsiniz.