윈폰 매뉴얼

4-4-2.슬라이더

슬라이더는 범위 내의 값을 보여주기도 하고 프로그래스 바와는 달리 사용자가 썸을 드래그하거나 트랙을 탭하여 값을 변경할 수도 있다. 범위의 초기값은 0~10으로 설정되어 있다. Orientation 속성으로 슬라이더의 방향을 결정하는데 디폴트는 수평이다. 수평 슬라이더는 오른쪽으로 드래그할 때 값이 증가하며 수직 슬라이더는 위쪽으로 드래그할 때 증가한다. isDirectionReversed 속성을 true로 설정하면 증가 방향이 반대가 되는데 직관적이지 못하므로 사용하지 않는 것이 좋다.

사용자가 슬라이더를 조작하여 값을 변경하면 ValueChanged 이벤트가 발생한다. 이벤트의 인수로 RoutedPropertyChangedEventArgs<double> 타입의 객체가 전달되며 이 객체의 NewValue, OldValue 속성을 통해 변경 전후의 값을 알 수 있다. 값이 변경될 때 즉시 적용하려면 ValueChanged 이벤트 핸들러에서 NewValue값을 사용하면 된다. 다음 예제는 수평, 수직 양방향으로 두 개의 슬라이더를 배치하고 슬라이더의 현재값을 텍스트 블록에 출력한다.

Slider

<Slider Name="horzSlider" Margin="20"

ValueChanged="horzSlider_ValueChanged" />

<Slider Name="vertSlider" Margin="20" Height="200"

Orientation="Vertical" ValueChanged="vertSlider_ValueChanged" />

</StackPanel>

</Grid>

================================== CS =======================================

private void horzSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

horzValue.Text = e.NewValue.ToString();

}

private void vertSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

vertValue.Text = e.NewValue.ToString();

}

슬라이더는 탭이나 드래그 등의 터치 동작으로 값을 조정하므로 터치 영역이 상당히 넓게 설정되어 있다. 슬라이더의 임의 영역을 터치할 수 있으므로 슬라이더 근처에는 터치를 입력받는 다른 컨트롤을 두지 않는 것이 좋다. 부득이하게 터치 입력 컨트롤을 인접하게 배치해야 한다면 위 예제처럼 적당히 마진을 주어 간격을 띄워야 한다. 마진이 전혀 없으면 썸이 화면 가장자리에 밀착하므로 손가락으로 드래그하기 곤란하다.

썸 앞 뒤의 트랙을 클릭하면 1씩 값이 증감되며 썸을 드래그하면 임의의 값으로 조정된다. 썸을 드래그할 때는 꼭 흰색 썸을 정확하게 누를 필요없이 주변을 대충 눌러도 잘 드래그된다. 썸 주변에 터치를 받아 들이는 투명한 영역이 있기 때문이다. 트랙은 RepeatButton으로 구현되어 있으므로 누른 채로 가만히 있으면 값이 계속 증감된다.

드래그할 때 Value는 정밀도가 높은 실수값으로 변경되는데 정확도가 굳이 필요치 않다면 정수로 캐스팅하거나 적당한 자리에서 반올림하여 사용하면 된다. ValueChanged 이벤트 핸들러에서 이벤트 인수의 NewValue 속성으로 새 값을 조사할 수도 있고 horzSlider.Value 처럼 객체의 값을 바로 참조해도 상관없다.

슬라이더는 넓은 범위의 연속적인 값을 신속하게 선택하는 용도로 적합하다. 볼륨이나 밝기, 온도 등 정확도보다는 대충의 값이 필요한 경우 값을 빠르게 조정할 수 있다. 손가락으로 썸을 드래그하는 동작은 정확도가 떨어지므로 개수나 가격 등 정밀성을 요구하는 값 입력에는 적합하지 않다. 이런 값은 텍스트 박스로 수치값을 입력받는 것이 합리적이다.

슬라이더 자체는 현재의 값을 정확하게 보여주는 기능이 없으며 썸의 위치로 대충 판별해야 한다. 정확한 값을 사용자에게 보여주려면 위 예제처럼 텍스트 블록을 배치하고 값이 변경될 때마다 텍스트 블록에 값을 출력한다. 현재값을 보여주기만 하므로 텍스트 블록이 가장 이상적이지만 키보드 입력도 겸해서 받으려면 텍스트 박스도 무방하다.

슬라이더는 음악이나 동영상의 재생 위치를 표시하는 용도로도 사용된다. 총 재생 분량만큼 범위를 지정하고 재생이 진행될 때 슬라이더에 현재 위치를 보여주며 사용자가 슬라이더를 조작하면 임의 위치로 이동한다. 이럴 때는 ValueChanged 이벤트보다는 드래그를 끝내고 손가락을 놓는 시점에 발생하는 LostMouseCapture 이벤트를 사용하는 것이 좋다. 다음 예제로 차이점을 비교해 보자.

SliderDrag

<Slider Name="Slider1" Margin="20" Maximum="10000" LargeChange="10"

ValueChanged="Slider1_ValueChanged" />

<Slider Name="Slider2" Margin="20" Maximum="10000" LargeChange="10"

LostMouseCapture="Slider2_LostMouseCapture" />

</StackPanel>

</Grid>

================================== CS =======================================

private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

txtPos1.Text = Slider1.Value.ToString("0.00");

}

private void Slider2_LostMouseCapture(object sender, MouseEventArgs e)

{

txtPos2.Text = Slider2.Value.ToString("0.00");

}

텍스트 블록과 슬라이더를 두쌍 배치했다. 텍스트 블록은 동영상 재생 위치를 보여준다고 가정하자. 재생 위치를 신속하게 조정하기 위해 썸을 클릭할 때 10만큼씩 증감하도록 했으며 너무 긴 실수를 보여줄 필요는 없으므로 소수점 두자리까지 반올림하여 잘라서 출력한다. 위쪽은 ValueChanged 이벤트를 사용하였고 아래쪽은 LostMouseCapture 이벤트를 사용하였다.

탭을 하건 드래그를 하건 두 경우 모두 값이 바뀌는 것은 마찬가지이다. 그러나 위쪽은 드래그중에도 값이 바뀌지만 아래쪽은 드래그중에는 바뀌지 않고 드롭할 때 바뀐다. 동영상이나 음악의 재생 위치를 변경하는 것은 상당한 시간을 요구하는데 드래그하는 족족 새 위치를 찾아 가는 것은 모바일 장비의 능력치를 오버하는 힘든 작업이다.

심지어 그 강력한 데스크탑에서도 동영상 재생 위치는 드래그하는 족족 바뀌지 않고 띄엄 띄엄 바뀐다. 사실 드래그중에 재생 위치를 일일이 바꿀 필요도 없고 그래봤자 영상이 제대로 보이지도 않는다. 이런 작업은 가급적이면 수행 횟수를 최소화하는 것이 좋으면 이 요구에 부합하는 이벤트가 바로 LostMouseCapture이다.