[Expression Blend] Grid Splitter

6월 30일에 진행한 첫번째 예제는 바로 Grid Splitter를 사용한 Grid 분리입니다.

예시를 통해서 따라가도록 하겠습니다.

 

우선 Splitter라는 말에서 알 수 있듯이 Grid Splitter란 Grid간의 분리를 쉽게해주는 하나의 컨트롤입니다. 가장 큰 특징이 바로 사용자가 어플상에서 Grid 간격을 다시 해줄 수 있다는 것이지요. 우선 Blend상에서 WPF Application으로 Grid Splitter라는 이름으로 프로젝트를 하나 생성합니다.

 

 

가운데에 이런 MainWindow가 있을 겁니다. 우리는 이 것을 하나의 표라고 볼 수 있습니다. 즉 Row가 1 Column이 1인 하나의 표인 겁니다. 여기에 어떤 도구를 사용한다면 한개의 표를 분리할 수가 있습니다. 상단과 좌측에 있는 두꺼운 선에 마우스를 가져가면

 

 

와 같이 주황색 줄이 생깁니다. 이게 칸을 생성하는 라인이 되는 겁니다. 이걸로 하나의 표 내부를 여러개로 분리할 수 있습니다. 보통 이런식의 속성을 WPF에서는 RowDefinition 또는 ColumnDefinition이라고 합니다. 이 속성은 Properties에서도 확인할 수 있습니다. LayoutRoot를 선택한 상태에서 Layout Properties의 숨김 버튼을 누르면 해당 속성을 찾을 수 있습니다.

 

 

저기서 버튼을 누르게 되면 아래와 같은 창이 뜨는데 원하는 칸만큼 Add를 눌러주면 됩니다. 가령 Row가 3, Column이 2인 표를 만들고 싶으면 해당 정의를 갯수만큼 버튼을 눌러주면 되겠지요.

 

 

지금은 ColumnDefinition을 2로 하려고 해당 item을 두개 삽입한 상태입니다. 이 간격을 임의로 바꾸고 싶으면 역시 해당 item을 선택한 상태에서 Layout을 건드리면 됩니다.

 

 

Auto는 해당 크기를 이걸 감싸고 있는 Panel의 크기에 맞춰준다는 설정입니다. 임의로 지정하기 위해서는 Pixel을 선택한후에 해당 길이를 지정해주면 됩니다. 그리고 마지막의 star는 비율을 의미합니다. 전체 Column을 1이라고 둔 상태에서 해당 비율만큼 비율로 정의해서 표현해주겠다는 의미입니다.

 어떤 걸 쓰는지는 상관없는데 사실 데스크탑어플의 특성상 해상도를 고려해줘야 합니다. 만약 픽셀 정의로 해당 Column을 정의해준다면 해상도마다 다른 결과를 보여줄것이겠지만 Star로 정의한다면 해상도가 바뀌어도 그 비율을 그대로 유지하게 됩니다. 선택은 디자이너의 맘이겠지요. 아무튼 이런식으로 위에서 언급한 Row 3 Column 2인 Root를 만듭니다.

 

 

제대로 했다면 위와 같이 칸이 구분됩니다. 이제 각 칸은 행렬로 정의됩니다. 가령 맨위의 첫번째칸은 (0,0)인 칸이 되겠습니다. 나머지야 다들 이해가 가실 겁니다. 여기에 Rectangle 개체를 삽입해봅니다.

 

 

자 위와 같이 삽입하면 Rectangle이 어디에 포함되어 있는지가 Layout상에 나타납니다. 지금 상태에서는 (0,0)칸에 삽입되어 있습니다. 만약 Rectangle을 확장해서 옆칸을 침범하면 어떻게 될까요?

 

 

보면 ColumnSpan이 2로 늘어나있는 것을 확인할 수 있습니다. 지금 Width와 height가 Auto로 되어 있기 때문에 포함된 Grid의 크기에 따라서 size가 자동으로 조절됩니다. 이상태에서 Layout에 있는 Margin을 다 0으로 지정하면 다음과 같이 꽉 차게 됩니다.

 

 

이와 같은 원리로 다음과 같이 색상을 채워봅니다.

 

 

한칸짜리도 그 해당칸에만 Rectangle을 삽입하고 Margin을 0으로 잡게 되면 위와 같이 만들 수 있습니다. 여기서 이제 이 포스트의 주제인 Grid Splitter를 삽입하려고 합니다. 좌측 Assets창에서 Grid Splitter라고 검색하면 해당 컨트롤이 있습니다. 그걸 더블클릭하면 다음과 같은 개체가 삽입됩니다.

 

 

얇은 줄이 생기는데 그걸 맨위의 파란색 바닥에 쭉 긋습니다.

 

 

잘 안보이시겠지만 검은 줄이 파란색과 그 아래 개체를 구분짓고 있습니다. 이와 같이 아래의 초록색 위에도 구분지어줍니다. 복사해서 옮겨주면 되겠지요. 삽입할때의 Properties의 Layout을 보면 해당 Grid Splitter가 어디에 삽입되는지를 확인할 수 있습니다. 하나의 Rectangle안에 두개의 Grid Splitter가 삽입되지 않게 해줍니다. 그렇다면 파란색쪽에 들어가는 Splitter는 (0,0)이 될것이고 초록색에 들어가는 Splitter는 (2,0)이 될겁니다.

 

 

마지막으로 빨간색과 노란색을 구분짓는 Splitter를 하나 삽입합니다. 빨간색에 들어가든 노란색에 들어가든 상관없습니다.

 

 

 

됬습니다 결과를 한번 확인해보겠습니다. 그냥 f5키를 누르시면 됩니다.

 

 

무슨 그림이 몬드리안의 그림처럼 나왔네요. 아무튼 위와 같이 어플이 실행되고 있는 도중에도 폭과 높이를 자유롭게 지정할 수 있는 것을 확인할 있습니다. 이걸 응용하면 슬라이드 바와 같은 입력 게이지를 표현할 수 있지 않을까 생각합니다. Expression Blend 코딩 특강 첫번째 예제였습니다.