ZZANGMYON BLOG♡

레이아웃의 사전적 의미를 검색해 보면 "디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일, 또는 그 기술" 이라고 나옵니다. 책이나 신문, 잡지 등의 인쇄매체 외에 우리가 자주 접하는 웹사이트에도 레이아웃이 적용되어 있으며 게임, 플레이어, 프로그램 등과 같은 애플리케이션에서도 레이아웃은 꼭 필요한 작업입니다.

잘 만들어진 레이아웃은 사용자로 하여금 컨텐츠를 더욱 효과적으로 이해할 수 있도록 도와주고 때로는 새로운 경험을 제공하기도 합니다. 사용자를 배려하지 않은 레이아웃은 컨텐츠를 이해하는데 어려움을 주고 사용자를 떠나가게 하는 최악의 상황을 만들 수도 있습니다. 

우리가 애플리케이션을 제작하는 것은 우리의 디자인 감각만을 펼치는 예술을 하기 위해서가 아닙니다. 우리가 제공하려는 컨텐츠와 메세지를 잘 전달하고 사용자와 잘 소통하는 것이 첫번째 목적이라 할 수 있습니다. 물론 레이아웃 뿐만 아니라 사용자와의 상호작용, 디자인적인 측면, 기능적인 측면 등 다른 중요한 부분도 많지만 레이아웃은 애플리케이션을 실행하고 사용하는데에 가장 기본적이면서도 제일 중요한 부분입니다. 다음은 실버라이트로 구현된 사이트의 레이아웃 입니다.

<실버라이트 사이트의 레이아웃>

http://www.silveos.com/

http://live.clientui.com/

그러나 이 강좌에서는 사용자를 배려하여 레이아웃을 어떻게 잘 만들것인가를 학습하지는 않을 것입니다. 이렇게 중요한 레이아웃 이라는 것을 애플리케이션에 적용할 때에 기능적으로 어떻게 사용하는 지에 대하여 학습할 것입니다. 익스프레션 블렌드에는 레이아웃을 구성하기 위해 지원되는 여러가지 레이아웃 컨트롤이 들어있습니다. 이 레이아웃 컨트롤들은 각각 다른 속성을 가지고 있기 때문에 레이아웃이 어떤 기능을 하느냐에 맞추어 적절한 레이아웃 컨트롤을 사용해야 합니다.

이번 세션에서는 레이아웃을 구성하기 위해 지원되는 레이아웃 컨트롤에는 어떤 것들이 있는지 살펴보고 다양한 상황에 맞는 컨트롤 사용법에 대해서 학습하도록 하겠습니다.

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

◎ 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]을 조절하면 그리드 영역이 재분배 됩니다.

 

결과 패널의 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#으로 개체를 제어하게 되며 주로 개발자들이 접근하여 사용합니다.

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

◈ 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 : 선택한 항목을 삭제합니다.

이 메뉴에는 개체를 정렬하거나 패스를 병합하는 등의 기능과 컨트롤들의 스타일을 바꾸고 적용하는 메뉴들이 있습니다.

◈ Object 메뉴

1.Edit Text : 텍스트블록이나 텍스트박스와 같은 텍스트 관련 컨트롤의 텍스트를 수정할 수 있습니다.
2.Edit Control : 일반 컨트롤이 아닌 사용자가 생성한 유저컨트롤을 수정할 수 있습니다.
3.Order : 개체의 앞,뒤 쌓이는 정도를 나타내는 스택을 설정합니다.

- Bring to Front : 선택한 개체의 스택을 제일 앞으로 설정합니다.
- Bring Forward : 선택한 개체의 스택을 한단계 앞으로 설정합니다.
- Send to Back : 선택한 개체의 스택을 제일 뒤로 설정합니다.
- Send Backward : 선택한 개체의 스택을 한단계 뒤로 설정합니다.
4.Align : 다중 선택된 개체들을 정렬합니다. 하나의 개체만 선택할 경우 메뉴가 활성화 되지 않으며 제일 뒤에 놓인 개체가 정렬의 기준이 됩니다.

- Left Edges :  선택된 개체들이 제일 뒤에 놓인 개체의 왼쪽 가장자리에 맞추어 정렬됩니다.
- Horizontal Centers Edges : 선택된 개체들이 제일 뒤에 놓인 개체의 수평 중심선에 맞추어 정렬됩니다.
- Right Edges : 선택된 개체들이 제일 뒤에 놓인 개체의 오른쪽 가장자리에 맞추어 정렬됩니다.
- Top Edges : 선택된 개체들이 제일 뒤에 놓인 개체의 위쪽 가장자리에 맞추어 정렬됩니다.
- Vertical Centers Edges : 선택된 개체들이 제일 뒤에 놓인 개체의 수직 중심선에 맞추어 정렬됩니다.
- Bottom Edges : 선택된 개체들이 제일 뒤에 놓인 개체의 아래쪽 가장자리에 맞추어 정렬됩니다.
5.Auto Size : 선택된 개체의 사이즈를 자동으로 설정합니다.

- Width : 개체의 가로 사이즈를 자동으로 설정합니다.
- Height : 개체의 세로 사이즈를 자동으로 설정합니다.
- Both : 개체의 가로,세로 사이즈 양쪽 모두 자동으로 설정합니다.
- Fill : 개체의 가로,세로 사이즈를 부모 레이아웃 사이즈만큼 채우도록 설정합니다.
6.Make Same : 다중 선택된 개체들의 사이즈를 같게 만들어줍니다. 하나의 개체만 선택할 경우 메뉴가 활성화 되지 않으며 제일 큰 개체를 기준으로 사이즈가 설정됩니다.

- Width : 선택된 개체들이 제일 큰 개체의 가로 사이즈와 같아집니다.
- Height : 선택된 개체들이 제일 큰 개체의 세로 사이즈와 같아집니다.
- Size : 선택된 개체들이 제일 큰 개체의 가로,세로 사이즈와 같아집니다.
7.Filp : 선택한 개체를 뒤집습니다.

- Horizontal : 선택한 개체가 수평 방향으로 좌,우가 뒤집히게 됩니다.
- Vertical : 선택한 개체가 수직 방향으로 상,하가 뒤집히게 됩니다.
8.Group : 두 개 이상의 개체를 선택하여 그룹화 합니다. 단축키 [Ctrl]+[G]로 그룹화하게 되며 레이아웃은 자동으로 그리드가 됩니다.
9.Group Into : 두 개 이상의 개체를 선택하여 그룹화하며 그룹화 하는 레이아웃을 선택할 수 있습니다.

- Grid : 선택된 개체들이 그리드 타입의 레이아웃으로 그룹화됩니다.
- StackPanel : 선택된 개체들이 스택패널 타입의 레이아웃으로 그룹화됩니다.
- Canvas : 선택된 개체들이 캔버스 타입의 레이아웃으로 그룹화됩니다.
- ScrollViewer : 선택된 개체들이 스크롤뷰어 타입의 레이아웃으로 그룹화됩니다. 스크롤뷰어는 자식 개체를 1개밖에 가질 수 없기 때문에 선택된 개체들은 그리드로 한번 감싸지게 됩니다.
- Border : 선택된 개체들이 보더 타입의 레이아웃으로 그룹화됩니다. 보더타입 역시 자식 개체를 1개밖에 가질 수 없기 때문에 선택된 개체들은 그리드로 한번 감싸지게 됩니다.
- Viewbox : 선택된 개체들이 뷰박스 타입의 레이아웃으로 그룹화됩니다.
10.Ungroup : 그룹화된 개체들을 그룹 해제합니다.
11.Pin Active Container : 활성화된 컨테이너를 표시합니다.
12.Combine : 두 개 이상의 패스나 도형 컨트롤을 결합하거나 분리합니다. 스택이 제일 앞에 놓인 개체가 기준이 됩니다.

- Unite : 선택된 패스나 도형 컨트롤을 병합합니다.
- Divide : 선택된 패스나 도형 컨트롤을 분리합니다.
- Intersect : 패스나 도형 컨트롤의 겹쳐진 부분만 남고 나머지 부분은 삭제됩니다.
- Subtract : 스택이 제일 앞에 놓인 개체에서 뒤에 있는 개체들의 영역이 삭제됩니다. 
- Exclude  Overlap : 다른 개체와 겹쳐지는 부분이 삭제됩니다.
13.Path : 클리핑 패스를 만들거나 합성합니다.
- Convert to Path : 편집 가능한 텍스트나 도형 컨트롤을 패스로 변환합니다.
- Make Layout Path : 패스 리스트 박스를 생성합니다. 패스의 모양대로 개체를 나열할 수 있습니다.
- Make Clipping Path : 클리핑 패스를 생성합니다. 두 개의 개체를 선택하여 클리핑 패스를 하는 순간 스택이 뒤에 있는 개체가 를 기준으로 패스가 하나만 남게 되며 앞에 있는 개체와 겹쳐졌던 영역만큼만 보여지게 됩니다. 레이아웃 패널을 사용할 경우 레이아웃에 개체를 여러개 넣어도 클리핑 된 영역만 보입니다.
- Release Clipping Path : 클리핑 패스가 해제됩니다.
- Make Compound Path : 두개 이상의 패스가 겹쳐지는 영역이 가려지며 합쳐집니다.
- Release Compound Path : 컴파운드 패스가 해제됩니다.
14.Edit Style : 컨트롤의 스타일을 변경합니다.

