C#/WPF

04. WPF 살펴보기

01. WPF 프로젝트 실행하기

01.1 WPF 프로젝트 초기 화면

01.2 WPF 기본 템플릿 실행

WPF 기본 템플릿으로 자동 생성된 WPF 프로젝트를 실행해 봅시다.

Ctrl + F5 를 누르거나, Visual Studio 상단 메뉴에서 [Debug] > [Start Without Debugging] 로 실행합니다.

실행된 후 보이는 화면이 개발자가 작업 할 WPF 프로그램의 초기 모습입니다.

02. MainWindows.xaml 살펴보기

02.1 MainWindows.xaml

WPF 템플릿을 선택하여 프로젝트를 실행하면, 기본값으로 UI 창 하나가 만들어집니다.

이를 MainWindows 라고 합니다. (소스 코드의 Main과는 다릅니다. 창 이름이 MainWindows 입니다.)

이 창에 대한 UI 정보가 MainWindows.xaml 에 구현되어 있습니다.

MainWindows.xaml 은 XAML(자믈)이라는 프로그래밍 언어를 통해 UI 구현을 담당합니다.

MainWindows.xaml.cs 파일은, MainWindows.xaml 과 한쌍인 C# 소스코드 파일입니다.

Visual Studio 우측 Solution Explorer(솔루션 탐색기) 에서 MainWindows.xaml 좌측의 세모(▷)를 클릭하면 확인 할 수 있습니다.

MainWindows.xaml.cs 파일은, XAML UI의 Code behind(코드 비하인드)라고 하며, 각각의 UI 컨트롤(= Qt 위젯)들이 동작할 기능과 사용자 눈에 보이지 않는 비즈니스 로직(소스 코드 로직) 작업을 C# 으로 구현하게 됩니다.

WPF의 UI Windows는 UI 디자이너 XAML 파일과, Code behind(코드 비하인드) C# 파일이 한 쌍을 이루게 됩니다.

XAML UI를 수정가능한 디자이너와 XAML 코드를 작성하는 에디터가 있습니다.

02.2 MainWindows.xaml.cs 로직 추가 구현 테스트

XAML 디자이너에서 컨트롤을 오른쪽 클릭하여, "코드 보기"를 누르면 코드 비하인드로 이동한다.

