2011-01-13 10 views
19

Ho creato un'applicazione che visualizza le immagini. Ora voglio implementare la funzione di zoom in e zoom out (usando due dita) come in un'applicazione nativa di visualizzatore di foto del telefono Windows. Qualche idea su come procedere.Come ingrandire e rimpicciolire le immagini in WP7?

Grazie in anticipo.

+0

due buone opzioni offerte finora –

risposta

29

Forse l'approccio più opportuno sarebbe includere lo Silverlight for Windows Phone Toolkit. Questo contiene un GestureService che aiuterà a pizzicare e ruotare i gesti tattili. Si potrebbe applicare a un'immagine come questa: -

<Image Source="someSourceUrl" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache"> 
    <Image.RenderTransform> 
     <CompositeTransform x:Name="transform" /> 
    </Image.RenderTransform> 
    <toolkit:GestureService.GestureListener> 
     <toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" /> 
    </toolkit:GestureService.GestureListener> 
</Image> 

Poi nel code-behind: -

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e) 
    { 
     initialAngle = transform.Rotation; 
     initialScale = transform.ScaleX; 
    } 

    private void OnPinchDelta(object sender, PinchGestureEventArgs e) 
    { 
     transform.Rotation = initialAngle + e.TotalAngleDelta; 
     transform.ScaleX = initialScale * e.DistanceRatio; 
     transform.ScaleY = initialScale * e.DistanceRatio; 
    } 
+0

Grazie per la risposta .Mi sto caricando dinamicamente le immagini nel codice. Quindi è possibile eseguire completamente la procedura sopra nel codice? – Vaysage

+1

@Vaysage: puoi ancora usarlo con immagini caricate dinamicamente. Tipicamente con le immagini dinamiche si assegnerebbe una nuova istanza di 'BitmapImage' alla proprietà' Source' del controllo 'Immagine' esistente invece di scaricare e caricare istanze di un elemento' Immagine'. Sarebbe a questo punto che dovresti impostare anche la rotazione sulla trasformazione su 0 e su ScaleX e ScaleY su 1. – AnthonyWJones

+0

Grazie, ha funzionato alla grande. –

0

se si vuole semplice visualizzatore di immagini che supporta il multi-touch, ti consiglio di usare il controllo WebBrowser per visualizzare l'immagine.

Supporta lo zoom multi-touch e lo scorrimento uniforme per impostazione predefinita. Ma è necessario copiare il file nell'archiviazione isolata dalla cartella del progetto. Ecco come ho fatto:

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <phone:WebBrowser 
     Name="MyWebBrowserControl" 
     HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" /> 
</Grid> 

IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication(); 

     // if image file does not exist in isolated storage, copy it to there~! 
     if (!isf.FileExists(filename)) 
     { 
      StreamResourceInfo sr = Application.GetResourceStream(new Uri(filename, UriKind.Relative)); 
      using (BinaryReader br = new BinaryReader(sr.Stream)) 
      { 
       byte[] data = br.ReadBytes((int)sr.Stream.Length); 

       using (BinaryWriter bw = new BinaryWriter(isf.OpenFile(filename, FileMode.OpenOrCreate))) 
       { 
        bw.Write(data); 
        bw.Close(); 
       } 

       br.Close(); 
      } 
     } 

     Dispatcher.BeginInvoke(() => { MyWebBrowserControl.Navigate(new Uri(filename, UriKind.Relative)); }); 

※ È necessario impostare la Operazione di generazione di file immagine da Content

+0

Non ho prove, ma credo che il controllo WebBrowser sarebbe un controllo ad uso intensivo di risorse se lo si stesse usando solo per visualizzare un'immagine. Detto questo, se si ottiene il lavoro fatto ... –

+0

@DanielBallinger // Ho già fatto domanda e pubblicato (in questo modo). Certo, so che ci sono pro e contro. È molto semplice implementare il visualizzatore di immagini con zoom, mentre potrebbe richiedere molte risorse. La decisione è tua. –

+0

Questo è un approccio valido per alcuni casi d'uso e non merita di essere licenziato. – kevinstueber

Problemi correlati