다음을 통해 공유


방법: 표에 행 및 열 추가

WPF(Windows Presentation Foundation) Grid 컨트롤을 통해 모눈 기반 레이아웃을 만들면 컨트롤을 손쉽고 빠르게 배치 및 정렬할 수 있습니다. 디자인 타임에 WPF Designer에서 Grid 컨트롤에 행과 열을 추가할 수 있습니다. 기본적으로 새 행과 열에는 Star 크기 조정이 사용됩니다.

중요

내용을 추가하기 전에 행 또는 열의 크기를 Auto로 설정하면 디자이너에서 행 또는 열을 볼 수 없습니다. 이로 인해 컨트롤을 올바른 행 또는 열에 배치하기가 어려울 수 있습니다. 이와 같이 나타나지 않도록 하려면 작업 중에는 별표를 사용한 크기 조정을 사용하고 작업이 완료되면 이를 Auto로 변경합니다.

이 항목에서는 Grid에 행 및 열을 추가하는 세 가지 방법에 대해 설명합니다. 모눈에서 행 및 열을 제거할 수도 있습니다. 자세한 내용은 방법: 모눈에서 행 및 열 제거를 참조하십시오.

디자이너 사용

WPF Designer에서 Grid 컨트롤을 선택하면 위쪽 및 왼쪽에 레일이 표시됩니다. 레일을 사용하여 Grid에 행 및 열을 직접 추가할 수 있습니다. XAML 뷰는 새 행 및 열에 따라 자동으로 업데이트됩니다.

참고

FlowDirection 속성이 RightToLeft로 설정된 경우 행에 대한 레일이 Grid의 오른쪽에 표시됩니다.

디자이너를 사용하여 모눈에 행을 추가하려면

  1. WPF Designer에서 Grid 컨트롤을 선택합니다.

  2. 포인터를 측면 레일의 외부 가장자리에 놓습니다. 포인터가 십자 모양으로 바뀌고 행이 추가될 위치를 나타내는 모눈선이 표시됩니다.

  3. 레일을 클릭하여 행을 설정합니다.

    모눈선이 해당 위치에 고정되고 레일에서 모눈선 끝에 모눈선 표시기가 나타납니다.

    모눈 내의 모눈선이나 레일의 모눈선 표시기를 끌어 행의 크기를 조정할 수 있습니다.

  4. (선택 사항) 2~3단계를 반복하여 행을 더 추가합니다.

디자이너를 사용하여 모눈에 열을 추가하려면

  1. WPF Designer에서 Grid 컨트롤을 선택합니다.

  2. 포인터를 위쪽 레일의 위쪽 가장자리에 놓습니다. 포인터가 십자 모양으로 바뀌고 열이 추가될 위치를 나타내는 모눈선이 표시됩니다.

  3. 레일을 클릭하여 열을 설정합니다.

    모눈선이 해당 위치에 고정되고 레일에서 모눈선 끝에 모눈선 표시기가 나타납니다.

    모눈 내의 모눈선이나 레일의 모눈선 표시기를 끌어 열의 크기를 조정할 수 있습니다.

  4. (선택 사항) 2~3단계를 반복하여 열을 더 추가합니다.

컬렉션 편집기 사용

컬렉션 편집기를 사용하여 Grid에 행 및 열을 추가할 수도 있습니다. 컬렉션 편집기를 사용하여 행 및 열을 구성하면 디자인 뷰와 XAML 뷰가 자동으로 업데이트됩니다.

컬렉션 편집기를 사용하여 모눈에 행을 추가하려면

  1. WPF Designer에서 Grid 컨트롤을 선택합니다.

  2. 속성 창에서 RowDefinitions 속성을 찾고 해당 속성 값 열에 있는 줄임표 단추를 클릭합니다.

    컬렉션 편집기 대화 상자가 나타납니다.

  3. 추가를 클릭하여 새 행을 추가합니다.

  4. (선택 사항) 행의 속성을 설정합니다.

  5. (선택 사항) 3~4단계를 반복하여 행을 더 추가합니다.

  6. 확인을 클릭하여 컬렉션 편집기를 닫고 WPF Designer로 돌아갑니다.

컬렉션 편집기를 사용하여 모눈에 열을 추가하려면

  1. WPF Designer에서 Grid 컨트롤을 선택합니다.

  2. 속성 창에서 ColumnDefinitions 속성을 찾고 해당 속성 값 열에 있는 줄임표 단추를 클릭합니다.

    컬렉션 편집기 대화 상자가 나타납니다.

  3. 추가를 클릭하여 새 열을 추가합니다.

  4. (선택 사항) 열의 속성을 설정합니다.

  5. (선택 사항) 3~4단계를 반복하여 열을 더 추가합니다.

  6. 확인을 클릭하여 컬렉션 편집기를 닫고 WPF Designer로 돌아갑니다.

XAML 편집기 사용

XAML 편집기에서 내용을 입력하여 Grid에 행 및 열을 직접 추가할 수도 있습니다. 디자인 뷰는 새 행 및 열에 따라 자동으로 업데이트됩니다.

XAML 편집기를 사용하여 모눈에 행을 추가하려면

  1. XAML 편집기에서 Grid 요소를 찾습니다.

  2. Grid.RowDefinitions 요소를 Grid 요소의 자식으로 추가합니다. 코드는 다음과 같습니다.

    <Grid>
        <Grid.RowDefinitions>
        </Grid.RowDefinitions>
    </Grid>
    
  3. RowDefinition 요소를 추가합니다. 예를 들면 다음 태그와 같습니다.

    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="5*" />
    </Grid.RowDefinitions>
    

XAML 편집기를 사용하여 모눈에 열을 추가하려면

  1. XAML 편집기에서 Grid 요소를 찾습니다.

  2. Grid.ColumnDefinitions 요소를 Grid 요소의 자식으로 추가합니다. 코드는 다음과 같습니다.

    <Grid>
        <Grid.ColumnDefinitions>
        </Grid.ColumnDefinitions>
    </Grid>
    
  3. ColumnDefinition 요소를 추가합니다. 예를 들면 다음 태그와 같습니다.

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

참고 항목

작업

연습: 동적 레이아웃 만들기

개념

WPF 디자이너의 정렬

절대 및 동적 위치를 사용하는 레이아웃

기타 리소스

WPF 컨테이너 컨트롤