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，它会影响布局和实际尺寸。< / p>

我有类似的情况，我这样使用它：

<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。

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

3 个答案: