연습: C# 또는 Visual Basic을 사용하여 Visual Studio IDE 탐색

아티클
02/21/2013

이 연습을 완료하면 Visual Studio를 사용하여 응용 프로그램을 개발할 때 사용할 수 있는 여러 도구, 대화 상자 및 디자이너에 익숙해집니다.IDE(통합 개발 환경)의 작업에 대해 배우면서 간단한 “Hello, World” 스타일의 응용 프로그램을 만들고, UI 코드를 디자인하며 오류를 디버깅하게 됩니다.

이 항목에는 다음과 같은 단원이 포함되어 있습니다.

IDE 구성

간단한 응용 프로그램 만들기

응용 프로그램 디버깅 및 테스트

[!참고]

이 연습은 Visual Studio 2012의 Professional 버전을 기반으로 합니다.Visual Studio에 일부 사용자 인터페이스 요소의 이름 또는 위치가 다르게 표시될 수 있습니다.설치한 Visual Studio 버전과 사용하는 설정에 따라 이러한 요소가 결정됩니다.설정에 대한 자세한 내용은 Visual Studio 설정을 참조하십시오.

IDE 구성

처음으로 Visual Studio를 시작하면 미리 정의된 사용자 지정 집합을 IDE에 적용하는 설정 조합을 선택해야 합니다.각 설정 조합은 쉽게 응용 프로그램을 개발할 수 있도록 설계되었습니다.

그림 1: 기본 환경 설정 선택 대화 상자

기본 환경 설정 선택 대화 상자

이 연습은 IDE에 최소한의 사용자 지정을 적용하는 일반 개발 설정을 적용하여 작성됩니다.설정 가져오기 및 내보내기 마법사를 사용하여 설정 조합을 변경할 수 있습니다.자세한 내용은 방법: 선택 설정 변경을 참조하십시오.

Visual Studio를 열면 도구 창, 메뉴 및 도구 모음, 주 창 공간을 식별할 수 있습니다.도구 창은 빠른 실행, 메뉴 모음 및 상단의 표준 도구 모음을 사용하여 응용 프로그램 창 왼쪽과 오른쪽에 도킹됩니다.응용 프로그램 창의 가운데에 시작 페이지가 있습니다.솔루션 또는 프로젝트가 로드되면 편집기와 디자이너가 이 공간에 나타납니다.응용 프로그램을 개발할 때 이 중앙 영역에서 대부분의 시간을 보냅니다.

그림 2: Visual Studio IDE

일반 설정이 적용된 IDE

옵션 대화 상자를 사용하여 편집기에 있는 텍스트의 글꼴과 크기 또는 IDE의 색상 표를 변경하는 등 Visual Studio를 추가 사용자 지정할 수 있습니다.적용한 설정 조합에 따라 해당 대화 상자의 일부 항목이 자동으로 나타나지 않을 수 있습니다.모든 설정 표시 확인란을 선택하여 가능한 모든 옵션이 나타나는지 확인할 수 있습니다.

그림 3: 옵션 대화 상자

모든 설정 표시 옵션이 있는 옵션 대화 상자

이 예제에서는 IDE의 색 테마를 밝은 색에서 어두운 색으로 변경합니다.

IDE의 색 구성표를 변경하려면

옵션 대화 상자를 엽니다.
색 테마를 어둡게로 변경한 다음 확인을 클릭합니다.

Visual Studio의 색은 다음 이미지와 일치해야 합니다.

어두운 테마가 적용된 IDE

이 연습의 나머지 부분에서 사용되는 색 테마는 밝은 테마입니다.IDE 사용자 지정에 대한 자세한 내용은 개발 환경 사용자 지정을 참조하십시오.

간단한 응용 프로그램 만들기

프로젝트 만들기

Visual Studio에서 응용 프로그램을 만들 때 먼저 프로젝트와 솔루션을 만들어야 합니다.이 예제에서는 Windows Presentation Foundation 솔루션을 만듭니다.

WPF 프로젝트를 만들려면

새 프로젝트를 만듭니다.메뉴 모음에서 파일, 새로 만들기, 프로젝트를 선택합니다.

빠른 실행 상자에 새 프로젝트를 입력하여 같은 작업을 수행할 수도 있습니다.
Visual Basic 또는 Visual C# WPF 응용 프로그램을 템플릿을 선택한 다음 프로젝트 이름을 HelloWPFApp로 지정합니다.

또는

HelloWPFApp 프로젝트와 솔루션이 만들어지고 솔루션 탐색기에 다른 파일이 나타납니다.WPF Designer는 분할 보기에 디자인 보기와 MainWindow.xaml의 XAML 보기를 보여 줍니다.자세한 내용은 Windows Forms 개발자를 위한 WPF Designer을 참조하십시오.다음 항목이 솔루션 탐색기에 나타납니다.

그림 5: 프로젝트 항목

HelloWPFApp 파일이 로드된 솔루션 탐색기

프로젝트를 만든 후 사용자 지정할 수 있습니다.속성 창을 표시하면 프로젝트 항목, 컨트롤 및 응용 프로그램의 기타 항목에 대한 옵션을 표시하고 변경할 수 있습니다.프로젝트 속성 및 속성 페이지를 사용하여 프로젝트 및 솔루션의 옵션을 표시하고 변경할 수 있습니다.

MainWindow.xaml의 이름을 변경하려면

다음 절차에서 MainWindow에 보다 구체적인 이름을 지정하겠습니다.솔루션 탐색기에서 MainWindow.xaml을 선택합니다. 창 아래에 해당 파일의 속성 창이 표시되어야 합니다.속성 창이 표시되지 않는 경우 솔루션 탐색기에서 MainWindow.xaml을 선택하고 바로 가기 메뉴를 연 다음(마우스 오른쪽 단추 클릭) 속성을 선택합니다.파일 이름 속성을 Greetings.xaml로 변경합니다.

솔루션 탐색기는 파일 이름이 이제 Greetings.xaml이고 MainWindow.xaml.vb 또는 MainWindow.xaml.cs의 이름이 이제 Greetings.xaml.vb 또는Greetings.xaml.cs임을 보여 줍니다.
솔루션 탐색기에서 디자이너 뷰에서 Greetings.xaml을 열고 창의 제목 표시줄을 선택합니다.
속성 창에서 제목 속성의 값을 Greetings로 변경합니다.

주의

이 변경으로 인해 디버깅하고 나중에 수정하는 방법을 배울 수 있는 오류가 발생합니다.

주의
이 변경으로 인해 디버깅하고 나중에 수정하는 방법을 배울 수 있는 오류가 발생합니다.

MainWindow.xaml의 제목 표시줄에 이제 Greetings가 표시됩니다.

사용자 인터페이스(UI) 디자인

이 응용 프로그램에 TextBlock 컨트롤 1개, RadioButton 컨트롤 2개 및 Button 컨트롤 1개 등 세 가지 유형의 제어를 추가합니다.

TextBlock 제어를 추가하려면

도구 상자 창을 엽니다.디자이너 창 왼쪽에서 찾아야 합니다.보기에서 열거나 CTRL+ALT+X를 입력하여 열 수도 있습니다.
도구 상자에서 TextBlock 컨트롤을 검색합니다.
TextBlock 컨트롤을 디자인 화면에 추가하고, 컨트롤을 창 상단 근처의 가운데로 이동합니다.

해당 창은 다음 그림과 유사해야 합니다.

그림 7: TextBlock 컨트롤이 있는 Greetings 창

Greetings 양식의 TextBlock 컨트롤

XAML 태그는 다음과 유사합니다.

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

텍스트 블록의 텍스트를 사용자 지정하려면

XAML 뷰에서 TextBlock의 태그를 찾아 텍스트 특성을 변경합니다. Text=”Select a message option and then choose the Display button.”
TextBlock이 디자인 보기에 맞게 확장되지 않을 경우 TextBlock 컨트롤을 확대하여 모든 텍스트를 표시하십시오.
변경 사항을 저장합니다.

그런 다음 두 개의 RadioButton 컨트롤을 폼에 추가합니다.

라디오 단추를 추가하려면

도구 상자에서 RadioButton 컨트롤을 검색합니다.
두 개의 RadioButton 컨트롤을 디자인 화면에 추가하고 TextBlock 컨트롤 아래에 나란히 나타나도록 이동합니다.

창이 다음과 같이 나타납니다.

그림 8: Greetings 창의 라디오 단추.
왼쪽 RadioButton 컨트롤의 속성 창에서 이름 속성(속성 창 맨 위에 있는 속성)을 RadioButton1로 변경합니다.
오른쪽 RadioButton 컨트롤의 속성 창에서 이름 속성을 RadioButton2로 변경한 다음 변경 사항을 저장합니다.

이제 각 RadioButton 컨트롤에 대한 표시 텍스트를 추가할 수 있습니다.다음 프로시저는 RadioButton 컨트롤에 대한 콘텐츠 속성을 업데이트합니다.

각 라디오 단추에 대해 표시할 텍스트를 추가하려면

디자인 화면에서 Radiobutton1의 바로가기 메뉴를 열고 텍스트 편집을 선택한 다음 Hello를 입력합니다.
RadioButton2의 바로 가기 메뉴를 열고 텍스트 편집을 선택한 다음 Goodbye를 입력합니다.

추가할 최종 UI 요소는 Button 컨트롤입니다.

단추 컨트롤을 추가하려면

도구 상자에서 Button 컨트롤을 검색한 다음 RadioButton 컨트롤 아래의 디자인 화면에 추가합니다.
XAML 보기에서 Button 컨트롤의 내용 값을 Content=”Button”에서 Content=”Display”로 변경한 다음 변경 사항을 저장합니다.

태그는 다음 예제와 같아야 합니다. <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

해당 창은 다음 그림과 유사해야 합니다.

그림 9: 최종 Greetings UI

컨트롤 레이블이 있는 Greetings 양식

표시 버튼에 코드 추가

이 응용 프로그램을 실행하면 사용자가 처음 라디오 단추를 선택한 다음 표시 단추를 선택한 후에 메시지 상자가 나타납니다.Hello에 대한 메시지 상자가 하나 나타나고 Goodbye에 대한 메시지 상자가 하나 나타납니다.이 동작을 만들려면 Greetings.xaml.vb 또는 Greetings.xaml.cs에서 Button_Click 이벤트에 코드를 추가합니다.

메시지 상자를 표시하는 코드를 추가합니다.

디자인 표면에서 표시 단추를 두 번 클릭합니다.

Greetings.xaml.vb 또는 Greetings.xaml.cs는 Button_Click 이벤트에 커서가 있는 상태에서 열립니다.다음과 같이 클릭 이벤트 처리기를 추가할 수도 있습니다.

Visual Basic에 대한 이벤트 처리기는 다음과 같아야 합니다.
```
Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)

End Sub
```
Visual C#에 대한 이벤트 처리기는 다음과 같아야 합니다.
```
private void Button_Click_1(object sender, RoutedEventArgs e)
{

}
```

Visual Basic인 경우 다음 코드를 입력합니다.

If RadioButton1.IsChecked = True Then
    MessageBox.Show("Hello.")
Else RadioButton2.IsChecked = True
    MessageBox.Show("Goodbye.")
End If

Visual C#인 경우 다음 코드를 입력합니다.

if (RadioButton1.IsChecked == true)
{
    MessageBox.Show("Hello.");
}
else
{
    RadioButton2.IsChecked = true;
    MessageBox.Show("Goodbye.");
}

응용 프로그램을 저장합니다.

응용 프로그램 디버깅 및 테스트

그런 다음 응용 프로그램에 오류가 있는지 확인하고 두 메시지 상자가 모두 제대로 나타나는지 테스트하기 위해 응용 프로그램을 디버깅합니다.자세한 내용은 WPF 응용 프로그램 만들기(WPF) 및 WPF 디버깅을 참조하십시오.

오류 찾기 및 수정

이 단계에서는 주 창 XAML 파일의 이름을 변경하여 일찍 발생한 오류를 찾습니다.

디버깅을 시작하고 오류를 찾으려면

디버그를 선택한 다음 디버깅 시작을 선택하여 디버거를 시작합니다.

IOException이 발생했음을 나타내는 대화 상자가 나타납니다. ‘mainwindow.xaml’ 리소스가 없습니다.
확인 단추를 선택한 다음 디버거를 중지합니다.

이 연습을 시작할 때 Mainwindow.xaml의 이름을 Greetings.xaml로 바꾸었지만 솔루션은 여전히 응용 프로그램의 시작 URI로 Mainwindow.xaml을 가리키고 있으므로 프로젝트를 시작할 수 없습니다.

Greetings.xaml을 시작 URI로 지정하려면

솔루션 탐색기의 XAML 보기(디자인 보기에서 열 수 없음)에서 App.xaml 파일(C# 프로젝트) 또는 Application.xaml 파일(Visual Basic 프로젝트)을 엽니다.
StartupUri="MainWindow.xaml"을 StartupUri="Greetings.xaml"로 변경한 다음 변경 내용을 저장합니다.

다시 디버거를 시작합니다.응용 프로그램의 Greetings 창이 표시되어야 합니다.

중단점으로 디버깅하려면

일부 중단점을 추가하여 디버깅하는 동안 코드를 테스트할 수 있습니다.메뉴 모음에서 디버깅, 중단점 설정/해제를 선택하거나 중단시킬 코드 줄 옆의 편집기 왼쪽 여백을 클릭하여 중단점을 추가할 수 있습니다.

중단점을 추가하려면

Greetings.xaml.vb 또는 Greetings.xaml.cs를 열고 다음 줄을 선택합니다. MessageBox.Show("Hello.")
디버그를 선택한 다음 중단점 설정/해제를 선택하여 메뉴에서 중단점을 추가합니다.

빨간색 원이 편집기 창의 맨 왼쪽 여백의 코드줄 옆에 나타납니다.
MessageBox.Show("Goodbye.") 줄을 선택합니다.
F9 키를 선택하여 중단점을 추가한 다음 F5 키를 선택하여 디버깅을 시작합니다.
Greetings 창에서 Hello 라디오 단추를 선택한 다음 표시 단추를 선택합니다.

MessageBox.Show("Hello.") 줄은 노란색으로 강조 표시됩니다.IDE 하단에 있는 자동, 로컬 및 조사식 창은 왼쪽에 함께 도킹되고 호출 스택, 중단점, 명령, 직접 실행 및 출력 창은 오른쪽에 함께 도킹됩니다.
메뉴 모음에서 디버그, 프로시저 나가기를 선택합니다.

응용 프로그램은 실행을 다시 시작하고 "Hello"라는 단어가 포함된 메시지 상자가 나타납니다.
메시지 상자에서 확인 단추를 선택하여 닫습니다.
Greetings 창에서 Goodbye 라디오 단추를 선택한 다음 표시 단추를 선택합니다.

MessageBox.Show("Goodbye.") 줄은 노란색으로 강조 표시됩니다.
F5 키를 선택하여 계속 디버깅합니다.메시지 상자가 나타나면 메시지 상자에서 확인 단추를 선택하여 닫습니다.
Shift+F5 키를 선택하여 디버깅을 중지합니다.
메뉴 모음에서 디버그, 모든 중단점 해제를 선택합니다.