Blend for Visual Studio 강의 - Blend 화면 구성(상단 메뉴-2 (개체))

이전 포스트의 화면의 상단 구성에 대한 이야기를 이어서 마저 할까 합니다. 대부분 프로그램을 실행하면 그냥 그때그때 필요한 것을 찾을 뿐이지 심사숙고해서 보게 되지는 않지요? 저 역시도 그렇습니다만 그래도 Blend 강의를 하면서 여러가지 메뉴바에 대한 이해도 없이 넘어갈 수 없어서 간단하게 보고 넘어가는 것으로 이해해주세요.

 

이전 포스트는 아래 링크로 볼 수 있습니다.

시리즈 글

 

2015/03/14 - [Programs/Blend] - Microsoft Visual Studio 와 Blend 의 WPF

2015/03/15 - [Programs/Blend] - Blend for Visual Studio 강의 - Blend 다운로드

2015/03/15 - [Programs/Blend] - Blend for Visual Studio 강의 - Blend 프로젝트 생성

2015/03/17 - [Programs/Blend] - Blend for Visual Studio 강의 - Blend 화면 구성(상단 메뉴-1)

 

 

 

 

 

상단의 메뉴는 위와 같이 구성되어 있습니다. 이번에는 개체, 프로젝트의 메뉴에 대하여 알아보도록 하겠습니다.

 

 

 

 

 

 

개체

텍스트 편집(Edit Text)

 

개체 메뉴는 기존의 다른 메뉴보다 양이 좀 있습니다. WPF 내에 삽입되는 모든 UI적인 요소를 갖는 각각의 요소를 총칭하여 개체라고 표현합니다. 영어로는 Object 정도가 되겠습니다. 그렇기 때문에 관계된 여러가지 기능들이 모여있으니 복잡할 수 밖에 없겠죠. 우선 텍스트 편집부터 살펴볼까요?

 

텍스트 편집은 개체가 텍스트 입력을 할 수 있는 개체일 때 활성화가 됩니다. 위에서는 텍스트 편집에 비활성화 상태인데요. 기존 생성한 프로젝트에서 허브컨트롤 상단의 헤더를 눌러 활성화시킨 후 다시 개체를 열어보곘습니다.

 

 

 

 

아래 'application name' 을 클릭하여 각 모서리에 핸들이 나오도록 활성화한 후 상단을 보니, 텍스트 편집이 가능한 것을 볼 수가 있습니다. 즉, Textblock, Textbox 등의 속성을 상속받은 개체류가 해당 되겠습니다. 그러나 대부분 텍스트에 클릭을 해놓고 잠시 대기하거나 우측 Text 속성을 바꾸어 사용하는 경우, 'F2' 단축키를 이용하는 경우가 많으므로 기능만 이해해 둡니다.

컨트롤 편집(Edit Object)

 

컨트롤 편집은 사용자가 직접 만들어놓은 사용자 컨트롤을 편집할 수 있도록 지원하는 기능입니다. 가볍게 예를 들어보자면, 기존 WPF에서 제공하는 버튼을 사용하지 않고 난 더 이쁜 버튼을 내 마음대로 만들고 싶다!! 라고 하여서 버튼을 만들고 페이지에 삽입하였다면, 이 컨트롤 편집 기능을 이용하여 현재 페이지에서 해당 컨트롤의 편집으로 바로 화면 전환을 할 수 있습니다.

 

간단히 예를 들어보겠습니다.

 

 

 

 

윈도우 앱의 프로젝트(윈도우 폰 프로젝트가 아님)에서 마우스 우측 버튼을 누르고, 새 항목 추가를 누릅니다.

 

 

 

 

새 항목을 위한 선택 박스가 뜨면 사용자 정의 컨트롤을 선택합니다. 그리고는 하단에 해당 컨트롤이 가질 명칭을 적어주세요. 저는 보여주기 위한 테스트용으로 아무런 기능이 없는 컨트롤을 만들어볼 예정이기 때문에 말 그대로 TestControl.xaml 이라는 이름을 반영해주었습니다.

 

xaml 은 xml과 같은 '재믈' 코드로 마크업 언어로 이루어진 디자인단이며 이렇게 생성하면, 디자인단인 TestControl.xaml 과 비하인드단인 TextControl.cs가 같이 붙어서 생성됩니다.

 

 

 

 

