Expression Blend 3의 새로운 기능

소개

Expression Blend 3을 사용하면 Silverlight 3을 기반으로 하는 웹 사이트 및 응용 프로그램이나 Windows Presentation Foundation 3.5 SP1(서비스 팩 1)을 기반으로 하는 데스크톱 응용 프로그램을 만들 수 있습니다.

Expression Blend 3은 프로토타입 작성, 동작을 통한 대화형 작업, 특수 Silverlight 3 기능, 즉석 샘플 데이터 생성 등을 새롭게 지원합니다.디자이너는 Expression Blend 3을 통해 사용하기 쉽고 재미있는 응용 프로그램을 만들 수 있습니다.

프로토타입 작성

SketchFlow 도입

Expression Blend 3에서는 SketchFlow를 도입하여 동적 사용자 환경 테스트나 강렬한 프로토타입 작성 등의 작업을 더 쉽게 처리할 수 있도록 설계된 여러 가지 새로운 기능을 제공합니다.

SketchFlow를 통해 디자인 아이디어를 관련자에게 효율적으로 전달할 수 있고 주석을 사용하여 피드백을 더 쉽게 수집할 수 있습니다. Microsoft Office PowerPoint 파일을 프로젝트 화면으로 가져올 수 있습니다. 뿐만 아니라 모든 화면에 대한 스크린샷이 포함된 Microsoft Office Word 문서를 내보낼 수도 있습니다. 자산 패널에 새로 추가된 범주를 통해 SketchFlow 스타일과 기타 자산을 체계적으로 정리할 수 있습니다.

디자이너는 SketchFlow를 사용하여 응용 프로그램의 탐색 및 구성 방식을 매우 시각적인 방식으로 모델링할 수 있습니다. SketchFlow 프로토타입은 일련의 스케치 모음 같은 단순한 것일 수도 있고, 디자인 의도를 정확하게 전달해야 할 경우 매우 사실적인 형태로 발전할 수도 있습니다. SketchFlow에는 기존의 Expression Blend 3 기능이 사용됩니다. 프로젝트를 프로토타입화하는 데는 Photoshop 가져오기, 표시 상태, 동작, 샘플 데이터 등과 같은 Expression Blend 3의 다른 새로운 기능도 사용할 수 있습니다.

디자인

Photoshop 및 Illustrator 파일 가져오기

Expression Blend 3을 사용하여 Adobe Photoshop 파일(.psd)과 Adobe Illustrator 파일(.ai)을 프로젝트로 직접 가져올 수 있습니다. 이때 레이어, 도형, 텍스트 요소 등을 그대로 유지한 채 가져와 Expression Blend 3 내에서 직접 손쉽게 편집할 수 있습니다.

참고: Adobe 라이브 효과, 혼합 모드 및 심볼 스프레이어는 지원되지 않습니다. 프로젝트로 가져온 Adobe 파일의 기능 중 지원되지 않는 것이 있으면 해당 사실을 알리고 어떤 조치를 취할 수 있는지 설명하는 메시지가 Expression Blend 3에 표시됩니다.

효과

Expression Blend 3에서는 WPF 및 Silverlight 그래픽 효과를 지원합니다. 자산 패널을 열고 효과 탭을 클릭한 다음 원하는 효과를 개체로 끌어다 놓습니다. 속성 패널에서 효과의 속성을 수정할 수 있습니다.

디자인 타임 주석

디자이너는 이제 Microsoft Visio 주석의 경우와 매우 유사한 시각적 말풍선 주석을 아트보드에 추가할 수 있습니다. 이러한 주석은 첨부된 속성의 형태로 XAML 파일에 저장됩니다. 주석을 사용하면 팀 구성원 사이에 더 정확한 의사 소통이 가능합니다. 런타임에는 주석이 표시되지 않습니다.

자산 패널

자산 라이브러리의 설계를 변경하여 도킹 가능한 패널로 만들었습니다. 아트보드 작업을 수행하는 동안 이 패널을 계속 열어 둘 수 있습니다. 자산을 범주별로 묶어 더 쉽게 검색하고 정리할 수 있습니다.

컨트롤 스타일 지정

아트워크에서 템플릿 만들기

