블렌드 메이트 스터디 5회 자료입니다.
저작자 표시 비영리 변경 금지
신고
Posted by 도온

블렌드에서는디자인 뷰’ 모드로 작업환경을 설정 할 수 있습니다. ‘디자인 사이즈’ 란 실제 실행했을 때 프로젝트의 레이아웃 사이즈와 달리 디자이너가 블렌드에서 작업을 수행하는 동안 임시로 보기 편하게 설정한 사이즈로 보여주는 것을 말합니다. ‘디자인 사이즈’의 사이즈는 실행 값으로 설정된 ‘실행 사이즈’ 와 전혀 관계가 없습니다.



01. 블랜드에서 [File] -[New Project] 메뉴를 클릭하여 실버라이트 애플리케이션 프로젝트를 생성합니다.
블렌드 화면의 왼쪽 하단 패널인 [Objects and Timeline] 패널의 [UserControl]을 클릭합니다. [Properties]-[Layout] 패널에 가로와 세로가 각각 640˟480으로 기본값이 설정되어 있는 것을 확인할 수 있습니다.




02. [Properties]-[Layout] 패널에서 정렬 속성인 [HorizontalAlignment]와 [VerticalAlignment]을 [Stretch]로 설정합니다. 이어서 [Width]와 [Height]의 [Set to Auto] 버튼을 클릭하여 캔버스의 가로세로 크기를 자동으로 설정합니다.



03. [Width]와 [Height]가 각각Auto(0)’으로 설정되면 유저컨트롤 위에 커서를 올려 커서가 화살표 모양으로 변경되면 드래그하여 캔버스의 크기를 늘립니다.



