정말 오래간만의 포스팅입니다. 블로그에 올리려고 제작해놓은 샘플들은 많은데 포스팅할 시간이 많지 않아서 포스팅이 늦어졌네요.. ㅜ 죄송합니다. 시간이 되는데로 바로바로 올리도록하겠습니다.

이번시간에는 IValueConverter Interface를 활용한 속도계를 포현 해보도록 하겠습니다. (아래 그림은 완성된 이미지 입니다.)

매우 간단한 코드입니다. 먼저 속도계 바늘의 끝을 속도계의 정중앙에 위치하도록 배치합니다. 그리고 RenderTransformOrigin을 적용하여 바늘이 회전할때의 중심점을 맞춰 줍니다. RotateTransform을 생성하고 Angle을 Slider와 Binding 했습니다.

여기서 중요한 것은 Binding시 적용한 Converter={StaticResource SpeedConverter} 를 주의깊게 살펴보셔야 합니다. Converter는 Binding시에 입력된 값을 Binding Target에 맞는 값으로 변환해주는 역할을 하게 되는데요, 이번 예제에서는 Silder에서 입력받은 속도를 속도계에서 표현하고자 할 때 필요한 각도로 변경시켜주는 역할을 합니다.

아래는 Converter Class의 소스코드입니다.

    public class SpeedToAngleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((double)value * 1.6875) + 45;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

속도계에서의 바늘이 0을 가리킬 때의 각도는 45도, 160을 가리킬 때에는 315도 입니다. 그렇다면 0부터 160까지의 각도는 270도 라는 계산이 나옵니다. 전체 속도가 0에서 160까지의 각도가 270도 라고 한다면 나눗셈을 하면 속도 1에 1.6875 도가 회전하는 것을 알 수 있습니다. 여기에 시작점 0을 가리키는 45도를 더함으로서 입력받은 값을 속도계에 맞게 변환 할 수 있습니다.

간단하죠? 이에 대한 질문이나 답변은 리플달아주세요//

SpeedoMeter.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.