세번째 컨트롤은 미디어 타임라인이나 사운드조절등에 쓰이는 슬라이더컨트롤 입니다. +ㅁ+/ 꺄오
네모 모양이 기본 컨트롤이고 삼각형 화살표가 스타일을 변경한 슬라이더 입니다.
기본컨트롤이 더 이쁘네요.. =_ㅠ
슬라이더 컨트롤은 버튼컨트롤과 텍스트박스 컨트롤에서는 하나의 테두리였던 그리드가 줄 칸으로 나눠어져서 각각의 위치에 따라 요소들이 들어가있고, 요소들 중에 다른 컨트롤들이 있어서 그 컨트롤의 템플릿 모드로 다시 들어가서 바꿔줘야합니다. =_=??
그리드 속성값중 Column과 Row , ColumnSpan과 RowSpan 을 설정해줘야 하므로 살짝 체크하고 가겠습니다.
예전에 html 테이블 짤때 기억나시죠.. =ㅛ=, ColumnSpan3은 3칸 합친거, RowSpan3은 3줄 합친것입니다.
1) Asset Library에서 슬라이더 컨트롤을 가져와서 가로모양으로 드래그엔 드랍으로 그려줍니다.
2) Properferties - Common Properties - Orientation 에서 가로 세로를 지정할 수 있습니다. 디폴트값은 Horizontal 입니다.
마우스R(오른쪽클릭)에서 Edit Control Parts (Template) -> Edit a Copy를 클릭합니다. 스타일 이름을 정해주고 템플릿 수정모드로 들어갑니다. 템플릿 안에 가로, 세로 스타일을 다 지정해 줄 수 있습니다.
3) 먼저 HorizontalTemplate 그리드를 열어서 가로 템플릿 스타일의 구성을 살펴봅니다.
- TrackRectangle
(Rectangle 슬라이더 바 부분)
- HorizontalTrackRectangleDisabledOverlay
(Rectangle 슬라이더 바의 비활성화 상태.
평소에는 Properties - Appearance - Visibility의 값이 Collapsed로 설정 되어있어서 안보인다.)
- HorizontalTrackLargeChangeDecreaseRepeatButton
(RepeatButton 슬라이더 키 부분인 HorizontalThumb가 감소하면서(left) 움직이는 범위의 한계를 잡아준다.)
- HorizontalThumb
(Thumb 슬라이더의 움직이는 키 부분)
- ThumbDisabledOverlay
(Rectangle HorizontalThumb의 비활성화 상태)
- HorizontalTrackLargeChangeIncreaseRepeatButton
(RepeatButton 슬라이더 키 부분인 HorizontalThumb가 증가하면서(right) 움직이는 범위의 한계를 잡아준다.)
4) HorizontalTemplate 그리드 속성 살펴봅니다.
슬라이터 컨트롤은 그리드 Column과 Row 구성에 따라 요소들의 그리드 위치값이 있다고 말씀드렸죠 위에 =ㅁ=.. 그래서HorizontalTemplate 그리드의 속성들을 보면 Properferties - LayOut 에 Row 0, RowSpan 1, Column 0, ColumnSpan1 과 하단 ColumnDefinitions(Collection) '...' 버튼과 옆에 흰 네모가 보입니다.
(화살표 눌러서 접혀있는 메뉴를 펼치세요.)
Row 0, RowSpan 1, Column 0, ColumnSpan1 는 HorizontalTemplate 그리드가 상위그리드 Root의 어떤 위치에 있는지 확인하는거구요, 흰네모는 HorizontalTemplate 그리드의 Column에 어떤 값이 들어가있다는 표시!
5) '...' 버튼을 누르면 Collection Editor 가 열립니다.
X버튼은 삭제, 방향키는 상하이동, Add another item은 ColumDefinition을 추가할 수 있습니다. 칸을 늘릴수 있습니다.
6) 바로 옆 Properties Layout 에서 ColumDefinition의 속성들을 설정해 줄수 있습니다.
미리 설정된 값들을 살펴보면
[0]ColumDefinition : Width 1(비활성화) Auto
[1]ColumDefinition : Width 1(비활성화) Auto
[2]ColumDefinition : Width 1 Star
간단히 정리하자면 =ㅛ= Auto는 그리드가 늘어남에 따라 Colum 넓이도 오토로 잘 늘어나게, Pixel은 지정값을 설정해주고, Star는 지정된 넓이보다 줄어들지는 않지만 오토처럼 그리드가 늘어남에 따라 늘어나게 설정해주는 것입니다.
7) HorizontalTemplate 그리드 Colum을 봤으니 그 밑에 딸린 요소들이 어디어디 들어가있는지 살펴봅니다.
앞부분에 넣은 이미지 재탕이네요. =ㅁ=..
TrackRectangle 슬라이더 바 부분이 Properferties - LayOut 에 Row 0, RowSpan 1, Column 0, ColumnSpan 3 이라고 되어있습니다. 0부터 시작하기 때문에 0은 첫번째 칸이며, ColumnSpan 3 은 3칸 걸쳐서 자리잡고 있다. 라고 보시면 됩니다. HorizontalThumb 슬라이드 키 부분은 Row 0, RowSpan 1, Column 1, ColumnSpan 1 입니다. 첫번째 줄 두번째 칸 이니까 지금 그림 위치가 맞죠 ^-^? 나머지 부분들도 확인하시면 됩니다.
위치확인을 하는 이유는 템플릿을 수정하다 보면 자기도 모르는 사이에 그리드 Row Column 을 바꿔버려서 그 개체가 맞게 가져야할 위치값도 잃어버리게 되는데다가 또한 각각의 Definition에 정해진 영역속성들(Auto, Star, Pixel)도 다르기 때문이죠. 그럼 컨트롤이 제대로 작동안한다는 사실.. =ㅛ= 앜
서론이 길었네요. 이제 모양만 바꿔주면 됩니다. >_<
8) 익스프레션 디자인 툴에서 화살표 하나 만들겠습니다.
직사각형 도형 하나 그려서 Radius 5정도로, 살짝 기울여서 복사한다음 복사본을 마우스R - Tansform - Reflect Horizontal 효과를 줘서 반사(?)시킨다음
9) 하단부분의 Path 메뉴에서 Unite 를 선택하여 합쳐줍니다.
밑에 깔린 하늘색 삼각형은 화살표를 복사해서 안쪽 패스 포인터들을 지워준다음 끝부분을 연결해서 만들었습니다.
10) 다시 블랜드로 돌아와서 TrackRectangle 슬라이더 바 부분을
Radius 3
StrokeThickness 0.5
Height 5
로 컬러도 원하는 컬러로 바꿔줍니다.
Row 0, RowSpan 1, Column 0, ColumnSpan 3 인지 꼭 확인하세요!
11) HorizontalThumb는 컨트롤 안에 들어있는 컨트롤 객체이므로 HorizontalThumb의 템플릿 모드로 들어가서 스타일 변경을 해야합니다. 버튼 컨트롤 수정하듯이 고쳐주시면 됩니다. 전 다 지워버리고 화살표 넣고 마우스 오버와 프레스 효과만 주었습니다.
끗.
