Dawn

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

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

 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] 몇번째 인지도) 써주면 되는군여 =ㅁ= 오호..

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

D_ThemeViewer.zip

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님 감사합니다. +_+/

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

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

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

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

봄이 오고 있네요~ 

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

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

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

스크롤바 템플릿은 기본적으로 가로 세로 속성을 다 가지고 있습니다. 제가 수정할 부분은 세로모양 스크롤바 이므로, 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 영역이 어떻게 늘었다 줄었다 하는건지는 프로그래밍적인 부분인듯 하여 일단 패스 하겠습니다 =_ㅠ

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

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

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

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

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

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

마우스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 : 비활성화)

라이오버튼 컨트롤은 두칸으로 나뉘어져서 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 에 적용된 코드입니다.

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

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

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

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

그리드 속성값중 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에 어떤 값이 들어가있다는 표시!

X버튼은 삭제, 방향키는 상하이동, Add another item은 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의 템플릿 모드로 들어가서 스타일 변경을 해야합니다. 버튼 컨트롤 수정하듯이 고쳐주시면 됩니다. 전 다 지워버리고 화살표 넣고 마우스 오버와 프레스 효과만 주었습니다.

 끗.