WPF 각도를 보여주는 이미지 조언부탁드립니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

제가 현재는 이미지 2개를 사용해서 한개는 원 이미지에 0~360도 각도가 있는 이미지에 화살표이미지를 사용해서 제가 84도를 입력하면 화살표가 84도를 가리키게 되있습니다.

그냥 이대로 써도 상관없을 것 같지만 혹시 WPF에서 좀더 편한 방법이 있을까해서 질문 드립니다.

2

이미지를 사용하지 않고 방위를 표시하는 컨트롤을 만들고 싶다는 말씀이신가요?

이러한 경우 현재 구현하신 대로 이미지 두 장과 RenderTransform을 사용하는 것이 가장 쉬운 구현 방법일 듯 하네요.

아래와 같은 컨트롤을 만들려면 코드로 눈금이나 숫자를 그려줘야 하는데 이미지로 구현하는 것 보다 편하지는 않죠.

image
image1124×734 73.2 KB

[A WPF Rotary Control - CodeProject]
(A WPF Rotary Control - CodeProject)

6개의 좋아요
3

앗 여기 영상이 안올라가네요

image
image718×401 8.45 KB

간단하게 구성해봤는데 이게 맞는지 모르겠네요

<Grid>
    <Image Source="C:\Users\user\Pictures\그림1.png"/>
    <Image Source="C:\Users\user\Pictures\그림2.png" Width="200" RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform x:Name="ImageRotateTransform" Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
    <TextBox Margin="10,201,666,179" x:Name="AngleText"/>
    <Button Name="RotateMinus10" Content="button" Click="Rotate_Click" Margin="10,260,666,112"/>
</Grid>

private void Rotate_Click(object sender, RoutedEventArgs e)
{
    ImageRotateTransform.Angle += int.Parse(AngleText.Text);
}

al6uiz님께서 말씀하신것 처럼 RenderTransform을 사용하면 간단하게 구현 가능할 것 같습니다.

추가로 전에 봤던 글에서 카카오 네이버 지도에서 돌아가는 아이콘 구현은 각도에 맞추어 이미지를 변경한다고 봤습니다. 각도를 입력받으면 RenderTransform을 사용할지 이미지를 변경할지는 고민해보시면 좋을 것 같습니다.

출처는 찾으면 남겨둘게요

ps) 닷넷데브 글이었네요 ㅋㅋㅋㅋ

3개의 좋아요
4

아 현재 사용하는 방법이 가장 편한게 맞군요
감사합니다

5

RotateTransform주고 RenderTransformOrigin으로 중심점잡아서 돌리고있었는데
지금 이대로 해야겠네요~
감사합니다

6

이미지 해상도에 따라 돌릴 때 조금 깨질 수 있어요, 테스트 해보시고 깨지면 이미지 크기를 줄이시거나 방향에 따른 이미지를 사용하시는 걸 추천드립니다.

1개의 좋아요