如何在Silverlight中旋转StackPanel或网格中的图像

Question

我有一个位于Grid控件中的图像控件。我已经有一个按钮可以放大这张图片了。放大后，将显示水平/垂直滚动条。然后我旋转包含网格的图像，图像和网格滚动条被弄乱了。我应该如何合并图像控件的放大和旋转？以下是我在项目中使用的代码。

我使用的图像控件放大代码(x是图像控件)：

if ((x as Image) != null) { x.Height = x.Height * 1.3; x.Width = x.Width * 1.3; } 

我使用的旋转代码(x是图像控件)：

if ((x as Image) != null)
{    
    RotateTransform rotate = new RotateTransform(); rotate.Angle = rotateAngle;
    rotate.CenterX = x.Width / 2;
    rotate.CenterY = x.Height / 2;
    x.RenderTransform = rotate;                                       
};

XAML是：

<ScrollViewer x:Name="scrollViewer" Height="480" Width="615"
                    VerticalScrollBarVisibility="Auto"
                    HorizontalScrollBarVisibility="Auto">
  <ScrollViewer.Content>
      <Grid x:Name="ImageGrid">
          <StackPanel x:Name="ImageStackPanel">
              <Image Source="..." VerticalAlignment="Center"  Width="220" Height="170" ></Image>  
          </StackPanel>
      </Grid>
  </ScrollViewer.Content>
</ScrollViewer>

谁有什么现成的代码片段可以借给我用来解决这个问题？

Answer 1

我认为您需要使用TransformGroup来同时使用多个转换：

        ScaleTransform myScaleTransform = new ScaleTransform();
        myScaleTransform.ScaleY = 3;

        RotateTransform myRotateTransform = new RotateTransform();
        myRotateTransform.Angle = 45;

        // Create a TransformGroup to contain the transforms 
        // and add the transforms to it.
        TransformGroup myTransformGroup = new TransformGroup();
        myTransformGroup.Children.Add(myScaleTransform);
        myTransformGroup.Children.Add(myRotateTransform);

        // Associate the transforms to the image.
        x.RenderTransform = myTransformGroup;

Answer 2

这可能会满足您的需求：

  <Image x:Name="image" Source="myImageSource" Stretch="Uniform" 
               HorizontalAlignment="Center" VerticalAlignment="Center" 
               RenderTransformOrigin="0.5, 0.5">
                 <Image.RenderTransform>
                     <TransformGroup>
                         <RotateTransform x:Name="Rotate"/>
                         <ScaleTransform x:Name="Scale" />
                     </TransformGroup>
                 </Image.RenderTransform>
  </Image>

代码隐藏：

  Rotate.Angle = 45;
  Scale = 0.25;

Answer 3

您可能缺少来自Silverlight Toolkit的LayoutTransformer和来自one of the Toolkit developers的AnimationMediator。

使用LayoutTransformer，您可以将其内容设置为任何内容，而不仅仅是图像，并对其应用任何转换，并且与通常的RenderTransform相反，它将影响布局和实际大小。

我有一个类似的场景，我是这样使用的：

<Grid>
    <fs:AnimationMediator x:Name="RotateMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding Angle, ElementName=RotateTransform, Mode=TwoWay}" />
    <fs:AnimationMediator x:Name="ScaleXMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding ScaleX, ElementName=ScaleTransform, Mode=TwoWay}" />
    <fs:AnimationMediator x:Name="ScaleYMediator" LayoutTransformer="{Binding ElementName=LayoutTransformer}" AnimationValue="{Binding ScaleY, ElementName=ScaleTransform, Mode=TwoWay}" />

    <tkt:LayoutTransformer x:Name="LayoutTransformer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <tkt:LayoutTransformer.LayoutTransform>
            <TransformGroup>
                <RotateTransform x:Name="RotateTransform" />
                <ScaleTransform x:Name="ScaleTransform" />
            </TransformGroup>
        </tkt:LayoutTransformer.LayoutTransform>

        <Image x:Name="MyImage" Source="mysource.png" Width="600" Height="800" />

    </tkt:LayoutTransformer>
</Grid>

由于缺少MultiBinding，您可能还需要手动处理输入值(来自滑块控件等)、更改的事件，然后相应地设置RotateMediator的AnimationValues等。