수정된 컨트롤로 변환 명령을 사용하여 아트보드에서 아트워크를 선택하고 이를 컨트롤의 스킨(컨트롤 템플릿)으로 변환할 수 있습니다.

Silverlight 프로젝트 작업을 수행하는 경우 템플릿의 개체를 마우스 오른쪽 단추로 클릭하고 파트로 변환을 클릭하여 컨트롤의 개체를 특정 역할에 할당할 수 있습니다. 예를 들어 아트워크를 슬라이더 컨트롤 템플릿으로 변환하는 경우 템플릿의 개체 중 하나를 선택한 다음 이를 슬라이더의 HorizontalThumb 역할에 할당할 수 있습니다. 파트 패널을 통해 컨트롤 템플릿에 필요한 파트를 손쉽게 관리하고 만들 수 있습니다.

아트워크에서 TextBox 템플릿 만들기

컨트롤로 변환 명령을 사용할 때 TextBox 컨트롤을 선택하거나 ContentControl 컨트롤에서 파생된 항목을 선택하면 변환하려는 개체에서 발견한 모든 텍스트 블록 개체의 타이포그래피 속성이 컨트롤 템플릿 결과물의 적절한 부분으로 복사됩니다.

상태

향상된 VSM 지원

Expression Blend 3에서는 상태 패널의 개선된 사용자 인터페이스를 통해 Silverlight VSM(Visual State Manager) 지원 기능이 향상되었습니다. 컨트롤의 상태를 처음부터 XAML 파일에서 정의한 것인지 여부와 상관없이 더 많은 컨트롤 상태를 볼 수 있고, 여러 개의 상태 그룹에서 속성이 변경된 경우 해당 사실을 알리는 경고 메시지가 상태 패널에 표시됩니다. 이제 더 많은 시나리오에서 상태가 지원됩니다. 예를 들어 Windows Presentation Foundation 프로젝트의 MainWindow.xaml 문서에서 상태를 정의할 수 있습니다.

상태 고정

특정 상태 그룹의 상태 하나에 대한 미리 보기를 고정해 둔 채 다른 상태 그룹에 속한 다른 상태를 수정할 수 있습니다.

상태 전환 편집

상태 전환을 위한 스토리보드를 선택하고 개체 및 타임라인 패널에서 이를 수정할 수 있습니다.

상태에서 그리기

상태를 선택하고 새 요소를 그린 경우 런타임에 새 요소는 선택한 상태에만 표시됩니다. 이를 상태에서 그리기라고 합니다.

부드러운 레이아웃 전환

레이아웃 속성 변경을 정의하는 각 상태와 상태 사이가 점진적으로 전환되게 할 수 있습니다. Expression Blend 3 이전 버전에서는 개체의 Row, Column, ColumnSpan 또는 RowSpan 상태를 서로 다르게 하여 그와 같은 속성을 변경한 경우 전환 지속 시간을 지정했더라도 변경이 순식간에 이루어졌습니다. 예를 들어 FluidLayout 켜기를 선택하면 모눈 레이아웃 패널의 한 셀에서 다른 셀로 개체를 부드럽게 이동할 수 있습니다.

전환 미리 보기

상태 패널에서 전환 미리 보기 켜기 B3_States_TurnOnTransitionPreview를 선택하여 전환을 미리 볼 수 있습니다. 전환 미리 보기를 사용하는 경우 선택 항목을 한 상태에서 다른 상태로 변경할 때마다 해당 상태 둘 사이에 현재 정의된 전환이 런타임에서와 같은 방식으로 아트보드에서 재생됩니다.

대화형 작업

Behaviors

Behaviors를 사용하면 코드를 작성하지 않고도 응용 프로그램에 대화형 작업을 추가할 수 있습니다. Behavior은 아트보드에 있는 임의의 개체에 직접 적용할 수 있고 재사용이 가능한 구성 요소로서, 확장 가능한 트리거, 확장 가능한 작업 및 Behavior로 이루어져 있습니다.

자산 패널에서 Behavior를 선택할 수도 있고, 개발자를 위해 제공되는 풍부한 API를 사용하여 Silverlight 및 WPF 프로젝트에 사용할 고유한 트리거, 작업 및 Behavior를 직접 작성할 수도 있습니다.