04. 디자인 뷰의 공간을 만든다음 [Projects]-[Objects and Timeline] 패널의 [LayoutRoot]를 클릭하여 선택하고 [Properties]-[Brushes] 패널에서 [Background]의 색상을 연두색(#FF7DFF00)으로 설정합니다.
<F5>를 눌러 웹 브라우저를 실행합니다. 브라우저의 전체 화면이 연두색(#FF7DFF00)으로 바뀌었습니다. 캔버스 크기를 특정 사이즈로 설정하지 않고 정렬 속성을 전체로 설정하여 실행 화면이 꽉 차 보입니다.


05. [Split] 버튼을 클릭하여 제물(XAML) 코드를 살펴보면 [DesignWidth]와 [DesignHeight] 코드가 보입니다. 유저컨트롤 가로세로 크기가 오토 설정일 경우, 크기가 없으므로 레이아웃의 모서리를 드래그하여 실제 사이즈가 아닌 작업 시에만 적용하는 ‘디자인 사이즈’로 작업 환경이 설정되었습니다.



 

 

 

 

 


저작자 표시 비영리 변경 금지
신고
Posted by 도온
저작자 표시 비영리 변경 금지
신고
Posted by 도온

저녁먹고 짤막 블로깅 =ㅂ=

얼마전에 그리드로 레이아웃 구조를 짜면서 
블렌드 스토리보드로 안되던것을 을지랑님이 코드로 하는법을 알려주셨어요. 캄사 ^ㅁ^
(근데 왜 블렌드 팁일까 -ㅁ-;)

 private void textBlock01_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
           
grid_Move.ColumnDefinitions[0].Width = new GridLength(0.5, GridUnitType.Auto);
           
grid_Move.ColumnDefinitions[1].Width = new GridLength(0.5, GridUnitType.Auto);
            Main_right.HorizontalAlignment = HorizontalAlignment.Right;

            RightMenu.Width = 100;
            sb_LayOutMove.Begin();
        }

임시시안이라서 ㅎㅎ 네이밍이;
textBlock01에 마우스버튼다운 하면 0.5, 0.5 비율로 나뉘어진  'grid_Move' 란 그리드를
오토로 변경해줍니다.
Column, Row 만 ([0],[1] 몇번째 인지도) 써주면 되는군여 =ㅁ= 오호..

결국 다르게 스토리보드로 하긴했지만 혹시나 나중에 필요할까봐.. +ㅁ+

저작자 표시 비영리 변경 금지
신고
Posted by 도온
DTFE2009 훈스닷넷 1세션 실버라이트 3 발표 자료입니다.
출처는 1세션 함께 준비하신
공도님 블로그입니다.

준비한다고 힘들었는데 잘 끝나서 다행이에요. 저 또한 공도님께 많이 배우고 있답니다.
특히나 디자이너 분들은 비헤이비어의 매력에 푹 빠지시면 실버라이트 3을 목이 빠져라 기다리시게 될꺼에요.
저처럼요 =ㅂ=;; 완전 강추임 +ㅁ+b


+ 디자인 정글에서 5월 14,15일차 블랜드 수업 들으신 분들도
  이번 세미나 자료를 다운받으셔서 해보시면 되세요.  '15일차 실버라이트 3 미리보기' 수업내용과 관련자료입니다.



 

저작자 표시 비영리 변경 금지
신고
Posted by 도온




요즘 테마활용을 해볼려고 노력하고 있습니다. +ㅁ+/ 
실버라이트 툴킷에 있는 테마로 배포방식와 적용에 대해서 살펴보았습니다.
툴킷테마의 배포는 DLL과 xaml 코드로,
적용방법도

 1. References 폴더에 DLL 추가 해서 블랜드에서 직접 적용하면서 활용하는 방법과   
 2. xaml페이지를 리소스로 활용하는 방법이 있었는데요, 

2번을 이용해서 테마를 테스트 할 수 있는 테마뷰어를 만들어 봤습니다. 1번이 궁금하시면 요기클릭-> [거북사마님 테마강좌]를 참고하시면 됩니다. 

Dawn's Theme Viewer 스크린샷입니다.

 

입출력부분을 잠시 살펴보면,

xaml로 추가되어 있는 테마를 텍스트 박스에 theme.xaml 로 입력하여 '테마적용'버튼을 누르면 하단 컨트롤부분에 적용이 됩니다.
리셋 버튼은 블랜드 컨트롤 기본스타일테마로 돌아갑니다.

버튼패드로 추가했는데요 ^-^  드래그해서 위치이동이 됩니다.
실버라이트 툴킷에 ShinyBlue.xaml, ShinyRed.xaml, ~ExpressionLight 6개의 테마를 추가시켜 놓았습니다.
내가 만들어서 추가한 테마의 버튼은 직접 만드셔야 합니다. ^-^; (코드도 몇줄 쓰고..) 

테마뷰어 프로젝트 구조을 살펴보면,

① 버튼패드의 드래그를 하기위해 추가된 클래스
② 테마 xaml 들이 담겨져있는 폴더
③ 테스트할 테마를 씌울 컨트롤들
④ 시작페이지
⑤ 테마 xaml들을 불러올 코드부분 (ImplicitStyleManager)

입출력의 동작은 ④ 시작페이지에서 '테마적용'버튼을 클릭하면 ③ 컨트롤들들 화면으로 가져 올때 ⑤ Page.cs(ImplicitStyleManager)에서 ② 선택된 테마xaml를 불러와줍니다.

ImplicitStyleManager 코드부분

내가 만든 테마나, 다운받은 테마를 컨트롤에 씌워서 보고자 할때 Themes 폴더에 xaml 파일로 추가하고 테스트 해보시길 바랍니다. 

Dawn's 테마뷰어 활용 (2)에서 테마만들기와 리소스활용에 대해서 이야기하겠습니다. ^ㅁ^

CS 코드짜주신 Magma님 감사합니다. +_+/



저작자 표시 비영리 변경 금지
신고
Posted by 도온

 

오랫만에 올리네요. 카툰강좌를 쓰고싶었는데, =_= 쉬운게 아니네.. 포기 흙흙 ㅠ_ㅜ

기본스타일을 복사해서 쓰다보면 스테이츠별로 비주얼 레이어들이 (렉텡글같은) 한가득 있는걸 볼 수 있는데요,

나중에 테마과 같이 리소스를 적용할 스타일을 만들 경우 그런 구조적인 부분이 필요하기 때문입니다.

지금 동그란 콤보박스 바꾼거 처럼 대충 변경하시면 안됩니다. =ㅁ=.. 다 필요한거라능..

봄이 오고 있네요~ 

저작자 표시 비영리 변경 금지
신고
Posted by 도온

안녕하세요? ^-^ 크리스마스는 잘 보내셨는지 ㅎ_ㅎ

#5는 스크롤뷰어 컨트롤입니다. 스크롤 뷰어 컨트롤은 어떤 Content 영역이 스크롤바를 가지고 있는 형태라고 할 수 있습니다.그래서 스크롤뷰어 컨트롤을 보면서 컨트롤바도 같이 살펴봅니다.


요렇게, 기본 스크롤 뷰어에서 연녹색 스크롤 뷰어로 스타일을 변경해 보겠습니다.


1) Asset Library에서 스크롤뷰어 컨트롤을 가져옵니다.


