5단계: 폼에 컨트롤 추가Step 5: Add Controls to Your Form

이 단계에서는 PictureBox 컨트롤 및 CheckBox 컨트롤과 같은 컨트롤을 폼에 추가합니다.In this step, you add controls, such as a PictureBox control and a CheckBox control, to your form. 그런 다음 폼에 단추를 추가합니다.You then add buttons to your form.

비디오 링크이 항목의 비디오 버전을 보려면 자습서 1: Visual Basic에서 사진 뷰어 만들기 - 비디오 2 또는 자습서 1: C#에서 사진 뷰어 만들기 - 비디오 2를 참조하세요.link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 or Tutorial 1: Create a Picture Viewer in C# - Video 2. 이러한 비디오에서는 이전 버전의 Visual Studio를 사용하므로 일부 메뉴 명령과 기타 사용자 인터페이스 요소가 약간 다를 수 있습니다.These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. 그러나 개념 및 절차는 Visual Studio의 현재 버전에서 비슷하게 작동합니다.However, the concepts and procedures work similarly in the current version of Visual Studio.

폼에 컨트롤을 추가하려면To add controls to your form

  1. Visual Studio IDE 왼쪽에 있는 도구 상자 탭으로 이동하여 공용 컨트롤 그룹을 확장합니다.Go to the Toolbox tab (located on the left side of the Visual Studio IDE) and expand the Common Controls group. 이렇게 하면 폼에서 가장 일반적으로 사용되는 컨트롤이 표시됩니다.This shows the most common controls that you see on forms.

  2. 폼에서 TableLayoutPanel 컨트롤을 선택합니다.Choose the TableLayoutPanel control on the form. TableLayoutPanel이 선택되었는지 확인하려면 속성 창 맨 위에 있는 드롭다운 목록 상자에 이름이 표시되는지 확인합니다.To verify that the TableLayoutPanel is selected, make sure that its name appears in the dropdown list box at the top of the Properties window. 속성 창 맨 위에 있는 드롭다운 목록 상자를 사용하여 폼 컨트롤을 선택할 수도 있습니다.You can also choose form controls by using the dropdown list box at the top of the Properties window. 대개 이 방식으로 컨트롤을 선택하는 것이 마우스로 작은 컨트롤을 선택하는 것보다 더 간단할 수 있습니다.Choosing a control this way can often be easier than choosing a tiny control with a mouse.

  3. PictureBox 항목을 두 번 클릭하여 PictureBox 컨트롤을 폼에 추가합니다.Double-click the PictureBox item to add a PictureBox control to your form. TableLayoutPanel은 도킹되어 폼을 채우므로 첫 번째 빈 셀(왼쪽 위 모퉁이)에 PictureBox 컨트롤이 추가됩니다.Because the TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the first empty cell (the upper left corner).

  4. 새 PictureBox 컨트롤을 클릭하여 선택한 다음 새 PictureBox 컨트롤의 검정색 삼각형을 선택하여 다음 그림과 같이 작업 목록을 표시합니다.Choose the new PictureBox control to select it, and then choose the black triangle on the new PictureBox control to display its task list, as shown in the following picture.

    PictureBox 작업PictureBox tasks
    PictureBox 작업PictureBox tasks

    참고

    TableLayoutPanel에 실수로 잘못된 컨트롤 형식을 추가한 경우 삭제할 수 있습니다.If you accidentally add the wrong type of control to your TableLayoutPanel, you can delete it. 컨트롤을 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 삭제를 선택합니다.Right-click the control, and then choose Delete on its context menu. 메뉴 모음을 사용하여 폼에서 컨트롤을 제거할 수도 있습니다.You can also remove controls from the form by using the menu bar. 메뉴 모음에서 편집, 실행 취소를 선택하거나 편집, 삭제를 선택합니다.On the menu bar, choose Edit, Undo, or Edit, Delete.

  5. 부모 컨테이너에서 도킹 링크를 선택합니다.Choose the Dock in parent container link. 이렇게 하면 PictureBox Dock 속성이 자동으로 채우기로 설정됩니다.This automatically sets the PictureBox Dock property to Fill. 이를 확인하려면 PictureBox 컨트롤을 클릭하여 선택하고 속성 창으로 이동하여 Dock 속성이 채우기로 설정되었는지 확인합니다.To see this, choose the PictureBox control to select it, go to the Properties window, and be sure that the Dock property is set to Fill.

  6. ColumnSpan 속성을 변경하여 PictureBox가 두 열에 모두 걸치도록 합니다.Make the PictureBox span both columns by changing its ColumnSpan property. PictureBox 컨트롤을 선택하고 ColumnSpan 속성을 2로 설정합니다.Choose the PictureBox control and set its ColumnSpan property to 2. 또한 PictureBox가 비어 있는 경우 빈 프레임을 표시하려면Also, when the PictureBox is empty, you want to show an empty frame. BorderStyle 속성을 Fixed3D로 설정합니다.Set its BorderStyle property to Fixed3D.

    참고

    PictureBox의 ColumnSpan 속성이 표시되지 않는 경우 PictureBox가 TableLayoutPanel이 아닌 폼에 추가되었을 수 있습니다.If you don't see a ColumnSpan property for your PictureBox, then it's likely that the PictureBox was added to the form rather than the TableLayoutPanel. 이 문제를 해결하려면 PictureBox를 선택해서 삭제하고, TableLayoutPanel을 선택한 후 새 PictureBox를 추가합니다.To fix this, choose the PictureBox, delete it, choose the TableLayoutPanel, and then add a new PictureBox.

  7. 폼에서 TableLayoutPanel을 선택한 다음 CheckBox 컨트롤을 폼에 추가합니다.Choose the TableLayoutPanel on the form and then add a CheckBox control to the form. 도구 상자에서 CheckBox 항목을 두 번 클릭하여 새 CheckBox 컨트롤을 테이블의 사용 가능한 다음 셀에 추가합니다.Double-click the CheckBox item in the Toolbox to add a new CheckBox control to the next free cell in your table. PictureBox가 TableLayoutPanel의 처음 두 셀을 차지하므로 CheckBox 컨트롤은 왼쪽 아래 셀에 추가됩니다.Because a PictureBox takes up the first two cells in the TableLayoutPanel, the CheckBox control is added to the lower-left cell. 다음 그림과 같이 Text 속성을 선택하고 단어 늘이기를 입력합니다.Choose the Text property and type in the word Stretch, as shown in the following picture.

    Stretch 속성이 있는 TextBox 컨트롤TextBox control with Stretch property
    Stretch 속성이 있는 TextBox 컨트롤TextBox control with Stretch property

  8. 폼에서 TableLayoutPanel을 선택하고 도구 상자에서 TableLayoutPanel 컨트롤이 있는 컨테이너 그룹으로 이동한 다음 FlowLayoutPanel 항목을 두 번 클릭하여 PictureBox의 마지막 셀(오른쪽 맨 아래)에 새 컨트롤을 추가합니다.Choose the TableLayoutPanel on the form, and then go to the Containers group in the Toolbox (where you got your TableLayoutPanel control) and double-click the FlowLayoutPanel item to add a new control to the last cell in the PictureBox (bottom right). 그런 다음 FlowLayoutPanel의 검정색 삼각형 작업 목록에서 부모 컨테이너에서 도킹을 선택하거나 FlowLayoutPanel의 Dock 속성을 채우기로 설정하여 FlowLayoutPanel을 TableLayoutPanel에 도킹합니다.Then dock the FlowLayoutPanel in the TableLayoutPanel (either by choosing Dock in parent container on the FlowLayoutPanel's black triangle task list, or by setting the FlowLayoutPanel's Dock property to Fill).

    참고

    FlowLayoutPanel은 다른 컨트롤을 줄 맞춰 순서대로 정렬하는 컨트롤입니다.A FlowLayoutPanel is a container that arranges other controls in neat rows in order. FlowLayoutPanel의 크기를 조정하면 공간이 충분한 경우 하나의 행에 모든 컨트롤이 레이아웃됩니다.When you resize a FlowLayoutPanel, if it has room to lay out all of its controls in a single row, it does that. 그렇지 않은 경우 하나씩 쌓아올리는 방식으로 순서대로 정렬됩니다.Otherwise, it arranges them in lines, one on top of the other. FlowLayoutPanel을 사용하여 네 개의 단추를 수용합니다.You will use a FlowLayoutPanel to hold four buttons. 단추를 추가할 때 하나씩 쌓아올리는 방식으로 배열되는 경우 단추를 추가하기 전에 FlowLayoutPanel이 선택되었는지 확인하십시오.If the buttons arrange one on top another when added, be sure that the FlowLayoutPanel is selected before adding the buttons. 위에서 각 셀에는 하나의 컨트롤만 있을 수 있다고 언급했지만 TableLayoutPanel의 오른쪽 아래 셀에는 네 개의 단추 컨트롤이 있습니다.Although it was stated earlier that each cell can hold only one control, the lower-right cell of the TableLayoutPanel has four button controls. 다른 컨트롤을 포함하는 컨트롤을 셀에 배치할 수 있기 때문입니다.This is because you can put a control in a cell that holds other controls. 이러한 유형의 컨트롤을 컨테이너라고 하며, FlowLayoutPanel은 컨테이너입니다.That kind of control is called a container, and the FlowLayoutPanel is a container.

