2008/03/15 03:16
[세티의 WPF] 1. Windows Presentation Foundation 시작하기(1) Silverlight2008/03/15 03:16
작성자: 세티
작성일: 2008년 03월 15일
안녕하세요~ 세티 입니다.^^
이번 시간은 WPF를 처음으로 시작하는 분들에게 필요한 정보(XAML, code-behind, 어플리케이션 정의, 컨트롤, 레이아웃, 데이터 바인딩, 스타일 같은 대부분의 WPF 어플리케이션의 공통 요소를 포함하는 WPF 어플리케이션 개발)를 간단하게 전해드리고, 샘플 실습을 통해 WPF에 대한 맛을 보는 시간을 가질려고 합니다.
세티는 이 튜토리얼에서 WPF 어플리케이션 개발을 위해 아래와 같은 순서로 개발을 할려고 합니다.
- WPF 어플리케이션의 사용자 인터페이스를 나타내기 위한 디자인을 XAML 마크업으로 정의
- 어플리케이션의 작동을 위해 코드를 작성
- 어플리케이션을 관리하기 위해 어플리케이션 정의를 생성
- 어플리케이션 UI를 조합하기 위한 컨트롤과 레이아웃을 추가
- 어플리케이션의 UI를 일관성 있게 생성하기 위한 스타일을 생성
- 데이터와 UI 동기성을 유지하고 바인딩하기
자아~ 간단하죠?
순서를 정했으니 이제 개발을 해봐야 겠는데 WPF를 개발하기 위해선 먼저 준비되어야 할 것이 있습니다.
- Microsoft .NET Framework 와 Windows software development kit 에 대한 인스톨
인스톨이 되어 있어야 커맨드 창을 이용하여 어플리케이션을 빌드할 수 있으니깐요.^^
Visual Studio 와 같은 통합 개발 환경을 사용하셔도 됩니다.
설치가 다 되었다면 커맨드 윈도우는 아래의 메뉴에서 찾을 수 있을 겁니다.
- 시작메뉴 | 모든 프로그램 | 마이크로소프트 윈도우즈 SDK | CMD Shell
이게 귀찮으시다면 직접 커맨드 창을 띄우는 것도 가능하답니다.
1. 시작메뉴에서 실행을 선택한다.
2. 다음을 입력한다.
c:\Windows\system32\cmd.exe /D:ON /VON /T:OE /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"
자아~ 이제 WPF 어플리케이션 개발을 위한 기본적인 환경 설정이 완료 되었으니 실습을 해보도록 합시다.
저는 두 개의 페이지를 만들고, 어플리케이션이 정의된 파일, 그리고 하나의 이미지가 포함되는 그런 어플리케이션을 만들려고 합니다. 그러기 위해선 먼저 인프라스트럭처가 필요하겠죠.
자아~ 저와 함께 같이 만들어 봅시다.
1. App.xml 이라는 새로운 XAML 마크업 파일을 생성합니다.. 이 파일은 WPF 어플리케이션을 정의합니다. 이것은 어플리케이션이 시작될 때 자동적으로 보여주기 위해 특정한 UI에 사용할 수 있습니다.. XAML 마크업은 다음과 같은 문장으로 보일 것 입니다.
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
StartupUri="HomePage.xaml">
</Application>
2. 새로운 어플리케이션이 시작될 때 첫 페이지에서 디스플레이 될 HomePage.xaml이라는 XAML 마크업 파일을 생성합니다. HomePage.xaml에서 person을 선택하면 사람들의 리스트가 보여질 예정입니다.
HomePage.xaml에 Page 엘리먼트를 추가하고 다음의 속성갑을 설정합니다.
- 브라우저의 타이틀 바는 "ExpenseIt"
- 브라우저의 넓이는 550 px, 높이는 350px
- 페이지의 타이틀은 "ExpenseIt-Home"
이 설정이 적용된 XAML 마크업의 코드는 다음과 같습니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExpenseIt.HomePage"
WindowTitle="ExpenseIt"
Title="ExpenseIt - Home"
WindowWidth="550" WindowHeight="380">
</Page>
3. HomePage.xaml.cs라는 코드 파일을 추가로 생성합니다. 이 파일은 HomePage.xaml내에 선언된 이벤트를 핸들하기 위한 코드가 포함된 코드-비하인드 파일입니다.
(Visual Studio를 사용하는 분이라면 이미 이 파일은 자동으로 생성되어져 있을 겁니다.)
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
public partial class HomePage : Page
{
public HomePage()
{
InitializeComponent();
}
}
}
4. ExpenseReportPage.xaml이라는 xaml 마크업 파일을 생성한다. Page 엘리먼트를 추가하고 ExpenseIT라 설정합니다. Page의 타이틀에 "Reports"라고 씁니다. 이 페이지는 HomePage.xaml의 Person이 선택되면 보여질 것 입니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExpenseIt.ExpenseReportPage"
Title="ExpenseIt - View Expense Report">
</Page>
5. ExpenseReportPage.xaml.cs 파일을 생성합니다. 이 파일은 코드 비하인드 파일이고 이 페이지내에 정의된 UI에 데이터를 바인딩 합니다. 코드는 아래와 같습니다.
(Visual Studio를 사용하는 분이라면 이미 이 파일은 자동으로 생성되어져 있을 겁니다.)
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
public partial class ExpenseReportPage : Page
{
public ExpenseReportPage()
{
InitializeComponent();
}
}
}
6. 위에 작성된 파일들과 같은 폴더에 이미지를 넣고 그 이미지를 추가합니다.
어플리케이션을 실행하고 바인딩하기.
자아 이제 기본적인 인프라스트럭처가 만들어 졌습니다.
지금까지 만든 어플리케이션을 빌드하기 위해서는 MSBuild를 사용해야 합니다.
그러기 위해 우리는 특별한 파일을 하나 필요로 합니다. 그리고 그것은 XML 파일 형태여야 하구요.~
그 파일을 만들어 보도록 하죠.
1. ExpenseIt.csproj라는 새로운 파일을 생성합니다. 이 파일은 어플리케이션을 위한 빌드 설정을 포함하는 아주 특별한 형태의 XML파일이구요 MSBuild 파일이 될 것입니다.
이런 특별한 파일이 특별해질 수 있도록 우리는 특별한 요소들을 추가해 줘야 합니다.
그 특별한 요소는 다음과 같습니다.
- 컴파일드 프로젝트를 위한 글로벌 빌드 변수
- 빌트 어셈블리의 이름
- 빌드 어셈블리의 타입이 무엇인지 그리고 빌트 어셈블리에 추가된 폴더 등
- 코드 파일을 위한 레퍼런스
- 어플리케이션을 사용을 위한 마이크로소프트 닷넷 프레임워크 어셈블리 참조
정말 특별한 내용들만 포함되게 되는군요.^^ 자아 그럼 빌드 파일의 내용을 보도록 하죠.
빌드 파일의 내용은 이와 같은 코드로 작성되게 됩니다.
<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<AssemblyName>ExpenseIt</AssemblyName>
<TargetType>winexe</TargetType>
<OutputPath>bin\$(Configuration)\</OutputPath>
</PropertyGroup>
<ItemGroup>
<Reference Include="System"/>
<Reference Include="System.Xml"/>
<Reference Include="System.Data"/>
<Reference Include="WindowsBase"/>
<Reference Include="PresentationCore"/>
<Reference Include="PresentationFramework"/>
</ItemGroup>
<ItemGroup>
<ApplicationDefinition Include="App.xaml"/>
<Page Include="HomePage.xaml"/>
<Compile Include="HomePage.xaml.cs" />
<Page Include="ExpenseReportPage.xaml"/>
<Compile Include="ExpenseReportPage.xaml.cs" />
<Resource Include="watermark.png"/>
</ItemGroup>
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
<Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>
2. 이제 커맨드 창을 오픈하고, 프로젝트 파일과 어플리케이션 코드 파일들이 있는 폴더로 이동을 합니다.
3. 커맨드 창의 프롬프트에서 다음 명령을 실행해 봅니다.
MSBuild ExpenseIt.csproj
만약 마이크로소프트 비쥬얼 닷넷 으로 코딩을 했을 경우에는 다음과 같이 명령을 실행한다.
MSBuild ExpenseIt.vbproj
이 작업을 Visual Studio 사용하여 실행한다면 F5를 눌러서 실행하시면 됩니다.
어플리케이션을 실행해 볼까요???
오우~ 실행이 아주 잘 되는 군요.^^
근데 아무것도 추가를 안했더니 액션도 내용도 없는 아주 썰렁한 녀석이 되버렸습니다.^^;
다음 강좌에서는 이 어플리케이션을 예쁘게 장식을 해보도록 하겠습니다.
작성일: 2008년 03월 15일
안녕하세요~ 세티 입니다.^^
이번 시간은 WPF를 처음으로 시작하는 분들에게 필요한 정보(XAML, code-behind, 어플리케이션 정의, 컨트롤, 레이아웃, 데이터 바인딩, 스타일 같은 대부분의 WPF 어플리케이션의 공통 요소를 포함하는 WPF 어플리케이션 개발)를 간단하게 전해드리고, 샘플 실습을 통해 WPF에 대한 맛을 보는 시간을 가질려고 합니다.
세티는 이 튜토리얼에서 WPF 어플리케이션 개발을 위해 아래와 같은 순서로 개발을 할려고 합니다.
- WPF 어플리케이션의 사용자 인터페이스를 나타내기 위한 디자인을 XAML 마크업으로 정의
- 어플리케이션의 작동을 위해 코드를 작성
- 어플리케이션을 관리하기 위해 어플리케이션 정의를 생성
- 어플리케이션 UI를 조합하기 위한 컨트롤과 레이아웃을 추가
- 어플리케이션의 UI를 일관성 있게 생성하기 위한 스타일을 생성
- 데이터와 UI 동기성을 유지하고 바인딩하기
자아~ 간단하죠?
순서를 정했으니 이제 개발을 해봐야 겠는데 WPF를 개발하기 위해선 먼저 준비되어야 할 것이 있습니다.
- Microsoft .NET Framework 와 Windows software development kit 에 대한 인스톨
인스톨이 되어 있어야 커맨드 창을 이용하여 어플리케이션을 빌드할 수 있으니깐요.^^
Visual Studio 와 같은 통합 개발 환경을 사용하셔도 됩니다.
설치가 다 되었다면 커맨드 윈도우는 아래의 메뉴에서 찾을 수 있을 겁니다.
- 시작메뉴 | 모든 프로그램 | 마이크로소프트 윈도우즈 SDK | CMD Shell
이게 귀찮으시다면 직접 커맨드 창을 띄우는 것도 가능하답니다.
1. 시작메뉴에서 실행을 선택한다.
2. 다음을 입력한다.
c:\Windows\system32\cmd.exe /D:ON /VON /T:OE /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"
자아~ 이제 WPF 어플리케이션 개발을 위한 기본적인 환경 설정이 완료 되었으니 실습을 해보도록 합시다.
저는 두 개의 페이지를 만들고, 어플리케이션이 정의된 파일, 그리고 하나의 이미지가 포함되는 그런 어플리케이션을 만들려고 합니다. 그러기 위해선 먼저 인프라스트럭처가 필요하겠죠.
자아~ 저와 함께 같이 만들어 봅시다.
1. App.xml 이라는 새로운 XAML 마크업 파일을 생성합니다.. 이 파일은 WPF 어플리케이션을 정의합니다. 이것은 어플리케이션이 시작될 때 자동적으로 보여주기 위해 특정한 UI에 사용할 수 있습니다.. XAML 마크업은 다음과 같은 문장으로 보일 것 입니다.
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
StartupUri="HomePage.xaml">
</Application>
2. 새로운 어플리케이션이 시작될 때 첫 페이지에서 디스플레이 될 HomePage.xaml이라는 XAML 마크업 파일을 생성합니다. HomePage.xaml에서 person을 선택하면 사람들의 리스트가 보여질 예정입니다.
HomePage.xaml에 Page 엘리먼트를 추가하고 다음의 속성갑을 설정합니다.
- 브라우저의 타이틀 바는 "ExpenseIt"
- 브라우저의 넓이는 550 px, 높이는 350px
- 페이지의 타이틀은 "ExpenseIt-Home"
이 설정이 적용된 XAML 마크업의 코드는 다음과 같습니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExpenseIt.HomePage"
WindowTitle="ExpenseIt"
Title="ExpenseIt - Home"
WindowWidth="550" WindowHeight="380">
</Page>
3. HomePage.xaml.cs라는 코드 파일을 추가로 생성합니다. 이 파일은 HomePage.xaml내에 선언된 이벤트를 핸들하기 위한 코드가 포함된 코드-비하인드 파일입니다.
(Visual Studio를 사용하는 분이라면 이미 이 파일은 자동으로 생성되어져 있을 겁니다.)
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
public partial class HomePage : Page
{
public HomePage()
{
InitializeComponent();
}
}
}
4. ExpenseReportPage.xaml이라는 xaml 마크업 파일을 생성한다. Page 엘리먼트를 추가하고 ExpenseIT라 설정합니다. Page의 타이틀에 "Reports"라고 씁니다. 이 페이지는 HomePage.xaml의 Person이 선택되면 보여질 것 입니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ExpenseIt.ExpenseReportPage"
Title="ExpenseIt - View Expense Report">
</Page>
5. ExpenseReportPage.xaml.cs 파일을 생성합니다. 이 파일은 코드 비하인드 파일이고 이 페이지내에 정의된 UI에 데이터를 바인딩 합니다. 코드는 아래와 같습니다.
(Visual Studio를 사용하는 분이라면 이미 이 파일은 자동으로 생성되어져 있을 겁니다.)
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
public partial class ExpenseReportPage : Page
{
public ExpenseReportPage()
{
InitializeComponent();
}
}
}
6. 위에 작성된 파일들과 같은 폴더에 이미지를 넣고 그 이미지를 추가합니다.
어플리케이션을 실행하고 바인딩하기.
자아 이제 기본적인 인프라스트럭처가 만들어 졌습니다.
지금까지 만든 어플리케이션을 빌드하기 위해서는 MSBuild를 사용해야 합니다.
그러기 위해 우리는 특별한 파일을 하나 필요로 합니다. 그리고 그것은 XML 파일 형태여야 하구요.~
그 파일을 만들어 보도록 하죠.
1. ExpenseIt.csproj라는 새로운 파일을 생성합니다. 이 파일은 어플리케이션을 위한 빌드 설정을 포함하는 아주 특별한 형태의 XML파일이구요 MSBuild 파일이 될 것입니다.
이런 특별한 파일이 특별해질 수 있도록 우리는 특별한 요소들을 추가해 줘야 합니다.
그 특별한 요소는 다음과 같습니다.
- 컴파일드 프로젝트를 위한 글로벌 빌드 변수
- 빌트 어셈블리의 이름
- 빌드 어셈블리의 타입이 무엇인지 그리고 빌트 어셈블리에 추가된 폴더 등
- 코드 파일을 위한 레퍼런스
- 어플리케이션을 사용을 위한 마이크로소프트 닷넷 프레임워크 어셈블리 참조
정말 특별한 내용들만 포함되게 되는군요.^^ 자아 그럼 빌드 파일의 내용을 보도록 하죠.
빌드 파일의 내용은 이와 같은 코드로 작성되게 됩니다.
<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<AssemblyName>ExpenseIt</AssemblyName>
<TargetType>winexe</TargetType>
<OutputPath>bin\$(Configuration)\</OutputPath>
</PropertyGroup>
<ItemGroup>
<Reference Include="System"/>
<Reference Include="System.Xml"/>
<Reference Include="System.Data"/>
<Reference Include="WindowsBase"/>
<Reference Include="PresentationCore"/>
<Reference Include="PresentationFramework"/>
</ItemGroup>
<ItemGroup>
<ApplicationDefinition Include="App.xaml"/>
<Page Include="HomePage.xaml"/>
<Compile Include="HomePage.xaml.cs" />
<Page Include="ExpenseReportPage.xaml"/>
<Compile Include="ExpenseReportPage.xaml.cs" />
<Resource Include="watermark.png"/>
</ItemGroup>
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
<Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>
2. 이제 커맨드 창을 오픈하고, 프로젝트 파일과 어플리케이션 코드 파일들이 있는 폴더로 이동을 합니다.
3. 커맨드 창의 프롬프트에서 다음 명령을 실행해 봅니다.
MSBuild ExpenseIt.csproj
만약 마이크로소프트 비쥬얼 닷넷 으로 코딩을 했을 경우에는 다음과 같이 명령을 실행한다.
MSBuild ExpenseIt.vbproj
이 작업을 Visual Studio 사용하여 실행한다면 F5를 눌러서 실행하시면 됩니다.
어플리케이션을 실행해 볼까요???
오우~ 실행이 아주 잘 되는 군요.^^
근데 아무것도 추가를 안했더니 액션도 내용도 없는 아주 썰렁한 녀석이 되버렸습니다.^^;
다음 강좌에서는 이 어플리케이션을 예쁘게 장식을 해보도록 하겠습니다.
'Silverlight' 카테고리의 다른 글
| Silverlight 2 Roadmap Revealed (0) | 2008/04/08 |
|---|---|
| [세티의 WPF] 1. Windows Presentation Foundation 시작하기(2) (0) | 2008/03/16 |
| [세티의 WPF] 1. Windows Presentation Foundation 시작하기(1) (0) | 2008/03/15 |
| [세티의 WPF] Templates, Themes, Design, Graphics, Media, Document (1) | 2007/12/17 |
| [세티의 WPF] 3. DataBinding, Appearence, Resources, Styles (0) | 2007/12/17 |
| [세티의 WPF] 2. Extensible Application Markup Language (0) | 2007/12/16 |