자신만의 Behaviors를 직접 작성하는 방법에 대한 자세한 내용은 도움말 메뉴에서 제공하는 Expression Blend 3 SDK 설명서를 참조하십시오.

데이터

샘플 데이터 사용

Expression Blend 3을 사용하면 라이브 데이터에 액세스하지 않고도 데이터 연결이 필요한 응용 프로그램을 손쉽게 프로토타입화하고 빌드 및 테스트할 수 있습니다. 데이터 패널을 사용하여 샘플 데이터를 생성하거나 XML 파일에서 샘플 데이터를 가져올 수 있습니다. 단순 컬렉션 또는 계층적 컬렉션(TreeView 컨트롤에 사용)을 생성할 수 있고, 네 가지 데이터 유형(String, Number, Boolean 및 Image)에 대해 생성할 콘텐츠를 지정할 수 있습니다.

디자인 타임에 아트보드의 컨트롤에 대해 샘플 데이터를 사용할 수 있습니다. 샘플 데이터의 세부 정보를 폭넓게 사용자 지정할 수 있고 런타임에 샘플 데이터를 사용할지 라이브 데이터를 사용할지 손쉽게 선택 전환할 수 있습니다.

데이터 바인딩

Expression Blend 3에는 다음과 같은 새로운 데이터 바인딩 기능이 포함되어 있습니다.

• 데이터 패널에서 개체 및 타임라인 패널로 데이터 항목을 끌어다 놓아 데이터 바인딩을 만들 수 있습니다.
• Silverlight 프로젝트에서 한 개체의 속성을 다른 개체의 속성에 바인딩할 수 있습니다.
• 응용 프로그램에서 DataGrid 컨트롤을 지원합니다.
• 데이터 패널의 목록 보기 및 자세히 보기를 사용하여 마스터/세부 정보 시나리오를 지원합니다.
• 데이터 컨텍스트에 대한 바인딩 지원 기능이 향상되었습니다.
• 데이터 연결이 필요한 응용 프로그램을 프로토타입화하는 데 사용되는 샘플 데이터의 계층적 컬렉션을 정의할 수 있습니다.

개발자를 위한 샘플 데이터

고유한 사용자 지정 비즈니스 개체를 사용하여 샘플 데이터를 정의할 수 있고, 응용 프로그램에 해당 샘플 데이터 원본을 사용할 수 있습니다. 비즈니스 개체를 XAML 사양에 정확하게 맞춰 변경할 필요가 없습니다. 예를 들어 개체에 public 생성자가 없거나 속성에 setter가 없더라도 Expression Blend 3에서 이러한 개체와 속성을 처리할 수 있습니다.

Silverlight

Silverlight 3 지원

Expression Blend 3에서 Silverlight 3 응용 프로그램을 만들고 수정할 수 있습니다. sil2_subs 프로젝트를 열면 프로젝트 파일을 sil2_subs에서 Silverlight 3으로 업데이트할지 묻는 대화 상자가 Expression Blend 3에 표시됩니다.

웹 사이트 지원

Expression Blend 3에서 새 Silverlight 프로젝트를 만들면 Silverlight 응용 프로그램 + 웹 사이트라는 프로젝트 유형이 추가로 생성됩니다. 이 유형의 프로젝트를 사용하여 Silverlight 응용 프로그램을 만들면 Silverlight 응용 프로그램 이외에도 Silverlight 응용 프로그램을 로드하는 기본 HTML 페이지가 포함된 관련 웹 사이트가 생성됩니다.

브라우저 외부에서 Silverlight 응용 프로그램 실행

프로젝트 메뉴의 Silverlight 프로젝트 옵션을 사용하여 Silverlight 응용 프로그램이 브라우저 외부의 자체 응용 프로그램 창에서 실행되도록 구성할 수 있습니다.

응용 프로그램 라이브러리 확장 캐시

프로젝트 메뉴의 Silverlight 프로젝트 옵션을 사용하여 Silverlight 응용 프로그램의 라이브러리 확장을 캐시하도록 구성할 수 있습니다. 이렇게 하면 Silverlight 응용 프로그램의 속도를 향상시킬 수 있습니다.

