WPF - 그리드 스플리터(Grid Splitter)

그리드 스플리터(Grid Splitter)

Grid를 분할하여 사용자가 크기를 조절할 수 있도록 만드는 컨트롤 입니다.

어떻게 사용할까?

크기를 조절하려는 컨트롤(Control)과 '그리드 스플리터(Grid Splitter)' 모두 Grid Column 또는 Grid Row 속성으로 묶여 있어야합니다.

예를들어 컨트롤 Grid.Column 값이 0번이라면 그리드 스플리터 Grid.Column 값은 1번인 식으로 묶여야 사용할 수 있습니다. 

<Grid Grid.Column="0" Background="#82AAE3"></Grid>
<GridSplitter Grid.Column="1" Background="Black" HorizontalAlignment="Center" Width="5"/>
<Grid Grid.Column="2" Background="#91D8E4"></Grid>

세로 분할(Vertical)

<Window x:Class="GridSpliter.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:GridSpliter"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="#82AAE3"></Grid>
        <GridSplitter Grid.Column="1" Background="Black" HorizontalAlignment="Center" Width="5"/>
        <Grid Grid.Column="2" Background="#91D8E4"></Grid>
    </Grid>
</Window>

가로 분할(Horizontal)

<Window x:Class="GridSpliter.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:GridSpliter"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="#82AAE3"/>

        <GridSplitter Grid.Row="1" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5"/>
        <Grid Grid.Row="2" Background="#91D8E4"/>
    </Grid>
</Window>

정리

아직 아리송하시다면 다이어그램을 참고하시면 이해가 더 쉽습니다.

세로 분할(Vertical)

Grid Splitter  정렬은 가로 정렬 속성을 'Center', 세로 정렬 속성은 'Stretch' 로 설정합니다.

가로 분할(Horizontal)

Grid Splitter  정렬은 가로 정렬 속성을 'Stretch', 세로 정렬 속성은 'Center' 로 설정합니다.