[Expression Blend 강좌] GridSplitter Customize

안녕하세요, 이번시간에는 컨트롤 중에 GridSplitter에 대해 Customize를 해보도록 하겠습니다.
GridSplitter의 역할은 Grid의 행 사이와 열 사이를 임의대로 사이즈를 줄이고 늘일 수 있도록 하는 컨트롤을 나타냅니다.
예를 들면 드림위버에서 프레임과 프레임의 사이즈를 줄이는 것 처럼 하는 역할입니다.

빨간색의 Splitter를 이용하여 왼쪽으로 옮겼을 때

빨간색의 Splitter를 이용하여 오른쪽으로 옮겼을 때

다음과 같은 모습입니다.
지금 보시는 것과 같이 빨간색 모양의 Splitter는 그냥 사각형 모양처럼 보이기 때문에 이것을 Editing하려 합니다.

1) 먼저 새 파일을 엽니다.
막 바로 연 Window1의 아트보드에서 기본적으로 Grid로 되어있는 LayoutRoot에 그리드 선을 추가합니다.
추가 하는 방법은 그리드 레이아웃 레이어를 클릭한 상태에서 Top과 Left에 마우스를 갖다대면 추가할 수 있도록 가이드를 해줍니다. 이렇게 해서 Column에 그리드 선을 두줄 그어 Column을 3칸으로 나누어 줍니다.

그리드 상단에 마우스를 갖다대었을 때의 모습

그리드 선을 추가하여 Column을 세칸으로 만든 모습

2) GridSplitter를 Column 두번째에 삽입합니다. Asset Library(자산 라이브러리) 나 자산 라이브러리
바로 상단에 자리잡고 있는 자주쓰는 컨트롤 툴에서 찾을 수 있습니다.

GridSplitter를 Column 1에 설정 해주시고 마진값 Width와 Height값을 Auto로 일단 설정해 줍니다.

3) 컨트롤을 커스터마이징 하기 위해 오른쪽 클릭 > 컨트롤 구성요소 편집 > 템플릿 복사를 합니다.
그리고 컨트롤에 이름을 설정한 후 확인버튼을 누릅니다.

4) 지금 아래 그림과 같이 Splitter 컨트롤을 구성하는 템플릿 안으로 들어왔습니다.
그런데 생각보다 Splitter를 구성하는 요소가 많지 않다는 걸 확인 할 수 있습니다. Splitter는 Border하나로 이루어졌네요.

Border패널은 아직 강좌를 못드렸지만, Border는 자식요소를 한가지 밖에 가질 수 없습니다. 그래서 사각형 하나만 넣을 것이 아니라면 Border패널은 버려주고 여러개의 자식요소를 넣을 수 있는 레이아웃 패널로 넣어야 좋을 것 같습니다.

5) 그래서 과감하게 삭제해 주시고 여러개의 자식을 넣을 수 있으면서 사이즈에 유연하게 대처할 수 있는 Grid를 넣어보도록 하겠습니다.

6) 다음은 Splitter의 모양을 꾸며주도록 하겠습니다. Splitter의 역할대로 좌우, 상하의 사이즈를 조절할 수 있는 모습으로.
그려보도록 하겠습니다. 지금 하고 있는 것은 좌우를 조절할 수 있기 때문에 양쪽에 화살표를 넣어보도록 하겠습니다.
Grid안에 Rectangle을 하나 넣고, 오른쪽 클릭 > 패스 > 패스로 변환 하여 사각형의 모양을 다른 모양으로 변경해보겠습니다.

7) 패스로 변환해 준 사각형을 직접선택이라는 화살표를 이용하여 한쪽 꼭지점만 클릭해 준 후 잡아당겨줍니다.
그럼 뭔가 화살표 스러운 모양이 나오지요? 아니면 꼭지점을 클릭하고 삭제해 줘도 삼각형이 되면서 화살표 모양이 됩니다.

하얀색 커서가 직접선택 툴입니다. 단축키는 A입니다. 직접선택으로 한 꼭지점만 클릭해줍니다.

안쪽으로 잡아당겨주면 화살표 모양처럼 만들어집니다.

8) 화살표를 다음과 같이 45도 돌려주고 사이즈도 지정해 주어 한 가운데에 배치시킵니다.
(밑의 그림 참조 : Width/Height/Margin/Alignment)
그리고 왼쪽만 움직이는 것이 아니라 오른쪽도 움직일 수 있기 때문에 화살표를 하나 더 복사하여 다음과 같이 설정해 줍니다.
좌우 대칭은 변형에서 설정해 줄 수 있습니다. (밑의 그림 참조 : Width/Height/Margin/Alignment)