Grid 레이아웃 패널 사용

Blend for Visual Studio에서는 그리드를 개발의 기본 레이아웃 컨테이너로 사용합니다. 그리드 레이아웃 패널은 특정 레이아웃 기능을 관리하기 위해 디자인된 다른 레이아웃 컨테이너에 비해 가장 유연한 레이아웃 컨테이너입니다. A 레이아웃은 열 및 행으로 구성되는 유연한 영역을 정의합니다. 그리드의 자식 요소는 행 및 열 할당과 내부 클래스 논리에 따라 측정되고 정렬됩니다. 그리드는 런타임에 그리드의 크기를 조정하는 동작과 같은 편집 환경을 제공합니다. 이 컨테이너에서는 사용자가 만든 열과 행 구분선 을 이동하면 해당 Margin 속성을 유지하도록 해당 행과 열 내의 개체의 크기가 변경됩니다.

자산패널 또는 도구 패널의 레이아웃 컨테이너 단추에서 Grid 를 선택한 다음 포인터를 사용하여 아트보드로 끌어 문서에 Grid을 추가합니다. 다음의 XAML 코드가 프로젝트에 추가됩니다.

<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>

Grid 개체 사용 방법에 대한 자세한 내용은 행 또는 열 추가/제거 및 행 또는 열의 크기 조정 옵션 변경을 참조하십시오.

위치 지정, 크기 조정 및 정렬

Grid 패널의 레이아웃은 Alignment, Margin, Width 및 Height 속성을 사용하여 효과적으로 개체의 위치 및 크기를 조정하고 정렬하는 용도로 사용합니다.

• Alignment   부모 개체를 기준으로 개체의 상대적인 위치를 결정합니다.

• Margins   자식 개체의 외부와 패널의 경계선 사이에 있는 컨트롤 주위의 빈 공간 크기를 결정합니다.

• Width 및 Height   픽셀 단위(약 1/96인치인 장치 독립적 단위)의 고정 값입니다. 이러한 속성을 Auto로 설정하면 자식 개체의 크기가 부모 패널의 크기에 따라 자동으로 조정됩니다.

자식 개체 정렬

모눈의 영역을 나눠 Grid 레이아웃 패널 안에서 개체를 정렬할 수 있습니다. 열과 행 구분선 을 사용하여 그리드 내에서 개체의 레이아웃을 지정할 수 있는 영역을 정의하는 일련의 행과 열을 만드는 방식으로 작업을 수행합니다. Grid 레이아웃 패널이 문서의 활성 컨테이너가 되면 파란색 눈금자가 모눈의 위쪽과 왼쪽을 따라 나타납니다. 선택 도구 를 사용하여 눈금자 위로 포인터를 이동하면 포인터가 더하기(+) 기호가 있는 화살표 로 바뀌고 열이나 행이 추가될 위치에 주황색 줄이 표시됩니다. 위쪽 눈금자에서 원하는 위치를 클릭하여 모눈의 해당 위치에 열을 추가하고 왼쪽 눈금자를 클릭하여 행을 추가합니다.

열 모눈 구분선 추가

Grid 레이아웃 패널에서 자식 개체가 서로 겹치도록 그릴 수 있습니다. 겹치는 개체는 부모 개체 내에 개체를 그리거나 배치한 순서인 해당 Z 순서에 따라 표시됩니다. 개체 메뉴에서 순서 지정을 사용하거나 개체 및 타임라인 패널에서 항목을 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 원하는 명령을 클릭하여 개체의 Z 순서를 변경할 수 있습니다. 자식 개체를 여러 열이나 행에 걸쳐 배치할 수도 있습니다.

또한 맞추기를 설정한 후 맞춤선에 맞추어 개체를 더 잘 정렬할 수 있습니다. 맞추기를 사용하면 아트보드에서 개체를 끌어 레이아웃 패널 또는 모눈 패널의 열 및 행 구분선과 같은 동일한 컨테이너 개체 내에 있는 다른 개체의 여백, 기준선(텍스트 개체인 경우) 또는 맞춤(빨간색 파선)에 맞출 수 있습니다.

