Approfondimento sulla Guida introduttiva a Novell. FormsXamarin.Forms Quickstart Deep Dive

Nella Guida introduttiva a Novell. Formsè stata compilata l'applicazione Note.In the Xamarin.Forms Quickstart, the Notes application was built. Questo articolo esamina ciò che è stato compilato per comprendere meglio le nozioni di base del funzionamento delle applicazioni Xamarin.Forms.This article reviews what has been built to gain an understanding of the fundamentals of how Xamarin.Forms applications work.

Introduzione a Visual StudioIntroduction to Visual Studio

Visual Studio consente di organizzare il codice in soluzioni e progetti.Visual Studio organizes code into Solutions and Projects. Una soluzione è un contenitore per uno o più progetti.A solution is a container that can hold one or more projects. Un progetto può essere un'applicazione, una libreria di supporto, un'applicazione di test e altro ancora.A project can be an application, a supporting library, a test application, and more. L'applicazione Notes è costituita da una soluzione contenente quattro progetti, come illustrato nello screenshot seguente:The Notes application consists of one solution containing four projects, as shown in the following screenshot:

I progetti sono:The projects are:

  • Note: questo progetto è il progetto di libreria .NET Standard che include tutto il codice condiviso e l'interfaccia utente condivisa.Notes – This project is the .NET Standard library project that holds all of the shared code and shared UI.
  • Note. Android: questo progetto include codice specifico per Android ed è il punto di ingresso per l'applicazione Android.Notes.Android – This project holds Android-specific code and is the entry point for the Android application.
  • Note. iOS: questo progetto include codice specifico per iOS ed è il punto di ingresso per l'applicazione iOS.Notes.iOS – This project holds iOS-specific code and is the entry point for the iOS application.
  • Notes. UWP: questo progetto include piattaforma UWP (Universal Windows Platform) (UWP) codice specifico e è il punto di ingresso per l'applicazione UWP.Notes.UWP – This project holds Universal Windows Platform (UWP) specific code and is the entry point for the UWP application.

Anatomia di un'applicazione Novell. FormsAnatomy of a Xamarin.Forms application

Lo screenshot seguente illustra il contenuto del progetto di libreria .NET Standard di note in Visual Studio:The following screenshot shows the contents of the Notes .NET Standard library project in Visual Studio:

Il progetto ha un nodo Dipendenze contenente i nodi NuGet e SDK:The project has a Dependencies node that contains NuGet and SDK nodes:

  • NuGet – i pacchetti NuGet Novell. Forms e SQLite-NET-PCL che sono stati aggiunti al progetto.NuGet – the Xamarin.Forms and sqlite-net-pcl NuGet packages that have been added to the project.
  • SDK – il NETStandard.Library metapacchetto fa riferimento al set completo di pacchetti NuGet che definiscono .NET Standard.SDK – the NETStandard.Library metapackage that references the complete set of NuGet packages that define .NET Standard.

Introduzione a Visual Studio per MacIntroduction to Visual Studio for Mac

Visual Studio per Mac segue la prassi di Visual Studio di organizzare il codice in soluzioni e progetti.Visual Studio for Mac follows the Visual Studio practice of organizing code into Solutions and Projects. Una soluzione è un contenitore per uno o più progetti.A solution is a container that can hold one or more projects. Un progetto può essere un'applicazione, una libreria di supporto, un'applicazione di test e altro ancora.A project can be an application, a supporting library, a test application, and more. L'applicazione Notes è costituita da una soluzione contenente tre progetti, come illustrato nello screenshot seguente:The Notes application consists of one solution containing three projects, as shown in the following screenshot:

I progetti sono:The projects are:

  • Note: questo progetto è il progetto di libreria .NET Standard che include tutto il codice condiviso e l'interfaccia utente condivisa.Notes – This project is the .NET Standard library project that holds all of the shared code and shared UI.
  • Note. Android: questo progetto include codice specifico per Android ed è il punto di ingresso per le applicazioni Android.Notes.Android – This project holds Android-specific code and is the entry point for Android applications.
  • Note. iOS: questo progetto include il codice specifico di iOS ed è il punto di ingresso per le applicazioni iOS.Notes.iOS – This project holds iOS specific-code and is the entry point for iOS applications.

Anatomia di un'applicazione Novell. FormsAnatomy of a Xamarin.Forms application

Lo screenshot seguente illustra il contenuto del progetto di libreria .NET Standard di note in Visual Studio per Mac:The following screenshot shows the contents of the Notes .NET Standard library project in Visual Studio for Mac:

Il progetto ha un nodo Dipendenze contenente i nodi NuGet e SDK:The project has a Dependencies node that contains NuGet and SDK nodes:

  • NuGet – i pacchetti NuGet Novell. Forms e SQLite-NET-PCL che sono stati aggiunti al progetto.NuGet – the Xamarin.Forms and sqlite-net-pcl NuGet packages that have been added to the project.
  • SDK – il NETStandard.Library metapacchetto fa riferimento al set completo di pacchetti NuGet che definiscono .NET Standard.SDK – the NETStandard.Library metapackage that references the complete set of NuGet packages that define .NET Standard.

