다음을 통해 공유

자습서: Visual Basic 사용하여 WPF 애플리케이션 만들기

이 자습서에서는 Visual Studio IDE(통합 개발 환경)에서 Visual Basic 사용하여 애플리케이션을 만듭니다. 프로그램에서 Windows Presentation Foundation(WPF) UI 프레임워크를 사용합니다. 이 자습서를 사용하여 Visual Studio 사용할 수 있는 많은 도구, 대화 상자 및 디자이너를 숙지할 수 있습니다.

이 튜토리얼에서는 다음을 배우게 됩니다:

  • 프로젝트를 만듭니다.
  • 창 구성 및 텍스트 추가
  • 단추 및 코드 추가
  • 애플리케이션 디버그 및 테스트
  • 중단점을 사용하여 디버그
  • 릴리스 버전 빌드

WPF란?

WPF 또는 Windows Presentation Foundation 데스크톱 클라이언트 애플리케이션을 만드는 UI(사용자 인터페이스) 프레임워크입니다. WPF 개발 플랫폼은 다음을 비롯한 광범위한 애플리케이션 개발 기능을 지원합니다.

  • 애플리케이션 모델
  • 리소스
  • 제어
  • 그래픽
  • Layout
  • 데이터 바인딩
  • 문서
  • 보안

WPF .NET 일부입니다. 이전에 ASP.NET 또는 Windows Forms 사용하여 .NET 애플리케이션을 만든 경우 프로그래밍 환경이 익숙해야 합니다. WPF Extensible Application Markup Language XAML을 사용하여 애플리케이션 프로그래밍에 대한 선언적 모델을 제공합니다. 자세한 내용은 WPF .NET 개요 참조하세요.

필수 조건

이 자습서를 완료하려면 Visual Studio 필요합니다. 무료 버전은 Visual Studio 다운로드 참조하세요.

프로젝트를 만듭니다.

Visual Studio 애플리케이션을 만들 때 먼저 프로젝트를 만듭니다. 이 자습서에서는 Windows Presentation Foundation 프로젝트를 만듭니다.

  1. Visual Studio 엽니다.

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

    '새 프로젝트 만들기' 옵션이 강조 표시된 Visual Studio 시작 창의 스크린샷.

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

    검색 상자에 'WPF'이 입력되고 언어 목록에서 'Visual Basic'이 선택되고 'WPF 앱(.NET Framework)' 프로젝트 템플릿이 강조 표시된 '새 프로젝트 만들기' 대화 상자의 스크린샷이 강조 표시됩니다.

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

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

    솔루션 탐색기에서 HelloWPFApp 프로젝트와 솔루션에 있는 파일을 보여주는 스크린샷입니다.

WPF 디자이너 분할 보기에 MainWindow.xaml XAML 보기와 디자인 보기가 표시됩니다.

  1. Visual Studio 엽니다.

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

    '새 프로젝트 만들기' 옵션이 강조 표시된 2022년 Visual Studio 시작 창의 스크린샷.

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

    검색 상자에 'WPF'이 입력되고 언어 목록에서 'Visual Basic'이 선택되고 'WPF 앱(.NET Framework)' 프로젝트 템플릿이 강조 표시된 '새 프로젝트 만들기' 대화 상자의 스크린샷이 강조 표시됩니다.

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

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

    Visual Studio 2022의 솔루션 탐색기에서 HelloWPFApp 프로젝트 및 솔루션의 파일을 보여주는 스크린샷입니다.

WPF 디자이너 분할 보기에 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 왼쪽에서 도구 상자 탭을 선택합니다. 표시되지 않으면 메뉴 모음에서 View> 도구 상자를 선택하거나 +Alt+X.

  4. Common WPF Controls 확장하거나 검색 창에서 Text을 입력하여 TextBlock을 찾습니다.

    일반 WPF 컨트롤 목록에서 TextBlock 컨트롤이 강조 표시된 도구 상자 창의 스크린샷입니다.

    Visual Studio 2022에서 도구 상자 창의 공용 WPF 컨트롤 목록에 있는 TextBlock 컨트롤이 강조 표시된 스크린샷입니다.

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

    지침이 표시된 Greetings 양식에 배치된 TextBlock 컨트롤을 보여 주는 스크린샷

    XAML 태그는 다음 예제와 같습니다.

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

  6. XAML 보기에서 TextBlock에 대한 태그를 찾아 텍스트 특성을 변경합니다.

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

    필요한 경우 TextBlock의 가운데를 다시 지정합니다.

  7. 모두 저장 도구 모음 단추를 선택하여 앱을 저장합니다. 또는 앱을 저장하려면 메뉴 모음에서 파일모든 저장을 선택하거나 Ctrl 키를ShiftS누릅니다. 초기에 자주 저장하는 것이 가장 좋습니다.