자세한 내용은 Blend에서 맞추기 설정 또는 해제을 참조하십시오.

행 및 열 크기 조정

Grid 레이아웃 패널의 모눈 레이아웃 모드에 있으면 모눈 패널의 위쪽 및 왼쪽에 있는 눈금자 주위에 자물쇠 아이콘이 나타납니다. 이러한 자물쇠 아이콘을 사용하면 모눈의 행과 열에 사용되는 크기 조정 형식을 설정할 수 있습니다. 행의 높이 값과 열의 너비 값을 설정할 수 있습니다. 모눈의 행과 열 크기를 조정하는 옵션은 세 가지이며 이러한 옵션은 모눈의 자식 개체 정렬에도 영향을 줍니다. 크기 조정 옵션은 다음과 같습니다.

• 고정 크기 - 픽셀 값(px)을 사용하며 자물쇠 아이콘을 클릭하여 픽셀 크기 조정(잠긴 위치) 으로 설정하는 방식으로 설정됩니다. 고정 크기 조정은 행이나 열의 크기가 조정되지 않는다는 의미입니다.

  참고

  Blend 프로젝트에서 픽셀이란 화면 해상도가 96dpi로 설정된 모니터의 픽셀 크기와 동일한 장치 독립적 픽셀이나 장치 독립적 단위를 말합니다.모니터 크기나 화면 해상도에 관계없이 각 단위는 약 1/96인치입니다.

• 배율 크기 조정 - 배율 값(*)을 사용하며 자물쇠 아이콘을 클릭하여 배율 크기 조정(잠금 해제된 위치) 으로 설정하는 방식으로 설정됩니다. 배율 크기 조정은 HTML의 백분율 크기 조정과 유사한 효과가 있습니다.

• 자동 크기 조정 -  정의되지 않은 Width 및 Height 속성을 사용하며, 자물쇠 아이콘을 클릭하여 자동 크기 조정 으로 설정하는 방식으로 설정됩니다. 자동 크기 조정은 부모 개체의 크기가 조정되면 모눈 패널 내의 자식 개체의 크기도 조정된다는 의미입니다.

모눈 패널의 서로 다른 열에 설정된 배율 크기 조정 및 자동 크기 조정

아트보드에서 그리드 구분선 을 선택하면 속성 패널을 사용하여 크기 조정 옵션을 선택할 수 있으며, 배율 크기 조정이나 고정 크기 조정을 사용할 경우 Width 속성을 조정할 수 있습니다. 속성 패널에서 열 모눈 구분선의 MaxWidth 및 MinWidth 속성을 설정할 수도 있습니다.

자식 개체 위치 지정

그리드 레이아웃 모드에서는 각 개체에 대해 여백을 설정하여 그리드 내 자식 개체의 위치를 설정할 수 있습니다. 여백은 모눈을 정의하는 행과 열 또는 모눈 내 셀의 가장자리부터 개체까지의 오프셋 크기를 지정합니다. 모눈의 위치로 자식 개체를 끌 때 여백을 설정하며 선택한 개체의 가장자리부터 다음 모눈선(행 또는 열)까지의 거리를 나타냅니다. 여백(매듭 모양) 표시기(Adorner)를 클릭하여 설정할 수도 있습니다. 여백 표시기(Adorner)가 또는 처럼 열려 있으면 여백이 설정되지 않은 것이며, 여백 표시기(Adorner)가 또는 처럼 닫혀 있으면 여백이 설정된 것입니다. 런타임에 모눈의 크기를 조정하면 여백이 설정되지 않은 위치에 있는 개체는 그대로 유지됩니다. 모눈의 크기를 조정하면 여백에 연결된 개체도 여백과 함께 이동합니다.

