如何在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 ，以及其中一位Toolkit開發人員中的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，您可能還必須手動處理輸入值（來自Slider控件等）更改的事件，然后相應地設置RotateMediator等的AnimationValues。