단추를 추가하려면To add buttons

  1. 추가한 새 FlowLayoutPanel을 선택합니다.Choose the new FlowLayoutPanel that you added. 도구 상자의 공용 컨트롤로 이동한 다음 Button 항목을 두 번 클릭하여 button1이라는 단추 컨트롤을 FlowLayoutPanel에 추가합니다.Go to Common Controls in the Toolbox and double-click the Button item to add a button control called button1 to your FlowLayoutPanel. 반복하여 다른 단추를 추가합니다.Repeat to add another button. IDE는 button1이라는 단추가 이미 있음을 확인하고 다음 단추인 button2를 호출합니다.The IDE determines that there's already a button called button1 and calls the next one button2.

  2. 일반적으로 도구 상자를 사용하여 다른 단추를 추가하지만Typically, you add the other buttons using the Toolbox. 이번에는 button2를 선택하고 메뉴 모음에서 편집, 복사를 선택하거나 Ctrl+C를 누릅니다.This time, choose button2, and then on the menu bar, choose Edit, Copy (or press Ctrl+C). 메뉴 모음에서 편집, 붙여넣기를 선택하거나 Ctrl+V를 눌러 단추의 복사본을 붙여넣습니다.On the menu bar, choose Edit, Paste (or press Ctrl+V) to paste a copy of your button. 다시 한 번 붙여넣습니다.Now paste it again. 이제 IDE에서 FlowLayoutPanel에 button3button4를 추가했습니다.The IDE has now added button3 and button4 to the FlowLayoutPanel.

    참고

    모든 컨트롤을 복사하여 붙여넣을 수 있습니다.You can copy and paste any control. IDE는 논리적인 방법으로 새 컨트롤의 이름을 지정하고 배치합니다.The IDE names and places the new controls in a logical manner. 컨테이너에 컨트롤을 붙여넣으면 IDE는 이 컨트롤을 배치할 논리적인 다음 공간을 선택합니다.If you paste a control into a container, the IDE chooses the next logical space for placement.

  3. 첫 번째 단추를 선택하고 Text 속성을 그림 표시로 설정합니다.Choose the first button and set its Text property to Show a picture. 그런 후 다음 세 단추의 Text 속성을 그림 지우기, 배경색 설정닫기로 설정합니다.Then set the Text properties of the next three buttons to Clear the picture, Set the background color, and Close.

  4. 다음 단계에서는 단추의 크기를 지정하고 패널의 오른쪽에 정렬되도록 배치합니다.The next step is to size the buttons and arrange them so they align to the right side of the panel. FlowLayoutPanel을 선택하고 FlowDirection 속성을 확인합니다.Choose the FlowLayoutPanel and look at its FlowDirection property. 이 속성을 RightToLeft로 변경합니다.Change it so it's set to RightToLeft. 속성을 이렇게 변경하면 즉시 단추가 셀의 오른쪽에 정렬되며 순서가 유지되어 그림 표시 단추가 오른쪽에 표시됩니다.As soon as you do, the buttons should align themselves to the right side of the cell, and reverse their order so that the Show a picture button is on the right.

    참고

    단추의 순서가 잘못되어 있는 경우 FlowLayoutPanel에서 단추를 끌어서 원하는 순서대로 다시 배치할 수 있습니다.If the buttons are still in the wrong order, you can drag the buttons around the FlowLayoutPanel to rearrange them in any order. 단추를 선택하여 왼쪽 또는 오른쪽으로 끌어 놓을 수 있습니다.You can choose a button and drag it left or right.

  5. 닫기 단추를 클릭하여 선택합니다.Choose the Close button to select it. Ctrl 키를 누른 채로 다른 세 개의 단추를 선택하여 모든 단추가 선택되도록 합니다.Hold down the CTRL key and choose the other three buttons, so that they are all selected. 모든 단추가 선택된 상태로 속성 창으로 이동하여 AutoSize 속성까지 위로 스크롤합니다.While all the buttons are selected, go to the Properties window and scroll up to the AutoSize property. 이 속성은 단추의 모든 텍스트에 맞게 자동으로 단추 크기가 조정되도록 합니다.This property tells the button to automatically resize itself to fit all of its text. 이 속성을 true로 설정합니다.Set it to true. 이제 단추가 적절한 크기로 조정되고 올바른 순서로 정렬됩니다.Your buttons should now be sized properly and be in the right order. 네 개의 단추가 모두 선택되어 있는 동안에는 네 단추의 AutoSize 속성을 동시에 변경할 수 있습니다. 다음 그림에서는 네 개의 단추를 보여 줍니다.(As long as all four buttons are selected, you can change all four AutoSize properties at the same time.) The following picture shows the four buttons.

    단추가 네 개 있는 사진 뷰어Picture Viewer with four buttons
    단추가 네 개 있는 사진 뷰어Picture Viewer with four buttons

  6. 이제 프로그램을 다시 실행하여 새로 레이아웃된 폼을 확인합니다.Now run your program again to see your newly laid out form. 단추와 확인란을 선택해도 아직 아무런 동작이 수행되지 않지만 곧 동작하게 될 것입니다.Choosing the buttons and the check box doesn't do anything yet, but it will work soon.

계속하거나 검토하려면To continue or review