Xamarin.Forms Esercitazione su immagini
Prima di provare questa esercitazione è necessario avere completato correttamente:
- Creare la prima Xamarin.Forms guida introduttiva all'app .
- Esercitazione su StackLayout.
In questa esercitazione apprenderai a:
- Creare un Xamarin.Forms
Imageoggetto in XAML. - Personalizzare l'aspetto dell'elemento
Image. - Visualizzare un file di immagine locale da ogni progetto di piattaforma.
Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come visualizzare un'immagine e personalizzarne l'aspetto. Gli screenshot seguenti illustrano l'applicazione finale:
Userai anche Ricaricamento rapido XAML per Xamarin.Forms visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.
Creare un'immagine
Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.
Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata ImageTutorial.
Importante
I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata ImageTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.
Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto ImageTutorial in Esplora soluzioni per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento
Imagein unoStackLayout. La proprietàImage.Sourceconsente di specificare l'immagine da visualizzare, tramite un URI. La proprietàImage.Sourceè di tipoImageSourcee ciò consente di ottenere le immagini da file, URI o risorse. Per altre informazioni, vedere Visualizzazione di immagini nella guida Immagini Xamarin.Forms .La proprietà
HeightRequestspecifica l'altezza dell'elementoImagein unità indipendenti dal dispositivo.Nota
Non è necessario impostare la proprietà
WidthRequestin questo esempio, perché l'elementoImagemantiene le proporzioni dell'immagine per impostazione predefinita.Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:
Nota
La visualizzazione di
Imagememorizza automaticamente nella cache le immagini scaricate per 24 ore. Per altre informazioni, vedere La memorizzazione nella cache delle immagini scaricata nella guida alle immagini Xamarin.Forms .
Personalizzare l'aspetto
In MainPage.xaml modificare la dichiarazione
Imageper personalizzarne l'aspetto:<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Questo codice imposta la proprietà
Aspectche definisce la modalità di ridimensionamento dell'immagine suFill. Il membroFillè definito nell'enumerazioneAspecte adatta l'immagine alla vista, indipendentemente dalla distorsione dell'immagine. Per altre informazioni sul ridimensionamento delle immagini, vedere Visualizzazione di immagini nella guida Immagini.Xamarin.FormsL'estensione di markup
OnPlatformconsente di personalizzare l'aspetto dell'interfaccia utente per ogni piattaforma. In questo esempio l'estensione di markup è usata per impostare le proprietàHeightRequesteWidthRequestsu 300 unità indipendenti dal dispositivo in iOS e su 250 unità indipendenti dal dispositivo in Android. Per altre informazioni sull'estensione di markupOnPlatform, vedere Estensione di markup OnPlatform nella guida Uso di estensioni di markup XAML.Inoltre, la proprietà
HorizontalOptionsspecifica che l'immagine verrà centrata orizzontalmente.Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto:
In Visual Studio arrestare l'applicazione.
Visualizzare un'immagine locale
I file di immagine possono essere aggiunti ai progetti della piattaforma e a cui si fa riferimento dal Xamarin.Forms codice condiviso. Questo metodo di distribuzione delle immagini è necessario quando le immagini sono specifiche della piattaforma, ad esempio quando si usano risoluzioni diverse su piattaforme diverse o progettazioni leggermente differenti.
In questo esercizio si modificherà la soluzione ImageTutorial per visualizzare un'immagine locale anziché un'immagine scaricata da un URI. L'immagine locale è il logo di Xamarin che deve essere scaricato facendo clic sul pulsante seguente.
Importante
Per usare la stessa immagine su tutte le piattaforme si deve usare il medesimo nome di file in tutte le piattaforme e deve trattarsi di un nome di risorsa di Android valido, ad esempio sono ammesse solo lettere minuscole, numeri, il carattere di sottolineatura e il punto.
In Esplora soluzioni, nel progetto ImageTutorial.iOS, espandere Cataloghi asset e fare doppio clic su Asset per aprirlo. Nella scheda Assets.xcassets fare clic sul pulsante Più e selezionare Aggiungi set di immagini:
Nella scheda Assets.xcassets selezionare il nuovo set di immagini e verrà visualizzato l'editor:
Trascinare XamarinLogo.png dal file system alla casella 1x per la categoria Universale:
Nella scheda Assets.xcassets fare clic sul nome del nuovo set di immagini e rinominarlo XamarinLogo:
Salvare e chiudere la scheda Assets.xcassets.
In Esplora soluzioni, nel progetto ImageTutorial.Android, espandere la cartella Risorse. Quindi trascinare XamarinLogo.png dal file system alla cartella drawable:
Nota
Visual Studio imposterà automaticamente l'azione di compilazione per l'immagine su AndroidResource.
Nel progetto ImageTutorial, in MainPage.xaml, modificare la dichiarazione
Imagein modo che visualizzi il file locale XamarinLogo:<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Questo codice imposta la proprietà
Sourcedel file locale da visualizzare. La proprietàWidthRequestè impostata su 300 unità indipendenti dal dispositivo in iOS e 250 unità indipendenti dal dispositivo in Android. Inoltre, la proprietàHorizontalOptionsspecifica che l'immagine verrà centrata orizzontalmente.Nota
Per le immagini PNG in iOS, l'estensione .png può essere omessa dal nome del file specificato nella proprietà
Source. Per altri formati di immagine è richiesta l'estensione.Sulla barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS o dell'emulatore Android prescelto:
In Visual Studio arrestare l'applicazione.
Per altre informazioni sulle immagini locali, vedere Immagini locali nella guida Immagini Xamarin.Forms .
Congratulazioni!
L'esercitazione è stata completata. Si è appreso come:
- Creare un Xamarin.Forms
Imageoggetto in XAML. - Personalizzare l'aspetto dell'elemento
Image. - Visualizzare un file di immagine locale da ogni progetto di piattaforma.
Passaggi successivi
Per altre informazioni sulle nozioni di base sulla creazione di applicazioni per dispositivi mobili con Xamarin.Forms, passare all'esercitazione su Grid.
Collegamenti correlati
Hai un problema con questa sezione? In caso di problemi, fornisci feedback per contribuire al miglioramento della sezione.