2) 스크롤뷰어를 생성하면 기본적으로 Properferties - LayOut - HorizontalScrollBarVisivility의 속성은 Disabled 로 비활성화 되어있고 VerticalScrollBarVisivility 는 Visible로 눈에보이는것을 확인하실 수 있습니다. 
그외 Auto일때는 스크롤뷰어의 내용에 따라 스크롤바가 자동으로 생성 되고, Hidden일때는 감춰집니다.


  
3)
마우스R(오른쪽클릭)에서 Edit Control Parts (Template) -> Edit a Copy를 클릭합니다.
스타일 이름을 정해주고 템플릿 수정모드로 들어갑니다.
스크롤 뷰어의 구성을 살펴보면 Border가 그리드를 포함하고 있고 그리드가 스크롤뷰어의 요소들을 가지고 있습니다.
그리드는 Row1 Column1로 나눠져있습니다.

 Row 0 Column 0  -  ScrollContentPresenter :  컨덴츠가 들어갈 부분
 Row 0 Column 1 -  VerticalScrollBar : 속성이 세로로 주어진 스크롤바
 Row 1 Column 0 -  HorizontalScrollBar : 속성이 가로로 주어진 스크롤바
 Row 1 Column 1 -  [Rectangle] : 가로 세로 스크롤바가 같이 보일때 겹쳐지는 영역에 그려지는 사각형


4) 보더에 Background와 BorderBrush에 컬러를 넣어주고 BorderThickness 값은 3으로 CornerRadius 값은 10으로 주었습니다.


5) 잠시 템플릿 모드를 빠져나와서 스크롤 뷰어보다 긴 직사각형을 하나 그립니다.
Alt 키를 누른 상태에서 스크률뷰어 컨트롤위로 드래그 하면 직사각형이 스크롤뷰어 컨덴츠 영역안으로 들어갑니다.
스크롤바의 상하 조절키를 보여지게 하기 위해서 입니다.


6) 이제 스크롤바를 수정해야겠죠? ^-^ VerticalScrollBar를 선택하고
마우스R(오른쪽클릭)에서 Edit Control Parts (Template) -> Edit a Copy를 클릭합니다.
스타일 이름을 정해주고 템플릿 수정모드로 들어갑니다.

스크롤바 템플릿은 기본적으로 가로 세로 속성을 다 가지고 있습니다. 제가 수정할 부분은 세로모양 스크롤바 이므로, VerticalRoot 그리드를 펼서서 살펴보고 수정하겠습니다.
VerticalRoot 그리드는 Row 4 로 나뉘어져 있습니다. (0부터니까 5줄!)

Row 0  - VerticalSmallDecrease : type은 RepeatButton이고 방향이 세로인 경우 값을 작게 감소시키는 버튼 입니다.
Row 1  - VerticalLargeDecrease : type은 RepeatButton이고 방향이 세로인 경우 값을 크게 감소시키는 버튼 입니다.
Row 2  - VerticalThumb : type은 Thumb이고 가로 세로로 움직일 수 있는 키 입니다.
Row 3  - VerticalLargeIncrease : type은 RepeatButton이고 방향이 세로인 경우 값을 크게 늘리는 버튼 입니다.
Row 4  - VerticalSmallIncrease : type은 RepeatButton이고 방향이 세로인 경우 값을 작게 늘리는 버튼 입니다.

RowSpan 5 - Rectangle : 5줄에 걸쳐서 자리잡고있는 사각형, 스크롤바의 배경이 되는 부분

<< 그러고 보니 슬라이드 컨트롤 강좌를 쓸때..
HorizontalTrackLargeChangeDecreaseRepeatButton
  (RepeatButton 슬라이더 키 부분인 HorizontalThumb가 감소하면서(left) 움직이는 범위의 한계를 잡아준다.)
라고 썼었는데 '범위'는 리핏버튼을 포함하는 '그리드의 영역'만큼이고 리핏버튼은 그 안에서 작동한다는거... 죄송합니다. ㅠ_ㅠ... >>

VerticalThumb이 어떻게 움직이고 LargeDecrease 와 LargeIncrease 영역이 어떻게 늘었다 줄었다 하는건지는 프로그래밍적인 부분인듯 하여 일단 패스 하겠습니다 =_ㅠ


