이 자습서에서는 Visual Studio IDE(통합 개발 환경)에서 Visual Basic을 사용하여 애플리케이션을 만듭니다. 프로그램에서 WPF(Windows Presentation Foundation) UI 프레임워크를 사용합니다. 이 자습서를 사용하여 Visual Studio에서 사용할 수 있는 많은 도구, 대화 상자 및 디자이너를 숙지할 수 있습니다.
이 튜토리얼에서는 다음을 배우게 됩니다:
- 프로젝트를 만듭니다.
- 창 구성 및 텍스트 추가
- 단추 및 코드 추가
- 애플리케이션 디버그 및 테스트
- 중단점을 사용하여 디버그
- 릴리스 버전 빌드
WPF란?
WPF 또는 Windows Presentation Foundation은 데스크톱 클라이언트 애플리케이션을 만드는 UI(사용자 인터페이스) 프레임워크입니다. WPF 개발 플랫폼은 애플리케이션 모델, 리소스, 컨트롤, 그래픽, 레이아웃, 데이터 바인딩, 문서 및 보안을 비롯한 광범위한 애플리케이션 개발 기능을 지원합니다.
WPF는 .NET의 일부이므로 이전에 ASP.NET 또는 Windows Forms를 사용하여 .NET으로 애플리케이션을 빌드한 경우 프로그래밍 환경이 익숙해야 합니다. WPF는 Extensible Application Markup Language XAML 을 사용하여 애플리케이션 프로그래밍을 위한 선언적 모델을 제공합니다. 자세한 내용은 WPF .NET 개요를 참조하세요.
필수 조건
이 자습서를 완료하려면 Visual Studio가 필요합니다. 무료 버전을 보려면 Visual Studio 다운로드 페이지를 방문하세요.
이 자습서를 완료하려면 Visual Studio가 필요합니다. 무료 버전을 보려면 Visual Studio 다운로드 페이지를 방문하세요.
프로젝트를 만듭니다.
Visual Studio에서 애플리케이션을 만들 때 먼저 프로젝트를 만듭니다. 이 자습서에서는 Windows Presentation Foundation 프로젝트를 만듭니다.
Visual Studio를 엽니다.
새 프로젝트 만들기 화면에서 "WPF"를 검색하고 WPF 앱(.NET Framework)을 선택합니다. 다음을 선택합니다.
프로젝트에 이름을 HelloWPFApp으로 지정하고 만들기를 선택합니다.
Visual Studio는 HelloWPFApp 프로젝트 및 솔루션을 만듭니다. 솔루션 탐색기 다양한 파일을 표시합니다.
WPF 디자이너는 분할 보기에서 MainWindow.xaml의 디자인 보기와 XAML 보기를 표시합니다.
Visual Studio를 엽니다.
시작 창에서 새 프로젝트 만들기을 선택합니다.
새 프로젝트 만들기 창에서 "WPF"를 검색하고 모든 언어 드롭다운 목록에서 Visual Basic을 선택합니다. WPF 앱(.NET Framework)을 선택한 다음, 다음을 선택합니다.
프로젝트에 이름을 HelloWPFApp으로 지정하고 만들기를 선택합니다.
Visual Studio는 HelloWPFApp 프로젝트 및 솔루션을 만듭니다. 솔루션 탐색기 다양한 파일을 표시합니다.
WPF 디자이너는 분할 보기에서 MainWindow.xaml의 디자인 보기와 XAML 보기를 표시합니다.
비고
XAML(eXtensible Application Markup Language)에 대한 자세한 내용은 WPF에 대한 XAML 개요를 참조하세요.
창 구성 및 텍스트 추가
속성 창을 사용하여 프로젝트 항목, 컨트롤 및 기타 항목에 대한 옵션을 표시하고 변경할 수 있습니다.
솔루션 탐색기에서 MainWindow.xaml을 엽니다.
XAML 보기에서 Window.Title 속성의 값을 Title="MainWindow" 에서 Title="Greetings"로 변경합니다.
Visual Studio IDE의 왼쪽에서 도구 상자 탭을 선택합니다. 표시되지 않으면 메뉴 모음에서 보기>도구 상자 선택하거나 Ctrl ++선택합니다.
일반 WPF 컨트롤을 확장하거나 검색 창에 텍스트를 입력하여 TextBlock을 찾습니다.
TextBlock 항목을 선택하고 디자인 화면의 창으로 끕니다. TextBlock 컨트롤을 끌어서 이동할 수 있습니다. 지침을 사용하여 컨트롤을 배치합니다.
XAML 태그는 다음 예제와 같습니다.
<TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>XAML 보기에서 TextBlock에 대한 태그를 찾아 텍스트 특성을 변경합니다.
Text="Select a message option and then choose the Display button."필요한 경우 TextBlock을 다시 가운데에 배치합니다.
모두 저장 도구 모음 단추를 선택하여 앱을 저장합니다. 또는 앱을 저장하려면 메뉴 모음에서 파일>모든 저장을 선택하거나 Ctrl 키를+Shift+S누릅니다. 초기에 자주 저장하는 것이 가장 좋습니다.
단추 및 코드 추가
애플리케이션은 두 개의 라디오 단추와 단추를 사용합니다. 다음 단계를 사용하여 추가합니다. 단추에 Visual Basic 코드를 추가합니다. 이 코드는 라디오 단추 선택을 참조합니다.
도구 상자에서 RadioButton을 찾습니다.
RadioButton 항목을 선택하고 디자인 화면으로 끌어 디자인 화면에 두 개의 RadioButton 컨트롤을 추가합니다. 단추를 선택하고 화살표 키를 사용하여 단추를 이동합니다. TextBlock 컨트롤 아래에 단추를 나란히 놓습니다.
왼쪽 RadioButton 컨트롤의 속성 창에서 속성 창 맨 위에 있는 Name 속성을 HelloButton으로 변경합니다.
오른쪽 RadioButton 컨트롤의 속성 창에서 Name 속성을 GoodbyeButton으로 변경합니다.
XAML에서 과
HelloButton의GoodbyeButton속성을"Hello"과"Goodbye"로 업데이트합니다.<Grid> <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/> <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/> <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/> </Grid>XAML 보기에서 HelloButton에 대한 태그를 찾아 IsChecked 특성을 추가합니다.
IsChecked="True"True 값이 있는 IsChecked 특성은 HelloButton이 기본적으로 선택되어 있음을 의미합니다. 이 설정은 프로그램이 시작되는 경우에도 라디오 단추가 항상 선택됨을 의미합니다.
도구 상자에서 단추 컨트롤을 찾은 다음 RadioButton 컨트롤 아래의 디자인 화면으로 단추를 끕니다.
XAML 보기에서 버튼 컨트롤의 콘텐츠 값을
Content="Button"에서Content="Display"로 변경합니다.<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>창은 다음 이미지와 유사합니다.
디자인 화면에서 표시 단추를 두 번 클릭합니다.
MainWindow.xaml.vb가 열리고, 커서는
Button_Click이벤트에 위치해 있습니다.Private Sub Button_Click(sender As Object, e As RoutedEventArgs) End Sub다음 코드를 추가합니다.
If HelloButton.IsChecked = True Then MessageBox.Show("Hello.") ElseIf GoodbyeButton.IsChecked = True Then MessageBox.Show("Goodbye.") End If
애플리케이션 디버그 및 테스트
다음으로, 애플리케이션을 디버그하여 오류를 찾고 두 메시지 상자가 모두 올바르게 표시되는지 테스트합니다. 이 프로세스의 작동 방식을 확인하기 위해 첫 번째 단계에서는 의도적으로 프로그램에 오류를 도입합니다.
솔루션 탐색기에서 MainWindow.xaml을 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 선택합니다. 파일 이름을 Greetings.xaml로 변경하십시오.
F5 키를 누르거나 디버그를 선택한 다음 디버깅을 시작하여 디버거를 시작합니다.
중단 모드 창이 나타나고 출력 창은 예외가 발생했음을 나타냅니다.
디버거를 중지하려면 디버그>디버깅 중지를 선택하세요.
이 섹션의 시작 부분에서 MainWindow.xaml 의 이름을 Greetings.xaml 로 변경했습니다. 이 코드는 여전히 MainWindow.xaml 을 애플리케이션의 시작 URI로 참조하므로 프로젝트를 시작할 수 없습니다.
솔루션 탐색기에서 Application.xaml 파일을 엽니다.
를 로 변경
StartupUri="MainWindow.xaml"합니다.StartupUri="Greetings.xaml"디버거를 다시 시작합니다(F5누르기). 이제 애플리케이션의 인사말 창이 표시됩니다.
Hello와 표시 단추를 선택한 다음 Goodbye 및 Display 단추를 선택합니다. 오른쪽 위 모서리에 있는 닫기 아이콘을 사용하여 디버깅을 중지합니다.
자세한 내용은 WPF 애플리케이션 빌드 및 WPF 디버그를 참조하세요.
중단점을 사용하여 디버그
일부 중단점을 추가하여 디버깅하는 동안 코드를 테스트할 수 있습니다.
Greetings.xaml.vb 열고 다음 줄을 선택합니다.
MessageBox.Show("Hello.")F9 키를 누르거나 디버그를 선택한 다음 중단점 토글을 통해 중단점을 추가합니다.
편집기 창의 왼쪽 여백에 있는 코드 줄 옆에 빨간색 원이 나타납니다.
다음 줄을
MessageBox.Show("Goodbye.")선택합니다.F9 키를 눌러 중단점을 추가한 다음 F5 키를 눌러 디버깅을 시작합니다.
인사말 창에서 Hello 단추를 선택한 다음 표시를 선택합니다.
선
MessageBox.Show("Hello.")노란색으로 강조 표시되어 있습니다. IDE의 맨 아래에서 Autos, Locals, Watch 창이 왼쪽에 함께 도킹됩니다. 호출 스택, 중단점, 예외 설정, 명령, 직접 실행및 출력 창이 오른쪽에 함께 도킹됩니다.
메뉴 모음에서 디버그>다음으로 계속선택합니다.
애플리케이션이 다시 시작됩니다. "Hello"라는 단어가 있는 대화 상자가 나타납니다.
확인 단추를 선택하여 대화 상자를 닫습니다.
인사말 창에서 안녕 라디오 단추를 선택한 다음 표시 단추를 선택합니다.
선
MessageBox.Show("Goodbye.")노란색으로 강조 표시되어 있습니다.F5 키를 선택하여 디버깅을 계속합니다. 대화 상자가 나타나면 확인을 선택하여 대화 상자를 닫습니다.
애플리케이션 창을 닫아 디버깅을 중지합니다.
메뉴 모음에서 디버그>모든 중단점사용하지 않도록 설정합니다.
릴리스 버전 빌드
이제 모든 것이 작동하는지 확인했으므로 애플리케이션의 릴리스 빌드를 준비할 수 있습니다.
빌드정리 솔루션을 선택하여 이전 > 중에 만든 중간 파일 및 출력 파일을 삭제합니다.
도구 모음의 드롭다운 컨트롤을 사용하여 HelloWPFApp의 빌드 구성을 디버그에서 릴리스으로 변경합니다.
빌드 솔루션 빌드>를 선택합니다.
이 자습서를 완료해 주셔서 감사합니다. 솔루션 및 프로젝트 디렉터리(...\HelloWPFApp\bin\Release)에서 빌드한 .exe 찾을 수 있습니다.
다음 단계
Visual Studio에서 Visual Basic을 사용하여 Windows Forms 앱을 만드는 방법을 알아보려면 다음 문서로 진행하세요.
관련 링크
Visual Studio에 대한 자세한 내용은 다음 리소스를 참조하세요.