ZZANGMYON BLOG♡

툴 박스의 마지막 도구인 에셋 라이브러리에 대해서 알아보도록 하겠습니다.

◎ Assets
에셋 라이브러리에는 현재 자신이 보유하고 있는 리소스와 컨트롤, 비헤이비어와 액션 등이 들어있는 자산 목록이라고 생각하면 됩니다. 닷넷 프레임워크 툴킷, 실버라이트 툴킷 등 어떤 툴킷을 설치하였는지, 또 어떤 컨트롤과 비헤이비어를 개발하여 직접 보유하고 있는지에 따라 그 목록은 개인마다 다르게 나타날 수 있습니다. 에셋 라이브러리는 툴 박스에 있는 아이콘을 이용하여 펼칠 수 있고 상단의 [Assets] 패널을 클릭하여 펼칠 수도 있습니다. 카테고리를 선택하면 해당 카테고리에 관련된 컨트롤과 비헤이비어 등의 목록이 나타납니다. 다음의 이미지를 보면 [Assets]패널과 툴박스에서 아이콘을 선택한 [Assets]에 동일한 컨텐츠가 들어있음을 알 수 있습니다.

1.Project : 현재 프로젝트에 정의된 에셋이 나타납니다. 사용자가 정의하여 만든 유저컨트롤 등이 들어있습니다. 프로젝트를 다시 빌드할 때까지 보이지 않는 타입도 있습니다.
2.Controls : 모든 컨트롤 목록이 나타납니다. 데이터, 패널 등 카테고리가 한 단계 더 나누어져 있습니다.
3.Styles : 보유하고 있는 모든 스타일 목록이 나타납니다. 
4.Behaviors : 비헤이비어&액션 목록이 나타납니다.
5.Shapes : 다양한 도형 타입의 컨트롤 목록이 나타납니다.
6.Effects : 효과 목록이 나타납니다.
7.Media : 프로젝트에 불러온 이미지, 비디오, 오디오 혹은 3D 개체와 같은 파일들의 목록이 나타납니다.
8.Categories : 컨트롤 개발자들에 의해 생성된 하위 카테고리 안의 컨트롤들이며 [Controls]의 컨트롤과 일부 중복됩니다.
9.Locations : 참조되어 있는 DLL별로 나누어 에셋 목록을 볼 수 있습니다.

[Assets] 툴을 선택하여 파일 목록을 펼친 다음 생성할 컨트롤을 더블 클릭하게 되면 [Assets] 툴 아래에 선택한 컨트롤의 아이콘이 나타납니다. 이것을 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 파일 목록에서 아트보드에 드래그앤 드랍하여 컨트롤을 바로 생성할 수도 있습니다.

가장 최근 선택한 컨트롤이 최대 10개까지 목록에 나타나기 때문에 자주 이용할 수 있습니다.

기본적인 툴의 사용법을 마쳤으니 이제 컨트롤 툴을 사용하는 방법을 알아볼 차례입니다. 컨트롤 중 레이아웃 컨트롤은 컨테이너의 성격이 강하기 때문에 보이는 모습에는 특징이 없습니다. 따라서 처음 접하는 사용자에게는 그 차이가 잘 와닿지 않을 수 있습니다. 지금은 레이아웃을 생성하는 방법 정도만 알아보도록 하고 자세한 내용은 다음 스텝에서 다루도록 하겠습니다.

◎ Grid 컨트롤
실버라이트나 WPF 프로젝트의 유저컨트롤, 페이지 등과 같은 대부분의 문서 내에서 최상위 레이아웃으로 사용됩니다. 또한 행과 열의 속성을 가지고 있기 때문에 표 형태의 레이아웃을 구성할 때에 많이 사용됩니다. [Grid] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

그리드는 왼쪽과 윗쪽의 파란 영역에 마우스를 갖다 대면 행과 열을 삽입할 수 있는 노란색 막대가 나타납니다. 원하는 지점을 클릭하면 행과 열이 삽입됩니다.

 


◎ Canvas 컨트롤
영역을 기준으로 하는 좌표를 사용하여 자식요소를 절대배치 합니다. 자식요소와 부모 캔버스 사이의 거리를 나타내는 Left, Top 값을 가지고 있습니다. [Canvas] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 

 

◎ StackPanel 컨트롤
패널 내에 자식요소를 차례차례 쌓을 수 있습니다. 가로, 세로 속성을 이용하여 자식요소가 쌓이는 방향을 정의할 수 있으며 기본값은 세로입니다. [StackPanel] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.
 

◎ ScrollViewer 컨트롤
컨텐츠가 화면에서 보여줄 영역보다 클 경우에 사용합니다. 하나의 자식요소만 가질 수 있으며 다양한 스크롤 지원 프로퍼티와 메소드가 있습니다. [ScrollViewer] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 

◎ Border 컨트롤

개체 주위의 테두리를 그리거나 배경을 넣을 때 사용합니다. 하나의 자식요소만 가질 수 있으며 테두리의 둥글기나 두께 등의 속성을 설정할 수 있습니다. [Border] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 


