다음을 통해 공유

연습: 맞춤선을 사용하여 Windows Forms에서 컨트롤 정렬

  • 아티클

폼의 정확한 컨트롤 배치는 많은 애플리케이션에서 우선 순위가 높습니다. Windows Forms 디자이너는 이 작업을 위한 다양한 레이아웃 도구를 제공합니다. 그 중에 가장 중요한 것이 SnapLine입니다.

맞춤선은 컨트롤을 다른 컨트롤과 정렬할 위치를 정확하게 보여 줍니다. 또한 Windows 사용자 인터페이스 지침에 지정된 대로 컨트롤 간의 여백에 권장되는 거리도 표시합니다.

맞춤선을 사용하면 선명하고 전문적인 도형과 동작(형태와 느낌)을 위해 컨트롤을 쉽게 맞출 수 있습니다.

프로젝트 만들기

  1. Visual Studio에서 "SnaplineExample"이라는 Windows 기반 애플리케이션 프로젝트를 만듭니다.

  2. 폼 디자이너에서 폼을 선택합니다.

컨트롤 공간 확보 및 맞춤

맞춤선을 사용하면 양식에서 컨트롤을 정확하고 직관적으로 정렬할 수 있습니다. 선택한 컨트롤을 움직이거나 컨트롤을 다른 컨트롤 또는 컨트롤 집합과 정렬되는 위치 근처로 이동할 때 나타납니다. 다른 컨트롤을 지나 이동하면 선택 영역이 제안된 위치로 "맞춰"집니다.

맞춤선을 사용하여 컨트롤을 정렬하는 방법

  1. Button 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.

  2. Button 컨트롤을 양식의 오른쪽 하단 모서리로 이동합니다. Button 컨트롤이 양식의 아래쪽 및 오른쪽 테두리에 접근할 때 나타나는 맞춤선을 확인합니다. 이러한 맞춤선은 컨트롤의 테두리와 양식 사이의 권장 거리를 표시합니다.

  3. 양식의 테두리를 중심으로 Button 컨트롤을 이동하고 맞춤선이 표시되는 위치를 확인합니다. 작업을 마치면 Button 컨트롤을 양식 가운데 근처로 이동합니다.

  4. Button 컨트롤을 도구 상자에서 양식으로 끌어옵니다.

  5. 첫 번째 컨트롤과 거의 같아질 때까지 두 번째 Button 컨트롤을 이동합니다. 두 단추의 텍스트 기준선에 나타나는 맞춤선을 확인하고 이동하는 컨트롤이 다른 컨트롤과 정확히 일치하는 위치에 맞춰지는지 확인합니다.

  6. 두 번째 Button 컨트롤이 첫 번째 컨트롤 바로 위에 위치할 때까지 이동합니다. 두 단추의 왼쪽 및 오른쪽 가장자리를 따라 나타나는 맞춤선을 확인하고 이동하는 컨트롤이 다른 컨트롤과 정확히 정렬된 위치에 맞춰지는지 확인합니다.

  7. Button 컨트롤 중 하나를 선택하고 거의 접촉할 때까지 다른 컨트롤에 가깝게 이동합니다. 둘 사이에 나타나는 맞춤선을 확인합니다. 이 거리는 컨트롤의 테두리 간 권장 거리입니다. 또한 이동 중인 컨트롤이 이 위치에 맞춰집니다.

  8. 두 개의 Panel 컨트롤을 도구 상자에서 양식으로 끌어옵니다.

  9. Panel 컨트롤 중 하나가 첫 번째 컨트롤과 높이가 거의 같아질 때까지 이동합니다. 두 컨트롤의 위쪽 및 아래쪽 가장자리를 따라 나타나는 맞춤선을 확인하고 이동하는 컨트롤이 다른 컨트롤과 정확히 일치하는 위치에 맞춰지는지 확인합니다.

양식 및 컨테이너 여백에 맞춤

맞춤선을 사용하면 컨트롤을 일관된 방식으로 양식 및 컨테이너 여백에 맞출 수 있습니다.

  1. Button 컨트롤 중 하나를 선택하고 맞춤선이 나타날 때까지 양식의 오른쪽 테두리 가까이로 이동합니다. 오른쪽 테두리에서 맞춤선의 거리는 컨트롤의 Margin 속성과 양식의 Padding 속성 값을 합친 값입니다.

    참고

    양식의 Padding 속성이 0,0,0,0으로 설정된 경우 Windows Forms 디자이너는 양식에 섀도 Padding 값 9,9,9,9를 제공합니다. 이 동작을 재정의하려면 0,0,0,0 이외의 값을 할당합니다.

  2. 속성 창에서 Margin 항목을 확장하고 All 속성을 0으로 설정하여 Button 컨트롤의 Margin 속성 값을 변경합니다. 자세한 내용은 연습: Padding, Margins 및 AutoSize 속성을 사용하여 Windows Forms 컨트롤 레이아웃을 참조하세요.

  3. 맞춤선이 나타날 때까지 Button 양식의 오른쪽 테두리 가까이로 컨트롤을 이동합니다. 이제 이 거리는 양식의 Padding 속성 값으로 지정됩니다.

  4. GroupBox 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.

  5. 속성 창에서 Padding 항목을 확장하고 All 속성을 10으로 설정하여 GroupBox 컨트롤의 Padding 속성 값을 변경합니다.

  6. Button 컨트롤을 도구 상자에서 GroupBox 컨트롤로 끌어옵니다.

  7. 맞춤선이 나타날 때까지 GroupBox 컨트롤의 오른쪽 테두리 가까이로 Button 컨트롤을 이동합니다. GroupBox 컨트롤 내에서 Button 컨트롤을 이동하고 맞춤선이 어디에 나타나는지 확인합니다.

