Поворот изображения (элемента управления) в Silverlight с помощью Transform - PullRequest
1 голос
/ 05 января 2012

Я пытаюсь повернуть изображение в 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. Что я делаю не так?

Ответы [ 2 ]

3 голосов
/ 06 января 2012

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

Однако, если вы установите точку останова, где вы применяете преобразование, вы можете обнаружить, что Width равен 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>
2 голосов
/ 05 января 2012

Вам необходимо установить свойство RenderTransformOrigin равным "0,5, 0,5", при этом элемент будет вращаться вокруг его центра.

...