[WPF] GridSplitter - 그리드를 분할 해보자

그리드를 분할해야 사용자가 화면크기를 조절할 수 있게 됩니다.

WPF에서는 'GridSplitter'를 사용해야 합니다.

 

이 컨트롤을 어떻게 사용하는지 알아봅시다.

이 포스팅은 MSDN을 참고하였습니다.

참고 : MSDN - 방법: GridSplitter로 행 크기 조정

 

 

1. 사용 전 알아야 하는 것

'GridSplitter'를 사용하려면 'GridSplitter'가 컬럼이든 로우든 한자리를 차지하고 있어야 합니다.

가로로 있는 스플리터를 쓰고 싶으면 컬럼을 하나 더 만들어야 하고

세로로 있는 스플리터를 쓰고 싶으면 로우를 하나 더 만들어야 합니다.

 

 

2. 디자인

MSDN의 코드를 따라 해봅시다.

다음과 같이 디자인합니다.

 

 

자말코드는 다음과 같습니다.

<Window x:Class="GridSplitterTest.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:GridSplitterTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
 
        <StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
        <GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
        <StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>
    </Grid>
</Window>

 

이 코드를 실행하면 아래와 같이 동작합니다.

 

 

3. 세로 스플릿을 만들기

위에 예제에 있는 가로 스프리터로 바꿔 봅시다.

 

3-1. 바꾸는 방법

일단 로우로 분리된 그리드를 컬럼으로 바꿔 줍니다.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="50*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>

 

'StackPanel'과 'GridSplitter'의 속성을 바뀐 레이아웃에 맞게 수정해 줍니다.

<StackPanel Grid.Column="0" Background="Tan"/>
<GridSplitter Grid.Column="1"
        Background="Black" 
        ShowsPreview="True"
        Width="5" 
    />
<StackPanel Grid.Column="2" Background="Brown"/>

 

'GridSplitter'에 다음 속성을 추가합니다.

<GridSplitter Grid.Column="1"
        Background="Black" 
        ShowsPreview="True"
        Width="5" 
        HorizontalAlignment="Center"
        VerticalAlignment="Stretch"
    />

 

'HorizontalAlignment'는 'Center'로

'VerticalAlignment'는 'Stretch'로 바꿔줍니다.

 

 

3-2. 바뀐 코드

바뀐 전체 코드입니다.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="50*" />
    </Grid.ColumnDefinitions>
 
    <StackPanel Grid.Column="0" Background="Tan"/>
    <GridSplitter Grid.Column="1"
            Background="Black" 
            ShowsPreview="True"
            Width="5" 
            HorizontalAlignment="Center"
            VerticalAlignment="Stretch"
        />
    <StackPanel Grid.Column="2" Background="Brown"/>
 
</Grid>

 

이 코드를 실행해보면 다음과 같습니다.

 

 

마무리

프로젝트 :

GridSplitterTest.zip

다운로드

 

이걸 사용할때 'HorizontalAlignment'와 'VerticalAlignment'의 속성이 중요합니다.

이것 때문에 원하는 그림이 나오지 않는 경우가 많죠 ㅎㅎㅎ