STEP 02. 기본 레이아웃

앞에서 블렌드로 디자인을 작업을 할 때 해당 디자인의 표현에 가장 적절한지, 프로젝트의 기능 구현에 부합하는지, 최적화되어 있는지를 고려해야 한다고 했습니다. 그러려면 먼저 디자인과 프로젝트의 구조를 분석 파악한 다음 거기에 맞는 레이아웃을 설계해야 할 것입니다. 그러기 위해서는 각각의 레이아웃 컨트롤들은 어떠한 특성이 있는지, 차이점이 무엇인지 알아야 합니다. 지금부터 실버라이트 기본 레이아웃 컨트롤에 대해서 알아보겠습니다.

● 캔버스 컨트롤
캔버스 컨트롤은 여러 오브젝트를 묶어 그룹화할 때 자주 사용합니다. 그것으로 캔버스 컨트롤은 내부에 다른 요소들을 포함할 수 있다는 것을 알 수 있습니다. 그러한 속성을 종속성 속성(Dependency Property)이라 하고 종속 관계를 부모 객체, 자식 객체로 설명하고 있습니다. 캔버스 컨트롤은 내부에 포함된 자식 객체를 왼쪽(Left)으로부터의 간격과 상단(Top)으로부터의 간격으로 위치를 정합니다. 또한 자식 객체들의 순서(ZIndex)를 정해줄 수 있습니다.

다음은 캔버스를 그려놓은 디자인 뷰와 캔버스 컨트롤 디자인뷰의 XAML 코드입니다. 캔버스 컨트롤이 가진 속성을 한눈에 확인할 수 있습니다.

캔버스 컨트롤 디자인뷰    



캔버스 컨트롤 xaml 코드


1. Background : 배경색
2. Height, Width : 높이, 넓이
3. Canvas.Left, Canvas.Top : 위치값
4. ZIndex : 순서값


[따라하기] 캔버스 컨트롤의 속성 알기

간단한 예제를 통해서 캔버스 그룹화와 컨트롤의 종속성 속성을 알아보겠습니다. 또한 위치 속성(Left, Top), 순서 속성(ZIndex)을 알아보겠습니다.

완성 파일 : Part02/S04_캔버스컨트롤속성

01. 블랜드를 실행하고 [File] -[New Project] 메뉴를 실행하여 실버라이트 애플리케이션 프로젝트를 생성합니다. 툴 박스에서 [Ellipse] 을 선택한 후 아트보드에 드래그하여 원을 그리고 [Properties]-[Brushes] 패널에서 [Fill]의 색상을 설정 합니다.



02. 툴 박스에서 [Se
lection] 툴을 선택한 후 원을 <Alt>+<shift>를 누른 채 드래그하여 다음과 같이 세 개를 복사하고 각각 색상을 설정합니다. 네 개의 원을 드래그하여 모두 선택한 후 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴에서 [Group Into]–[Canvas]를 클릭하여 그룹화합니다.



03. 캔버스 영역을 보기 위해서 [Properties]-[Brushes] 패널에서 [Solid color brushes] 버튼을 클릭하여
[Backgroud]의 색상을 검은색으로 설정합니다.



<TIP> 캔버스 컨트롤을 드래그하면 캔버스에 속해있는 원들이 같이 이동합니다.

04. <shift>를 누른 채 4개의 원 오브젝트들을 클릭하여 모두 선택한 다음 [Properties]-[Layout] 패널에서 [Width] ‘170’, [Height] ‘170’으로 설정하여 원의 크기를 키
니다. 커진 원들이 캔버스 그룹을 벗어났습니다.



<TIP> 그린 원의 [Width]와 [Height]가 170보다 더 크다면 그보다 큰 숫자를 입력하여 원의 크기를 기웁니다.

05. 캔버스의 빈 공간을 클릭하여 선택을 해제한 후 캔버스 그룹을 벗어난 원 오브젝트들을 하나씩 드래그하여 캔버스 안쪽으로 위치를 이동합니다. 원 오브젝트를 이동함에 따라 Left와 Top의 속성값이 변하는 것을 확인할 수 있습니다.



06. 왼쪽 상단 원 오브젝트를 클릭하여 선택한 후 [Properties]-[Layout] 패널의 [ZIndex] 값을 ‘1’로 설정합니다. 레이어 상에서 밑에서 두 번째로 위치한 원이 가장 위로 올라왔습니다.



<TIP> [ZIndex]는 레이어 순서에 상관없이 계층의 순서를 정합니다.

NOTE

4개의 원이 캔버스 컨트롤로 그룹이 되었습니다. 이때 캔버스 컨트롤은 부모 개체가 되고 4개의 원들은 자식 개체가 되어서 부모 개체에 종속되었습니다. 이런 방법으로 상위 레이아웃 컨트롤은 부모 개체가 되어서 하위의 자식 개체들을 감싸고, 자식 개체는 그 하위 개체의 부모 개체가 되어서 전체적인 레이아웃을 구성하게 됩니다.

Posted by 도온