1. MainWindows.xaml.cs 를 클릭하여 Code behind(C# 소스 코드)로 이동합니다.

2. MainWindows( ) 생성자에 메시지박스가 출력되는 소스코드를 추가합니다.

MessageBox.Show("Hello World");

3. 실행 결과를 확인합니다. MainWindows 객체가 생성될 때, "Hello World" 메시지 박스가 실행됩니다.

(메시지 박스가 띄워지는 시점이 MainWindows 창이 띄워지는 시점보다 빠를 수 있습니다.)

03. XAML 디자이너 인터페이스 살펴보기

다시 MainWindows.xaml 로 돌아와서, XAML 디자이너의 인터페이스 요소들을 살펴보면 아래 이미지와 같은 버튼들을 확인 할 수 있습니다. 각각의 기능에 대해 한 번이라도 확인합시다.

1. UI Design 탭을 선택하여 포커스를 가져갑니다.

2. XAML 탭을 선택하여 포커스를 가져갑니다.

3. UI Design 텝과 XAML 텝의 위치를 바꿉니다.

4. XAML 탭을 새창으로 엽니다.

5. UI Design 탭을 새로고침 합니다.

6. -

7. 전체 grid 표시

8. grid 표시되었을때 컨트롤이 sticky 하게 grid에 붙음

9. 사용하지 않는 배경 음영처리

10. 컨트롤간에 가이드라인

11. 사용자가 만든 컨트롤 표시/제외 선택

12, 13, 14 직접 클릭하기

04. XAML과 UI 컨트롤

04.1 XAML과 UI 컨트롤 사용하기

1. 상단 메뉴의 [View] 탭에서

2. [ToolBox]를 찾습니다.

3. [ToolBox]에서 Button 컨트롤을 찾아

4. XAML 디자이너의 MainWindow 창 위에 드레그 하여 놓습니다.

5. 하단의 XAML 에디터에서 XAML 코드 창을 확인합니다.
6. XAML 디자이너에서 MainWindow 위에 드레그 했던 Button UI 컨트롤에 해당하는 XAML 코드가 XAML 에디터에 자동으로 추가되었습니다.

7. XAML 에디터에 Button 태그에 해당하는 XML 코드를 잘라내거나 삭제하여 결과를 비교합니다.

8. XAML 에디터의 UI 컨트롤과 XAML 에디터는 상호 연동되어 있음을 확인합니다.

9. UI 컨트롤을 선택하면

10. XMAL 소스코드도 현재 선택된 UI 컨트롤에 해당하는 XAML 태그가 자동으로 선택됩니다.

04.2 UI 컨트롤의 속성

1. UI 컨트롤을 오른쪽 클릭하고

2. 속성을 누르면

3. XAML 디자이너 우측 하단에 선택한 UI 컨트롤의 "속성" 창이 표시됩니다.

4. UI 컨트롤의 "속성" 창에서, Name 속성은 UI 컨트롤의 객체를 구분하는 명칭입니다.

Code Behind(MainWindows.xaml.cs, C# 소스 코드)에서 비지니스 로직을 작성할 때 식별하는 식별자로 사용됩니다.

5. Content 속성은, 버튼 위에 표시되는 문자의 속성입니다.

6. 번개 모양의 버튼은 UI 컨트롤의 이벤트 함수를 자동으로 생성하기 위한 창으로 이동합니다.

옆의 렌치는 현재 보이는 UI 컨트롤의 "속성" 창을 보여줍니다.

04.3 UI 컨트롤에 이벤트 로직 추가

목표: 버튼을 눌렀을때, Label에 "Hello WPF" 문자열이 출력되도록 구현해봅시다.

1. ToolBox에서 Label 하나를 MainWindows 창에 추가합니다.

2. 추가한 Label의 식별자를 Label 로 설정합니다.

x:Name="Label"

3. 버튼 UI 컨트롤의 속성창에서

4. 이벤트 헨들러를 생성하는 속성 창으로 이동하기위해 버튼 버튼을 클릭합니다.

5. UI 컨트롤의 이벤트 중 Click 이벤트에 입력칸을 더블클릭합니다.

6. Code Behind(MainWindows.xaml.cs, C# 소스 코드)에서

btn01_click( )이벤트 함수가 자동으로 추가 생성됩니다.

버튼을 누르면, 이전에 추가했던 Label의 Content가 "Hello WPF"가 되도록 아래와 같은 소스코드를 추가해 구현합니다.

Label.Content = "Hello WPF";

7. 실행해봅니다. 버튼을 눌렀을 때, 레이블에 출력되는 문자열이 "Hello WPF"로 변경됩니다.

04.4 UI 컨트롤 이벤트 함수 살펴보기

1. Code Behind (MainWindows.xaml.cs, C# 소스 코드)에서

2. public partial class MainWindow : Window 코드 상단의 2 references 에 마우스 커서를 올리고

3. 참조된 MainWindows.g.i.cs 파일을 클릭합니다.

4. MainWindows.g.i.cs 파일로 이동합니다.

5. click 이벤트를 검색하면

6. btn01 객체의 click 이벤트에

7. MainWindows.xaml.cs 의 btn01_Click 함수가 대리자 형태로 연결 되어 있음을 알 수 있습니다.

해당 코드는 XAML 디자이너와 Code Behind 에서 작업한 내용을 기반으로 생성된 코드입니다.

this.btn01.Click += new System.Windows.RoutedEventHandler(this.btn01_Click)

05. WPF 솔루션 구조 살펴보기

Visual Studio 오른쪽의 솔루션 탐색기를 보면, 솔루션이 최상단에 위치하고, 프로젝트가 솔루션 아래 존재합니다.

WPF 기본 템플릿 프로젝트에는 Dependencies(종속성), App.xaml(앱.자믈), Assemblyinfo.cs, MainWindow.xaml 로 이루어져 있습니다. 현재 솔루션 내에 존재하는 프로젝트는 단 하나지만, 하나의 솔루션 아래 여러개의 프로젝트를 생성하여 관리 할 수 있습니다.

05.1 WPF 솔루션 구조 살펴보기

1. Dependencies(종속성)에는 WPF에 필요한 핵심 패키지가 참조되어 있습니다.

그리고 프로젝트에 사용할 라이브러리를 개발자가 추가하거나 .dll 사용자(동적) 라이브러리를 추가할 수 있습니다.

WPF, C#에 필요한 .NET 라이브러리 만이 아니라, 외부의 보안이나 암호화 같은 기술이 필요한 경우 외부 라이브러리를 추가해 작업중 WPF 프로젝트에 적용시킬 수 있습니다.

2. App.xaml 파일과, App.xaml.cs 파일 한쌍이 있습니다.

이 파일은, MainWindow.xaml 과 같은 UI 창을 의미하지 않습니다.

작업중인 어플리케이션 프로그램 자체를 의미합니다.

3. 프로그램의 시작점인 Main( ) 함수는 App.xaml.cs 에 있습니다.

4. MainWindows( ) 는 UI의 화면 창의 시작점이라는 의미에서 Main이라는 단어가 포함됩니다.

05.2 App.xaml 구조 살펴보기

App.xaml 소스코드의

1번째 라인은, 이 어플리케이션이 WpfApp1이라는 이름의 앱 프로젝트 임을 명시합니다.
4번째 라인에, namespace:WpfApp1 네임스페이스로 WpfApp1이 사용되고
5번째 라인의, StartupUri="MainWindow.xaml"은 이 어플리케이션의 시작 UI 창이 MainWindow.xaml임을 명시합니다.

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

5번째 라인의, StartupUri="MainWindow.xaml"은 이 어플리케이션의 시작 UI 창이 MainWindow.xaml임을 명시합니다.

App.xaml의 Code behind(App.xaml.cs, C# 소스 코드)를 열어보면, 프로그램의 시작점인 Main 함수를 확인할 수 있습니다.

WpfApp1.App app = new WpfApp1.App( ); 객체를 생성하여

app 객체의 InitializedComponent( ); 함수로 MainWindow.xaml 을 초기화하고

app.Run( ); 함수로 시작됨을 확인 할 수 있습니다.

Contents

새소식

인기 검색어