Applicazione Windows 8.1 Metro: pizzica e ingrandisci un'immagine

Question

Esiste un modo per implementare pizzicare e ingrandire il controllo immagine all'interno di XAML in Windows 8.1, sto provando l'evento delta di manipolazione. Ma quell'evento non è stato licenziato, inoltre ho provato a impostare 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> 

E in cs presentare

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'è qualcosa devo impostare. O devo andare con un altro modo?

Answer 1

È possibile ottenere questo facilmente avvolgendo l'immagine con un controllo ScrollViewer.

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

Answer 2

in XAML rendere il vostro codice come questo ..

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

poi nel codice dietro ..

private void OnSizeChanged(Object sender, SizeChangedEventArgs args) { 

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




    } 

Spiegazione: Si vedrà in là che ho avvolto l'immagine all'interno la tela poi avvolse la tela all'interno dello scrollviewer. Quindi l'evento nel visualizzatore di scorrimento SizeChanged=OnSizeChanged. Nel codice dietro la tela, larghezza e altezza sono state impostate su ViewportWidth e ViewportHeight di Scrollviewer. Basta seguire il codice e cambiare l'immagine a quella desiderata e vedere i risultati. spero che questo risolva il tuo problema.