다음을 통해 공유

방법: C# WPF 응용 프로그램 만들기

  • 아티클

업데이트: 2007년 11월

이 항목에서는 간단한 WPF(Windows Presentation Foundation) 응용 프로그램을 만드는 방법을 보여 주고 사용자가 Visual C# Express Edition IDE(통합 개발 환경)에 익숙해지도록 도와 줍니다. Windows Forms 응용 프로그램과 같이 WPF 응용 프로그램은 도구 상자에서 컨트롤을 디자인 화면으로 끌어 와 디자인할 수 있습니다. WPF 프로젝트의 IDE에서는 디자이너, 속성 창 및 도구 상자 이외에도 XAML이 포함된 창을 사용할 수 있습니다. XAML은 사용자 인터페이스를 만드는 데 사용하는 Extensible Application Markup Language의 약어입니다. 다음 그림에서는 XAML 편집기의 위치를 보여 줍니다.

XAML 편집기

XAML 창

이 예제에서는 그림을 그릴 수 있는 사용자 고유의 잉크 응용 프로그램을 만드는 방법을 보여 줍니다.

이 단원에서는 다음과 같은 방법을 배웁니다.

  • WPF 응용 프로그램을 만드는 방법

  • 코드 뷰와 디자이너 뷰 사이를 전환하는 방법

  • WPF Windows의 속성을 변경하는 방법

  • XAML 편집기를 사용하는 방법

  • System.Windows.Controls.InkCanvas 컨트롤을 추가하는 방법

  • System.Windows.Controls.Button 컨트롤을 추가합니다.

  • 컨트롤에 대한 이벤트 처리기를 만드는 방법

비디오에 링크 비디오 데모를 보려면 Video How to: Create a C# WPF Application을 참조하십시오.

WPF 응용 프로그램을 만들려면

  1. 파일 메뉴에서 새 프로젝트를 클릭합니다.

    새 프로젝트 대화 상자가 나타납니다. 이 대화 상자에서는 Visual C# Express Edition에서 만들 수 있는 여러 기본 응용 프로그램 종류를 보여 줍니다.

  2. WPF 응용 프로그램을 클릭합니다.

  3. 응용 프로그램의 이름을 Ink Pad로 변경합니다.

  4. 확인을 클릭합니다.

    Visual C# Express Edition에서는 프로젝트 제목에 따라 이름이 지정된 새 프로젝트용 폴더를 만든 다음 디자이너 뷰에 Window1이라는 제목의 새 WPF 창을 표시합니다. 디자이너 화면이나 코드 창을 마우스 오른쪽 단추로 클릭하고 코드 보기를 선택하여 언제든지 코드 뷰로 전환할 수 있습니다. 기본적으로 XAML 편집기는 디자이너 아래 표시되지만 디자이너 화면을 마우스 오른쪽 단추로 클릭하고 XAML 보기를 클릭하여 XAML 태그를 전체 화면 모드로 표시할 수도 있습니다.

    디자이너 뷰에 표시되는 WPF 창은 응용 프로그램이 시작될 때 열리는 창을 시각적으로 표현한 것입니다. 디자이너 뷰에서는 도구 상자의 다양한 컨트롤을 WPF 창으로 끌어 놓을 수 있습니다. 컨트롤을 WPF 창으로 끌어 오면 Visual C#에서는 프로그램이 실행될 때 컨트롤이 적절하게 배치되도록 하는 코드를 자동으로 만듭니다.

  5. 속성 창이 열려 있지 않으면 보기 메뉴에서 속성창을 클릭합니다. 이 창에서는 현재 선택한 WPF 창이나 컨트롤의 속성을 보여 주며, 여기서 기존 값을 변경할 수 있습니다.

  6. 속성 창에서 Height 속성을 550으로 설정하고 Width 속성을 370으로 설정하여 WPF 창의 크기를 변경합니다.

  7. WPF 창의 제목을 Ink Pad로 변경합니다.

  8. 드롭다운 상자에서 Brown을 클릭한 후 Enter 키를 눌러 WPF 창의 Background 속성을 밤색으로 변경합니다.

    참고:

    Background 특성을 추가한 후 값을 Background="Brown"으로 설정하여 XAML 태그를 직접 수정할 수도 있습니다.

  9. 도구 상자를 열려면 보기 메뉴를 클릭한 다음 도구 상자를 클릭합니다.

  10. 도구 상자를 마우스 오른쪽 단추로 클릭한 다음 항목 선택을 클릭합니다.

    도구 상자 항목 선택 대화 상자가 열립니다.

  11. 도구 상자 항목 선택 대화 상자의 WPF 구성 요소 탭에서 아래쪽으로 스크롤하여 InkCanvas를 찾은 후 이를 선택하여 확인란에 확인 표시가 나타나도록 합니다.

  12. 확인을 클릭하여 InkCanvas 컨트롤을 도구 상자에 추가합니다.

  13. 도구 상자에서 InkCanvas 컨트롤을 WPF 창으로 끌어 옵니다.

  14. 속성 창에서 InkCanvas 컨트롤의 속성을 다음과 같이 설정합니다.

    속성

    값

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    9, 9, 9, 68

  15. InkCanvas 컨트롤의 Background 속성을 LightYellow로 설정하여 색을 노란색으로 변경합니다.

    InkCanvas 컨트롤의 배경색이 런타임에 연한 노란색으로 표시됩니다.

  16. Button 컨트롤 두 개를 WPF 창의 InkCanvas 아래로 끌어다 놓습니다. button1 및 button2를 각각 왼쪽과 오른쪽에 배치합니다.

  17. button1을 선택하고 XAML 뷰에서 XAML 태그를 다음과 같이 변경합니다. 이 태그는 텍스트를 Clear로 설정합니다.

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="button1" VerticalAlignment="Bottom"
    Width="75">Clear</Button>

  18. button2를 선택한 후 다음과 같이 XAML 태그를 변경합니다. 이 태그는 텍스트를 Close로 설정합니다.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="button2" VerticalAlignment="Bottom" Width="75"
    Click="ButtonCloseClicked">Close</Button>

    WPF 응용 프로그램은 다음 그림에 나와 있는 Ink Pad 응용 프로그램과 비슷해야 합니다.

    WPF Ink 응용 프로그램

    WPF 잉크 응용 프로그램

이벤트 처리기를 만들려면

  1. Clear를 두 번 클릭한 후 생성된 Click 이벤트 처리기에 다음 코드를 추가합니다.

        this.inkCanvas1.Strokes.Clear();

  2. 코드 편집기를 마우스 오른쪽 단추로 클릭하고 디자이너를 클릭하여 디자이너 뷰로 돌아갑니다.

  3. Close를 두 번 클릭한 후 생성된 Click 이벤트 처리기에 다음 코드를 추가합니다.

        this.Close();

  4. F5 키를 눌러 프로젝트를 실행합니다.

  5. 응용 프로그램이 열리면 InkCanvas 컨트롤에 그림을 그립니다. 잘못 그린 경우 Clear를 클릭하여 처음부터 다시 그릴 수 있습니다.

  6. Close를 클릭하여 응용 프로그램을 닫습니다.

참고 항목

작업

방법: 새 WPF 응용 프로그램 프로젝트 만들기

방법: C# 콘솔 응용 프로그램 만들기

방법: C# Windows Forms 응용 프로그램 만들기

기타 리소스

Visual C# 응용 프로그램 처음 만들기