移动滑块时旋转图像

Question

我想根据滑块移动来旋转图像。

请找到下图。

滑块（slider1）中的四个刻度分别为0度，30度，60度和90度。 我想根据滑块中选择的角度旋转图像（image1）。

我可以使用以下代码在按钮上旋转图像： `

        <Image Source="Images\Debug-Outline-icon.png" 
               RenderTransformOrigin=".5,.5"
               Height="40" Width="44">
            <Image.RenderTransform>
                <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
            </Image.RenderTransform>
            <Image.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" 
                                             Storyboard.TargetProperty="Angle" 
                                             By="10"        
                                             To="{Binding ElementName=slider1, Path=Value+30, UpdateSourceTrigger=PropertyChanged}" 
                                             Duration="0:0:0.2" 
                                             FillBehavior="HoldEnd" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>


    </Button>`

Answer 1

将RotateTransform的Angle属性绑定到滑块Value：

<Image Source="c:\users\public\pictures\sample pictures\koala.jpg"
        RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <RotateTransform Angle="{Binding Value, ElementName=rotationSlider}"/>
    </Image.RenderTransform>
</Image>
<Slider x:Name="rotationSlider" Maximum="90"/>