在 Silverlight 中使用 Transform 旋转图像（控件）答案

【问题标题】：Rotate image (control) in Silverlight with Transform在 Silverlight 中使用 Transform 旋转图像（控件）
【发布时间】：2012-01-05 15:20:53
【问题描述】：

我正在尝试在 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 旋转。我做错了什么？

【问题讨论】：

标签： c# silverlight windows-phone-7 transform rotation

【解决方案1】：

我查了 MSDN，第二种形式是正确的。 http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.centerx.aspx（是坐标，不是分数）。

但是，如果您在应用转换的位置设置断点，您可能会发现 Width 为 NaN。这是因为没有设置宽度。你想要的是 ActualWidth。

探索转换的一种好方法是将以下 sn-p 粘贴到您的 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>

【讨论】：

【解决方案2】：

您需要将RenderTransformOrigin 属性设置为“0.5, 0.5”，这将围绕其中心旋转元素。

【讨论】：