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

Question

有没有办法在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;
 }
}

有什么我必须设置。 或者我必须采取其他方式？

Answer 1

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

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

Answer 2

在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 。 在画布后面的代码中，宽度和高度设置为scrollviewer的ViewportWidth和ViewportHeight。 只需按照代码将图像更改为您想要的图像，然后查看结果。 希望这能解决你的问题。