Il progetto è costituito anche da alcuni file:The project also consists of a number of files:

  • Data\NoteDatabase.cs : questa classe contiene codice per la creazione del database, la lettura dei dati, la scrittura dei dati e l'eliminazione dei dati.Data\NoteDatabase.cs – This class contains code to create the database, read data from it, write data to it, and delete data from it.
  • Models\Note.cs : questa classe definisce un Note modello le cui istanze archiviano i dati su ciascuna nota nell'applicazione.Models\Note.cs – This class defines a Note model whose instances store data about each note in the application.
  • App.xaml: markup XAML per la classe App, che definisce un dizionario risorse per l'applicazione.App.xaml – The XAML markup for the App class, which defines a resource dictionary for the application.
  • App.Xaml.cs: code-behind per la classe App, che è responsabile della creazione di istanze della prima pagina visualizzata dall'applicazione in ogni piattaforma e della gestione degli eventi del ciclo di vita dell'applicazione.App.xaml.cs – The code-behind for the App class, which is responsible for instantiating the first page that will be displayed by the application on each platform, and for handling application lifecycle events.
  • AssemblyInfo.cs : questo file contiene un attributo dell'applicazione sul progetto, applicato a livello di assembly.AssemblyInfo.cs – This file contains an application attribute about the project, that is applied at the assembly level.
  • NotesPage. XAML : markup XAML per la NotesPage classe, che definisce l'interfaccia utente per la pagina visualizzata quando l'applicazione viene avviata.NotesPage.xaml – The XAML markup for the NotesPage class, which defines the UI for the page shown when the application launches.
  • NotesPage.XAML.cs : code-behind per la NotesPage classe, che contiene la logica di business che viene eseguita quando l'utente interagisce con la pagina.NotesPage.xaml.cs – The code-behind for the NotesPage class, which contains the business logic that is executed when the user interacts with the page.
  • NoteEntryPage. XAML : markup XAML per la NoteEntryPage classe, che definisce l'interfaccia utente per la pagina visualizzata quando l'utente immette una nota.NoteEntryPage.xaml – The XAML markup for the NoteEntryPage class, which defines the UI for the page shown when the user enters a note.
  • NoteEntryPage.XAML.cs : code-behind per la NoteEntryPage classe, che contiene la logica di business che viene eseguita quando l'utente interagisce con la pagina.NoteEntryPage.xaml.cs – The code-behind for the NoteEntryPage class, which contains the business logic that is executed when the user interacts with the page.

Per altre informazioni sull'anatomia di un'applicazione Xamarin.iOS, vedere l'analisi dettagliata di un'applicazione Xamarin.iOS.For more information about the anatomy of a Xamarin.iOS application, see Anatomy of a Xamarin.iOS Application. Per altre informazioni sull'anatomia di un'applicazione Xamarin.Android, vedere l'analisi dettagliata di un'applicazione Xamarin.Android.For more information about the anatomy of a Xamarin.Android application, see Anatomy of a Xamarin.Android Application.

Nozioni fondamentali sull'architettura e sulle applicazioniArchitecture and application fundamentals

Un'applicazione Xamarin.Forms ha la stessa struttura di un'applicazione multipiattaforma tradizionale.A Xamarin.Forms application is architected in the same way as a traditional cross-platform application. Il codice condiviso in genere viene inserito in una libreria .NET Standard e le applicazioni specifiche della piattaforma usano il codice condiviso.Shared code is typically placed in a .NET Standard library, and platform-specific applications consume the shared code. Il diagramma seguente mostra una panoramica di questa relazione per l'applicazione Note:The following diagram shows an overview of this relationship for the Notes application:

Per ottimizzare il riuso del codice di avvio, le applicazioni Xamarin.Forms hanno una sola classe denominata App, responsabile della creazione dell'istanza della prima pagina visualizzata dall'applicazione in ogni piattaforma, come illustra l'esempio di codice che segue:To maximize the reuse of startup code, Xamarin.Forms applications have a single class named App that is responsible for instantiating the first page that will be displayed by the application on each platform, as shown in the following code example:

using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new NotesPage());
        }
        ...
    }
}

Questo codice imposta la MainPage proprietà App della classe su un' NavigationPage istanza il cui contenuto è un' NotesPage istanza di.This code sets the MainPage property of the App class to a NavigationPage instance whose content is a NotesPage instance.

Inoltre, il file AssemblyInfo.cs contiene un solo attributo applicazione, che viene applicato a livello di assembly:In addition, the AssemblyInfo.cs file contains a single application attribute, that is applied at the assembly level:

using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

L' XamlCompilation attributo attiva il compilatore XAML, in modo che XAML venga compilato direttamente in linguaggio intermedio.The XamlCompilation attribute turns on the XAML compiler, so that XAML is compiled directly into intermediate language. Per altre informazioni, vedere XAML Compilation (Compilazione XAML).For more information, see XAML Compilation.

Avvio dell'applicazione in ogni piattaformaLaunching the application on each platform

iOSiOS

Per avviare la pagina iniziale di Novell. Forms in iOS, il progetto Notes. iOS AppDelegate definisce la classe che eredita FormsApplicationDelegate dalla classe:To launch the initial Xamarin.Forms page in iOS, the Notes.iOS project defines the AppDelegate class that inherits from the FormsApplicationDelegate class:

namespace Notes.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());
            return base.FinishedLaunching(app, options);
        }
    }
}

La sostituzione FinishedLaunching inizializza il framework Xamarin.Forms chiamando il metodo Init.The FinishedLaunching override initializes the Xamarin.Forms framework by calling the Init method. In questo modo l'implementazione specifica di Xamarin.Forms per iOS viene caricata nell'applicazione prima che il controller della visualizzazione radice sia impostato dalla chiamata del metodo LoadApplication.This causes the iOS-specific implementation of Xamarin.Forms to be loaded in the application before the root view controller is set by the call to the LoadApplication method.