참고:브라우저 외부에서 실행되는 Silverlight 응용 프로그램에 대해서는 라이브러리 확장을 캐시할 수 없습니다.

원본 파일 버전 제어

TFS 지원

Expression Blend 3은 tfs_first를 지원합니다. tfs_subs에 액세스할 수 있는 경우 솔루션과 프로젝트에 대해 체크 인, 체크 아웃, 병합 등과 같은 일반적인 원본 제어 관련 작업을 수행할 수 있습니다.

애니메이션

애니메이션에 더 많은 속성 사용

Silverlight 프로젝트에서 이전보다 더 많은 속성에 대해 키프레임을 기록할 수 있습니다. 속성 패널에서 개별 속성 옆에 있는 마커 B3_Properties_AdvancedPropertyOptionsMarker를 클릭했을 때 나타나는 고급 속성 옵션 메뉴에 현재 값 기록이라는 새 메뉴 명령이 추가되었습니다. 이 명령을 사용하면 키프레임을 쉽게 기록할 수 있습니다.

향상된 Silverlight 감속/가속 지원

키프레임을 선택한 다음 속성 패널에서 EasingFunction을 선택하면 사전 정의하여 명명된 감속/가속 함수를 개별 키프레임에 적용할 수 있습니다.

리소스 값에 애니메이션 적용

애니메이션을 적용하여 일부 리소스를 변환할 수 있습니다. 예를 들어 색 속성에 애니메이션을 적용하여 정적 값을 색 리소스로 바꿀 수 있습니다.

텍스트

글꼴 및 글꼴 하위 집합 포함 기능 향상

Expression Blend 3을 사용하면 Silverlight 및 Windows Presentation Foundation 프로젝트에서 글꼴 하위 집합을 손쉽게 포함하고 만들 수 있습니다. 새로운 글꼴 관리자를 사용하여 컴퓨터에 설치되어 있는 글꼴을 선택할 수 있고 포함할 문자의 하위 집합을 사용자 지정할 수 있습니다.

워크플로

도킹 및 작업 영역 구성

Expression Blend 3에서는 이전 버전에 제공되던 작업 영역 구성 기능이 더욱 확장되어 각 패널을 자유롭게 도킹할 수 있습니다. Expression Blend 3 사용자 인터페이스를 원하는 대로 사용자 지정하고 이 구성을 기본 설정으로 저장할 수 있습니다.

그라데이션 도구 개선

Expression Blend 3의 그라데이션 도구는 이전 버전보다 더 강력한 기능을 자랑하며 사용하기도 더 쉬워졌습니다. 이제 그라데이션이 적용된 개체에 대한 그라데이션의 오프셋 값을 직접 변경할 수 있습니다. 중지점 위치를 변경하려면 중지점을 끌어 옮기기만 하면 됩니다. 새 중지점을 추가하려면 Alt 키를 누른 채 그라데이션 표시기를 클릭하면 됩니다. 새 그라데이션 표시기를 아트보드로 끌어다 놓아 그라데이션을 빠르게 다시 정의할 수도 있습니다. 아트보드를 아무데나 두 번 클릭하면 색 선택 도구가 나타납니다. 색 선택 도구를 사용하여 중지점의 색을 바꿀 수 있습니다.

레이아웃 작업 개선

Expression Blend 3에 이르러서는 레이아웃 작업이 여러 가지 측면에서 개선되었습니다. 아트보드에서 개체를 직접 조작하여 움직일 때 더 일관되고 예측 가능한 결과를 얻을 수 있으며, 더 많은 컨테이너에 대해 맞춤 표시기가 표시되고, 개체의 부모-자식 관계를 다시 지정하거나 개체를 그룹화할 때 레이아웃 속성과 바인딩이 그대로 유지되며, XAML 코드 숨김 파일에 불필요한 레이아웃 속성이 더 이상 기록되지 않습니다. 뿐만 아니라 해당 속성이 자동으로 설정되어 있는 개체라도 속성 검사자를 사용하여 해당 너비와 높이를 변경할 수 있습니다. Expression Blend 3에서는 개체를 사용자가 지정한 크기로 맞추는 데 필요한 적절한 여백을 자동으로 계산합니다.

직접 선택 개선