7) 3개의 Rectangle중 2개는 지워버리고 남은 Rectangle에는 바탕과 라인에 컬러를 주고 모서리도 둥글게 해줍니다.
잠시 스크롤뷰어의 템블릿으로 가서 Grid의 Column 1 의 영역을 살짝 늘려줍니다. VerticalScrollBar도 늘린 영역만큼 밀어주시구요 옆에 공간을 만들기 위해서 입니다. ^^: 위아래 마진도 3 씩 줘서 공간을 만들어 줍니다.

8) 다시 스크롤바 템플릿으로 와서 RepeatButton들을 수정하겠습니다.
VerticalSmallDecrease를 선택하고 마우스R(오른쪽클릭)에서 Edit Control Parts (Template) -> Edit Template 를 클릭합니다.


9) 각각의 States에 맞게 레이어들이 구성되어 있는것을 볼 수 있습니다.
화살표 모양인 Path 레이어만 남기고 다 지운뒤 (DisabledElement 이런건 남겨놔야되는데..일단 패스;)Path레이어를 복사하여 Path_MouseOver, Path_Pressed 로 각각 네임을 지정해 줍니다.  저는 간단하게 마우스 오버와 프레스시 컬러가 바뀌는 효과를 주었습니다.

Root 그리드에 배경색을 아무채우고 알파값을 0% 로 해주셔야 합니다. 화살표 모양인 Path만 남기고 다 지워버린 탓에 마우스 영역이 좁혀져서 그리드에 컬러를 넣어서 만큼 영역을 채워주는거죠. 알파값은 꼭 0으로! ^^  

VerticalSmallIncrease 리핏버튼도 똑같이 변경합니다.

10) VerticalThumb도 템플릿 모드로 들어가셔서 원하는 모양으로 바꿔 주시면 됩니다. 저는 Radius 5 에 양옆 마진은 3정도 컬러는 연두색으로,  간단하게 마우스 오버와 프레스시 컬러가 바뀌는 효과를 주었습니다.

오늘 강좌는 감기기운에 약간 횡설수설 한듯하네요. =ㅁ=.. 모두 감기조심하세요 ㅠ_ㅠ

저작자 표시 비영리 변경 금지
신고
Posted by 도온

안녕하세요. 도온입니다. +ㅁ+/

#4 는 라디오 버튼 스타일 변경해보았습니다.
일반적인 원형의 라디오 버튼의 모양에서 제가 하고싶은 아이콘 모양으로  >ㅁ< 꺄~ 
선택되었을때, 까만 체크포인터로 표시되는 것을 컬러가 채워지는 모양으로 바꿔보겠습니다.


(요로케 >_< /)



1)
Asset Library에서 라디오 버튼 컨트롤을 가져옵니다.



2) 템플릿 모드로 이동

마우스R(오른쪽클릭)에서 Edit Control Parts (Template) -> Edit a Copy를 클릭합니다. 스타일 이름을 정해주고 템플릿 수정모드로 들어갑니다.

라디오 버튼 컨트롤 레이어들을 상위 Grid 안에 다수의 Ellipse속성들의 레이어를 가진 Grid와 RadioButtnon 이라는 텍스트 값을 가진 contentPresenter 레이어로 구성되어있습니다.
Ellipse레이어들을은 각각의 스테이트에 따른 스토리 보드를 가지고 있습니다.

- BackgroundOverlay
- BoxMiddleBackground  (MouseOver, Pressed : 마우스 오버와 프레스 시에 동작하는 레이어)
- BoxMiddle  (MouseOver, Pressed:마우스 오버와 프레스 시에 동작하는 레이어)
- BoxMiddleLine  (MouseOver, Pressed : 마우스 오버와 프레스 시에 동작하는 레이어)
- CheckIcon  (Checked : 라이오버튼이 체크가 될때 동작하는 레이어)
- DisabledVisualElement   (Disabled : 비활성화)
- ContentFocusVisualElement  (Focused : 포커스일때)

 - contentPresenter   (Disabled : 비활성화)


3) 라디오버튼 그리드 구조

라이오버튼 컨트롤은 두칸으로 나뉘어져서 Row 0, Column1 이구요. 
( #3 슬라이더 컨트롤을 다룰때  Row, Column 잠깐 했었죠 =ㅁ=) 
Row 0, Column 0 에는 Ellipse레이어들을 가진 Grid 가 Row 0, Column 1에는 contentPresenter 가 들어있습니다.

 

4) ColumnDefinition 합치기

