[Windows 8] Slider

지난 포스트까지 Panel상에서 해볼 수 있는 내용에 대해서 쭉 다뤘었고 마지막으로 Canvas에서 좌표를 구해서 화면에 출력하는 예제까지 해보았습니다. 이번에 해볼 내용은 Control이라는 건데 컨트롤은 그냥 사용자가 화면상의 개체나 설정을 움직이기 위한 도구입니다. 아무래도 사용자가 설정을 정하는 거라면 무언가의 수치가 존재할 것이고 그걸 실제 코드상에서 활용하는 방안이 필요할 겁니다. 그러기 위해서는 일종의 범위라는 게 필요한데, 이 범위가 필요한 컨트롤이 Progress Bar와 ScrollBar, 그리고 오늘 소개해드릴 sliderbar가 있습니다. ScrollBar는 지난번에 한번 소개해드린 적이 있었지요. 그래서 이번 포스트에서는 간단한 sliderBar의 사용법에 대해서 언급하고자 합니다.

자 빈 프로젝트를 하나 열고 StackPanel안에 다음의 것들을 넣어봅시다.

 

 

StackPanel에 넣었으니까 개체가 Stack의 형식으로 겹치지 않고 쌓일겁니다. 그냥 해당 개체를 넣기만 해도 화면상에 slider가 생성됩니다. 그런데 잘 보시면 흰 네모가 하나 있지요. 이게 바로 사용자가 조절할 수 있는 컨트롤입니다. 좌우로 움직일 수도 있고, alignment만 설정하면 세로로도 할 수 있습니다. 그런데 단순히 이걸 생성하기만 해서는 되는게 아니라 이 값을 동적으로 다른 이벤트에 전달해줘야 하겠지요. 그래서 이벤트 핸들러가 필요합니다.

 

다 아시는 것처럼 이렇게 이벤트를 생성하면 cs 파일상으로도 이벤트가 자동으로 생성됩니다. 그런데 이 이벤트는 공용적으로 쓰게 할 수 있습니다. 즉, 한 이벤트를 여러개의 컨트롤이 공유할 수 있다는 것이지요. 그걸 알아볼려면 slider를 하나 더 삽입해보면 되겠지요. 그리고 거기에 위와 같은 이벤트를 쓰게 하면 알 수 있습니다. 그래서 StackPanel상에는 다음과 같이 넣어보면 될거 같습니다.

 

자 이렇게 하면 슬라이더도 두개 생기고 이걸 표현할 textblock도 2개 생깁니다. 이제 코드에서 이걸 처리하면 되겠지요. 새로 생긴 이벤트에 다음과 같이 작성해줍니다.

 

몇번 이야기 했던 내용이지만 이렇게 해당 개체의 부모와 자식관계를 구분해서 값을 동적으로 변화시킬 수 있습니다. 간단하게 설명하자면 StackPanel은 이 slider가 포함된 Parent가 되는 것이고, textBlock은 slider와 같이 부모에 소속된 children이 되는 것이지요. 다만 지금 0번과 2번에는 각각 slider가 포함되어 있으므로 해당 순번에 1씩만 더해주면 textblock의 순서를 나타낼 수 있겠지요. 결과는 다음과 같습니다.

 

그런데 이상태에서 snapped view를 적용시켜보면 그냥 가로 길이에 맞춰진 sliderbar가 나타납니다.

 

 

만약 이렇게 snapped view가 적용된 시점에서는 slider bar를 세로로 놓게 하면 어떨까요? 역시 slider에서는 orientation이라는 속성을 통해서 가로 세로를 정할 수 있습니다. 이 부분은 나중에 언급하기로 하고 지금 일단 유심히 보면 값이 0에서 100까지로 고정되어 있습니다. 이 것역시 Minimum과 maximum 속성을 정해놓으면 끝점과 시작점의 값을 미리 세팅할 수 있습니다. 그리고 1씩 올라가고 있는 value도 StepFrequency라는 속성을 통하면 변경 주기도 변화시킬 수 있습니다. 하나의 예제를 잠깐 보겠습니다.

 

 

지금 위와 같은 코드는 앞에서 소개했던 코드 방식이 아닌 Binding을 통한 값을 전달하는 방식입니다. 그래서 이벤트 핸들러같은게 전혀 필요없지요. 그리고 주기가 0.01로 바뀌었기 때문에 기존에 1씩 움직이는데 비해서 이제는 0.01씩 움직이게 됩니다. 간단하게 보면 다음과 같습니다.

 

간단하게 구현해본 slider의 기능이었습니다. 조금만 더 공부해보고 slider를 활용해서 만드는 MediaPlayer에 대해서 소개해보고자 합니다.