자습서: Visual Basic으로 WPF 애플리케이션 만들기

  • 아티클

이 자습서에서는 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는 XAML(Extensible Application Markup Language)을 사용하여 애플리케이션 프로그래밍을 위한 선언적 모델을 제공합니다. 자세한 내용은 WPF .NET 개요를 참조하세요.

필수 구성 요소

이 자습서를 완료하려면 Visual Studio가 필요합니다. 무료 버전은 Visual Studio 다운로드 페이지를 방문하세요.

이 자습서를 완료하려면 Visual Studio가 필요합니다. 무료 버전은 Visual Studio 다운로드 페이지를 방문하세요.

프로젝트 만들기

Visual Studio에서 애플리케이션을 만들 때 먼저 프로젝트부터 만들어야 합니다. 이 자습서에서는 WPF(Windows Presentation Foundation) 프로젝트를 만듭니다.

  1. Visual Studio를 엽니다.

  2. 새 프로젝트 만들기 화면에서 “WPF”를 검색하고 WPF 앱(.NET Framework)을 선택합니다. 다음을 선택합니다.

    Screenshot of the Create a new project dialog with W P F entered in the search box and the W P F App (.NET Framework) project template selected.

  3. 프로젝트에 HelloWPFApp이라는 이름을 지정하고 만들기를 선택합니다.

    Visual Studio는 HelloWPFApp 프로젝트 및 솔루션을 만듭니다. 솔루션 탐색기는 다양한 파일을 표시합니다.

    Screenshot shows Solution Explorer with Hello W P F App files.

WPF Designer는 분할 뷰에 디자인 뷰와 MainWindow.xaml의 XAML 뷰를 표시합니다.

  1. Visual Studio를 엽니다.

  2. 시작 창에서 새 프로젝트 만들기를 선택합니다.

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

  3. 새 프로젝트 만들기 창에서 “WPF”를 검색하고 모든 언어 드롭다운 목록에서 Visual Basic을 선택합니다. WPF 앱(.NET Framework) 을 선택하고 다음을 선택합니다.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, 'Visual Basic' selected in the languages list, and the 'WPF App (.NET Framework)' project template highlighted.

  4. 프로젝트에 HelloWPFApp이라는 이름을 지정하고 만들기를 선택합니다.

    Visual Studio는 HelloWPFApp 프로젝트 및 솔루션을 만듭니다. 솔루션 탐색기는 다양한 파일을 표시합니다.

    Screenshot showing the files in the HelloWPFApp project and solution in the Solution Explorer.

WPF Designer는 분할 뷰에 디자인 뷰와 MainWindow.xaml의 XAML 뷰를 표시합니다.

참고

XAML(eXtensible Application Markup Language)에 관한 자세한 내용은 WPF에 대한 XAML 개요를 참조하세요.

창 구성 및 텍스트 추가

속성 창을 사용하면 프로젝트 항목, 컨트롤 및 기타 항목에 대한 옵션을 표시하고 변경할 수 있습니다.

  1. 솔루션 탐색기에서 MainWindow.xaml 파일을 엽니다.

  2. XAML 뷰에서 Window.Title 속성 값을 Title="MainWindow"에서 Title="Greetings"로 변경합니다.

  3. Visual Studio IDE의 왼쪽에서 도구 상자 탭을 선택합니다. 이 탭이 표시되지 않으면 메뉴 모음에서 보기>도구 상자를 선택하거나 Ctrl+Alt+X를 선택합니다.

  4. 공통 WPF 컨트롤을 확장하거나 검색 창에 텍스트를 입력하여 TextBlock을 찾습니다.

    Screenshot showing the Toolbox window with the TextBlock control highlighted in the list of Common WPF Controls.

  5. TextBlock 항목을 선택하고 디자인 화면의 창으로 끌어 옮깁니다. TextBlock 컨트롤을 끌어서 이동할 수 있습니다. 지침을 사용하여 컨트롤을 배치합니다.

    Screenshot showing the TextBlock control positioned on the Greetings form with the guidelines visible.

    XAML 태그는 다음 예제와 유사합니다.

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. XAML 뷰에서 TextBlock의 태그를 찾아 Text 특성을 다음과 같이 변경합니다.

    Text="Select a message option and then choose the Display button."

    필요하다면 TextBlock을 다시 가운데에 배치합니다

  7. 모두 저장 도구 모음 단추를 선택하여 앱을 저장합니다. 또는 앱을 저장하려면 메뉴 모음에서 파일>모두 저장을 선택하거나 Ctrl+Shift+S를 누릅니다. 프로그램은 초기에 자주 저장하는 것이 좋습니다.

