CODEWITHSUNDEEP
c#wpfxaml
Jake
Jake

Reputation: 1660

Rotate image when moving slider

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

Please find the below image.

enter image description here

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>

Upvotes: 0

Views: 1172

Answers (1)

Clemens
Clemens

Reputation: 128060

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"/>

Upvotes: 1

Related Questions