AndroidAndroid

Per avviare la pagina iniziale di Novell. Forms in Android, il progetto Notes. Android include il codice Activity che crea MainLauncher un oggetto con l'attributo, con l' FormsAppCompatActivity attività che eredita dalla classe:To launch the initial Xamarin.Forms page in Android, the Notes.Android project includes code that creates an Activity with the MainLauncher attribute, with the activity inheriting from the FormsAppCompatActivity class:

namespace Notes.Droid
{
    [Activity(Label = "Notes",
              Icon = "@mipmap/icon",
              Theme = "@style/MainTheme",
              MainLauncher = true,
              ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
    }
}

La sostituzione OnCreate inizializza il framework Xamarin.Forms chiamando il metodo Init.The OnCreate override initializes the Xamarin.Forms framework by calling the Init method. In questo modo l'implementazione specifica di Xamarin.Forms per Android viene caricata nell'applicazione prima del caricamento dell'applicazione Xamarin.Forms.This causes the Android-specific implementation of Xamarin.Forms to be loaded in the application before the Xamarin.Forms application is loaded.

Piattaforma UWP (Universal Windows Platform)Universal Windows Platform

Nelle applicazioni della piattaforma UWP (Universal Windows Platform) il metodo Init che inizializza il framework Xamarin.Forms viene chiamato dalla classe App:In Universal Windows Platform (UWP) applications, the Init method that initializes the Xamarin.Forms framework is invoked from the App class:

Xamarin.Forms.Forms.Init (e);

if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
  ...
}

Di conseguenza viene caricata nell'applicazione l'implementazione di Xamarin.Forms specifica per la piattaforma UWP.This causes the UWP-specific implementation of Xamarin.Forms to be loaded in the application. La pagina iniziale di Novell. Forms viene avviata dalla MainPage classe:The initial Xamarin.Forms page is launched by the MainPage class:

namespace Notes.UWP
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.LoadApplication(new Notes.App());
        }
    }
}

L'applicazione Xamarin.Forms viene caricata con il metodo LoadApplication.The Xamarin.Forms application is loaded with the LoadApplication method.

Nota

Piattaforma UWP (Universal Windows Platform) app possono essere compilate con Novell. Forms, ma solo con Visual Studio in Windows.Universal Windows Platform apps can be built with Xamarin.Forms, but only using Visual Studio on Windows.

Interfaccia utenteUser interface

Per creare l'interfaccia utente di un'applicazione Novell. Forms, sono disponibili quattro gruppi di controllo principali:There are four main control groups used to create the user interface of a Xamarin.Forms application:

  1. Pagine: le pagine di Xamarin.Forms rappresentano le schermate dell'applicazione multipiattaforma per dispositivi mobili.Pages – Xamarin.Forms pages represent cross-platform mobile application screens. L'applicazione Notes usa la ContentPage classe per visualizzare le singole schermate.The Notes application uses the ContentPage class to display single screens. Per altre informazioni sulle pagine, vedere Xamarin.Forms Pages (Pagine di Xamarin.Forms).For more information about pages, see Xamarin.Forms Pages.
  2. Visualizzazioni: le visualizzazioni di Xamarin.Forms sono i controlli visualizzati nell'interfaccia utente, ad esempio le etichette, i pulsanti e le caselle di immissione testo.Views – Xamarin.Forms views are the controls displayed on the user interface, such as labels, buttons, and text entry boxes. Nell'applicazione Note finite vengono utilizzate ListViewle Editorviste, Button e.The finished Notes application uses the ListView, Editor, and Button views. Per altre informazioni sulle visualizzazioni, vedere Xamarin.Forms Views (Visualizzazioni di Xamarin.Forms).For more information about views, see Xamarin.Forms Views.
  3. Layout: i layout di Xamarin.Forms sono contenitori usati per convertire le visualizzazioni in strutture logiche.Layouts – Xamarin.Forms layouts are containers used to compose views into logical structures. L'applicazione Notes usa la StackLayout classe per disporre le visualizzazioni in uno stack verticale e la Grid classe per disporre i pulsanti orizzontalmente.The Notes application uses the StackLayout class to arrange views in a vertical stack, and the Grid class to arrange buttons horizontally. Per altre informazioni sui layout, vedere Xamarin.Forms Layouts (Layout di Xamarin.Forms).For more information about layouts, see Xamarin.Forms Layouts.
  4. Celle: le celle di Xamarin.Forms sono elementi speciali usati per le voci di un elenco e descrivono la rappresentazione di ogni elemento di un elenco.Cells – Xamarin.Forms cells are specialized elements used for items in a list, and describe how each item in a list should be drawn. L'applicazione Notes USA TextCell per visualizzare due elementi per ogni riga nell'elenco.The Notes application uses the TextCell to display two items for each row in the list. Per altre informazioni sulle celle, vedere Xamarin.Forms Cells (Celle di Xamarin.Forms).For more information about cells, see Xamarin.Forms Cells.

In fase di runtime ogni controllo viene mappato al controllo nativo equivalente, che viene restituito nel rendering.At runtime, each control will be mapped to its native equivalent, which is what will be rendered.

LayoutLayout

L'applicazione Notes USA StackLayout per semplificare lo sviluppo di applicazioni multipiattaforma, organizzando automaticamente le visualizzazioni sullo schermo indipendentemente dalle dimensioni dello schermo.The Notes application uses the StackLayout to simplify cross-platform application development by automatically arranging views on the screen regardless of the screen size. Gli elementi figlio vengono posizionati uno dopo l'altro, orizzontalmente o verticalmente, nell'ordine in cui sono stati aggiunti.Each child element is positioned one after the other, either horizontally or vertically in the order they were added. La quantità di spazio usata dall'elemento StackLayout dipende dall'impostazione delle proprietà HorizontalOptions e VerticalOptions, ma per impostazione predefinita StackLayout prova a usare l'intero schermo.How much space the StackLayout will use depends on how the HorizontalOptions and VerticalOptions properties are set, but by default the StackLayout will try to use the entire screen.

Il codice XAML seguente mostra un esempio di utilizzo di StackLayout un oggetto per NoteEntryPageil layout dell'oggetto:The following XAML code shows an example of using a StackLayout to layout the NoteEntryPage:

<?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="Notes.NoteEntryPage"
             Title="Note Entry">
    ...    
    <StackLayout Margin="{StaticResource PageMargin}">
        <Editor Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />
        <Grid>
            ...
        </Grid>
    </StackLayout>    
</ContentPage>

Per impostazione predefinita StackLayout , presuppone un orientamento verticale.By default the StackLayout assumes a vertical orientation. Tuttavia, può essere modificato in un orientamento orizzontale impostando la StackLayout.Orientation proprietà sul membro dell' StackOrientation.Horizontal enumerazione.However, it can be changed to a horizontal orientation by setting the StackLayout.Orientation property to the StackOrientation.Horizontal enumeration member.

Nota

Le dimensioni delle visualizzazioni possono essere impostate tramite le HeightRequest proprietà WidthRequest e.The size of views can be set through the HeightRequest and WidthRequest properties.

Per altre informazioni sulla classe StackLayout, vedere StackLayout.For more information about the StackLayout class, see StackLayout.

Risposta all'interazione dell'utenteResponding to user interaction

Un oggetto definito in XAML può generare un evento che viene gestito nel file code-behind.An object defined in XAML can fire an event that is handled in the code-behind file. Nell'esempio di codice seguente viene OnSaveButtonClicked illustrato il metodo nel code-behind per NoteEntryPage la classe, che viene eseguito in risposta alla Clicked generazione dell'evento sul pulsante Salva .The following code example shows the OnSaveButtonClicked method in the code-behind for the NoteEntryPage class, which is executed in response to the Clicked event firing on the Save button.

async void OnSaveButtonClicked(object sender, EventArgs e)
{
    var note = (Note)BindingContext;
    note.Date = DateTime.UtcNow;
    await App.Database.SaveNoteAsync(note);
    await Navigation.PopAsync();
}

Il OnSaveButtonClicked metodo salva la nota nel database e torna alla pagina precedente.The OnSaveButtonClicked method saves the note in the database, and navigates back to the previous page.

Nota

Il file code-behind per una classe XAML è in grado di accedere a un oggetto definito in XAML usando il nome assegnato con l'attributo x:Name.The code-behind file for a XAML class can access an object defined in XAML using the name assigned to it with the x:Name attribute. Il valore assegnato a questo attributo ha le stesse regole delle variabili di C#, poiché deve iniziare con una lettera o un carattere di sottolineatura e non contenere spazi incorporati.The value assigned to this attribute has the same rules as C# variables, in that it must begin with a letter or underscore and contain no embedded spaces.

Il collegamento del pulsante Salva al OnSaveButtonClicked metodo si verifica nel markup XAML per la NoteEntryPage classe:The wiring of the save button to the OnSaveButtonClicked method occurs in the XAML markup for the NoteEntryPage class:

<Button Text="Save"
        Clicked="OnSaveButtonClicked" />

ElenchiLists

ListView È responsabile della visualizzazione di una raccolta di elementi verticalmente in un elenco.The ListView is responsible for displaying a collection of items vertically in a list. Ogni elemento nell' ListView oggetto sarà contenuto in un'unica cella.Each item in the ListView will be contained in a single cell.

Nell'esempio ListView NotesPagedi codice seguente viene illustrato l'oggetto da:The following code example shows the ListView from the NotesPage:

<ListView x:Name="listView"
          Margin="{StaticResource PageMargin}"
          ItemSelected="OnListViewItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Text}"
                      Detail="{Binding Date}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Il layout di ogni riga in ListView viene definito all'interno dell' ListView.ItemTemplate elemento e utilizza Data Binding per visualizzare eventuali note recuperate dall'applicazione.The layout of each row in the ListView is defined within the ListView.ItemTemplate element, and uses data binding to display any notes that are retrieved by the application. La ListView.ItemsSource proprietà è impostata sull'origine dati, in NotesPage.xaml.cs:The ListView.ItemsSource property is set to the data source, in NotesPage.xaml.cs:

protected override async void OnAppearing()
{
    base.OnAppearing();

    listView.ItemsSource = await App.Database.GetNotesAsync();
}

Questo codice popola l'oggetto ListView con le eventuali note archiviate nel database.This code populates the ListView with any notes stored in the database.

Quando si seleziona una riga in ListView, viene generato l' ItemSelected evento.When a row is selected in the ListView, the ItemSelected event fires. Un gestore eventi, denominato OnListViewItemSelected, viene eseguito quando viene generato l'evento:An event handler, named OnListViewItemSelected, is executed when the event fires:

async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (e.SelectedItem != null)
    {
        ...
    }
}

L' ItemSelected evento può accedere all'oggetto associato alla cella tramite la e.SelectedItem proprietà.The ItemSelected event can access the object that was associated with the cell through the e.SelectedItem property.

Per ulteriori informazioni sulla ListView classe, vedere ListView.For more information about the ListView class, see ListView.

Xamarin.Forms offre diverse esperienze di navigazione tra le pagine, a seconda del tipo Page in uso.Xamarin.Forms provides a number of different page navigation experiences, depending upon the Page type being used. Per ContentPage la navigazione delle istanze può essere gerarchica o modale.For ContentPage instances navigation can be hierarchical, or modal. Per informazioni sull'esplorazione modale, vedere Novell. Forms Modal Pages.For information about modal navigation, see Xamarin.Forms Modal Pages.

Nota

Le classi CarouselPage, MasterDetailPage e TabbedPage offrono esperienze di navigazione alternative.The CarouselPage, MasterDetailPage and TabbedPage classes provide alternative navigation experiences. Per altre informazioni, vedere Navigazione.For more information, see Navigation.

Nell'esplorazione gerarchica la classe NavigationPage viene utilizzata per spostarsi tra uno stack di ContentPage oggetti, avanti e indietro, a seconda delle esigenze.In hierarchical navigation, the NavigationPage class is used to navigate through a stack of ContentPage objects, forwards and backwards, as desired. La classe implementa la navigazione come stack LIFO (Last-In, First-Out) di oggetti Page.The class implements navigation as a last-in, first-out (LIFO) stack of Page objects. Per passare da una pagina all'altra, un'applicazione esegue il push di una nuova pagina nello stack di navigazione, in cui diventa la pagina attiva.To move from one page to another, an application will push a new page onto the navigation stack, where it will become the active page. Per tornare alla pagina precedente, l'applicazione preleva la pagina corrente dallo stack di navigazione e la nuova pagina in primo piano diventa la pagina attiva.To return back to the previous page, the application will pop the current page from the navigation stack, and the new topmost page becomes the active page.

La classe NavigationPage aggiungerà inoltre una barra di navigazione nella parte superiore della pagina che consente di visualizzare un titolo e un pulsante Indietro appropriato per la piattaforma per tornare alla pagina precedente.The NavigationPage class will also add a navigation bar to the top of the page that displays a title and a platform-appropriate Back button that will return to the previous page.

La prima pagina aggiunta a uno stack di navigazione viene definita pagina radice dell'applicazione e nell'esempio di codice seguente viene illustrato il modo in cui questa operazione viene eseguita nell'applicazione Note:The first page added to a navigation stack is referred to as the root page of the application, and the following code example shows how this is accomplished in the Notes application:

public App ()
{
    ...
    MainPage = new NavigationPage (new NotesPage ());
}

Tutte le istanze di ContentPage hanno una proprietà Navigation che espone i metodi per modificare lo stack della pagina.All ContentPage instances have a Navigation property that exposes methods to modify the page stack. Questi metodi dovrebbero essere richiamati solo se l'applicazione include una NavigationPage.These methods should only be invoked if the application includes a NavigationPage. Per passare alla NoteEntryPage, è necessario richiamare il metodo PushAsync come illustrato nell'esempio di codice seguente:To navigate to the NoteEntryPage, it is necessary to invoke the PushAsync method as demonstrated in the code example below:

await Navigation.PushAsync(new NoteEntryPage());

In questo modo viene NoteEntryPage eseguito il push del nuovo oggetto nello stack di navigazione, in cui diventa la pagina attiva.This causes the new NoteEntryPage object to be pushed onto the navigation stack, where it becomes the active page.

La pagina attiva può essere prelevata dallo stack di navigazione premendo il pulsante Indietro (fisico o su schermo) del dispositivo.The active page can be popped from the navigation stack by pressing the Back button on the device, regardless of whether this is a physical button on the device or an on-screen button. Per tornare a livello di codice alla pagina originale, l'oggetto NoteEntryPage deve chiamare il metodo PopAsync, come illustrato nell'esempio di codice seguente:To programmatically return back to the original page, the NoteEntryPage object must invoke the PopAsync method, as demonstrated in the code example below:

await Navigation.PopAsync();

Per altre informazioni sulla navigazione gerarchica, vedere Navigazione gerarchica.For more information about hierarchical navigation, see Hierarchical Navigation.

Associazione datiData binding

Il data binding viene usato per semplificare il modo in cui un'applicazione Xamarin.Forms visualizza i propri dati e interagisce con essi.Data binding is used to simplify how a Xamarin.Forms application displays and interacts with its data. Stabilisce una connessione tra l'interfaccia utente e l'applicazione sottostante.It establishes a connection between the user interface and the underlying application. La classe BindableObject contiene la maggior parte dell'infrastruttura per supportare il data binding.The BindableObject class contains much of the infrastructure to support data binding.

Il data binding (o associazione di dati) consente di connettere due oggetti, detti oggetti di origine e di destinazione.Data binding connects two objects, called the source and the target. L'oggetto di origine visualizza i dati.The source object provides the data. L'oggetto di destinazione usa (e spesso visualizza) i dati dall'oggetto di origine.The target object will consume (and often display) data from the source object. Un Editor (oggetto didestinazione ), ad esempio, in genere Text associa la relativa proprietà string a una proprietà pubblica in un oggetto di origine .For example, an Editor (target object) will commonly bind its Text property to a public string property in a source object. Il diagramma che segue illustra la relazione di associazione:The following diagram illustrates the binding relationship:

Il vantaggio principale del data binding sta nel fatto che non è più necessario preoccuparsi della sincronizzazione tra le visualizzazioni e l'origine dati.The main benefit of data binding is that you no longer have to worry about synchronizing data between your views and data source. Le modifiche apportate all'oggetto di origine vengono trasmesse automaticamente in background all'oggetto di destinazione dal framework di associazione. Facoltativamente, le modifiche all'oggetto di destinazione possono anche essere respinte all'oggetto di origine.Changes in the source object are automatically pushed to the target object behind-the-scenes by the binding framework, and changes in the target object can be optionally pushed back to the source object.

La definizione di data binding è un processo in due passaggi:Establishing data binding is a two-step process:

  • La proprietà BindingContext dell'oggetto di destinazione deve essere impostata sull'origine.The BindingContext property of the target object must be set to the source.
  • È necessario stabilire un'associazione tra la destinazione e l'origine.A binding must be established between the target and the source. In XAML questo si ottiene usando l'estensione di markup Binding.In XAML, this is achieved by using the Binding markup extension.

Nell'applicazione Notes la destinazione del binding è Editor la che visualizza una nota, mentre l' Note istanza impostata come BindingContext di è l' NoteEntryPage origine dell'associazione.In the Notes application, the binding target is the Editor that displays a note, while the Note instance set as the BindingContext of NoteEntryPage is the binding source.

L' BindingContext oggettoNoteEntryPage di viene impostato durante la navigazione tra le pagine, come illustrato nell'esempio di codice seguente:The BindingContext of the NoteEntryPage is set during page navigation, as shown in the following code example:

async void OnNoteAddedClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new NoteEntryPage
    {
        BindingContext = new Note()
    });
}

async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (e.SelectedItem != null)
    {
        await Navigation.PushAsync(new NoteEntryPage
        {
            BindingContext = e.SelectedItem as Note
        });
    }
}

Nel metodo, che viene eseguito quando viene aggiunta una nuova nota all'applicazione, l'oggetto BindingContext di NoteEntryPage viene impostato su una nuova Note istanza di. OnNoteAddedClickedIn the OnNoteAddedClicked method, which is executed when a new note is added to the application, the BindingContext of NoteEntryPage is set to a new Note instance. Note BindingContext ListView e.SelectedItem NoteEntryPage Nel metodo, che viene eseguito quando viene selezionata una nota esistente in, il valore di viene impostato sull'istanza selezionata, a cui si accede tramite la proprietà. OnListViewItemSelectedIn the OnListViewItemSelected method, which is executed when an existing note is selected in the ListView, the BindingContext of the NoteEntryPage is set to the selected Note instance, which is accessed through the e.SelectedItem property.

Importante

È possibile impostare individualmente la proprietà BindingContext di ogni oggetto di destinazione, ma questa operazione non è necessaria.While the BindingContext property of each target object can be individually set, this isn’t necessary. BindingContext è una proprietà speciale che viene ereditata da tutti gli elementi figlio.BindingContext is a special property that’s inherited by all its children. Pertanto, quando l' BindingContext Note oggetto ContentPage in è impostato su un' Note ContentPage istanza di, tutti gli elementi figlio di hanno lo stesso BindingContexte possono eseguire l'associazione alle proprietà pubbliche dell'oggetto.Therefore, when the BindingContext on the ContentPage is set to a Note instance, all of the children of the ContentPage have the same BindingContext, and can bind to public properties of the Note object.

Editor In vieneNoteEntryPagequindi associato allaNote proprietà dell'oggetto: TextThe Editor in NoteEntryPage then binds to the Text property of the Note object:

<Editor Placeholder="Enter your note"
        Text="{Binding Text}"
        ... />

Viene definita un'associazione tra la proprietà Editor.Text e la proprietà Text dell'oggetto di origine.A binding between the Editor.Text property and the Text property of the source object is established. Le modifiche apportate in Editor verranno automaticamente propagate Note all'oggetto.Changes made in the Editor will automatically be propagated to the Note object. Analogamente, se vengono apportate Note.Text modifiche alla proprietà, il motore Editordi associazione Novell. Forms aggiornerà anche il contenuto di.Similarly, if changes are made to the Note.Text property, the Xamarin.Forms binding engine will also update the contents of the Editor. Questa funzionalità è detta associazione bidirezionale.This is known as a two-way binding.

Per altre informazioni sul data binding, vedere Data binding di Xamarin.Forms.For more information about data binding, see Xamarin.Forms Data Binding.

StileStyling

Le applicazioni Novell. Forms contengono spesso più elementi visivi con un aspetto identico.Xamarin.Forms applications often contain multiple visual elements that have an identical appearance. L'impostazione dell'aspetto di ogni elemento visivo può essere ripetitiva e soggetta a errori.Setting the appearance of each visual element can be repetitive and error prone. È invece possibile creare stili che definiscono l'aspetto e quindi applicati agli elementi visivi richiesti.Instead, styles can be created that define the appearance, and then applied to the required visual elements.

