코드 편집 및 Visual Studio 2008 상호 운용성
디자인 작업을 하는 사람에게 코드 편집은 매우 부담스러운 작업이 될 수 있습니다. Microsoft Expression Blend는 디자이너의 편리한 작업을 도울 수 있도록 설계되었습니다. Expression Blend에서는 디자인 보기에서 완전한 Windows Presentation Foundation 기반 또는 Microsoft Silverlight 1.0 기반 응용 프로그램을 만들 수 있으며, Windows Presentation Foundation 프로젝트에서 다른 Expression Blend 프로젝트에 재사용할 수 있는 스타일 리소스를 만들 수도 있습니다. 또한 Microsoft Expression Design 2에서 내보낸 아트워크 자산과 XAML은 물론 Microsoft Expression Encoder 2에서 생성된 Silverlight 1.0도 가져올 수 있습니다.
Expression Blend는 팀으로 진행되는 개발 작업을 고려하여 설계된 제품입니다. 소프트웨어 팀은 UI(사용자 인터페이스) 작업을 하는 디자이너와 UI 뒤에서 실행되는 코드 작업을 하는 프로그래머로 구성되는 경우가 많습니다. 이를 고려하여 Expression Blend는 개발자에게 제공되는 최소한의 코드를 생성하는 기능과, 기존 컨트롤처럼 사용하여 기존 코드에 연결할 수 있게 해 주는 이벤트 처리기나 사용자 지정 컨트롤과 같은 기능을 갖추고 있습니다.
Expression Blend에서 수행할 수 있는 프로젝트 작업
프로젝트 만들기 - Windows Presentation Foundation 기반 응용 프로그램(.exe) 또는 사용자 정의 컨트롤(.dll)용 프로젝트를 만들 수 있습니다. 기본적으로 두 프로젝트에서 모두 WPF(Windows Presentation Foundation)의 기능을 대부분 활용할 수 있습니다.
프로젝트 만들기 - Silverlight 1.0 기반 응용 프로그램용 프로젝트도 만들 수 있습니다.
새 XAML(eXtensible Application Markup Language) 파일 추가 - 새 XAML 파일과 해당 코드 숨김 파일을 추가하여 응용 프로그램의 최상위 수준 창, 사용자 정의 컨트롤, 응용 프로그램 내에서 탐색 가능한 페이지, 그리고 재사용 가능한 스타일, 컨트롤 템플릿, 브러시 리소스 등이 있는 리소스 사전을 만들 수 있습니다.
기존 파일 추가 - 이미지, XML, 비디오, 오디오, 라이선스, XAML, 코드 파일과 같은 기존 파일에 대한 링크를 만들거나 프로젝트에 기존 파일을 추가합니다.
기존 사용자 지정 컨트롤에 참조 추가 - .dll 파일에 있는 기존 사용자 지정 컨트롤에 참조를 추가합니다(WPF 및 Silverlight 2만 해당). 사용자 지정 컨트롤은 기존 원본 코드 파일(.vb 또는 .cs)에도 있을 수 있습니다. Expression Blend 프로젝트에 추가한 사용자 지정 컨트롤은 Expression Blend와 함께 기본적으로 제공되는 컨트롤을 사용할 때와 동일한 방법으로 사용할 수 있습니다. .cs 파일에 있는 사용자 지정 컨트롤의 예는 실습 정보: 사용자 지정 WPF 컨트롤 만들기를 참조하십시오.
.gif "팁")
팁:사용자 지정 컨트롤이 있는 원본 코드 파일을 Expression Blend 프로젝트에 추가한 경우 프로젝트를 빌드해야만 도구 상자에 있는 자산 라이브러리의 사용자 지정 컨트롤 탭에 컨트롤이 표시됩니다.
솔루션에 새 프로젝트 추가(WPF 및 Silverlight 2만 해당) - Expression Blend 2 WPF 프로젝트에 기존 프로젝트를 추가하거나 연결할 수 있습니다.
파일 열기 - 프로젝트에 있는 모든 파일을 엽니다. XAML 파일은 편집할 수 있도록 아트보드에서 열립니다. 활성 문서에 이미지 파일을 삽입할 수 있으며 사운드/비디오 파일은 애니메이션 타임라인에서 열립니다. Silverlight 1.0 프로젝트의 JavaScript 코드 숨김 파일은 JavaScript 편집기의 아트보드에서 열립니다. 모든 파일은 해당 파일 형식에 맞는 외부 편집기에서 열 수 있습니다. 예를 들어 Expression Blend의 프로젝트 패널의 파일에서 .xml 파일을 두 번 클릭하면 메모장에서 파일이 열립니다. 코드 파일은 Microsoft Visual Studio 2008(설치된 경우)에서 열립니다. 자세한 내용은 코드 숨김 파일 편집을 참조하십시오.
Visual Studio 2008 프로젝트 또는 솔루션 열기 - WPF 응용 프로그램, Silverlight 1.0 사이트 또는 Silverlight 2 응용 프로그램용 Visual Studio 2008 프로젝트 또는 솔루션을 열고 UI를 만듭니다.
응용 프로그램 디버깅 - 응용 프로그램을 빌드(Ctrl+Shift+B)하거나 실행(F5 키)합니다. 실패할 경우 결과 패널에 표시되는 오류 메시지를 확인하고 해결할 수 있습니다.
.gif "Cc294780.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif")
맨 위로 이동
Expression Blend에서 코드를 사용하지 않고 만들 수 있는 작업
응용 프로그램의 모양(UI) 디자인 - 도구 상자에서 요소를 추가하고 변형하며 속성 패널에서 브러시 및 기타 속성을 사용하여 스타일을 지정합니다. 자세한 내용은 컨트롤, 도형 및 패스 그리기, 레이아웃 및 모양을 참조하십시오.
응용 프로그램의 요소에 애니메이션 효과 적용 자세한 내용은 애니메이션을 참조하십시오.
비디오 또는 오디오 파일의 타임라인 수정 - 아트보드에 비디오 또는 오디오 파일을 추가한 후 해당 파일의 타임라인을 수정합니다. 자세한 내용은 미디어를 참조하십시오.
애니메이션 타임라인, 오디오 파일 및 비디오 파일 트리거 - 단추를 클릭하거나 요소 위로 포인터를 이동하는 등의 사용자 액션으로 애니메이션 타임라인, 오디오 파일 및 비디오 파일을 트리거합니다. 자세한 내용은 트리거 및 사용자 대화형 작업(WPF만 해당) 및 이벤트 처리 및 사용자 대화형 작업(WPF 및 Silverlight 2만 해당)을 참조하십시오.
사용자 정의 컨트롤 만들기 및 디자인(WPF 및 Silverlight 2만 해당) - 사용자 정의 컨트롤은 Expression Blend에서 만들 수 있는 프로젝트 형식의 하나로, Visual Studio 2008에서 개발된 사용자 지정 컨트롤과 동일한 방법으로 사용할 수 있습니다. 실습 정보: WPF 사용자 정의 컨트롤 만들기 및 기존 개체에서 컨트롤 만들기에서 예를 참조하십시오.
기존 컨트롤의 모양 사용자 지정 - 이 작업을 수행한 후 그 결과로 생성되는 스타일 템플릿을 동일한 형식의 다른 컨트롤에 적용합니다(WPF 및 Silverlight 2만 해당). 컨트롤 템플릿에 애니메이션을 추가할 수도 있습니다. 단순한 스타일에 나와 있는 항목에서 예를 참조하십시오.
재사용 가능한 기타 리소스 만들기 - 속성 패널에서 속성 이름을 클릭한 다음 새 리소스로 변환을 클릭하여 브러시 리소스처럼 재사용 가능한 리소스를 만듭니다(WPF 및 Silverlight 2만 해당). 브러시 또는 색 리소스 만들기에서 예를 참조하십시오.
요소 변환 - 도구 메뉴의 옵션을 사용하여 단추 및 브러시 리소스로 요소를 변환하거나 3D 개체로 이미지를 변환합니다(WPF만 해당). 개체를 단추로 만들기 및 2D 이미지를 3D로 변환에서 예를 참조하십시오.
다른 속성에 포함된 값에 요소의 속성 바인딩(WPF만 해당) - 이 작업은 슬라이더 막대에 해당하는 요소의 너비를 설정하는 등 여러 가지 작업에서 유용한 기능입니다. 실습 정보: 값 변환기 만들기 및 적용에서 예를 참조하십시오.
데이터 원본에 요소의 속성 바인딩 - XML 파일(WPF만 해당)이나 CLR(공용 언어 런타임) 개체(WPF 및 Silverlight 2만 해당) 같은 데이터 원본에 요소의 속성을 바인딩합니다. XML 데이터 원본 사용 방법에 대한 예는 실습 정보: RSS 뉴스 수집기 만들기를 참조하십시오.
사용자 지정 클래스용 코드 파일 추가 - 응용 프로그램에서 인스턴스화할 수 있는 코드 파일을 추가할 수 있습니다. 실습 정보: 사용자 지정 WPF 컨트롤 만들기 및 Silverlight 응용 프로그램에서 스토리보드를 제어하는 단추 만들기에서 예를 참조하십시오.
맨 위로 이동
코드를 사용해야만 수행할 수 있는 작업
이벤트 처리기에서 더욱 복잡한 동작 정의 - 사용자가 응용 프로그램의 UI 요소와 상호 작용할 때 이벤트 처리기에서 더욱 복잡한 동작을 정의합니다. 키 누름, 마우스 액션 등에 응답하도록 이벤트 처리기를 프로그래밍할 수 있습니다. 이벤트 목록은 WPF 이벤트 빠른 참조를 참조하십시오. 이 작업은 애니메이션, 미디어 및 비디오에 대한 이벤트 트리거와는 다릅니다. 예를 들어 이벤트 처리기를 사용하면 수학 수식을 사용하여 응용 프로그램의 동작을 프로그래밍할 수 있습니다. 새 이벤트 처리기 메서드 만들기에서 예를 참조하십시오.
[!참고]
Silverlight 1.0 응용 프로그램에서 모든 사용자 상호 작용은 JavaScript 이벤트 처리기를 사용하여 이루어집니다. Silverlight 응용 프로그램에서 스토리보드를 제어하는 단추 만들기에서 예를 참조하십시오.
기존 컨트롤의 동작 사용자 지정 또는 새 사용자 지정 컨트롤 만들기 - WPF Button 컨트롤에 기반한 사용자 지정 컨트롤의 예는 실습 정보: 사용자 지정 WPF 컨트롤 만들기를 참조하십시오.
데이터 로드(WPF 및 Silverlight 2만 해당) - Microsoft SQL Server 데이터와 같은 데이터를 데이터 테이블에 로드하고 Expression Blend에서 사용할 수 있는 CLR 데이터 개체로 변환합니다. 실습 정보: CLR 개체 데이터 원본 만들기에서 예를 참조하십시오.
값 변환기 만들기(WPF 및 Silverlight 2만 해당) - 이 작업을 수행하여 데이터 바인딩에 사용자 지정 논리를 추가합니다. 특정한 한 요소의 속성을 호환되지 않는 데이터 형식의 속성으로 바인딩하려는 경우 유용한 작업입니다. 실습 정보: 값 변환기 만들기 및 적용에서 예를 참조하십시오.
맨 위로 이동
Visual Studio 2008에서만 수행할 수 있는 작업
응용 프로그램 디버깅 - 응용 프로그램이 실행되는 동안 한 줄씩 단계별로 수행합니다. 자세한 내용은 Visual Studio 2008에서 Expression Blend 응용 프로그램 디버깅을 참조하십시오.
코드 파일 편집 - Expression Blend의 프로젝트 패널에서 코드 파일을 두 번 클릭하면 Visual Studio 2008(설치된 경우)에서 열립니다. 자세한 내용은 코드 숨김 파일 편집을 참조하십시오.
팁:코드 파일을 변경하려는 경우 코드 파일만 직접 여는 대신 Visual Studio 2008에서 프로젝트를 여는 것이 더 좋습니다. Visual Studio 2008에서 프로젝트를 열면 일부 단어를 입력할 때 자동으로 완성되는 IntelliSense 기능을 이용할 수 있습니다. Expression Blend 2에서 새 프로젝트를 만들어 저장한 다음 Visual Studio 2008에서 해당 프로젝트를 여는 경우를 예로 들어보겠습니다. Window1.xaml.cs 파일이 열리고 커서가 this.InitializeComponent(); 뒤의 빈 줄이 시작되는 위치에 놓이면 LayoutRoot를 입력합니다. 이 줄에 입력할 수 있는 모든 단어를 보여 주는 드롭다운 목록이 표시됩니다. LayoutRoot 뒤에 마침표를 추가하면 목록이 변경되어 Window1.xaml 파일에서 사용 가능한 LayoutRoot 요소의 모든 속성 및 메서드가 표시됩니다.
WPF 컨트롤이 포함된 COM API 또는 프로젝트 파일에 참조 추가 - Expression Blend는 프로젝트 파일(예: .csproj 파일)에 대한 참조를 사용하고 .dll 또는 .exe 파일에 대한 참조와 동일하게 처리합니다.
맨 위로 이동
Expression Blend에서 코드를 추가할 때 편리한 점
코드 숨김 파일 만들기(선택 사항) - Expression Blend에서는 새 항목 추가 마법사를 사용하여 만드는 모든 XAML 파일에 해당하는 코드 숨김 파일을 필요에 따라 만들 수 있습니다. Expression Blend의 프로젝트 패널에서 코드 파일을 두 번 클릭하면 Visual Studio 2008(설치된 경우)에서 열립니다. 자세한 내용은 코드 숨김 파일 편집을 참조하십시오.
빈 이벤트 처리기 메서드에 대한 코드 생성 - 속성 패널의 이벤트
.png "Cc294780.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(ko-kr,Expression.10).png")
보기에서 이벤트를 두 번 클릭하면 빈 이벤트 처리기 메서드에 대한 코드가 생성됩니다(WPF 및 Silverlight 2만 해당).[!참고]
Silverlight 1.0 프로젝트를 만들면 Expression Blend 2는 Page.xaml.js 파일에 예제 MouseLeftButtonDown 이벤트 처리기 메서드를 생성합니다. 이벤트 처리기 메서드 수정 방법에 대한 예는 Silverlight 응용 프로그램에서 스토리보드를 제어하는 단추 만들기를 참조하십시오.
Expression Blend에서는 메서드의 초기 코드가 클립보드로 복사됩니다. Visual Studio 2008이 설치되어 있으면 Expression Blend가 자동으로 Visual Studio 2008에서 프로젝트를 열고 해당 코드 숨김 파일에 메서드를 붙여 넣습니다. 또는 사용자가 파일을 직접 열어 코드에 붙여 넣을 수도 있습니다. 그런 다음 이벤트 처리기 메서드에 프로그래밍 논리를 추가하거나 프로그래밍 논리를 추가할 작업자에게 코드 파일을 보낼 수 있습니다. 자세한 내용은 이벤트 처리 및 사용자 대화형 작업을 참조하십시오.
팁:한 컴퓨터에서 동일한 프로젝트 파일을 Expression Blend와 Visual Studio 2008에서 동시에 열 수 있습니다. 둘 중 한 시스템에서 파일을 변경하고 저장하면, 다른 시스템으로 전환할 때 파일을 다시 로드할 것인지 묻는 알림 메시지가 표시됩니다.
팁:두 사람 이상의 작업자가 동시에 한 프로젝트를 사용해야 하는 경우에는 Microsoft Visual SourceSafe와 같은 소스 제어 시스템을 사용하는 것이 좋습니다. 소스 제어 시스템은 프로젝트 파일의 중앙 리포지토리를 관리하며 사용자가 자신의 로컬 컴퓨터로 파일을 체크 아웃하여 편집할 수 있게 해 줍니다. 파일을 수정하는 동안 다른 사람이 체크 아웃할 수 없도록 설정하거나, 동일한 파일의 내용을 두 사람 이상이 변경할 경우 변경 내용을 병합하도록 소스 제어 시스템을 구성할 수도 있습니다. Visual SourceSafe는 Visual Studio와 연동하므로 Visual Studio에서 파일을 열어 체크 아웃할 수 있습니다. 자세한 내용은 MSDN에서 Visual SourceSafe 섹션을 참조하십시오.
맨 위로 이동
코드 작성에 대한 도움말 보기
Expression Blend 응용 프로그램의 코드 작성과 관련한 정보가 필요하면 학습 및 커뮤니티 리소스에 나와 있는 자료 중 하나를 참조하시기 바랍니다. 뉴스 그룹 토론 페이지로 연결되는 링크 정보도 나와 있습니다. Silverlight 1.0 프로젝트에서 JavaScript를 작성하는 방법에 대한 도움말은 Silverlight 학습 센터를 참조하십시오. 학습 및 커뮤니티 리소스도 참조하시기 바랍니다.
맨 위로 이동