아이콘 모양만 만들거니깐 텍스트는 지워야겠죠? 상위 Grid를 선택하고 Properferties - LayOut 의 화살표를 누르면 나오는 메뉴인  ColumnDefinitions(Collection)의 '...' 버튼을 눌러서 나뉘어진 ColumnDefinition들을  엑스 아이콘을 눌러서 삭제시켜 줍니다. contentPresenter 레이어도 삭제시켜줍니다.

5) 라디오버튼 크기 조정

아이콘 라디오 버튼을 만들기 위함이므로 Ellipse레이어들을 가진 Grid도 지워버립니다. 그러면 Width 와 Height 값이 오토로 설정되어 있는 상위 Grid는 내부속성들이 사라져버려서 납딱해져버립니다. 일단 템플릿 모드를 빠져나와 페이지 위에 얹어놓은 라디오버튼을 아이콘이 들어갈 정도의 크기, 가로 세로 50 씩 값을 줍니다. 다시 스타일 템플릿 모드로 들어와서
원하는 모양의 아이콘을 붙여넣습니다.

 

6) 아이콘 넣기

Grid에 포커스를 맞춘후 디자인툴에서 작업한 아이콘을 Export시키지 않고 복사해서 바로 붙여넣어줍니다. 붙여넣기 한 아이콘은 Margin 값이 멋대로 붙어버리기 때문에 Margin 0, 0, 0, 0 으로 HorizontalAlignment 와 VerticalAlignment 는 가운데 정렬로 맞춰줍니다. 이때 아이콘의 Width 와 Height 값이 익스프레션디자인에서 복사해올때 값이 제대로 들어갔나 확인한번 해주시구요. ^^

7) 원하는 스테이트 효과(?) 넣기  

일단 라이오버튼이니깐 Checked는 꼭 들어가야겠죠 >_<. 각각의 스테이트 들에 따라 레이어들을 따로 두는게 좋은거같습니다. 한 아이콘 레이어에 마우스 오버 효과와 포커스 등등 여러가지를 같이 적용하면 잘 안될때가 있더라구요. ㅠ_ㅠ 기본 템플릿도 다 따로쓰는듯..

저는 오버했을때 연하게 커지는 이미지가 겹처서 나오다가 체크가 되면 컬러가 선명하게 보이게 해줬습니다.

8) Common Properties

스타일 변경이 다 되었으면 템플릿 모드를 빠져 나옵니다.
라디오 버튼은 일련의 선택사항 중 한 번에 하나씩만 선택해야 하므로 그 선택사항 그룹을 정해줘야 합니다. Properties에서 Common Properties - GroupName 에서 그룹네임을 지정해줄 수 있습니다. 같은 선택사항 그룹끼리 같은 네임을 써주시면 됩니다.
IsChecked 에 체크를 해보면 지금 선택한 라디오버튼에 체크값이 어떻게 들어가있는지 확인할 수 있습니다.
Cursor 도 Hand로 바꿔주시구요. >_<

몇개의 아이콘 라디오 버튼을 더 만들어서 예제를 완성하였습니다.
그리고 체크하면 텍스트가 보이는 간단한 코드를 적용하였습니다.

코드는 같은 부서에 있는 개발자분이 알려주심.. 항상 감사합니닷 ㅋ_ㅋ
Page.xaml.cs 에 적용된 코드입니다.

저작자 표시 비영리 변경 금지
신고
Posted by 도온

 

세번째 컨트롤은 미디어 타임라인이나 사운드조절등에 쓰이는 슬라이더컨트롤 입니다. +ㅁ+/ 꺄오

 

네모 모양이 기본 컨트롤이고 삼각형 화살표가 스타일을 변경한 슬라이더 입니다.

기본컨트롤이 더 이쁘네요.. =_ㅠ

 

슬라이더 컨트롤은 버튼컨트롤과 텍스트박스 컨트롤에서는 하나의 테두리였던 그리드가 줄 칸으로 나눠어져서 각각의 위치에 따라 요소들이 들어가있고, 요소들 중에 다른 컨트롤들이 있어서 그 컨트롤의 템플릿 모드로 다시 들어가서 바꿔줘야합니다. =_=??

 

그리드 속성값중 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의 템플릿 모드로 들어가서 스타일 변경을 해야합니다. 버튼 컨트롤 수정하듯이 고쳐주시면 됩니다. 전 다 지워버리고 화살표 넣고 마우스 오버와 프레스 효과만 주었습니다.

 끗.

 

저작자 표시 비영리 변경 금지
신고
Posted by 도온

티스토리 툴바