La Style classe raggruppa una raccolta di valori di proprietà in un oggetto che può quindi essere applicato a più istanze di elementi visivi.The Style class groups a collection of property values into one object that can then be applied to multiple visual element instances. Gli stili vengono archiviati in ResourceDictionaryun oggetto a livello di applicazione, a livello di pagina o a livello di visualizzazione.Styles are stored in a ResourceDictionary, either at the application level, the page level, or the view level. La scelta della posizione in Style cui definire un effetto può essere utilizzata:Choosing where to define a Style impacts where it can be used:

  • Stylele istanze definite a livello di applicazione possono essere applicate all'interno dell'applicazione.Style instances defined at the application level can be applied throughout the application.
  • Stylele istanze definite a livello di pagina possono essere applicate alla pagina e ai relativi elementi figlio.Style instances defined at the page level can be applied to the page and to its children.
  • Stylele istanze definite a livello di visualizzazione possono essere applicate alla vista e ai relativi elementi figlio.Style instances defined at the view level can be applied to the view and to its children.

Importante

Gli stili usati in tutta l'applicazione vengono archiviati nel dizionario risorse dell'applicazione per evitare la duplicazione.Any styles that are used throughout the application are stored in the application's resource dictionary to avoid duplication. Tuttavia, il codice XAML specifico di una pagina non deve essere incluso nel dizionario risorse dell'applicazione, perché le risorse verranno analizzate all'avvio dell'applicazione anziché quando richiesto da una pagina.However, XAML that's specific to a page shouldn't be included in the application's resource dictionary, as the resources will then be parsed at application startup instead of when required by a page.

Ogni Style istanza contiene una raccolta di uno o più Setter oggetti, ognuno Setter dei quali ha Property un oggetto Valuee un oggetto.Each Style instance contains a collection of one or more Setter objects, with each Setter having a Property and a Value. È il nome della proprietà associabile dell'elemento a cui viene applicato lo stile Value e è il valore applicato alla proprietà. PropertyThe Property is the name of the bindable property of the element the style is applied to, and the Value is the value that is applied to the property. Nell'esempio di codice riportato di seguito viene NoteEntryPageillustrato uno stile da:The following code example shows a style from NoteEntryPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.NoteEntryPage"
             Title="Note Entry">
    <ContentPage.Resources>
        <!-- Implicit styles -->
        <Style TargetType="{x:Type Editor}">
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppBackgroundColor}" />
        </Style>
        ...
    </ContentPage.Resources>
    ...
</ContentPage>

Questo stile viene applicato a tutte Editor le istanze nella pagina.This style is applied to any Editor instances on the page.

Quando si crea Styleun oggetto TargetType , la proprietà è sempre obbligatoria.When creating a Style, the TargetType property is always required.

Nota

Lo stile di un'applicazione Novell. Forms viene tradizionalmente eseguito tramite gli stili XAML.Styling a Xamarin.Forms application is traditionally accomplished by using XAML styles. Tuttavia, Novell. Forms supporta anche l'applicazione di stili agli elementi visivi tramite Cascading Style Sheets (CSS).However, Xamarin.Forms also supports styling visual elements using Cascading Style Sheets (CSS). Per altre informazioni, vedere applicazione di stili a Novell. Forms con Cascading Style Sheets (CSS).For more information, see Styling Xamarin.Forms apps using Cascading Style Sheets (CSS).

Per altre informazioni sugli stili XAML, vedere Applicazione di stili alle app Xamarin.Forms con gli stili XAML.For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

Fornire stili specifici della piattaformaProviding platform-specific styles

Le OnPlatform estensioni di markup consentono di personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma:The OnPlatform markup extensions allow you to customize UI appearance on a per-platform basis:

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.App">
    <Application.Resources>
        ...
        <Color x:Key="iOSNavigationBarColor">WhiteSmoke</Color>
        <Color x:Key="AndroidNavigationBarColor">#2196F3</Color>
        <Color x:Key="iOSNavigationBarTextColor">Black</Color>
        <Color x:Key="AndroidNavigationBarTextColor">White</Color>

        <Style TargetType="{x:Type NavigationPage}">
            <Setter Property="BarBackgroundColor"
                    Value="{OnPlatform iOS={StaticResource iOSNavigationBarColor},
                                       Android={StaticResource AndroidNavigationBarColor}}" />
             <Setter Property="BarTextColor"
                    Value="{OnPlatform iOS={StaticResource iOSNavigationBarTextColor},
                                       Android={StaticResource AndroidNavigationBarTextColor}}" />           
        </Style>
        ...
    </Application.Resources>
</Application>

Color BarBackgroundColor Vengono impostati valori diversi per le proprietà BarTextColor e di NavigationPage, a seconda della piattaforma utilizzata. StyleThis Style sets different Color values for the BarBackgroundColor and BarTextColor properties of NavigationPage, depending on the platform being used.

Per altre informazioni sulle estensioni di markup XAML, vedere XAML Markup Extensions (Estensioni di markup XAML).For more information about XAML markup extensions, see XAML Markup Extensions. Per informazioni sull' OnPlatform estensione di markup, vedere estensione di markup onplatform.For information about the OnPlatform markup extension, see OnPlatform Markup Extension.

Test e distribuzioneTesting and deployment

