GridSplitter

이전 챕터에서 살펴봤듯이, Grid 패널을 사용하면 사용 가능한 공간을 개별 셀로 쉽게 분할 할 수 있습니다. 열과 행 정의를 사용하면 각 행이나 열이 차지하는 공간을 쉽게 결정할 수 있지만, 사용자가 이를 변경할 수 있게 하려면 어떻게 해야 할까요? 여기에 GridSplitter 컨트롤 이라는 것이 있습니다.

GridSplitter는 적절한 크기의 공간(예 : 5 픽셀)을 Grid의 열 또는 행에 추가하여 사용하면 됩니다. 그런 다음 사용자가 GridSplitter를 좌우로 드래그하거나 위아래로 드래그 하면, 주변의 열이나 행의 크기가 변경됩니다. 다음은 그 예입니다.

<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>

보시다시피, 예제는 중간에 5픽셀 열이 있는 똑같이 너비의 공간 두 개가있는 Grid를 간단히 만들었습니다. 각 공간에 알아볼수 있는 TextBlock 컨트롤을 배치했습니다. 스크린 샷에서 볼 수 있듯이 GridSplitter는 두 열 사이의 구분선으로 렌더링되며, 마우스를 위에 놓으면 커서가 크기가 조정될 수 있음을 반영하도록 변경됩니다.

수평 GridSplitter

GridSplitter는 사용하기 쉽고 물론 수평 분할도 지원합니다. 사실, 다음 예제에서 볼 수 있듯이, 수직방향을 수평으로 변경하기 위해 아무것도 변경하지 않아도됩니다.

<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>

보시다시피 열을 행으로 변경하고 GridSplitter에서 높이 대신 너비를 정의했습니다. GridSplitter는 그 자체로 나머지를 계산하지만, 그렇지 않은 경우에는 ResizeDirection 속성을 사용하여 행 또는 열 모드로 강제 설정할 수 있습니다.