2013-12-20 109 views
0

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

请看下图。

enter image description here

在滑块(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>` 
+2

请不要只问我们为你解决问题。告诉我们你是如何试图自己解决问题的,然后向我们展示结果是什么,并告诉我们为什么你觉得它不起作用。请参阅“[您尝试过什么?](http://whathaveyoutried.com/)”,以获得一篇您最近需要阅读的优秀文章。 –

+0

我不知道如何在滑块和图像之间进行绑定。但是我可以在点击按钮上旋转按钮上的图像。 – Jake

回答

1

绑定RotateTransform的Angle财产到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"/>