그룹화된 컨트롤에 맞춤

맞춤선을 사용하여 그룹화된 컨트롤과 GroupBox 컨트롤 내의 컨트롤을 맞출 수 있습니다.

  1. 양식에서 두 개의 컨트롤을 선택합니다. 선택 영역을 이동하고 선택 영역과 다른 컨트롤 사이에 나타나는 맞춤선을 확인합니다.

  2. GroupBox 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.

  3. Button 컨트롤을 도구 상자에서 GroupBox 컨트롤로 끌어옵니다.

  4. Button 컨트롤 중 하나를 선택하고 GroupBox 컨트롤 주위로 이동합니다. GroupBox 컨트롤의 가장자리에 나타나는 맞춤선을 확인합니다. GroupBox 컨트롤에 포함된 Button 컨트롤의 가장자리에 나타나는 맞춤선도 확인합니다. 컨테이너 컨트롤의 자식 컨트롤도 맞춤선을 지원합니다.

맞춤선으로 크기를 대략적으로 가늠하여 컨트롤 배치하기

  1. 도구 상자에서 Button 컨트롤 아이콘을 클릭합니다. 폼으로 끌어다 놓지 마세요.

  2. 마우스 포인터를 양식의 디자인 화면 위로 이동합니다. 포인터가 Button 컨트롤 아이콘이 연결된 십자형으로 바뀝니다. Button 컨트롤에 대해 정렬된 위치를 제안하는 것처럼 보이는 맞춤선도 참고합니다.

  3. 마우스 단추를 길게 클릭합니다.

  4. 마우스 포인터를 양식 주위로 끌어다 놓습니다. 컨트롤의 위치와 크기를 나타내는 윤곽선이 그려집니다.

  5. 양식의 다른 컨트롤과 일치할 때까지 포인터를 끕니다. 일치를 나타내는 맞춤선이 나타납니다.

  6. 마우스 단추를 놓습니다. 윤곽선으로 표시된 위치와 크기에 컨트롤이 만들어집니다.

도구 상자에서 컨트롤을 끌 때 맞춤선 사용

  1. 도구 상자에서 양식에 Button 컨트롤을 끌되 마우스 단추를 놓지 마세요.

  2. 마우스 포인터를 양식의 디자인 화면 위로 이동합니다. 포인터는 새 Button 컨트롤을 만들 위치를 나타내기 위해 변경됩니다.

  3. 마우스 포인터를 양식 주위로 끌어다 놓습니다. Button 컨트롤에 대해 정렬된 위치를 제안하는 것처럼 보이는 맞춤선을 참고합니다. 다른 컨트롤과 정렬된 위치를 찾습니다.

  4. 마우스 단추를 놓습니다. 컨트롤은 맞춤선으로 표시된 위치에 만들어집니다.

맞춤선을 사용하여 컨트롤 크기 조정

  1. Button 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.

  2. 모서리 크기 조정 핸들 중 하나를 잡고 끌어 Button 컨트롤의 크기를 조정합니다. 자세한 내용은 방법: Windows Forms에서 컨트롤의 크기 조정을 참조하세요.

  3. Button 컨트롤의 테두리 중 하나가 다른 컨트롤과 정렬될 때까지 크기 조정 핸들을 끕니다. 맞춤선이 나타납니다. 또한 크기 조정 핸들이 맞춤선으로 표시된 위치에 맞춰지도록 합니다.

  4. Button 컨트롤의 크기를 서로 다른 방향으로 조정하고 크기 조정 핸들을 다른 컨트롤에 맞춥니다. 맞춤을 나타내기 위해 맞춤선을 다양한 방향으로 표시하는 방법을 확인합니다.