Expression Blend 3에서는 선택 모델의 일부가 크게 변경되었습니다. 이러한 변경 사항은 선택 항목을 더 쉽게 바꾸고 아트보드에서 새 개체를 간편하게 그릴 수 있도록 하는 데 주안점을 두고 있습니다. 예를 들어 선택 도구가 직접 선택 도구와 비슷하게 작동하도록 그 기능이 확장되었으며, 개체를 그리거나 이동할 때 나타나는 시각적 표시기의 도움을 받아 아트보드에서 더 편리하게 개체를 만들거나 부모-자식 관계를 적용할 수 있습니다.

점 마키 선택

직접 선택 도구를 사용할 때 마키 선택 기능을 통해 패스의 개별 점을 선택할 수 있습니다. 선택하려는 점이 포함되도록 마우스 커서를 끌어 영역을 정의하기만 하면 됩니다.

자동 스크롤 및 확대/축소 개선

개체를 이동하거나 크기를 조정할 때 Expression Blend 3에서 아트보드가 자동으로 스크롤됩니다. 아트보드 바깥으로 포인터를 이동하면 스크롤이 멈춥니다. 기본적으로 마우스 휠을 돌려 아트보드를 확대 또는 축소할 수 있습니다.

키보드 바로 가기 및 보조 키

직접 선택, 마키 선택, 콘텐츠 복제, 이동, 확대/축소 등의 작업을 위한 키보드 바로 가기와 보조 키가 Expression Blend 3에 새로 추가되었으므로 일반적인 작업을 더 쉽게 수행할 수 있습니다.

향상된 TileBrush 지원

이제 Silverlight 응용 프로그램에 대해 바둑판식 이미지 브러시를 만들고 편집할 수 있습니다. 뿐만 아니라 브러시를 다시 만들지 않고도 속성 패널의 브러시 범주에서 직접 Source 속성을 설정할 수 있습니다. 이는 Silverlight 및 Windows Presentation Foundation 응용 프로그램 모두에 해당하는 기능입니다.

클립보드에서 이미지 복사 및 붙여넣기

Windows Internet Explorer, Adobe Photoshop, Microsoft Paint 등의 다른 응용 프로그램에서 클립보드로 복사한 이미지 데이터를 이제 Expression Blend 3으로 직접 붙여넣을 수 있습니다. 붙여넣기 작업을 수행하는 위치에 따라 어떤 유형의 프로젝트 요소를 추가할지가 Expression Blend 3에서 자동으로 결정됩니다. 예를 들어 리소스 패널에서 이미지를 붙여넣으면 프로젝트에 이미지 파일이 추가되고 ImageBrush 리소스가 생성됩니다.

템플릿 구조

컨트롤을 통해 데이터 컬렉션을 표시해야 하는 경우 등과 같이 특정 시나리오에 적용되는 템플릿이 컨트롤에 포함되어 있으면 해당 템플릿이 개체 메뉴에 있는 템플릿 편집 항목의 다른 템플릿 편집 범주에 표시됩니다. 따라서 ListBox 컨트롤의 ItemContainerStyle 템플릿 같이 눈에 잘 띄지 않던 템플릿을 더 쉽게 찾을 수 있습니다.

기본값 Serialization

Expression Blend 3에서는 불필요한 속성 값을 명시적으로 설정하지 않습니다. HorizontalAlignment 같은 속성을 늘이기로 설정한 경우 eb2_subs에서는 그 값이 기본값이어서 불필요한 경우라 하더라도 XAML 파일에 해당 값을 기록합니다. Expression Blend 3에서는 스타일을 통해 값을 설정할 때와 같은 몇몇 특별한 경우를 제외하고는 이 값을 기록하지 않습니다.

원하는 경우 속성 패널에서 속성 옆에 있는 마커 B3_Properties_AdvancedPropertyOptionsMarker#12e06962-5d8a-480d-a837-e06b84c545bb를 클릭했을 때 나타나는 고급 속성 옵션 메뉴의 로컬 값으로 변환 명령을 사용하여 기본값을 명시적으로 설정할 수도 있습니다.

향상된 UserControl 컨트롤 편집 환경