단추 및 코드 추가

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

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

    Common WPF Controls 목록에서 RadioButton 컨트롤이 선택된 도구 상자 창을 보여주는 스크린샷

    2022년 Visual Studio의 Toolbox 창에서 Common WPF Controls 목록의 RadioButton 컨트롤이 선택된 것을 보여주는 스크린샷입니다.

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

    TextBlock 컨트롤과 두 개의 라디오 단추가 있는 Greetings 양식을 보여 주는 스크린샷

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

    'HelloButton' 라디오 버튼의 솔루션 탐색기 속성 창을 보여주는 스크린샷입니다.

    Visual Studio 2022의 'HelloButton' RadioButton에 대한 솔루션 탐색기 속성 창을 보여주는 스크린샷

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

  5. XAML에서 과 의 속성을 과 로 업데이트합니다.

    <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. 도구 상자에서 단추 컨트롤을 찾으세요. 그런 다음 RadioButton 컨트롤 아래의 디자인 화면으로 단추를 끕니다.

  8. XAML 보기에서 버튼 컨트롤의 콘텐츠 값을 에서 로 변경합니다.

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

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

    'Hello' 및 'Goodbye'라고 레이블이 표시된 RadioButtons, '표시'라는 레이블이 붙은 단추 컨트롤, 그리고 TextBlock이 모두 위치한 Greetings 폼을 보여주는 스크린샷.

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

    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을 마우스 오른쪽 단추로 클릭하고 Rename 선택합니다. 파일 이름을 Greetings.xaml로 변경하십시오.

  2. F5 키를 누르거나 디버그를 선택한 다음 디버깅을 시작하여 디버거를 시작합니다.

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

    '리소스 mainwindow.xaml을 찾을 수 없습니다.'라는 System.IO.Exception 메시지가 표시된 '처리되지 않은 예외' 창을 보여 주는 스크린샷

  3. 디버거를 중지하려면 디버그디버깅 중지를 선택하세요.

    이 섹션의 시작 부분에서 MainWindow.xaml 의 이름을 Greetings.xaml 로 변경했습니다. 이 코드는 여전히 MainWindow.xaml 을 애플리케이션의 시작 URI로 참조하므로 프로젝트를 시작할 수 없습니다.

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

  5. 를 로 바꿉니다.

  6. 디버거를 다시 시작합니다(F5누르기). 이제 애플리케이션의 인사말 창이 표시됩니다.

    TextBlock, RadioButtons 및 단추 컨트롤이 표시된 인사말 창의 스크린샷 'Hello' 라디오 단추가 선택되어 있습니다.

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

자세한 내용은 WPF 애플리케이션 컴파일 및 Debug WPF 참조하세요.

중단점을 사용하여 디버그

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

  1. Greetings.xaml.vb 열고 다음 줄을 선택합니다.

  2. F9 키를 누르거나 디버그를 선택한 다음 중단점 토글을 통해 중단점을 추가합니다.

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

  3. 다음 줄을 선택합니다.

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

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

    선 노란색으로 강조 표시되어 있습니다. IDE의 맨 아래에서 Autos, Locals, Watch 창이 왼쪽에 함께 도킹됩니다. 호출 스택, 중단점, 예외 설정, 명령, 직접 실행및 출력 창이 오른쪽에 함께 도킹됩니다.

  6. 메뉴 모음에서 디버그다음으로 계속선택합니다.

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

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

  8. 인사말 창에서 안녕 라디오 단추를 선택한 다음 표시 단추를 선택합니다.

    선 노란색으로 강조 표시되어 있습니다.

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

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

  11. 메뉴 표시줄에서 디버그 모든 중단점을 사용하지 않도록 설정합니다.

릴리스 버전 빌드

모든 것이 작동하는지 확인한 후 애플리케이션의 릴리스 빌드를 준비할 수 있습니다.

  1. 빌드정리 솔루션을 선택하여 이전 중에 만든 중간 파일 및 출력 파일을 삭제합니다.

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

  3. "빌드 솔루션"을 선택합니다.

이 자습서를 완료해 주셔서 감사합니다. 솔루션 및 프로젝트 디렉터리(...\HelloWPFApp\bin\Release)에서 빌드한 .exe 찾을 수 있습니다.

다음 단계:

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

Windows Forms 앱 만들기

Visual Studio 대한 자세한 내용은 다음을 참조하세요.

  • 생산성 팁
  • Last updated on