Rotate image when moving slider

Question

I want to rotate an image according to the slider movement.

Please find the below image.

The four ticks in the slider(slider1) are 0, 30, 60 and 90 degrees respectively. I want to rotate the image(image1) according to the angle chosen in the slider.

I could rotate the image on a button using the below code:

<Button Name="btnRefreshPortList"
     Grid.Column="1"
     Margin="10 0 0 0"
     Command="{Binding RefreshPortList}" Width="81" Height="53" 
     Click="btnRefreshPortList_Click">

<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

Bind the Angle property of the RotateTransform to the Slider 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"/>