본문 바로가기

Epxression Blend/WPF / Silverlight

[Expression Blend 강좌] GridSplitter Customize - 2


이어서 진행하겠습니다. 잘 따라오셨나요? ^^;
GridSplitter Customize - 1에서 첨부한 것을 실행해 보시면 화살표가 들어간 부분만 스플릿터가 작동되고 위나 아래쪽을 당겨보면 당겨지지 않는 것을 확인하실 수 있습니다. 왜냐하면 당길 수 있는 부분이 비어있기 때문입니다.
그리드로 감싸져 있는데 비어있냐는 말이 이해가 안 가시죠? 
다시 얘기 하자면 그리드 안에 Fill로 채워진 부분이 화살표 모양밖에 없다는 얘기입니다.
나머지는 GridSplitter영역이긴 하지만 그 영역 안에는 아무것도 그려져 있지 않다는 것입니다.

다시 스플릿터 안으로 들어가서 색상을 주어 스플릿터 전체에 아무데나 마우스를 놓아도 작동될 수 있게 만들어 놓겠습니다..

1) 스플릿트 안으로 다시 들어갑니다.



2) Grid에 색상을 지정해 줍니다. 하지만 색상을 1% 주어 거의 안보이게 지정해 놓습니다. 이렇게 해 놓은 이유는 지금은 백그라운드가 지정되어있지 않지만 나중에 색상있는 Background에 들어가게 되면 흰색 바탕이 다 보이기 때문에 색상을 1%로 하여 뒷 배경색에 지장이 없도록 하는 것입니다. 색을 일부러 넣고 싶으시면 넣으셔도 됩니다.


빌드 해서 실행해 봅니다. 이제는 스플릿터 위 아래를 잡아도 움직이실 수 있습니다.
하지만 스플릿터를 잡고 드래그 했을 때 내가 지금 이 스플릿터를 잡고 있는지 안 잡고 있는지에 대해서 눈에 띄는 것이 없는데요.
스플릿터에 드래그를 했을 때 이벤트를 주어 눈에 띌 수 있도록 지정해 보도록 하겠습니다.


3) 다시 스플릿터 안으로 들어옵니다. 트리거 창에 기존에 있는 속성 트리거를 전부 지워주고 속성을 클릭합니다.
그러면 다음과 같이 녹화가 됩니다. 우리가 하려고 하는 것은 Drag하고 있는 와중에서의 이벤트를 보여줘야 하기 때문에
속성을 누르면 나오게 되는 DragIncrement를 IsDragging으로 변경해줍니다.








4) 속성을 바꾸어주고 녹화가 되어있는 상태에서 드래고 하고 있을 때의 화살표 색을 바꿔보도록 하겠습니다.



화살표의 색상을 바꿔주면 트리거 창- 활성 상태인경우 속성에 써지면서 녹화가 됩니다. 저는 왼쪽 화살표와 오른쪽 화살표의 색상을 다르게 했습니다. 이렇게 해서 속성 트리거까지 적용시켜보았습니다.



빌드(F5)해서 확인합니다.
:-) 좀 더 시간을 들이신다면 더 시각적으로 아름다운 스플릿터를 만드실 수 있으실 것 입니다.

결과 파일을 올려드리도록 하겠습니다.
GridSplitter에 대해 응용 디자인 한 것은 http://cafe.naver.com/goodria 에서 확인하실 수 있습니다.