생성된 컨트롤에는 박스, 동그라미, 선을 그어서 아무런 기능이 없는 단순 컨트롤을 만들었습니다. 만들어진 컨트롤을 삽입하기 위해서는 XAML 코드 내에 using 구성을 해주어야 하는데요. 일단 어려우므로 자동으로 잡을 수 있도록 'F5'를 눌러 컴파일과 실행을 한번 실행해봅니다.

(기존 허브앱으로 구동되기 때문에 컨텐츠가 비어있는 기본 허브앱 텍스트가 보일겁니다. 그리고는 닫습니다. 마우스 우측 위에 놓으면 X버튼이 나옵니다. X버튼을 눌러도 되고, 상단에 놓을경우 상단탭이 활성화 되고 그 상단탭을 클릭한 채로 드래그해서 화면 아래까지 날려버리는 방법이 있습니다. 터치라면 위에서 아래로 화면을 스와이프 해서 날리면 되겠습니다)

 

이렇게 하면 좌측의 도구에서 지금 만든 컨트롤을 앱 내에 가져다가 붙여볼 수 있습니다.

 

 

 

 

 

HubPage.xaml 을 더블클릭하여 화면에 페이지를 띄우고, >>를 눌러 test를 검색하면 조금 전 만든 TestControl이 검색됩니다. 해당 컨트롤을 선택하면 좌측 파란색 아이콘으로 선택됩니다. 해당 아이콘을 더블 클릭하면 HubPage.xaml에 컨트롤이 짠~ 하고 삽입되는 것을 확인할 수 있습니다.

 

 

 

 

위와 같이 컨트롤 위에 조금 전 만든 컨트롤이 삽입 된 것을 볼 수 있습니다. 그럼 해당 컨트롤을 클릭하여 핸들이 나오도록 활성화 시키고 상단을 볼면 '컨트롤 편집'이 활성화 된 것을 볼 수 있으며, '컨트롤 편집' 버튼을 누르면 좌측의 개체 및 타임라인의 탭 내의 항목이 좀전에 만들었던 사각형, 선, 동그라미를 그려넣었던 컨트롤 편집화면으로 바로 점프하는 것을 알 수 있습니다.

 

 

 

 

위에 첨부된 그람과 같이 바로 화면에서 현재 적용된 컨트롤을 페이지 내에서 직접 편집할 수 있으니, 보다 더 쉽게 페이지와 디자인이 어울리도록 편집할 수 있습니다.

플라이아웃 편집(Edit Flyout)

플라이아웃이란 어떠한 개체를 마우스 또는 터치 모드로 선택하였을 때, 해당 개체 상하좌우의 위치에 추가되는 공간을 보여줍니다. 예를들면 어떠한 버튼을 눌렀을 경우, 해당 기능이 중요한 정보에 대하여 수정을 가하거나 삭제를 하는 경우 기능이 바로 동작하지 않고, 추가 레이아웃이 나오면서 현재 행동에 대한 주의를 다시 한번 환기시키면서 '확인'과 '취소'를 재요구 하는 상황 등에 사용됩니다. 이러한 플라이아웃이 개체 내부에 존재 할 경우라면 이 편집 버튼으로 해당 개체 내의 플라이아웃을 사용할 수 있습니다.

순서 지정

개체의 경우 일러트스레이터나 포토샵, CAD 등을 사용해 본 디자이너라면 알고 있을만한 레이어와 같이 일정한 규칙과 순서에 의하여 구성되어 있습니다. 대부분의 개체는 하단에 위치하여 있는 개체가 상단에 위치하여 있는 개체보다 화면상 위에 존재합니다.

위에 사용했던 개체를 다시 한번 예를 들어 봅시다. 화살표가 나타난 순서대로 위에 위치합니다. 즉, Path가 최상단에, Ellipse가 그 다음, Rectangle이 마지막에 위치하고 있는 것을 볼 수 있습니다. Grid의 경우 이러한 여러가지 컨트롤을 감싸안는 레이아웃 컨트롤으로 향후 강의에서 자세하게 다룰 예정입니다.

이러한 개체들의 순서를 상단 메뉴에서 순서 지정을 해줄 수 있으며, 이 순서 지정을 통해 "개체 및 타임라인" 탭 내에서 각 유닛의 컨트롤 위치가 조정됩니다. 대부분의 디자이너의 경우, 이 기능은 상단의 메뉴를 사용하지 않으며 대부분 "개체 및 타임라인"의 개체를 선택하여 위치를 직접 마우스 클릭 + 드레그를 통하여 위치를 조정하는 것이 훨씬 간편하므로 드레그를 주로 이용합니다.

맞추기

추기는 대부분 디자인 툴 또는 파워포인트에 있는 정렬 기능입니다. 하단의 모습 처럼 여러가지 개체를 선택하고 상단의 여러가지 정렬을 적용하면 적용된 정렬 상태와 같도록 배치가 됩니다. 여러가지의 텍스트 블록을 배치하거나 컨트롤 들을 위치시킬 때 편리하게 사용할 수 있는 기능입니다. 대부분의 디자인 툴에 있는 정렬 방법이므로 더 자세한 설명은 생략합니다.

레이아웃

레이아웃은 각종 화면에 배치된 일반 개체(컨트롤, 오브젝트 들)와 레이아웃 개체의 배치, 정렬 등을 설정할 수 있는 메뉴입니다. 레이아웃은 HTML과 같이 XAML에서도 전체 화면 배치에 영향을 주는 아주 중요한 항목으로 향후 따로 분리하여 레이아웃 컨트롤에 대한 강의 때 설명합니다. 지금은 그냥 "아, 대충 이런 역할을 할 것 같구나" 정도만 기억하시면 됩니다.

같게 만들기

다중 선택된 컨트롤의 넓이, 높이, 전체크기를 동일한 크기로 맞추도록 도와주는 메뉴입니다. 동일한 크기의 컨트롤이 여러개 배치될 때 이 메뉴와 레이아웃, 맞추기 메뉴를 사용하면 보다 레이아웃 배치가 빨리 끝나게 될 것입니다.

대칭 이동

선택된 컨트롤을 상하 또는 좌우를 대칭시키는 기능입니다. 이 또한 다른 디자인 툴에 존재하는 기본적인 기능이므로 설명을 생략합니다.

그룹으로 묶기 / 그룹 해제

여러가지 컨트롤을 상단에서 언급한 레이아웃 컨트롤 위에 다중으로 배치하여 레이아웃 컨트롤 내부에 종속되도록(즉, 레이아웃 컨트롤을 수단으로 하여 하위 컨트롤들이 그룹화 됨) 묶거나 해제합니다. 다양한 컨트롤(Grid, StackPanel, ScrollViewer, Border 등)들이 있으며, 레이아웃은 매우 중요하기에 차후에 따로 포스팅합니다.

활성 컨테이너 고정

컨트롤을 선택하고 활성 컨테이너를 고정할 경우 화면에 해당 컨트롤이 고정됩니다. 그렇기 때문에 더 이상 화면에서 마우스로 컨트롤을 이동시킬 수 없습니다. 복잡한 디자인을 XAML로 구현할 경우 여러가지 Object가 겹치면서 컨트롤하기 매우 짜증나고 귀찮을 때가 있습니다. 이럴 때 일부 컨테이너를 고정시키므로서 작업 능률을 향상시켜주는 기능입니다...만... 저는 자주 안씁니다. 그다지 필요가 없더라구요. 

결합 / 패스

Path(점, 선)로 구성된 오브젝트를 합집합, 차집합, 부분집합하는 등의 역할과 Path가 아닌 도형을 Path로 전환하는 역할 및 다중 Path를 묶어주는 역할 등을 합니다. 이는 각 개체를 다루는 디자인적인 부분으로 향후 좀 더 자세히 다루어 보겠습니다. 디자인 툴을 사용해보신 디자이너분들께서는 딱 보시면 무엇인지 알 수 있는 기능입니다.

디자인타임 DataContext 설정

블랜드의 존재 이유기도 한 꽃인 기능입니다. 디자이너는 사실상 기본 레이아웃과 디자인을 잡을 수는 있어도 내부 컨텐츠가 담겼을 때의 모습을 보기 위해서는 항상 프로그래머와 함께 작업을 하며 확인해야 하는 문제가 발생했습니다. 그러나 이 기능을 통하여 개발자 없이도 디자이너는 가상의 데이터를 현재 디자인된 컨트롤에 어렵지 않게 직접 붙여봄으로서 디자인과 데이터가 어떻게 반영되고 나타나는지 확인할 수 있습니다.

