다음을 통해 공유

방법: GridSplitter를 사용하여 사용자가 크기를 조정할 수 있는 응용 프로그램 만들기

  • 아티클

GridSplitter 컨트롤과 Grid 컨테이너 컨트롤을 함께 사용하여 런타임에 사용자가 크기를 조정할 수 있는 창 레이아웃을 만들 수 있습니다. 예를 들어 UI가 여러 영역으로 분할된 응용 프로그램의 경우 사용자가 분할자를 마우스로 끌어 더 많이 표시하려는 영역을 넓힐 수 있습니다.

Grid에 추가된 GridSplitter 컨트롤은 모눈 컨트롤의 자식 컨트롤이 되며, 다른 자식 컨트롤과 마찬가지로 행과 열에 배치해야 합니다. GridSplitter의 너비 또는 높이가 0이 아니어야 사용자가 런타임에 이를 잡아 끌 수 있습니다.

GridSplitter와 관련하여 다음과 같은 지침을 따르는 것이 좋습니다.

  • 다른 컨트롤이 들어 있지 않은 전용 행 또는 열에 GridSplitter를 배치합니다.

  • GridSplitter가 들어 있는 행의 높이나 열의 너비를 Auto로 설정합니다.

  • GridSplitter에 Grid를 하나만 지정합니다. Grid에 컨테이너 패널을 추가하여 레이아웃을 완성합니다.

세로 GridSplitte를 만들려면

  1. 디자인 뷰에서 Grid를 선택합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동를 참조하십시오.

  2. GridSplitter를 표시할 열을 추가합니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.

    참고

    디자이너에서 행과 열을 배치하기가 어려운 경우도 있습니다. 이러한 경우 XAML 편집기를 사용하여 Grid를 구성할 수 있습니다. 샘플 XAML 태그는 이 항목의 끝 부분에 있는 예제 단원을 참조하십시오.

  3. 도구 상자에서 GridSplitter 컨트롤을 추가된 열에 끌어 놓습니다.

  4. 속성 창에서 GridSplitter에 대해 다음 속성을 설정합니다.

    Property

    값

    가능한 값

    ResizeBehavior

    BasedOnAlignment

    BasedOnAlignment

    CurrentAndNext

    PreviousAndCurrent

    PreviousAndNext

    ResizeDirection

    Columns

    Auto

    Column

    Rows

    Grid.Column

    GridSplitter를 표시할 열입니다. 열 번호는 0부터 시작됩니다.

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    Grid의 전체 행 수입니다.

    Width

    0이 아닌 숫자입니다. 예를 들어 10을 사용합니다.

    Height

    Auto

    HorizontalAlignment

    Stretch

    Left

    Center

    Right

    Stretch

    VerticalAlignment

    Stretch

    Top

    Center

    Bottom

    Stretch

    Margin

    0

  5. 디자인 뷰에서 Grid를 선택합니다.

  6. GridSplitter가 들어 있는 ColumnDefinition의 Width를 Auto로 설정합니다.

가로 GridSplitte를 만들려면

  1. 디자인 뷰에서 Grid를 선택합니다. 자세한 내용은 방법: 디자인 화면의 요소 선택 및 이동를 참조하십시오.

  2. GridSplitter를 표시할 행을 추가합니다. 자세한 내용은 방법: 표에 행 및 열 추가를 참조하십시오.

    참고

    디자이너에서 행과 열을 배치하기가 어려운 경우도 있습니다. 이러한 경우 XAML 편집기를 사용하여 Grid를 구성할 수 있습니다. 샘플 XAML 태그는 이 항목의 끝 부분에 있는 예제 단원을 참조하십시오.

  3. 도구 상자에서 GridSplitter 컨트롤을 추가된 행에 끌어 놓습니다.

  4. 속성 창에서 GridSplitter에 대해 다음 속성을 설정합니다.

    Property

    값

    가능한 값

    ResizeBehavior

    BasedOnAlignment

    BasedOnAlignment

    CurrentAndNext

    PreviousAndCurrent

    PreviousAndNext

    ResizeDirection

    Rows

    Auto

    열

    Rows

    Grid.Column

    0

    Grid.ColumnSpan

    Grid의 전체 열 수입니다.

    Grid.Row

    GridSplitter를 표시할 행입니다. 행 번호는 0부터 시작됩니다.

    Grid.RowSpan

    1

    Width

    Auto

    Height

    0이 아닌 숫자입니다. 예를 들어 10을 사용합니다.

    HorizontalAlignment

    Stretch

    Left

    Center

    Right

    Stretch

    VerticalAlignment

    Stretch

    Top

    Center

    Bottom

    Stretch

    Margin

    0

  5. 디자인 뷰에서 Grid를 선택합니다.

  6. GridSplitter가 들어 있는 RowDefinition의 Height를 Auto로 설정합니다.

예제

다음 XAML은 가로 GridSplitter를 만듭니다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

참고 항목

작업

연습: WPF Designer를 사용하여 크기를 조정할 수 있는 응용 프로그램 만들기

참조

GridSplitter

기타 리소스

WPF Designer의 레이아웃

GridSplitter