컨트롤의 텍스트에 레이블 맞춤

  1. TextBox 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다. TextBox 컨트롤을 양식에 놓으면 스마트 태그 문자 모양을 클릭하고 textBox1로 텍스트 설정 옵션을 선택합니다. 자세한 내용은 연습: 디자이너 작업을 사용하여 일반 작업 수행을 참조하세요.

  2. Label 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.

  3. Label 컨트롤의 AutoSize 속성 값을 true로 변경합니다. 컨트롤의 테두리는 표시 텍스트에 맞게 조정됩니다.

  4. Label 컨트롤을 TextBox 컨트롤의 아래쪽 가장자리에 맞춰지도록 TextBox 컨트롤의 왼쪽으로 이동합니다. 두 컨트롤의 아래쪽 가장자리를 따라 나타나는 맞춤선을 확인합니다.

  5. Label 텍스트와 TextBox 텍스트가 정렬될 대까지 Label 컨트롤을 약간 위쪽으로 이동합니다. 서로 다르게 스타일이 지정된 맞춤선이 나타나 두 컨트롤의 텍스트 필드가 정렬되는 시점을 알려줍니다.

키보드 탐색으로 맞춤선 사용

  1. Button 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다. 양식의 왼쪽 위에 배치합니다.

  2. Ctrl+아래쪽 화살표를 누릅니다. 컨트롤이 사용 가능한 첫 번째 가로 맞춤 위치까지 양식 아래로 이동합니다.

  3. 컨트롤이 양식 아래쪽에 도달할 때까지 Ctrl+아래쪽 화살표를 누릅니다. 양식 아래로 이동할 때 차지하는 위치를 확인합니다.

  4. Ctrl+오른쪽 화살표를 누릅니다. 컨트롤이 사용 가능한 첫 번째 세로 맞춤 위치까지 양식을 가로질러 이동합니다.

  5. 컨트롤이 양식 측면에 도달할 때까지 Ctrl+오른쪽 화살표를 누릅니다. 양식을 가로질러 이동할 때 차지하는 위치를 확인합니다.

  6. 화살표 키를 조합하여 양식 주위로 컨트롤을 이동합니다. 컨트롤이 차지하는 위치 및 이와 함께 제공되는 맞춤선을 확인합니다.

  7. Shift+화살표 키를 눌러Button 컨트롤의 크기를 한 픽셀씩 조정합니다.

  8. Ctrl+Shift+화살표 키를 눌러 맞춤선 단위로 Button 컨트롤의 크기를 조정합니다.

선택적으로 맞춤선 사용 안 함

  1. TableLayoutPanel 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.

  2. Button 도구 상자 에서컨트롤 아이콘을 두 번 클릭합니다. TableLayoutPanel 컨트롤의 첫 번째 셀에 새 단추 컨트롤이 나타납니다.

  3. Button 도구 상자 에서컨트롤 아이콘을 두 번 더 클릭합니다. 그러면 TableLayoutPanel 컨트롤에 하나의 빈 셀이 남습니다.

  4. 도구 상자에서 TableLayoutPanel 컨트롤의 빈 셀로 Button 컨트롤을 끌어옵니다. 맞춤선이 표시되지 않습니다.

  5. Button 컨트롤을 TableLayoutPanel 컨트롤 밖으로 끌고 TableLayoutPanel 컨트롤 주위로 이동합니다. 맞춤선이 다시 나타납니다.

맞춤선 사용 안 함

Alt 키를 누르고 컨트롤을 양식 주위로 이동합니다.

맞춤선이 나타나지 않고 컨트롤이 잠재적 맞춤 위치에 맞춰지지 않습니다.

디자인 환경에서 맞춤선을 사용하지 않도록 설정하는 방법

  1. 도구 메뉴에서 옵션 대화 상자를 엽니다. Windows Forms 디자이너를 선택합니다.

  2. 일반 노드를 선택합니다. 레이아웃 모드 섹션에서 선택 사항을 SnapLines에서 SnapToGrid로 변경합니다.

  3. 확인을 선택하여 설정을 적용합니다.

  4. 양식에서 컨트롤을 선택하고 다른 컨트롤 주위로 이동합니다. 맞춤선은 표시되지 않습니다.

다음 단계

맞춤선은 양식에 컨트롤을 맞추는 직관적인 방법을 제공합니다. 다음을 추가로 살펴볼 수 있습니다.

  • 다른 GroupBox 내에서 GroupBox 컨트롤을 중첩해 봅니다. Button 컨트롤을 자식 GroupBox 컨트롤 내에 배치하고 다른 컨트롤을 부모 GroupBox 컨트롤 내에 배치합니다. Button 컨트롤을 이동하여 맞춤선이 컨테이너 경계를 어떻게 넘어가는지 확인합니다.

  • TextBox 컨트롤 열과 Label 컨트롤의 해당 열을 만듭니다. Label 컨트롤의 AutoSize 속성 값을 true로 설정합니다. 표시된 텍스트가 TextBox 컨트롤의 텍스트와 맞춰지도록 맞춤선을 사용해 Label 컨트롤을 이동합니다.

참고 항목