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

【问题标题】：Windows 8.1 Metro app - Pinch and zoom an ImageWindows 8.1 Metro 应用程序 - 捏合和缩放图像
【发布时间】：2014-06-11 02:28:25
【问题描述】：

有什么方法可以在 Windows 8.1 的 XAML 中实现捏合和缩放图像控件，我正在尝试 Manipulation 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;
 }
}

有什么我必须设置的。还是我必须走其他路？

【问题讨论】：

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

【解决方案1】：

在 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;




    }

说明：您将在那里看到我将图像包裹在画布内，然后将画布包裹在滚动查看器内。然后滚动查看器中的事件SizeChanged=OnSizeChanged。在画布的宽度和高度后面的代码中设置为滚动查看器的 ViewportWidth 和 ViewportHeight。只需按照代码并将图像更改为您想要的图像并查看结果。希望这能解决您的问题。

【讨论】：

【解决方案2】：

您可以通过使用ScrollViewer 控件包装图像来轻松实现此目的。

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

【讨论】：