Windows 8.1 Metro应用程序 - 捏合和缩放图像

时间:2014-04-25 11:39:43

标签: c# xaml windows-8 windows-8.1 pinchzoom

有没有办法在Windows 8.1中实现捏合和缩放XAML内的图像控制,我正在尝试操纵delta事件。但是这个事件没有被解雇,我也尝试设置ManipulationMode =“All”。

<Image x:Name="kn" ManipulationMode="All" ManipulationDelta="kn_ManipulationDelta" HorizontalAlignment="Center" VerticalAlignment="Center" Height="315" Width="360" RenderTransformOrigin="0.5, 0.5">
  <Image.RenderTransform>
  <CompositeTransform></CompositeTransform>
  </Image.RenderTransform>
</Image>

在cs文件中

private void kn_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
 UIElement element = sender as UIElement;
 CompositeTransform transform = element.RenderTransform as CompositeTransform;
 if (transform != null)
 {

 transform.ScaleX *= e.Delta.Scale;
 transform.ScaleY *= e.Delta.Scale;
 transform.Rotation += e.Delta.Scale / Math.PI;
 transform.TranslateX += e.Delta.Translation.X;
 transform.TranslateY += e.Delta.Translation.Y;
 }
}

我有什么需要设定的吗?或者我必须采取其他方式?

2 个答案:

答案 0 :(得分:15)

您可以使用ScrollViewer控件包裹图片轻松实现此目的。

<ScrollViewer ZoomMode="Enabled">
    <Image ............ />
</ScrollViewer>

答案 1 :(得分:4)

在XAML中,让你的代码像这样..

<ScrollViewer x:Name="scrl" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" SizeChanged="OnSizeChanged" MinZoomFactor="1">
        <Canvas MaxWidth="1400" Background="AliceBlue" RenderTransformOrigin="0.5,0.5" x:Name="Main" DoubleTapped="Main_OnDoubleTapped">
            <Image Source="Assets/Floorplan.gif" Canvas.Left="358" Canvas.Top="84"></Image>
        </Canvas>
    </ScrollViewer>

然后在代码后面..

 private void OnSizeChanged(Object sender, SizeChangedEventArgs args) {

        Main.Width = scrl.ViewportWidth;
        Main.Height = scrl.ViewportHeight;




    }

说明:    您将在那里看到我将图像包装在画布内,然后将画布包裹在scrollviewer中。滚动查看器中的事件SizeChanged=OnSizeChanged。在画布背后的代码中&#39; width和height设置为scrollviewer的ViewportWidth和ViewportHeight。只需按照代码将图像更改为您想要的图像,然后查看结果。 希望这能解决你的问题。