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. 폼에 Button 컨트롤을 추가합니다.You then add Button controls to your form.

양식에 컨트롤을 추가하는 방법How to add controls to your form

  1. Visual Studio IDE 왼쪽에 있는 도구 상자 탭을 선택하거나 Ctrl+Alt+X 를 누른 다음 공용 컨트롤 그룹을 확장합니다.Choose the Toolbox tab on the left side of the Visual Studio IDE (or press Ctrl+Alt+X), and then expand the Common Controls group. 이렇게 하면 폼에서 가장 일반적으로 사용되는 컨트롤이 표시됩니다.This shows the most common controls that you see on forms.

  2. 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).

  3. 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 screenshot.

    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.

  4. PictureBox 컨트롤의 PictureBox 작업 메뉴에서 부모 컨테이너에서 도킹 링크를 선택합니다.In the PictureBox Tasks menu from the PictureBox control, 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.

  5. ColumnSpan 속성을 변경하여 PictureBox가 두 열에 모두 걸치도록 합니다.Make the PictureBox span both columns by changing its ColumnSpan property. PictureBox 에서 PictureBox 컨트롤을 선택하고 ColumnSpan 속성을 2 로 설정합니다.In the PictureBox, 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.

  6. 폼에서 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 속성을 선택하고 단어 Stretch 를 입력합니다.Choose the Text property and type in the word Stretch, as shown in the following image.

    Stretch 속성이 있는 TextBox 컨트롤TextBox control with Stretch property
    Stretch 속성이 있는 TextBox 컨트롤’ * ***TextBox _ _control with *Stretch_ _property*

  7. 폼에서 TableLayoutPanel 을 선택하고 도구 상자 에서 TableLayoutPanel 컨트롤이 있는 컨테이너 그룹으로 이동한 다음, FlowLayoutPanel 항목을 두 번 클릭하여 마지막 셀(오른쪽 맨 아래)에 새 컨트롤을 추가합니다.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 (bottom right). 그런 다음 FlowLayoutPanel을 TableLayoutPanel에 도킹합니다.Then, dock the FlowLayoutPanel in the TableLayoutPanel. FlowLayoutPanel의 검정색 삼각형 작업 목록에서 부모 컨테이너에서 도킹 을 선택하거나 FlowLayoutPanel의 Dock 속성을 채우기 로 설정하면 됩니다.You can do so 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 a row, one after another. FlowLayoutPanel의 크기를 조정하면 공간이 충분한 경우 하나의 행에 모든 컨트롤이 레이아웃됩니다.When you resize a FlowLayoutPanel, it lays out all of its controls in a single row, if it has room to do so. 그렇지 않은 경우 하나씩 쌓아올리는 방식으로 순서대로 정렬됩니다.Otherwise, it arranges them in lines, one on top of the other.

    여기서 FlowLayoutPanel을 사용하여 네 개의 단추를 수용합니다.Here, you'll use a FlowLayoutPanel to hold four buttons. 단추를 추가할 때 하나씩 쌓아올리는 방식으로 배열되는 경우 단추를 추가하기 전에 FlowLayoutPanel을 선택해야 합니다.If the buttons arrange one on top another when you add them, make sure that you select the FlowLayoutPanel before you add the buttons.

    (일반적으로 각 셀에는 컨트롤이 하나만 포함되어 있습니다.(Typically, each cell contains only one control. 이 예제에서 TableLayoutPanel의 오른쪽 아래 셀에는 네 개의 단추 컨트롤이 포함되어 있습니다.In this example, the lower-right cell of the TableLayoutPanel contains four button controls. 이유가 무엇일까요?Why? FlowLayoutPanel은 다른 컨트롤을 보유한 셀의 컨트롤인 컨테이너 컨트롤이기 때문입니다.)Because the FlowLayoutPanel is a container control, which is a control in a cell that holds other controls.)

단추를 추가하려면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 by using the Toolbox. 이번에는 button2 를 선택하고 메뉴 모음에서 편집 > 복사 를 선택하거나 Ctrl+C 를 누릅니다.This time, choose button2, and then from the menu bar, choose Edit > Copy (or press Ctrl+C). 그런 다음 메뉴 모음에서 편집 > 붙여넣기 를 선택하거나 Ctrl+V 를 눌러 단추의 복사본을 붙여넣습니다.Next, choose Edit > Paste from the menu bar (or press Ctrl+V) to paste a copy of your button. 다시 한 번 붙여넣습니다.Now paste it again. IDE에서 FlowLayoutPanel에 button3button4 를 추가합니다.Notice that the IDE adds 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. 단추의 크기를 지정하고 패널의 오른쪽에 정렬되도록 배치해 보겠습니다.Let's 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.

    단추는 셀의 오른쪽에 정렬되며 그림 표시 단추가 오른쪽에 표시되도록 순서가 반전됩니다.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 키를 누른 채 선택합니다.Then, to choose the rest of the buttons at the same time, press and hold the Ctrl key and choose them, too.

    모든 단추를 선택한 후 속성 창으로 이동하여 AutoSize 속성까지 위로 스크롤합니다.After you've selected all the buttons, 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 image shows the four buttons.

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

  6. 이제 프로그램을 다시 실행하여 변경 내용을 확인합니다.Now run your program again to see your changes.

    단추와 확인란은 아직 아무것도 수행하지 않지만 —곧 수행할 것입니다.Notice that the buttons and the check box don't do anything yet—but they will, soon.

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

추가 정보See also