- Edit Current : 컨트롤에 적용되어 있는 스타일을 변경합니다.
- Edit a Copy : 실버라이트에서 지원하는 컨트롤의 기본 스타일을 복사하여 생성합니다.
- Create Empty : 비어있는 스타일을 생성합니다.
- Apply Resource : 미리 만들어진 리소스 중 하나를 선택하여 컨트롤에 적용합니다.
15.Edit Additional Styles : 복잡하게 구성된 컨트롤의 경우 추가로 스타일을 변경할 수 있습니다. 다음 그림은 달력 컨트롤을 예로 든 것입니다. 하위 메뉴는 컨트롤에 따라 달라질 수 있으며 스타일을 수정하거나 복사하는 등의 기능은 [Edit Style]과 같습니다.

16.Edit Template : 컨트롤의 템플릿을 변경합니다.

- Edit Current : 컨트롤에 적용되어 있는 템플릿을 변경합니다.
- Edit a Copy : 실버라이트에서 지원하는 컨트롤의 기본 템플릿을 복사하여 생성합니다.
- Create Empty : 비어있는 템플릿을 생성합니다.
- Apply Resource : 미리 만들어진 리소스 중 하나를 선택하여 컨트롤에 적용합니다.
17.Edit Additional Templates : 스타일과 마찬가지로 복잡하게 복잡하게 구성된 컨트롤의 경우 추가로 템플릿을 변경할 수 있습니다. 역시 달력 컨트롤을 예로 들었습니다. 템플릿을 수정하거나 복사하는 등의 기능은 [Edit Template]과 같습니다.

18.Lock : 개체를 잠그거나 해제합니다.

- Lock Selection : 선택한 개체를 잠급니다.
- Lock All : 모든 개체를 잠급니다.
- Unlock All : 모든 개체를 잠금 해제합니다.
19.Visibility : 개체를 보이지 않게 하거나 보이게 합니다. 그러나 이것은 단순히 블렌드의 뷰에서만 보이지 않는 것 뿐이지 실제 애플리케이션의 실행에는 영향을 주지 않습니다.

- Show Selection : 선택한 개체를 보이게 합니다.
- Show All : 모든 개체를 보이게 합니다.
- Hide Selection : 선택한 개체를 보이지 않게 합니다.
- Hide All : 모든 개체를 보이지 않게 합니다.

14.Edit Style과 16.Edit Template의 그림과 설명에서는 차이가 없어 보이지만 스타일과 템플릿에는 차이가 있습니다. 이 부분에 대해서는 추후에 다루도록 하겠습니다.

애플리케이션에 직접적인 영향을 주기보다는 도큐먼트 뷰를 어떻게 할 것인가, 컨테이너의 활성화 표시를 할 것인가 등 블렌드의 작업환경 설정에 가까운 메뉴입니다.

◈ View 메뉴

1.Active Document View : 문서의 뷰 모드를 선택할 수 있습니다.

- Design View : 문서를 디자인 모드로 봅니다.
- Split View : 문서를 디자인 모드와 XAML 모드로 나누어 봅니다.
- XAML View : 문서를 XAML 모드로 봅니다.
- Switch Active Document View F11 : F11 키를 누르면 Design View, Split View, XAML View가 순서대로 보여집니다.
2.Split View Orientation : Split 뷰 모드에서 창의 정렬 방향을 설정합니다.

- Arrange Panes Horizontally : 창의 정렬 방향을 수평으로 설정합니다.
- Arrange Panes Vertically : 창의 정렬 방향을 수직으로 설정합니다.
- Swap Design and XAML Panes : 디자인 창과 XAML창의 위치를 바꾸어줍니다.
3.Zoom In : 아트보드 영역을 확대합니다.
4.Zoom Out : 아트보드 영역을 축소합니다.
5.Fit All : 아트보드 영역의 크기가 스크린 사이즈에 맞추어 보여집니다.
6.Fit Selection : 선택된 개체의 크기가 스크린 사이즈에 맞추어 보여집니다.
7.Actual Size : 아트보드 영역의 크기가 100%에 맞추어 보여집니다.
8.Show Handles : 선택한 개체의 방향과 사이즈 등을 조절할수 있는 핸들이 보여집니다.
9.Show Selection Preview : 선택하려는 개체의 외곽선을 표시합니다.
10.Show Active Container : 활성화된 컨테이너의 외곽선을 표시합니다.
11.Show Alignment Adorners : 정렬 속성을 가지고 있는 레이아웃의 자식 개체일 경우 Top,Left,Right,Bottom의 수치를 표시합니다.
12.Show Object Boundaries : 선택한 개체 외의 같은 레이아웃에 들어있는 개체의 외곽선을 표시합니다.
13.Show Annotations : 디자인 뷰에서 주석을 보여줍니다.
14.Apply projections : 프로젝션 값이 적용된 상태를 보여줍니다.