◎ Viewbox 컨트롤

자식요소를 늘이거나 확대할 경우 사용합니다. 뷰박스에 여러 개의 자식요소를 그룹화하여 넣게 되면 뷰박스의 사이즈를 따라 자식요소들의 크기가 같은 비율로 변경됩니다. 또한 사이즈가 동일한 여러 개의 뷰박스에 크기가 다른 개체들를 각각 넣으면 개체들의 크기가 뷰박스의 사이즈에 꽉차게 맞추어져 보이게 됩니다. [Viewbox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

 

 

◎ TextBlock 컨트롤
주로 두 줄 이상의 텍스트 단락을 필요로 하지 않는 한 줄 단위의 간단한 텍스트를 표시합니다. [TextBlock] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

 


◎ TextBox 컨트롤

주로 입력 폼과 같은 곳에서 사용자의 텍스트 입력을 받거나 수정할 수 있습니다. [TextBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

 

◎ RichTextBox 컨트롤
서식이 있는 텍스트나 이미지, 표 등과 같은 풍부한 컨텐츠를 표시합니다. 이미지와 서식이 필요한 기사나 블로그와 같은 형식의 컨텐츠를 작성할 경우 사용합니다. [RichTextBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트 및 이미지를 입력합니다.

 

◎ PasswordBox 컨트롤
암호 입력을 위한 컨트롤입니다. 비밀번호와 같은 암호를 입력할 경우에 사용되며 자동으로 마스킹 문자로 처리됩니다. 이 때 마스킹 문자의 기본값은 글머리기호 문자(●) 입니다. [PasswordBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고 텍스트를 입력합니다.

 

◎ Button 컨트롤

클릭 이벤트를 가지고 있는 컨트롤로 제일 자주 사용되는 컨트롤입니다. [Button] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 버튼의 이름을 변경할 수 있습니다.

  

◎ ChechBox 컨트롤

항목을 선택하거나 선택을 취소하는 옵션을 설정할 경우에 사용합니다. 하나 혹은 둘 이상의 항목에 적용할 수 있습니다. [CheckBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 체크박스의 이름을 변경할 수 있습니다.

  


◎ ComboBox 컨트롤
항목을 선택할 수 있는 목록이 들어있으며 드롭다운 할 수 있는 컨트롤입니다. [ComboBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고, 컨트롤이 선택된 상태에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴중 [Add ComboBoxItem]을 선택하여 콤보박스 아이템을 삽입합니다.

  

콤보박스 아이템을 더블 클릭하면 이름을 변경할 수 있습니다.

 

◎ RadioButton 컨트롤
여러 개의 항목 중 하나의 항목만 선택할 수 있는 옵션을 설정할 경우 사용합니다. 둘 이상의 항목에 적용되며 사용자는 아무것도 선택하지 않을 수 없습니다. [RadioButton] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다. 한번 더 더블 클릭하면 라디오버튼의 이름을 변경할 수 있습니다.

  

◎ ListBox 컨트롤
[ComboBox]와 보여주는 방식만 다른 컨트롤입니다. 여러 개의 항목을 선택할 수 있는 목록이 들어있으며 보여줄 영역보다 항목이 길 경우 스크롤이 나타납니다. [ListBox] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성하고, 컨트롤이 선택된 상태에서 마우스 오른쪽 버튼을 눌러 나오는 메뉴 중 [Add ListBoxItem]을 선택하여 리스트박스 아이템을 삽입합니다.

  
리스트박스 아이템을 더블 클릭하면 이름을 변경할 수 있습니다.
 

 

◎ ScollBar 컨트롤
[ScrollViewer]나 [ListBox] 안에 들어있는 스크롤바와 기능이 같습니다. 제한된 영역에서 보다 많은 컨텐츠를 보여주기 위한 컨트롤이며 일반적으로 다른 컨트롤에 포함되어 있습니다. [ScrollBar] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ Slider 컨트롤
소리의 크기나 이미지의 투명도 등의 값의 범위를 설정하고 키를 이용하여 범위 내의 값을 선택합니다. 선택한 값에 따라 개체의 상태가 변경됩니다. [Slider] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

◎ TabControl 컨트롤
같은 공간에 여러 개의 화면을 보여주기 위해 사용합니다. 화면의 갯수만큼 탭아이템이 생성되며 사용자는 탭아이템을 눌러 화면간 이동을 할 수 있습니다. [TabControl] 컨트롤을 선택한 상태에서 더블 클릭하거나 드래그하여 원하는 크기의 컨트롤을 생성합니다.

[Properties]-[Common Properties]패널에서 [Heder]를 이용하여 탭아이템의 이름을 변경할 수 있습니다.
 

◎ GridSplitter 컨트롤

그리드의 행과 열을 사용자가 다시 배분하기 위해 사용합니다. 우리가 일상적으로 접하는 워드나 파워포인트와 같은 다양한 프로그램에서 화면의 분할을 조절하기 위해 사용하는 것과 같습니다. 먼저 위에서 학습한 경험을 이용하여 2열로 분할된 Grid를 생성하고 열을 구분하기 위하여 각각의 열에 색이 다른 사각형을 꽉 채워 넣습니다.

 
그리고 [GridSplitter] 컨트롤을 선택하여 생성된 그리드의 열이 나눠지는 영역(가운데 빨간 점선)에 갖다 놓으면 됩니다. 프로그램을 실행한 후에 [GridSplitter]을 조절하면 그리드 영역이 재분배 됩니다.

 

블렌드의 툴 박스는 블렌드를 다루면서 제일 자주 사용되는 부분입니다. 툴을 하나씩 다루어 보면서 기능을 자세히 알아보도록 하겠습니다.

 
◎ Selection 툴
개체를 개별로 선택하거나 모두 선택할 수 있습니다.[Selection] 툴을 선택한 상태에서 하나의 개체를 클릭 하면 하나의 개체가 선택되고, 드래그하면 드래그 한 범위 안의 개체가 모두 선택됩니다.

 
 

 

◎ Direct Selection 툴
개체의 앵커 포인트를 직접 선택하거나 변형을 할 경우에 사용합니다. [Direct Selection] 툴을 선택한 상태에서 개체를 클릭하여 앵커 포인트를 활성화 하고 앵커 포인트의 한 지점을 클릭한 후 드래그하여 개체를 변형합니다.

 

 

◎ Pan 툴
아트보드를 조절하여 보기 위한 툴입니다. [Pan] 툴을 선택한 상태에서 아트보드를 드래그하여 화면을 이동할 수 있습니다.

 
 
<TIP>다른 작업 중일 경우에는 [Space]키를 눌러 화면을 이동할 수 있고, [Space]키를 놓는 순간 이전의 작업 상태로 돌아갈 수 있기 때문에 편리합니다.

◎ Zoom 툴

아트보드를 확대/축소하여 볼 수 있습니다. [Zoom] 툴을 선택한 상태에서 아트보드를 클릭하면 확대 비율이 증가하고, [Alt]키를 누른 채 클릭 하면 확대 비율이 점점 줄어듭니다. [Zoom] 툴을 더블 클릭하면 화면 비율이 100%로 조절됩니다.

  
<TIP>아트보드 아래의 [Zoom] 목록 버튼을 클릭하여 비율을 조절할 수도 있습니다. 또한 [Ctrl]+[+] 키를 누르면 화면 비율이 확대되고 [Ctrl]+[-] 키를 누르면 화면 비율이 축소되며 이전의 작업 상태로 돌아갈 수 있습니다.

◎ Eyedropper 툴
선택한 개체에 다른 개체의 색이나 패턴을 채울 수 있습니다. 변경할 개체를 선택한 후 [Eyedropper] 툴을 클릭하고 복사할 개체를 클릭하여 색이나 패턴을 복사합니다.

 

 

 

◎ Paint Bucket 툴
 [Eyedropper] 툴과는 반대로 선택한 개체의 색이나 패턴을 다른 개체에 채울 수 있습니다. 복사할 개체를 선택한 후 [Paint Bucket] 툴을 클릭하고 변경할 개체를 클릭하여 색이나 패턴을 복사합니다.

 

 

◎ Gradient Tool 툴
개체에 그러데이션을 적용하거나 적용된 그러데이션을 변형합니다. [Gradient] 툴을 선택한 상태에서 그러데이션을 적용할 개체에 드래그하면 드래그 한 방향대로 그러데이션이 적용됩니다. 그러데이션이 생성 되지 않은 상태에서는 [Properties]-[Brushes]패널에서 [Gradient Brush]를 적용하면 기본 그러데이션이 생성됩니다.

 

그러데이션 막대에서 한 포인트를 더블 클릭 하면 색상 패널이 나타나 다양한 그러데이션을 생성할 수 있습니다.

 

또한 그러데이션 막대를 조절하여 완만한 정도 및 방향을 설정할 수 있습니다.

 
 

 

◎ Brush Transform 툴
그러데이션의 위치를 이동하거나 회전할 수 있습니다. [Brush Transform] 툴을 선택하고 그러데이션이 적용되어 있는 개체를 클릭하면 그러데이션 영역이 나타납니다. 이것을 드래그하여 그러데이션의 위치를 이동하거나 회전합니다.

 

 
<TIP>[Gradiend Tool] 툴과 [Brush Transform] 툴은 그룹화 되어있습니다. 그룹화 되어있는 툴은 툴 아이콘 옆에 작은

삼각형이 표시되어 있습니다. 툴 아이콘을 길게 누르거나 마우스 오른쪽 버튼을 눌러 툴을 변경할 수 있습니다.

◎ Pen 툴
[Pen] 툴을 이용하여 다양한 모양의 패스 타입 개체를 그릴 수 있습니다. 패스의 각 세그먼트는 두 개의 앵커 지점과 두 개의 핸들로 이루어집니다.

[Pen] 툴을 선택한 상태에서 아트보드에서 시작 지점을 클릭한 후 적당한 간격을 두고 두 번째 지점을 클릭합니다. 원하는 모양의 개체를 그리기 위해서는 앵커 포인트의 간격을 적당히 조절하는 것이 중요합니다. 앵커 포인트를 클릭한 채로 원하는 방향으로 드래그 하여 핸들러를 조절합니다. 핸들러의 길이나 방항을 조절하여 원하는 곡선의 세그먼트를 만듭니다.
   

◎ Pencil 툴
[Pen] 툴로 앵커 포인트를 하나씩 추가하여 패스를 그렸다면 [Pencil] 툴로는 곡선을 자유롭게 드로잉하여 앵커 포인트를 자동으로 생성할 수 있습니다. 그렇지만 태블릿을 사용하지 않으면 손 떨림 현상 때문에 원하는 개체를 그리기가 쉽지 않아 자주 사용하지는 않습니다. 다음 예제는 나비를 그려본 것인데 쉽지 않네요.

 

◎ Rectangle 컨트롤
[Rectangle] 컨트롤을 선택한 상태에서 드래그하여 사각형 컨트롤을 그립니다. [Shift] 키를 누른 채 드래그하면 정사각형을 그릴 수 있습니다.

또한 [Properties]-[Appearance] 패널의 [RadiusX]와 [RadiusY] 값을 입력하여 모서리의 둥글기를 조절할 수 있습니다.

◎ Ellipse 컨트롤
[Ellipse] 컨트롤을 선택한 상태에서 드래그하여 원형 컨트롤을 그립니다. [Shift] 키를 누른 채 드래그하면 정원을 그릴 수 있습니다.

◎ Line 컨트롤

[Line] 컨트롤을 선택한 상태에서 드래그하여 선 컨트롤을 그립니다. [Shift] 키를 누른 채 드래그하면 45도를 유지한 선을 그릴 수 있습니다.

결과 패널의 Error 탭은 태그에 잘못된 값이 들어갔거나 닫히지 않는 등 형식에 맞지 않게 작성하여 에러가 날 때 어느 부분에서 에러가 났는지 메세지를 보여주어 잘못된 부분을 파악하는데 도움이 됩니다. Output 탭은 프로젝트를 빌드할 때 실행된 결과를 메세지로 보여줍니다.

◈ Results 패널

이 외에 아트보드의 가장자리에 몇 개의 아이콘 묶음이 있습니다.

◈ 기타

1.Zoom : 확대 비율을 드롭다운 리스트에서 선택하거나 직접 입력하여 설정합니다.
2.Turn on/off Rendering of Effects : 효과 적용을 보여줄 것인지 설정합니다.
3.Show/Hide snap grid : 스냅그리드를 보여줄 것인지 설정합니다.
4.Turn on/off snapping to gridlines : 그리드라인에 개체가 스냅 될 것인지 설정합니다.
5.Turn on/off snapping to snaplines : 스냅라인에 개체가 스냅 될 것인지 설정합니다.
6.Show/Hide annotations : 주석을 보여줄 것인지 설정합니다.
7.Design : 화면 뷰를 디자인 모드로 봅니다.
8.XAML : 화면 뷰를 XAML 모드로 봅니다.
9.Split : 화면 뷰를 디자인 모드와 XAML 모드로 나누어 봅니다.

오브젝트와 타임라인 패널은 화면에 있는 UI를 트리 형태로 보여주어 개체의 스택을 쉽게 파악할 수 있을 뿐만 아니라 개체 간의 관계를 이해하기에 좋습니다. 타임라인 패널은 스토리보드를 선택했을 때 나타나게 되는데 이 부분은 스토리보드를 생성하고 사용하는 강좌에서 다루도록 하겠습니다.

◈ Objects and Timeline 패널

1.Storyboard open : 드롭다운 버튼을 눌러 저장된 스토리보드를 선택합니다.
2.Storyboard close : 열려있는 스토리보드를 닫습니다.
3.New : 스토리보드를 생성하여 추가합니다.
4.Scope : 현재 열려있는 페이지의 스콥을 나타냅니다.
5.Hide All : 로지컬 트리의 모든 개체를 보이지 않게 합니다. 이 메뉴가 활성화 될 경우 Show All 이라는 토글 버튼으로 해제할 수 있습니다. 화면상에서는 보이지 않지만 프로그램을 실행하는 데에는 지장을 주지 않습니다.
6.Lock All : 로지컬 트리의 모든 개체를 잠그어 고정시킵니다. 역시 Unlock All 이라는 토글 버튼으로 해제할 수 있습니다.
7.Logical tree : 화면에서 보이는 개체들의 계층 구조를 나타냅니다. 선택한 개체의 부모 레이아웃이 파란색 선으로 표시됩니다.
8.Arrange by Z order : 선택한 개체의 부모 레이아웃 범위 안에서 계층 구조를 거꾸로 나타냅니다.

우리가 사용하는 도형이나 패스, 버튼 등과 같은 컨트롤들은 모두 고유의 속성을 가지고 있습니다. 버튼 컨트롤은 Background, Foreground, Content 등과 같은 속성을 가지고 있고, 단순한 사각형 컨트롤은 Fill, Stroke 등과 같은 속성을 가지고 있습니다. 이렇게 컨트롤의 속성이 다르기 때문에 속성을 변경할 수 있는 프로퍼티 패널은 선택한 컨트롤에 따라 그 구성도 달라지게 됩니다.

다음 그림은 실버라이트 애플리케이션 프로젝트를 생성하였을 때 가장 기본적으로 나타나는 레이아웃인 Grid의 프로퍼티 패널 모습입니다.

◈ Properties 패널

1.Name : 컨트롤의 이름을 지정할 수 있습니다.
2.Properties/Events : 컨트롤의 프로퍼티와 이벤트를 나누어 볼 수 있습니다.
3.Search : 프로퍼티를 이름으로 검색할 수 있습니다.
4.Brushes : 컨트롤의 색에 관련된 설정을 합니다. 컨트롤의 배경색, 테두리, 텍스트의 색을 칠하거나 브러시 리소스를 저장할 수 있습니다.
5.Appearance : 컨트롤을 화면에서 보이거나 숨길 수 있으며 투명도를 설정할 수 있습니다.
6.Layout : 레이아웃 컨트롤의 정렬 상태나 마진값을 설정할 수 있습니다.
7.Common Properties : 툴팁을 넣거나 커서 모양을 설정할 수 있습니다.
8.Transform : 컨트롤의 크기나 각도, 기울기 등을 설정할 수 있습니다.
9.Miscellaneous : 위의 항목 외에 여러가지 속성들이 들어 있습니다.

위에서는 프로퍼티에 대해서 간단하게 설명하였고 차후에 따라하기 과정을 진행할 때 모든 속성을 골고루 다루어 볼 것입니다. 지금은 브러시에 관련된 프로퍼티에 대해서만 조금 더 자세하게 다루도록 하겠습니다.

◎ Brushes

1.Background : 배경색을 설정합니다.
2.OpacityMask : 투명마스크를 설정합니다. 투명마스크는 그래디언트 브러시를 이용하여 적용할 수 있습니다. 반사효과를 낼 경우에 많이 사용합니다. 
3.No brush : 적용되어 있는 브러시를 제거하거나 아무 색도 지정하지 않게 합니다.
4.Solid color brush : 단색의 브러시를 설정합니다.
5.Gradient brush : 그라데이션이 적용된 브러시를 설정합니다.
6.Tile brush : 타일 타입의 브러시를 설정합니다.
7.Brush Resources : 저장된 브러시 리소스의 목록이 보입니다.
8.Color resources : 저장된 컬러 리소스의 목록이 보입니다.
9.Color : 마우스로 이동하여 색을 선택할 수 있습니다.
10.Spectrum : 스펙트럼을 이용하여 색을 선택할 수 있습니다.
11.Initial color :  처음 색이 보입니다.
12.Current clolor : 현재 선택된 색이 보입니다.
13.Last color : 마지막으로 선택한 색이 보입니다.
14.Color eyedropper : 아이드로퍼를 이용하면 색상표에 있는 색 뿐만 아니라 블렌드의 실행화면 어느 곳에 있는 색이든 모두 선택할 수 있습니다.
15.RGBA : Red, Green, Blue, Alpha 값을 나타냅니다.
16.Convert color to resource : 현재 선택된 색을 컬러 리소스로 저장할 수 있습니다.
17.Hex Value : 현재 선택된 색을 16진수 값으로 표현한 것입니다. 
                        # FF 2A 89 D2
                                A    R   G   B
18.Opacity : 색의 투명도를 설정합니다.

많은 디자이너들이 기존의 애니메이션 저작 도구를 다루어 보았음에도 불구하고 블렌드를 처음 실행했을 때의 화면 구성 부분 중 프로젝트 패널은 모두가 낯설어 하지 않을까 생각합니다. 디자이너들이 프로젝트의 모든 파일을 하나하나 이해하기는 힘들겠지만 주로 작업이 이루어지는 파일들에 대해서는 알아야 할 것입니다.

실버라이트 애플리케이션 프로젝트를 생성하면 다음과 같은 프로젝트가 구성됩니다. 프로젝트를 생성할 때 입력하게 되는 이름은 자동으로 솔루션과 프로젝트의 이름이 됩니다. 이 예제에서는 프로젝트의 이름을 "BlendStart" 라고 하였습니다.

◈ Projects 패널

1.Search : 프로젝트 파일 목록 중 이름을 검색하여 파일을 찾을 수 있습니다.
2.Solution : 여러 프로젝트의 집합이라고 볼 수 있는 솔루션 파일입니다.
3.Project : 여러 파일의 집합이라고 볼 수 있는 프로젝트 파일입니다. 하나의 솔루션에 여러 개의 프로젝트가 포함되어 있는 경우가 많습니다.
4.References : 참조된 라이브러리 파일과 프로젝트 파일 등이 들어 있습니다.
5.Properties : 프로젝트의 설정에 관련된 파일들이 들어 있습니다.
6.App.xaml : App.xaml.cs 와 짝을 이루며 애플리케이션을 구동하기 위한 파일로 시작할 XAML파일을 설정할 수 있습니다. 애플리케이션 전체에서 사용되는 리소스를 선언합니다.
7.MainPage.xaml : MainPage.xaml.cs 와 짝을 이루며 애플리케이션이 실행될 때 로드되는 초기 UI 컨트롤입니다. 여러 개의 페이지를 구성할 때 메인이 되는 페이지라고 생각하면 됩니다.

프로젝트 파일은 윈도우탐색기와 같이 트리 형태로 폴더를 추가하거나 삭제하여 관리할 수 있습니다. 또한 이미지 파일이나 동영상 파일 혹은 .dll과 같은 라이브러리도 추가할 수 있습니다. 위에서 본 것과 같이 프로젝트에 생성되는 XAML 파일은 XAML.CS 파일과 짝을 이루게 되고 코드 비하인드 파일이라고 부릅니다. CS 파일에서는 C#으로 개체를 제어하게 되며 주로 개발자들이 접근하여 사용합니다.

블렌드를 사용하는데 도움이 되는 유저가이드와 제품정보 등이 들어있습니다.

◈ Help 메뉴

1.User Guide : 블렌드 사용자를 위한 유저가이드가 실행됩니다.
2.Expression Blend SDK User Guide : 블렌드의 SDK 사용자를 위한 유저가이드가 실행됩니다. SDK란 Software Developement Kit의 약자로 개발에 필요한 도구를 말합니다.
3.Online Community : 블렌드에 관련된 온라인 커뮤니티 목록입니다. 익스프레션 공식 커뮤니티이며 해외 사이트입니다.

- Expression Community Home : 익스프레션 커뮤니티 홈이 링크되어 있습니다.
- Online Forums : 익스프레션 커뮤니티에서 포럼 카테고리가 링크되어 있습니다.
- Learn : 익스프레션 커뮤니티에서 튜토리얼을 제공하는 페이지가 링크되어 있습니다.
- Downloads : 익스프레션 커뮤니티에서  제품을 다운받을 수 있는 페이지가 링크되어 있습니다.
- Community News, Blogs, and Events : 익스프레션 스튜디오에 관련된 뉴스, 블로그, 이벤트 등이 게시된 페이지가 링크되어 있습니다.
- Gallery : 블렌드 사용자들이 제작한 샘플이나 소스파일 등이 업로드 되어 있습니다.
- Inside Expression : 익스프레션 사용자들의 인터뷰 페이지가 링크되어 있습니다.
- Expression Blend Team Blog : 익스프레션 블렌드 팀 블로그가 링크되어 있스빈다.
4.Welcome Screen : 블렌드를 실행했을 때의 시작 창이 나타납니다.
5.Keyboard Shortcuts : 키보드의 숏컷을 안내하는 유저가이드 페이지가 링크되어 있습니다.
6.Privacy Statement : 개인정보 취급 방침에 대한 안내 페이지가 링크되어 있습니다.
7.Customer Experince Improvement Program : 익스프레션 블렌드의 사용자 경험 개선 프로그램에 참여할 것인지를 묻는 창이 나타납니다. 1번째 항목을 선택하면 동의하게 되고 2번째 항목을 선택하면 동의하지 않게 됩니다.

8.Register Expression Blend : 익스프레션 블렌드의 제품 등록에 관련된 페이지가 링크되어 있습니다.
9.Enter product Key : 제품 키를 입력하는 창이 나타납니다.
10.Activate Product : 제품을 활성화 시킵니다.
11.About Microsoft Expression Blend : 익스프레션 블렌드의 제품 정보에 대한 설명창이 다음과 같이 나타납니다.

추가설명 - 9.Enter product Key

◎ Enter product Key 창

1.아직 제품 등록을 하지 않은 사용자가 제품 키를 입력할 수 있습니다.
2.제품 키를 입력하고 바로 활성화 할 것인지 체크 합니다.
3.이미 제품 등록을 한 사용자는 현재 라이선스를 유지하면 됩니다. 

블렌드의 작업환경을 사용자별로 저장하고 수정할 수 있으며 여러가지 패널들을 보이거나 숨길 수도 있습니다.

◈ Window 메뉴

1.Workspace : 작업환경에 대한 설정을 할 수 있습니다.

- Design : 블렌드에서 디자인 작업을 하기에 적합한 작업환경으로 변경됩니다.
- Animation : 블렌드에서 애니메이션 작업을 하기에 적합한 작업환경으로 변경됩니다.
- Workspace1,2 : 저장된 레이아웃 중 현재 활성화 되어있는 작업환경에 체크가 됩니다.
- Switch Active Workspace : [F6] 키를 누르면 작업환경이 순서대로 변경됩니다.
2.Reset Current Workspace : 변경된 작업환경을 초기화 합니다.
3.Save as New Workspace : 새로 변경된 작업환경에 이름을 정하여 저장합니다.
4.Manage Workspaces : 저장된 작업환경을 관리합니다.
5.Assets : 작업환경에서 에셋 패널을 보이게 할 것인지 체크합니다.
6.Data : 작업환경에서 데이터 패널을 보이게 할 것인지 체크합니다.
7.Objects and Timeline : 작업환경에서 오브젝트와 타임라인을 보이게 할 것인지 체크합니다.
8.Parts : 작업환경에서 파트 패널을 보이게 할 것인지 체크합니다.
9.Projects : 작업환경에서 프로젝트 패널을 보이게 할 것인지 체크합니다.
10.Properties : 작업환경에서 프로퍼티 패널을 보이게 할 것인지 체크합니다.
11.Resources : 작업환경에서 리소스 패널을 보이게 할 것인지 체크합니다.
12.Results : 작업환경에서 결과 패널을 보이게 할 것인지 체크합니다.
13.States : 작업환경에서 스테이트 패널을 보이게 할 것인지 체크합니다.
14.Tools : 작업환경에서 툴 패널을 보이게 할 것인지 체크합니다.
15.AutoHide All Panels : [Tab],[F4]키를 누르면 작업환경에서 모든 패널을 자동으로 가려줍니다.
16.현재 열려져 있는 문서의 목록이 나오며 선택한 항목이 활성화됩니다.

추가설명 - 3.Save as New Workspace / 4.Manage Workspaces

◎ Save as New Workspace 창

1.Name : 저장할 작업환경의 이름을 입력합니다.

◎ Manage Workspaces 창

1.Workspace List : 저장된 작업환경의 목록이 나타납니다.
2.Rename : 선택한 항목의 이름을 변경합니다.
3.Delete : 선택한 항목을 삭제합니다.

컨트롤과 유저컨트롤을 만들거나 리소스 브러시를 생성하는 메뉴들과 블렌드의 작업환경에 대한 옵션이 들어있습니다.

 
◈ Tools 메뉴

1.Make Into Control : 컨트롤 안에 선택한 개체를 넣어 만들 수 있습니다. 컨트롤의 스타일이 자동으로 생성됩니다.
2.Make Into UserControl : 유저컨트롤 안에 선택한 개체를 넣어 만들 수 있습니다.
3.Copy State To : 컨트롤의 스테이트를 다른 스테이트로 복사합니다.  복사할 수 있는 스테이트 목록에는 일반적인 상태인 커먼 스테이트에 속한 스테이트가 나오며 컨트롤에 따라 다를 수 있습니다.

4.Copy Selected Properties of State To : 컨트롤의 스테이트 중 선택된 속성을 다른 스테이트로 복사합니다. 애니메이션 값이 있는 속성을 선택해야만 메뉴가 활성화 됩니다. 역시 커먼 스테이트에 속한 스테이트가 나오며 컨트롤에 따라 다를 수 있습니다.

5.Make Into Part : 다음 그림은 콤보박스를 예로 든 것입니다. 선택한 위치에 따라 생성 가능한 목록이 활성화 되며 미리 정의된 파트의 이름을 갖고 있는 컨트롤이 생성됩니다. 미리 정의된 파트의 이름을 가진 컨트롤은 2개가 될 수 없습니다.

6.Clear Part Assignment : 컨트롤에 미리 정의된 이름을 초기화 합니다.
7.Make Brush Resource : 브러시 리소스를 생성합니다.

- Make ImageBrush Resource : 프로젝트에 이미지를 추가하고 이미지 컨트롤을 생성하면 이미지브러시 타입으로 리소스를 만들 수 있습니다.
- Make VideoBrush Resource : 프로젝트에 비디오를 추가하고 미디어 엘리먼트를 생성하면 비디오브러시 타입으로 리소스를 만들 수 있습니다.
8.Edit Brush Resource : 이 메뉴는 WPF 프로젝트에서만 활성화되므로 차후 설명하도록 하겠습니다.

9.Create Annotation : 디자인 모드에서 주석을 생성합니다.
10.Copy Annotations as Text : 주석에 있는 텍스트를 복사합니다. 사용자와 날짜 및 시간, 내용이 복사됩니다.
11.Delete Annotations : 디자인 모드에서 주석을 삭제합니다.
12.Font Manager : 설치된 폰트를 관리 할 수 있습니다.
13.Name Interactive Elements : 상호작용을 하는 버튼, 체크박스, 콤보박스 등과 같은 컨트롤들에 기본적인 이름을 부여합니다.

14.Options : 블렌드의 작업 환경을 설정합니다.

추가설명 - 1.Make Into Control / 2.Make Into UserControl / 12.Font Manager / 14.Options

 
◎ Make Into Control 창

1.Search : 컨트롤 타입을 입력하여 검색합니다.
2.Grid/List Mode : 컨트롤 목록을 그리드 모드와 리스트 모드로 볼 수 있습니다.
3.Controls Category : 카테고리별로 컨트롤을 볼 수 있습니다.
4.Control List : 컨트롤의 목록이 보입니다.
5.Name : 생성할 스타일의 이름을 지정합니다.
6.Apply to All : 스타일 이름을 따로 지정하지 않고 같은 타입의 컨트롤에 모두 적용시킵니다.
7.Application : 리소스를 애플리케이션 전체에 적용할 수 있도록 선언합니다.
8.This document : 해당 도큐먼트에 리소스를 선언합니다.
9.Resource dictionary : 리소스 딕셔너리에 리소스를 선언합니다.
10.New : 리소스 딕셔너리가 없을 경우 새로운 리소스 딕셔너리를 생성할 수 있습니다.

◎ Make Into UserControl 창
선택한 개체를 새로운 유저컨트롤 안에 넣어 만들게 되면 원래 도큐먼트에 적용되던 스타일이 깨질 수 있습니다.

1.Name : 생성할 유저컨트롤의 이름을 지정합니다.

◎ Font Manager 창

1.Search : 폰트를 검색합니다.
2.Font List : 애플리케이션에 포함시킬 폰트를 선택합니다.
3.Subset List : 애플리케이션에 포함시킬 폰트의 서브셋을 선택합니다.

◎ Options 창
＊Workspace

1.Theme : 익스프레션 블렌드의 테마를 설정할 수 있습니다. dark와 light 두 가지 버전이 있습니다.

＊Project

1.상호작용을 하는 엘리먼트를 생성할 때 자동으로 이름을 부여할 것인지를 체크합니다.
2.윈도우즈 익스플로러 혹은 비주얼 스튜디오에서 파일을 열거나 더블클릭하여 파일을 실행하는 등 익스프레션 블렌드 외부에서 파일을 열 때 알려줄 것인지를 체크합니다.
3.이벤트 핸들러 코드를 생성하고 수정하는데에 마이크로소프트 비주얼 스튜디오를 사용할 것인지를 체크합니다. 체크를 해제하면 익스프레션 블렌드에서 코드를 생성하고 수정할 수 있습니다.
4.어셈블리 로딩 정보를 디스크에 로그로 남길지 체크합니다.
5.이미지의 크기에 제한을 두어 초과하였을 경우 알려주게 되는데 이 때에 제한할 이미지의 크기를 설정합니다.

＊Code editor

1.Show settings for : XAML 편집기와 코드 편집기를 선택하여 세팅할 수 있습니다.
2.Font : 폰트의 타입을 설정합니다.
3.Size : 폰트의 크기를 설정합니다.
4.Tab size : 탭의 크기를 설정합니다.
5.Insert spaces : 태그가 완성될 때에 들여쓰기가 적용됩니다.
6.Keep tabs : 태그가 완성될 때에 탭이 유지됩니다.
7.Word wrap : 태그가 길어질 경우 자동 줄바꿈이 됩니다.
8.Reset to Default : 설정된 값들을 기본값으로 초기화합니다.

＊Units

1.Type units : 유닛의 타입을 포인트와 픽셀 중에 선택할 수 있습니다.

＊Artboard

1.Show snap grid : 스냅 그리드를 보여줄 것인지 체크합니다. 스냅이란 딱딱 끊어지는 느낌으로 개체가 이동하는 것을 말합니다.
2.Snap to gridlines : 그리드라인에 개체가 스냅 될 것인지 체크합니다.
3.Gridline spacing : 그리드라인의 간격을 설정합니다.
4.Snap to snaplines : 스냅라인에 개체가 스냅 될 것인지 체크합니다.  
5.Default margin : 스냅라인의 기본 마진값을 설정합니다.
6.Default padding : 스냅라인의 기본 패딩값을 설정합니다.
7.Use grid layout mode : 그리드 레이아웃 모드를 사용할 것인지 체크합니다. 그리드 레이아웃 모드일 경우에는 그리드를 사용할 때에 그리드의 간격이 어떤 상태로 설정되어 있는지 아이콘으로 나타냅니다.
8.Default background : 아트보드의 배경화면을 기본색으로 설정합니다.
9.Color : 아트보드의 배경화면에 다른 색상 값을 넣어 설정할 수 있습니다.
10.Zoom by using : 줌 사용을 어떤 것으로 할 지 Mouse wheel, Ctrl + mouse wheel, Alt + mouse wheel 중에서 선택할 수 있습니다.
11.Render effects : 효과를 표현할 지 체크합니다.
12.Zoom threshold : 줌의 한계점을 설정할 수 있습니다.

＊Documents

1.Default document view : 문서 보기를 디자인 뷰, 스플릿 뷰, XAML 뷰 중에 선택하여 볼 수 있습니다.

＊Annotations

1.아트보드에서 주석을 보여줄 것인지 체크합니다.
2.Author name : 주석을 다는 사람의 이름을 설정합니다.
3.Author initials : 주석을 다는 사람의 이니셜을 설정합니다.

＊SketchFlow

1.Show gridlines : 그리드라인을 보여줄 것인지 체크합니다.
2.Snap to gridlines : 그리드라인에 개체가 스냅 될 것인지 체크합니다.
3.Gridline spacing : 그리드라인의 간격을 설정합니다.
4.Default size for new screens : 새로 추가할 스크린의 크기를 설정합니다.
5.Default size for new Component screens : 새로 추가할 컴포넌트 스크린의 크기를 설정합니다.
6.스케치플로우 애니메이션의 썸네일을 생성합니다.