Lavorare con Image Control: Esercitazione per lo sviluppo di app per Windows Phone - Parte 18

Lavorare con Image Control: Esercitazione per lo sviluppo di app per Windows Phone - Parte 18
Lavorare con Image Control: Esercitazione per lo sviluppo di app per Windows Phone - Parte 18

Video: Lavorare con Image Control: Esercitazione per lo sviluppo di app per Windows Phone - Parte 18

Video: Lavorare con Image Control: Esercitazione per lo sviluppo di app per Windows Phone - Parte 18
Video: Come Riabilitare le Entrate USB del Computer - YouTube 2024, Maggio
Anonim

Ora che ci siamo soffermati su XAML Event and Input Controls, in questo articolo della serie di sviluppo Mango App per Windows Phone 7.5, daremo un'occhiata al controllo dell'immagine che consente di visualizzare le immagini nell'applicazione Silverlight Windows Phone 7.

Quindi iniziamo!

Crea un nuovo progetto Windows Phone 7 con un nome univoco come "ImageControlDemo". Ora trascina e rilascia il controllo immagine dalla casella degli strumenti alla superficie del disegno. Ora per visualizzare un'immagine nel controllo dell'immagine usiamo la proprietà 'Origine' di Image Control. Questa proprietà può essere trovata nella finestra Proprietà subito prima della proprietà 'Stretch'. La proprietà Source definisce da dove verrà l'immagine da visualizzare nel controllo immagine. Facendo clic sui puntini di sospensione accanto alla proprietà Origine si apre una nuova finestra che ci chiede di scegliere l'immagine. Fai clic sul pulsante Aggiungi immagine per aggiungere un'immagine al progetto.

Dopo aver selezionato un'immagine, accadono un paio di cose interessanti. Prima di tutto, Visual Studio crea automaticamente una cartella con il nome Immagini e aggiunge il file immagine selezionato. In secondo luogo crea un URI (Uniform Resource Identifier) / percorso per accedere all'immagine, qualcosa come "/Images;component/Images/Picture1.jpg". L'immagine / si riferisce al pacchetto di distribuzione e ciò che segue dopo il punto e virgola farà riferimento a quel file all'interno del pacchetto di distribuzione una volta che è stato distribuito sul telefono, cioè il file xap. Dopo aver fatto clic sul pulsante OK della finestra Scegli immagine, l'immagine viene caricata nel controllo immagine.

Un'altra proprietà notevole del controllo dell'immagine è la proprietà 'Stretch'. Impostazione della proprietà Stretch da riempire; riempie l'intera area del controllo immagine con l'immagine indipendentemente dalle dimensioni dell'immagine. La modifica della dimensione del controllo dell'immagine cambia la dimensione dell'immagine. Non si tiene conto della proporzione dell'immagine, distorcendo così l'immagine. L'impostazione della proprietà Dilatazione su Uniforme mantiene corretta la prospettiva rispettando l'altezza o la larghezza dell'immagine ma non ritaglia l'immagine. Impostando la proprietà Stretch su 'UniformToFill', si rispettano le proporzioni verticali e orizzontali dell'immagine. L'immagine viene ritagliata se necessario per mantenere la proporzione. Il ritaglio può essere risolto consentendo all'utente di scorrere l'immagine verso l'alto o verso il basso, a sinistra oa destra. Per fare questo, tutto ciò che devi fare è circondare l'immagine con un controllo ScrollViewer e impostare la visibilità della barra di scorrimento orizzontale e verticale su visibile.
Un'altra proprietà notevole del controllo dell'immagine è la proprietà 'Stretch'. Impostazione della proprietà Stretch da riempire; riempie l'intera area del controllo immagine con l'immagine indipendentemente dalle dimensioni dell'immagine. La modifica della dimensione del controllo dell'immagine cambia la dimensione dell'immagine. Non si tiene conto della proporzione dell'immagine, distorcendo così l'immagine. L'impostazione della proprietà Dilatazione su Uniforme mantiene corretta la prospettiva rispettando l'altezza o la larghezza dell'immagine ma non ritaglia l'immagine. Impostando la proprietà Stretch su 'UniformToFill', si rispettano le proporzioni verticali e orizzontali dell'immagine. L'immagine viene ritagliata se necessario per mantenere la proporzione. Il ritaglio può essere risolto consentendo all'utente di scorrere l'immagine verso l'alto o verso il basso, a sinistra oa destra. Per fare questo, tutto ciò che devi fare è circondare l'immagine con un controllo ScrollViewer e impostare la visibilità della barra di scorrimento orizzontale e verticale su visibile.
Proprietà uniforme di controllo dell'immagine
Proprietà uniforme di controllo dell'immagine

Un'ultima cosa prima di concludere questa lezione. Nel caso in cui desideri impostare l'immagine tramite il codice C #, tutto ciò che devi fare è creare un oggetto dell'oggetto BitmapImage e specificare l'URI nel costruttore sovraccaricato. Una volta creato l'oggetto BitmapImage, tutto ciò che devi fare è equipararlo alla proprietà source di Image Control.

BitmapImage myImage = new BitmapImage (new Uri ("/ Images; component / Images / Penguins.jpg", UriKind.Relative));

image1.Source = myImage;

È un controllo piuttosto semplice e ha la sua utilità servita in molti posti.

È tutto per ora, nel prossimo tutorial impareremo di più su Stili e Risorse.

Articoli correlati:

  • GPS, Location API e Calling Web Services: Esercitazione per lo sviluppo di app per Windows Phone - 25
  • Impara a sviluppare applicazioni Mango per Windows Phone 7.5: Parte 1
  • Windows Phone Tutorial 8: creazione di un pulsante personalizzato in Expression Blend-I
  • Windows Phone Tutorial 4: Progettazione dell'interfaccia utente
  • Lavorare con stili e risorse: Esercitazione sullo sviluppo di app per Windows Phone - Parte 19

Consigliato: