익스프레션 블렌드 GridSplitter 컨트롤

안녕하세요J 반짝 반짝 빛나는 성남미입니다.

오늘은 화면안의 영역을 자유자제로 움직일 수 있는 GridSplitter에 대해 알아보겠습니다!!

 

 

화면 영역을 나누기 위해 ColomnDefintions의 오른쪽의 … 버튼을 클릭합니다

 

 

Add another item을 눌러 행을 두개 추가해 주고 각각의 width값을 세팅해 줍니다

 

 

화면의 영역이 이렇게 두개로 나눠진 것을 확인할 수 있습니다.

 

 

이번에는 열을 세팅해 보겠습니다. RowDefintions의 오른쪽의 … 버튼을 클릭합니다

 

 

같은 방법으로 열을 원하는 개수만큼 추가합니다.

 

 

화면을 보면 두개의 행과 세개의 열로 나눠진 것을 확인할 수 있습니다.

 

 

알아보기 쉽게 원하는 영역을 보더로 색을 넣어주고 텍스트 블록으로 표시를 해주었습니다

자 이러면 GridSplitter를 사용할 수 있는 세팅이 모두 되었습니다.

 

 

컨트롤 메뉴에서 GridSplitter를 가져옵니다.

 

 

GridSplitter를 가져올 때 유의할 점은 원하는 영역의 상하좌우 한곳으로 정렬해 줘야 한다는 것입니다!!!

저는 GridSplitter의 Top 아래의 영역에 넣어줬습니다.

 

 

레이아웃을 살펴보면

Height 값이 고정임을 알 수 있고, RowSpan 1, ColumnSpan 2 (= 열 하나 행 두개를 차지해라)

라고 세팅되어 있습니다 그리고 HorizontalAlignment는 스트레치로 되어있고 VerticalAlignment는 아래로 고정되어 있음을 알 수 있습니다.

 

 

같은 방법으로 letf와 Right 사이에도 GridSplitter를 넣어줍니다.

 

 

레이아웃은 다음과 같습니다.

 

 

Bottom 위에도 같은 방법으로 GridSplitter를 넣어줍니다.

 

 

레이아웃은 다음과 같습니다.

 

 

빌드를 해보면 다음과 같습니다.

GridSplitter의 영역을 잡으면 마우스 화살표가 좌우로 확장되는 아이콘으로 바뀌며 사이즈를 조정할 수 있습니다.

 

 

사용자가 직접 자유로운 화면영역을 정리할 수 있도록 도와주는GridSplitter 정말 좋아요!