Поверните изображение (управление) в Silverlight с преобразованием

Question

Я пытаюсь повернуть изображение в Silverlight и не может показаться правильным. Я пробовал несколько разных способов до сих пор и не могу найти ответ.

<Image Opacity=".5" x:Name="compassImg" Source="compass.png"> 
     <Image.RenderTransform> 
      <RotateTransform x:Name="compassRotator"></RotateTransform> 
     </Image.RenderTransform> 
    </Image> 
+ 
    void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e) 
    { 
     Dispatcher.BeginInvoke(() => 
     { 
      compassRotator.Angle = e.SensorReading.TrueHeading; 
     }); 
    } 

и

<Image Opacity=".5" x:Name="compassImg" Source="compass.png"></Image> 
+ 

    void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e) 
    { 
     Dispatcher.BeginInvoke(() => 
     { 
      compassImg.RenderTransform = new CompositeTransform() 
      { 
       CenterX = 0.5, 
       CenterY = 0.5, 
       Rotation = e.SensorReading.TrueHeading 
      }; 
      //OR (variations with 0.5 and width/2 for both composite and rotate 
      compassImg.RenderTransform = new RotateTransform() 
      { 
       CenterX = compassImg.Width/2, 
       CenterY = compassImg.Height/2, 
       Angle = e.SensorReading.TrueHeading 
      }; 
     }); 
    } 

Он вращается, но она всегда вращается вокруг 0/0. Что я делаю не так?

Answer 1

Я посмотрел MSDN, а вторая форма верна. http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.centerx.aspx (Это координаты, а не фракция).

Однако, если вы установили точку останова при применении преобразования, вы можете обнаружить, что ширина равна NaN. Это связано с тем, что ширина не установлена. То, что вы хотите, это ActualWidth.

Одним из хороших способов изучения преобразований является вставка следующего фрагмента в ваш XAML и эксперимент.

<StackPanel HorizontalAlignment="Left"> 
    <TextBlock>Center X</TextBlock> 
    <Slider 
     Name="RTX" Minimum="0.0" Maximum="116" /> 
    <TextBlock>Center Y</TextBlock> 
    <Slider 
     Name="RTY" Minimum="0.0" Maximum="800"/> 
    <TextBlock>Angle</TextBlock> 
    <Slider 
     Name="Angle" Minimum="0.0" Maximum="360" /> 
</StackPanel> 

<Image Source="{Binding ImagePath}" Name="image1"> 
    <Image.RenderTransform> 
     <RotateTransform Angle="{Binding ElementName=Angle,Path=Value}" 
      CenterX="{Binding ElementName=RTX, Path=Value}" 
      CenterY="{Binding ElementName=RTY, Path=Value}"/>     
    </Image.RenderTransform> 
</Image> 

Answer 2

Вам необходимо установить значение RenderTransformOrigin собственности «0.5, 0.5», это повернет элемент вокруг его центра.