즉, 디자이너는 가상의 데이터를 통해 작업을 하고 향후 개발자가 직접 해당 데이터를 비하인드(cs)단에서 붙임으로서 업무의 영역을 분리시켜주는 역할을 합니다. 가벼운 메뉴 설명에서 더 이상의 설명을 하기엔 지면이 모자라니 향후 데이터를 물리는 영역에서 살펴보겠습니다.

스타일 편집/추가 스타일 편집/템플릿 편집/추가 템플릿 편집/GroupStyle 편집

각종 컨트롤은 각종 기본 컨트롤의 디자인 데이터 갖고 있는 스타일과 이러한 디자인이 적용되어 구성되는 레이아웃부로 구성됩니다. 스타일 편집/추가 스타일 편집은 각종 컨트롤이 디자인의 방향성에 맞춰 속성을 가질 수 있도록 할 수 있습니다. 윈도우 스토어/윈도우 폰 스토어용 객체는 기본적으로 윈도우가 제공해주는 여러가지 스타일이 존재합니다. 이러한 스타일에 근본적인 수정을 할 수 있다면(예를들면 컨트롤의 배경색, 테두리의 색깔 등) 디자이너는 다양한 디자인을 시도함에 있어 반복되는 작업을 할 필요 없이 적용만 시켜주면 될 것입니다.

템플릿 편집/추가 템플릿 편집/그룹스타일 편집의 경우에는 이러한 스타일이 적용된 각종 컨트롤들이 일정한 규칙성에 의거하여 배치되지만 데이터만 달라질 경우 레이아웃 상의 공통점만 뽑아서 템플릿화 시켜놓습니다.

스타일과 템플릿은 디자인의 재사용성을 극대화시켜 반복적인 디자인 작업을 줄여주기 위하여 디자인에 프로그램의 상속과 같은 개념을 덧붙여놓았기 때문에 기존 디자인 툴에 익숙해져있는 디자이너는 어렵고 생고하실수도 있습니다. 간략히 말하면, 템플릿화 시켜놓은 레이아웃에 스타일을 입히고, 프로그래머가 데이터를 물린다면 보다 빠른 시스템 구성이 가능하게 됩니다. 더 쉽게 말해보자면 '워드 프로세서'에 편지 봉투와 같은 크기로 용지 설정을 하고, 우표 부분, 보내는사람, 받는 사람등의 레이아웃과 디자인을 구성한 후 받는사람, 보내는사람, 주소 등의 데이터를 밀어넣으면서 인쇄를 하면 자동으로 여러사람에게 갈 수 있는 편지봉투가 인쇄되는 것과 아주 유사하다고 할 수 있겠네요.

꽤나 개념도 어렵고 사용도 어려운 부분이므로 천천히 배워보도록 하지요.

잠금

컨트롤을 잠그거나 잠금을 풀 수 있도록 합니다. 즉, 컨트롤을 수정할 수 없는 상태로 전환하여 다른 작업을 하여도 컨트롤에 변화가 생기지 않습니다. 다양한 컨트롤이 겹쳐있는 경우 등에서 컨트롤이 잠겨있지 않는 경우 마우스 클릭 등을 통해 오동작을 하고 전체적인 작업 속도가 느려지게 되는 것들을 방지하게 해주며, 실수를 통한 디자인의 변경 등을 막아줍니다. 이 잠금 기능은 블랜드 내에서만 동작합니다.

표시 유형

선택된 컨트롤을 현재 디자인 화면에서 보이거나 보이지 않도록 설정합니다. 단, 이 기능은 현재 디자인하고 있는 화면에만 적용되며 실제 프로그램 실행과는 무관합니다. 실제 프로그램 내에서 보이지 않도록 하려면 각 컨트롤의 VIsibility 속성을 수정해주어야 합니다. 이 표시 유형의 경우에는 '실제로는 숨어있지 않지만, 디자인 할 때 불편하니 해당 컨트롤에 숨김을 할 경우 디자인하는 내 눈에서만 감춰라' 라고 이해하시면 됩니다.

이상으로 Blend for Visual Studio(블랜드)의 상단 메뉴 중 개체에 대한 설명을 마칩니다. 워낙 다양한 기능이 삽입되어있는 메뉴이다보니 설명이 길어졌습니다. 기타 컨트롤은 다음 포스팅을 참조하시면 됩니다.