[WPF-Panel] GridSplitter 사용법 및 예제

by westAhn

GridSplitter란?

GridSplitterGrid의 행 또는 열 사이에 배치되어 나눠진 구역의 크기를 자유롭게 조절할 수 있는 컨트롤러이다. 아래 그림과 같이 파일 탐색기의 구역 크기 조절하거나 분할 된 창의 크기를 조절할 때 주로 사용된다.

GridSplitter가 있는 파일 탐색기
GridSplitter가 있는 분할 된 창

GridSplitter 사용법 및 예제

예제1-Vertical GridSplitter

Column을 3개 선언하고 0번째 Column과 2번째 Column에는 TextBlock을 선언하였다. 그리고 Column 1번째에는 빨간색 GridSplitter를 배치하였다. GridSplitter의 고정된 넓이와 HorizontalAlignment속성을 Streach로 설정해주어야 자유롭게 움직일 수 있다.

XAML
<Window x:Class="GridSplitterTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitter" Height="200" Width="250">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="5" />
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        
        <TextBlock Grid.Column="0" Text="Column 0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        <GridSplitter Grid.Column="1" Width="5" Background="Red" HorizontalAlignment="Stretch"/>
        <TextBlock Grid.Column="2" Text="Column 2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
    </Grid>
</Window>
Grid의 Column 3개로 나뉘어져 있고 Column 0번째와 2번째는 TextBlock이 있고 가운데 빨간 GridSplitter가 있는 창

예제2-Horizontal GridSplitter

Row를 3개 선언하고 0번째 Row와 2번째 Row에는 TextBlock을 선언하였다. 그리고 Row 1번째에는 빨간색 GridSplitter를 배치하였다. GridSplitter의 고정된 높이와 HorizontalAlignment속성을 Streach로 설정해주어야 자유롭게 움직일 수 있다.

XAML
<Window x:Class="GridSplitterTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitter" Height="200" Width="250">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="5" />
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Text="Row 0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        <GridSplitter Grid.Row="1" Height="5" Background="Red" HorizontalAlignment="Stretch"/>
        <TextBlock Grid.Row="2" Text="Row 2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>

    </Grid>
</Window>
Grid의 Row가 3개로 나뉘어져 있고 Row 0번째와 2번째는 TextBlock이 있고 가운데 빨간 GridSplitter가 있는 창

Leave a Comment