다음을 통해 공유


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

필수 조건

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

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

프로젝트를 만듭니다.

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

  1. Visual Studio를 엽니다.

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

    검색 상자에 W P F가 입력되고 W P F 앱(.NET Framework) 프로젝트 템플릿이 선택된 새 프로젝트 만들기 대화 상자의 스크린샷

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

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

    스크린샷은 Hello W P F 앱 파일이 있는 솔루션 탐색기를 보여줍니다.

WPF 디자이너는 분할 보기에서 MainWindow.xaml의 디자인 보기와 XAML 보기를 표시합니다.

  1. Visual Studio를 엽니다.

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

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

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

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

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

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

    솔루션 탐색기의 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의 왼쪽에서 도구 상자 탭을 선택합니다. 표시되지 않으면 메뉴 모음에서 보기>도구 상자 선택하거나 Ctrl ++선택합니다.

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

    일반 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 키를+Shift+S누릅니다. 초기에 자주 저장하는 것이 가장 좋습니다.

단추 및 코드 추가

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

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

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

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

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

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

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

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

  5. XAML에서 HelloButtonGoodbyeButton 속성을 "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. 도구 상자에서 단추 컨트롤을 찾은 다음 RadioButton 컨트롤 아래의 디자인 화면으로 단추를 끕니다.

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

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

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

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

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

    MainWindow.xaml.vb가 열리고, 커서는 Button_Click 이벤트에 위치해 있습니다.

    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 키를 누르거나 디버그를 선택한 다음 디버깅을 시작하여 디버거를 시작합니다.

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

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

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

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

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

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

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

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

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

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

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

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

중단점을 사용하여 디버그

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

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

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

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

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

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

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

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

    Code, Diagnostics가 있는 Visual Studio의 디버그 세션을 보여 주는 스크린샷. 자동 및 호출 스택 창이 열립니다. 실행은 Greetings.xaml.vb 중단점에서 중지됩니다.

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

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

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

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

    MessageBox.Show("Goodbye.") 노란색으로 강조 표시되어 있습니다.

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

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

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

릴리스 버전 빌드

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

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

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

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

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

다음 단계

Visual Studio에서 Visual Basic을 사용하여 Windows Forms 앱을 만드는 방법을 알아보려면 다음 문서로 진행하세요.

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