단추 및 코드 추가

애플리케이션은 두 개의 라디오 단추와 하나의 단추를 사용합니다. 다음 단계를 사용하여 추가합니다. 단추에 Visual Basic 코드를 추가합니다. 이 코드는 라디오 단추 선택을 참조합니다.

  1. 도구 상자에서 RadioButton을 찾습니다.

    Screenshot showing the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  2. RadioButton 항목을 선택한 후 디자인 화면으로 끌어와서 디자인 화면에 두 개의 RadioButton 컨트롤을 추가합니다. 단추를 선택하고 화살표 키를 사용하여 단추를 이동합니다. TextBlock 컨트롤 아래에 단추를 나란히 놓습니다.

    Screenshot showing the Greetings form with a TextBlock control and two radio buttons.

  3. 왼쪽 RadioButton 컨트롤의 속성 창에서 속성 창 맨 위에 있는 Name 속성을 HelloButton으로 변경합니다.

    Screenshot showing the Solution Explorer Properties window for the 'HelloButton' RadioButton.

  4. 오른쪽 RadioButton 컨트롤의 속성 창에서 Name 속성을 GoodbyeButton으로 변경합니다.

  5. 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>

  6. XAML 뷰에서 HelloButton에 대한 표시를 찾고 IsChecked 특성을 추가합니다.

    IsChecked="True"

    True 값이 있는 IsChecked 특성은 HelloButton이 기본적으로 선택됨을 의미합니다. 이 설정은 프로그램이 시작되는 경우에도 라디오 단추가 항상 선택됨을 의미합니다.

  7. 도구 상자에서 Button 컨트롤을 찾은 다음, RadioButton 컨트롤 아래의 디자인 화면으로 끌어 추가합니다.

  8. XAML 뷰에서 Button 컨트롤의 Content 값을 Content="Button"에서 Content="Display"로 변경합니다.

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    창은 다음 이미지와 유사합니다.

    Screenshot showing the Greetings form with the TextBlock, RadioButtons labeled 'Hello' and 'Goodbye', and the Button control labeled 'Display' all positioned on the form.

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

    이벤트에 커서 Button_Click 가 있는 MainWindow.xaml.vb 열립니다.

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub

  10. 다음 코드를 추가합니다.

    If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

애플리케이션 디버깅 및 테스트

그런 다음 애플리케이션을 디버그하여 오류를 검색하고 두 메시지 상자가 모두 제대로 나타나는지 테스트합니다. 이 프로세스의 작동 방식을 확인하기 위해 첫 번째 단계에서는 의도적으로 프로그램에 오류를 도입합니다.

  1. 솔루션 탐색기에서 MainWindow.xaml을 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 선택합니다. 파일 이름을 Greetings.xaml로 바꿉니다.

  2. F5 키를 누르거나 디버그, 디버깅 시작을 차례로 선택하여 디버거를 시작합니다.

    중단 모드 창이 나타나고 출력 창은 예외가 발생했음을 나타냅니다.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

  3. 디버그>디버깅 중지를 선택하여 디버거를 중지합니다.

    이 섹션의 시작 부분에서 MainWindow.xaml의 이름을 Greetings.xaml로 변경했습니다. 코드가 여전히 애플리케이션의 시작 URI로 MainWindow.xaml을 나타내고 있으므로 프로젝트를 시작할 수 없습니다.

  4. 솔루션 탐색기에서 Application.xaml 파일을 엽니다.

  5. StartupUri="MainWindow.xaml"를 StartupUri="Greetings.xaml"로 변경

  6. F5 키를 눌러 디버거를 다시 시작합니다. 이제 애플리케이션의 Greetings 창이 표시됩니다.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

  7. Hello 및 표시 단추를 선택한 다음, 안녕 및 표시 단추를 선택합니다. 오른쪽 위 모서리에 있는 닫기 아이콘을 사용하여 디버깅을 중지합니다.