UserControl 컨트롤을 정의하는 XAML을 수정할 때 더 이상 프로젝트를 다시 빌드하여 아트보드의 모든 UserControl 개체를 업데이트하지 않아도 됩니다. 뿐만 아니라 아트보드에서 UserControl 개체 중 하나를 두 번 클릭하는 것만으로 UserControl 컨트롤의 편집 모드를 시작할 수 있습니다.

프로젝트 패널에서 파일 검색

프로젝트 패널에서 항목을 검색할 수 있습니다. 검색 창의 결과를 지우더라도 검색을 진행하는 동안 확장된 노드는 확장 상태를 계속 유지하므로 검색했던 항목을 쉽게 찾을 수 있습니다.

파일에서 찾기 명령

편집 메뉴에 새로 추가된 파일에서 찾기 명령을 사용하여 여러 개의 파일에서 텍스트를 검색할 수 있습니다. Ctrl+Shift+F를 눌러 이 명령을 실행할 수도 있습니다.

프로젝트 패널 확장

Expression Blend 3에서는 솔루션을 닫을 때 프로젝트 패널에 있는 다양한 노드의 확장 상태를 기억해 두고 솔루션을 다시 열 때 노드의 마지막 상태를 그대로 반영합니다.

코드 편집

XAML, C# 및 Visual Basic 코드 편집

Expression Blend 3에서는 시간을 절약할 수 있는 여러 가지 기능을 도입하여 XAML 지원 성능이 향상되었습니다.이제 C# 및 Visual Basic 코드 숨김 파일을 Expression Blend 3에서 곧바로 수정할 수 있습니다. 코드 편집기에서 지원하는 여러 가지 기능을 사용하여 코드를 수정할 때 생산성을 높일 수 있습니다. 대표적인 기능으로는 IntelliSense(구문 완성), 자동 서식, 괄호 짝 맞추기, 함수 요약 쓰기, 이벤트 처리기 작성 등이 있습니다.

XAML 편집 개선

분할 보기에서 XAML을 잘못 변경하더라도 개체 트리가 확장된 상태를 유지합니다. 뿐만 아니라 XAML에서 개체의 속성을 잘못된 값으로 설정한 경우에도 아트보드에서 개체에 대한 작업을 계속 수행할 수 있습니다.

Visual Studio에서 이벤트 처리기 추가

Expression Blend 3에는 C# 및 Visual Basic 코드 숨김 파일을 수정하는 데 사용할 수 있는 코드 편집기가 새로 추가되었습니다.속성 패널의 이벤트 보기를 사용하여 코드 숨김 파일에 이벤트 처리기 코드를 추가하는 경우 기본적으로 Expression Blend 3의 내부 코드 편집기를 통해 해당 코드 숨김 파일이 열립니다. 그러나 선택에 따라서는 이벤트 처리기를 추가하는 데 Visual Studio를 사용할 수도 있습니다.

확장성

확장 가능한 자산 패널

Expression Blend 3에서 하나 이상의 어셈블리가 포함된 디렉터리를 등록하여 자산 패널의 콘텐츠를 채울 수 있습니다. 사용자 지정 아이콘 등을 표시하기 위한 코드를 직접 작성할 수 있습니다. 알려진 어셈블리에 저장되어 있는 컨트롤을 인스턴스화할 수도 있습니다. 이렇게 하면 Expression Blend 3에서 필요한 어셈블리 참조가 프로젝트에 추가됩니다.

아트보드 확장성

Expression Blend 3에서는 Silverlight 및 Windows Presentation Foundation을 위한 확장 API가 여러 가지 측면에서 개선되었습니다. 이러한 확장 요소는 Visual Studio 디자이너와 호환되며 아트보드를 더 융통성 있게 확장할 수도 있습니다.

확장 가능한 프로젝트 템플릿

Expression Blend 3에서는 프로젝트 작성에 도움이 되도록 사용자 지정할 수 있는 프로젝트 및 항목 스텁을 제공하는 확장 가능한 프로젝트 템플릿을 지원합니다. Visual Studio에서 지원하는 대상이기도 한 이러한 프로젝트 템플릿을 사용하면 프로젝트 사이의 종속 관계와 어셈블리 참조가 있는 복잡한 솔루션을 만들 수 있습니다.