Visual Studio per Mac e Visual Studio offrono entrambi numerose opzioni per il test e la distribuzione di un'applicazione.Visual Studio for Mac and Visual Studio both provide many options for testing and deploying an application. Il debug delle applicazioni fa parte del ciclo di vita dello sviluppo delle applicazioni e consente di diagnosticare i problemi del codice.Debugging applications is a common part of the application development lifecycle and helps to diagnose code issues. Per altre informazioni, vedere gli articoli relativi all'impostazione di un punto di interruzione, al passaggio attraverso il codice e all'output di informazioni alla finestra del log.For more information, see Set a Breakpoint, Step Through Code, and Output Information to the Log Window.

I simulatori sono un ottimo strumento per iniziare a distribuire e testare e offrono funzionalità utili per testare le applicazioni.Simulators are a good place to start deploying and testing an application, and feature useful functionality for testing applications. Tuttavia, gli utenti non useranno l'applicazione finale in un simulatore, quindi le applicazioni devono essere testate nei dispositivi reali presto e spesso.However, users will not consume the final application in a simulator, so applications should be tested on real devices early and often. Per altre informazioni sul provisioning dei dispositivi iOS, vedere Provisioning dei dispositivi.For more information about iOS device provisioning, see Device Provisioning. Per altre informazioni sul provisioning dei dispositivi Android, vedere Set Up Device for Development (Configurare il dispositivo per lo sviluppo).For more information about Android device provisioning, see Set Up Device for Development.

Passaggi successiviNext steps

Questo approfondimento ha esaminato le nozioni di base dello sviluppo di applicazioni con Novell. Forms.This deep dive has examined the fundamentals of application development using Xamarin.Forms. I passaggi suggeriti che seguono includono informazioni sulle funzionalità seguenti:Suggested next steps include reading about the following functionality:

  • Per creare l'interfaccia utente di un'applicazione in Xamarin.Forms è possibile usare quattro gruppi di controlli principali.There are four main control groups used to create the user interface of a Xamarin.Forms application. Per altre informazioni, vedere Riferimento per i controlli.For more information, see Controls Reference.
  • Il data binding è una tecnica che consente di collegare le proprietà di due oggetti in modo che le modifiche apportate a una proprietà vengano automaticamente riflesse nell'altra proprietà.Data binding is a technique for linking properties of two objects so that changes in one property are automatically reflected in the other property. Per altre informazioni, vedere Data Binding.For more information, see Data Binding.
  • Xamarin.Forms offre diverse esperienze di navigazione delle pagine, a seconda del tipo di pagina in uso.Xamarin.Forms provides a number of different page navigation experiences, depending upon the page type being used. Per altre informazioni, vedere Navigazione.For more information, see Navigation.
  • Gli stili consentono di ridurre il markup ripetitivo e di modificare facilmente l'aspetto di un'applicazione.Styles help to reduce repetitive markup, and allow an applications appearance to be more easily changed. Per altre informazioni, vedere Applicazione di stili alle app Xamarin.Forms.For more information, see Styling Xamarin.Forms Apps.
  • Le estensioni di markup XAML estendono le potenzialità e la flessibilità di XAML consentendo di impostare gli attributi degli elementi da origini diverse dalle stringhe di testo letterali.XAML markup extensions extend the power and flexibility of XAML by allowing element attributes to be set from sources other than literal text strings. Per altre informazioni, vedere Estensioni di markup XAML.For more information, see XAML Markup Extensions.
  • I modelli di dati consentono di definire la presentazione dei dati nelle viste supportate.Data templates provide the ability to define the presentation of data on supported views. Per altre informazioni, vedere Data Templates (Modelli di dati).For more information, see Data Templates.
  • Il rendering di ogni pagina, layout e vista viene eseguito in modo diverso su ogni piattaforma usando una classe Renderer che a sua volta crea un controllo nativo, lo dispone sullo schermo e aggiunge il comportamento specificato nel codice condiviso.Each page, layout, and view is rendered differently on each platform using a Renderer class that in turn creates a native control, arranges it on the screen, and adds the behavior specified in the shared code. Gli sviluppatori possono implementare le proprie classi Renderer per personalizzare l'aspetto e/o il comportamento di un controllo.Developers can implement their own custom Renderer classes to customize the appearance and/or behavior of a control. Per altre informazioni, vedere Custom Renderers (Renderer personalizzati).For more information, see Custom Renderers.
  • Anche gli effetti consentono la personalizzazione dei controlli nativi in ogni piattaforma.Effects also allow the native controls on each platform to be customized. Gli effetti vengono creati in processi specifici per la piattaforma creando sottoclassi della classe PlatformEffect e vengono utilizzati associandoli a un controllo Xamarin.Forms appropriato.Effects are created in platform-specific projects by subclassing the PlatformEffect class, and are consumed by attaching them to an appropriate Xamarin.Forms control. Per altre informazioni, vedere Effects (Effetti).For more information, see Effects.
  • Il codice condiviso può accedere alle funzionalità native tramite la classe DependencyService.Shared code can access native functionality through the DependencyService class. Per altre informazioni, vedere Accessing Native Features with DependencyService (Accesso alle funzionalità native con DependencyService).For more information, see Accessing Native Features with DependencyService.

In alternativa, per informazioni aggiuntive su Xamarin.Forms un buon punto di partenza è il libro Creating Mobile Apps with Xamarin.Forms (Creazione di app per dispositivi mobili con Xamarin.Forms) di Charles Petzold.Alternatively, Creating Mobile Apps with Xamarin.Forms, a book by Charles Petzold, is a good place to learn more about Xamarin.Forms. Il libro è disponibile in formato PDF o in un'ampia gamma di formati di eBook.The book is available as a PDF or in a variety of ebook formats.