자세한 내용은 WPF(WPF 애플리케이션) 빌드 및 WPF 디버그를 참조하세요.

중단점으로 디버깅

일부 중단점을 추가하여 디버깅하는 동안 코드를 테스트할 수 있습니다.

  1. Greetings.xaml.vb를 열고 다음 줄을 선택합니다. MessageBox.Show("Hello.")

  2. F9 키를 누르거나 디버그, 중단점 전환을 차례대로 선택하여 중단점을 추가합니다.

    편집기 창의 왼쪽 여백 코드 줄 옆에 빨간색 원이 나타납니다.

  3. MessageBox.Show("Goodbye.")줄을 선택합니다.

  4. F9 키를 눌러 중단점을 추가한 다음 F5 키를 눌러 디버깅을 시작합니다.

  5. 인사말 창에서 Hello 단추를 선택한 후, 표시를 선택합니다.

    MessageBox.Show("Hello.") 줄이 노란색으로 강조 표시됩니다. IDE 하단에서 자동, 지역 및 조사식 창은 왼쪽에 함께 도킹됩니다. 호출 스택, 중단점, 예외 설정, 명령, 직접 실행 및 출력 창이 오른쪽에 함께 도킹됩니다.

    Screenshot showing a debug session in Visual Studio with the Code, Diagnostics. Autos, and Call Stack windows open. Execution is stopped at a breakpoint in Greetings.xaml.vb.

  6. 메뉴 모음에서 디버그>프로시저 나가기를 선택합니다.

    애플리케이션이 다시 시작합니다. 'Hello'라는 단어가 있는 대화 상자가 나타납니다.

  7. 확인 단추를 선택하여 대화 상자를 닫습니다.

  8. Greetings 창에서 Goodbye 라디오 단추를 선택한 다음 표시 단추를 선택합니다.

    MessageBox.Show("Goodbye.") 줄이 노란색으로 강조 표시됩니다.

  9. F5 키를 선택하여 계속 디버깅합니다. 대화 상자가 나타나면 확인을 선택하여 대화 상자를 닫습니다.

  10. 애플리케이션 창을 닫아 디버깅을 중지합니다.

  11. 메뉴 모음에서 디버그>모든 중단점 해제를 선택합니다.

릴리스 버전 빌드

모든 것이 작동하는 것을 확인했으므로 애플리케이션의 릴리스 빌드를 준비할 수 있습니다.

  1. 빌드>솔루션 정리를 선택하여 이전 빌드 과정에서 만들어진 중간 파일과 출력 파일을 삭제합니다.

  2. 도구 모음에서 드롭다운 컨트롤을 사용하여 HelloWPFApp의 빌드 구성을 디버그에서 릴리스로 변경합니다.

  3. 빌드>솔루션 빌드를 선택합니다.

축하합니다. 이 자습서를 마쳤습니다. 솔루션 및 프로젝트 디렉터리(...\HelloWPFApp\bin\Release)에서 빌드한 .exe 찾을 수 있습니다.

다음 단계

다음 문서로 이동하여 Visual Basic을 사용해 Visual Studio에서 Windows Forms 앱을 만드는 방법을 알아봅니다.

Windows Forms 앱 만들기

Visual Studio에 관한 자세한 내용은 다음 리소스를 참조하세요.