Blend에서는 간단한 규칙을 사용하여 기본 맞춤을 설정합니다. 즉, 그리거나 크기를 조정하는 자식 개체가 행 또는 열의 가운데를 지나면 Width 및 Height가 Auto로 설정되고, 그렇지 않으면 고정됩니다. 모눈의 크기가 조정될 때 여백이 적용되었는지 여부를 나타내는 맞춤 옵션을 설정할 수도 있습니다. 다음 그림과 같이 맞춤은 모눈 내에서 실선(맞춤 설정) 또는 파선(맞춤이 설정되지 않음)으로 표시됩니다.

왼쪽과 오른쪽에 연결(여백 설정 - 여백 값 표시)되고 위쪽과 아래쪽에서 연결되지 않은(여백이 설정되지 않음) 모눈 패널의 단추

• HorizontalAlignment

  • Left    왼쪽에 고정되지만 크기 조정 시 오른쪽으로 확장됩니다.

  • Center   크기 조정에 관계없이 항상 가로 가운데에 고정됩니다.

  • Right  오른쪽에 고정되지만 크기 조정 시 왼쪽으로 확장됩니다.

  • Stretch  크기 조정 시 양쪽 가로 방향으로 확장됩니다.

• VerticalAlignment

  • Bottom  아래쪽에 고정되지만 크기 조정 시 위쪽으로 확장됩니다.

  • Center  크기 조정에 관계없이 항상 세로 가운데에 고정됩니다.

  • Top   . 위쪽에 고정되지만 크기 조정 시 아래쪽으로 확장됩니다.

  • Stretch  크기 조정 시 양쪽 세로 방향으로 확장됩니다.

• Margin 설정   Top, Left, Right 및 Bottom 여백의 픽셀 단위(약 1/96인치의 장치 독립적 단위) 고정 값입니다. 이 값은 모눈의 위치로 자식 개체를 끌 때 설정되며 선택한 개체의 가장자리부터 다음 모눈선까지의 거리를 나타냅니다.

자식 개체 크기 조정

자식 개체에는 고정 크기와 자동 크기의 두 가지 기본 크기 조정 옵션을 사용할 수 있습니다. 고정 크기 개체는 레이아웃 범주에서 특정 너비 및 높이 값이 설정되어 있습니다. 자동 크기 개체의 너비 및 높이 값은 Auto로 설정되어 있으므로 부모 패널의 크기에 따라 자동으로 크기가 조정됩니다.

• MinWidth 및 MinHeight   행 또는 열 내에서 개체의 크기 또는 비율 크기를 조정할 수 있는 가장 작은 값입니다.

• MaxWidth 및 MaxHeight   행 또는 열 내에서 개체의 크기 또는 비율 크기를 조정할 수 있는 가장 큰 값입니다. 최대 크기를 설정하지 않으려는 경우 이 속성을 Infinity로 설정하면 됩니다.

• Clip contents   부모 패널에서 해당 자식 개체를 잘라낼지 여부를 결정합니다.

GridSplitter

GridSplitter는 사용자가 런타임에서 일부 그리드의 크기를 수동으로 조정하기 위해 상호 작용하는 그리드 패널에서 사용되는 컨트롤입니다. 는 자산 패널에서 사용할 수 있습니다. GridSplitter는 자산 패널에서 사용할 수 있습니다.

그리드 패널, GridSplitter 컨트롤 또는 사용자 지정 레이아웃 패널 대한 자세한 내용은 System.Windows.Controls 네임 스페이스 에서 에 대한 .NET Framework 클래스 라이브러리 섹션 또는 System.Windows.Controls 네임 스페이스에서 에 대한 .NET Framework 클래스 라이브러리 섹션을 참조하십시오.

참고 항목

작업

행 또는 열 추가/제거

행 또는 열의 크기 조정 옵션 변경