Share
Quando si tratta di progettare e disporre le schermate della tua applicazione, hai due opzioni principali: scrivere codice o usare XAML. Se hai mai fatto uno sviluppo WPF (Windows Presentation Foundation) o Silverlight, probabilmente hai già familiarità con XAML. XAML è il Linguaggio di markup dell'applicazione eXtensible che è stato creato per aiutare a definire l'aspetto di un'applicazione senza doverlo gestire tutto in codice. Xamarin.Forms funziona con entrambe le opzioni. Alla fine spetterà a te decidere quale opzione preferisci.
È importante notare che XAML utilizzato per Xamarin.Forms non è compatibile con altre forme di strumenti XAML e XAML.
Se sei il tipo di persona che ama essere nel codice e non vuole nulla a che fare con qualsiasi tipo di markup, o un designer, allora probabilmente sarai molto a tuo agio con questa opzione. Si istanziano a livello di codice diversi tipi di vista oggetti e aggiungerli direttamente a Pagina o ad a disposizione a Pagina. Ecco un semplice esempio di creazione di un SimplePage classe, istanziando alcuni vista oggetti e aggiungendoli al Pagina attraverso a stackLayout oggetto.
public class SamplePage: ContentPage public SamplePage () Padding = new Thickness (20); var label = new Label Text = "I am a simple page", BackgroundColor = Color.Blue, Font = Font.SystemFontOfSize (30), WidthRequest = 150, HeightRequest = 40; var button = new Button Text = "Ho un pulsante", BackgroundColor = Color.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 200, HeightRequest = 200; var entry = new Entry Placeholder = "I have a entry box", BackgroundColor = Color.Green, WidthRequest = 200, HeightRequest = 150; Content = new StackLayout Spacing = 10, Children = button, entry, label;
Come puoi vedere, il vista gli oggetti hanno un numero di proprietà in comune, che puoi usare per impostare il testo, i colori, la spaziatura, l'altezza, la larghezza, ecc. Tutto quello che devi fare ora è modificare il GetMainPage metodo nel App classe per restituire una nuova istanza di Pagina di esempio classe, e via vai.
Nessuno mi ha mai accusato di essere un designer, ma è facile creare pagine di base nel codice.
Se preferisci separare l'aspetto della tua applicazione dalla logica e dall'implementazione, XAML potrebbe essere la soluzione giusta. XAML ti consente di creare l'intero layout della tua applicazione in un formato XML specializzato che Xamarin può tradurre nelle pagine, nei layout, nelle viste e nelle celle e visualizzarle all'utente. Se non hai mai usato XAML prima, ci vuole un po 'per abituarsi. Tuttavia, una volta capito, può essere abbastanza carino.
Per utilizzare XAML in combinazione con Xamarin.Forms, dovrai creare il tuo progetto usando il App vuota (Xamarin.Forms Portable) modello in modo che tutto il codice Xamarin.Forms possa essere separato nella propria dll.
Nell'esempio di codice della sezione precedente, hai creato un modo molto semplice Pagina dei contenuti classe nel codice. Per creare lo stesso Pagina dei contenuti utilizzando XAML, fare clic con il tasto destro del mouse sul progetto PCL e selezionare Aggiungi> Nuovo elemento. Dal Aggiungi un nuovo elemento finestra di dialogo, selezionare il Forma pagina Xaml modello e sostituire i contenuti predefiniti con il seguente:
Se esegui la tua applicazione, dovresti vedere la stessa schermata dell'esempio di codice. Il Pagina, disposizione, e vista i tipi si associano agli elementi XML e le proprietà sono gli attributi dell'elemento. Sei libero di utilizzare entrambe le opzioni per creare interfacce utente completamente personalizzabili e multipiattaforma.
È possibile creare app in cui creare il vista oggetti per il tuo Pagina oggetti e impostano esplicitamente le loro proprietà, ma questo diventa rapidamente ingombrante. Quando imposti esplicitamente le proprietà nel codice XAML, non puoi più riutilizzare tale XAML Pagina per qualsiasi altra cosa In altre parole, devi creare nuove pagine XAML per ogni variazione di cui hai bisogno. Chi ha tempo per questo?
Non sarebbe bello se tu potessi creare pagine XAML riutilizzabili senza codice di interfaccia utente personalizzato e tenere tutto separato logicamente? Ovviamente. Benvenuto in MVVM.
Model-View-ViewModel è un modello architettonico creato pensando a XAML. Al centro, condivide il concetto di base di altri modelli architettonici come MVP e MVC. È stato progettato per separare i dati, il livello del modello, dalla presentazione, dal livello di vista. Il condotto tra i due è il ViewModel. Il modello di vista è una classe che facilita la comunicazione tra il modello e i livelli di vista attraverso un meccanismo noto come associazione dati. L'associazione dei dati è al centro del modello MVVM e viene effettuata tramite XAML stesso. Diamo un'occhiata a un esempio.
Inizia creando una nuova applicazione Xamarin.Forms selezionando App vuota (Xamarin.Forms Portable) modello di progetto e dandogli il nome di MyRecipeBox.
Come probabilmente hai intuito, questa sarà la base per un'app di base in grado di memorizzare le ricette. Iniziamo creando un modello base dell'app, una ricetta.
Nel MyRecipeBox progetto, creare una nuova cartella e nominarla Modelli. Questo non è un requisito, ma aggiunge semplicemente un'organizzazione al progetto che aiuta sempre man mano che aumenta. Nel Modelli cartella, aggiungere una nuova classe e nominarla Ricetta. Sostituisci l'implementazione predefinita con quanto segue:
classe pubblica Recipe stringa pubblica Nome get; impostato; stringa pubblica Descrizione get; impostato; public TimeSpan PrepTime get; impostato; public TimeSpan CookingTime get; impostato; Elenco pubblicoIndicazioni get; impostato;
Ora che hai una classe modello di base, puoi creare un modello di visualizzazione per esso. Pensa a un modello di vista come una classe che contiene le parti di un modello che devono essere mostrate e interagite con uno schermo. Per semplificare le cose, ci concentreremo sulle quattro proprietà principali.
Crea una nuova cartella nel MyRecipeBox progetto e chiamarlo ViewModels. Nel ViewModels cartella, creare una nuova classe e nominarla RecipeViewModel. Quando si adotta lo schema MVVM in .NET, i ViewModels sono in genere caratterizzati dal fatto che implementano il INotifyPropertyChanged interfaccia. Questa interfaccia è ciò che viene utilizzato per consentire ad altre parti del codice di sottoscrivere eventi e abilitare l'associazione dei dati. Sostituire l'implementazione predefinita di RecipeViewModel classe con il seguente:
public class RecipeViewModel: INotifyPropertyChanged Ricetta privata _recipe; evento pubblico PropertyChangedEventHandler PropertyChanged; RecipeViewModel pubblico (ricetta ricetta) _recipe = ricetta; Indicazioni = nuova ObservableCollection(_recipe.Directions); ObservableCollection pubblica Indicazioni get; impostato; public string Nome get return _recipe! = null? _recipe.Name: null; set if (_recipe! = null) _recipe.Name = valore; if (PropertyChanged! = null) PropertyChanged (this, new PropertyChangedEventArgs ("Name")); public stringa Descrizione get return _recipe! = null? _recipe.Description: null; set if (_recipe! = null) _recipe.Description = value; if (PropertyChanged! = null) PropertyChanged (this, new PropertyChangedEventArgs ("Description")); public string PrepTime get return _recipe! = null? _recipe.PrepTime.ToString (): "Nessuno"; set if (_recipe! = null) _recipe.PrepTime = TimeSpan.Parse (valore); if (PropertyChanged! = null) PropertyChanged (this, new PropertyChangedEventArgs ("PrepTime")); public stringa CookingTime get return _recipe! = null? _recipe.CookingTime.ToString (): "Nessuno"; set if (_recipe! = null) _recipe.CookingTime = TimeSpan.Parse (valore); if (PropertyChanged! = null) PropertyChanged (this, new PropertyChangedEventArgs ("CookingTime"));
Potresti aver notato che il RecipeViewModel implementa il INotifyPropertyChanged interfaccia. Se approfondisci questa interfaccia, vedrai che contiene una proprietà che deve essere implementata.
interfaccia pubblica INotifyPropertyChanged event PropertyChangedEventHandler PropertyChanged;
Il RecipleViewModel la classe prende in un'istanza del Ricetta classe e quindi espone solo quattro delle sue proprietà. I getter associati a tali proprietà restituiscono semplicemente i dati nel file Ricetta istanza stessa. Gli incastonatori, d'altra parte, controllano per vedere se PropertyChanged non è nullo. PropertyChanged sarà nullo se non ci sono abbonati a questo evento. In tal caso, non succede nulla. Se PropertyChanged non è nullo, quindi l'evento viene chiamato e ogni sottoscrittore dell'evento riceve l'informazione che questo modello di vista è cambiato.
Nel pattern MVVM, il sottoscrittore di questi eventi è in genere la vista descritta da XAML che consente l'aggiornamento dell'interfaccia utente se i modelli sottostanti sono cambiati.
È ora di creare una pagina che mostri all'utente i dati della ricetta e sfrutti l'associazione dati per aggiornare l'interfaccia utente. Inizia creando un Visualizzazioni cartella nel MyRecipeBox progetto. Nel Visualizzazioni cartella, aggiungi un nuovo Forma pagina Xaml e nominalo RecipeSummaryPage.
Sostituisci il file XAML predefinito nel file con il seguente:
Come puoi vedere, il legame viene creato posizionando del testo formattato nel punto in cui desideri visualizzare i dati associati. La sintassi per raggiungere questo è "Binding xxxxx", dove xxxxx è il nome della proprietà a cui si desidera associare. Infine, potresti chiederti come leghi il modello di vista che hai creato a questa vista.
Se fai clic sulla piccola freccia accanto al RecipeSummaryPage.xaml file, dovresti vedere apparire un altro file, RecipleSummaryPage.xaml.cs. Questo è il codice dietro il file che contiene il codice C # per eseguire questa pagina. È necessario modificare il costruttore di questa classe per assomigliare a questo:
public RecipeSummaryPage (RecipeViewModel recipeViewModel) InitializeComponent (); this.BindingContext = recipeViewModel;
Il BindingContext proprietà è dove è necessario assegnare il modello di vista per creare il legame di cui sopra. Per farlo, passa un'istanza del tuo RecipeViewModel nel costruttore.
Per vedere i frutti del nostro lavoro apparire sullo schermo, è necessario apportare una piccola modifica per farlo funzionare. Nel App.cs file, nel MyRecipeBox progetto, aggiorna il GetMainPage metodo come mostrato di seguito.
public static Pagina GetMainPage () var recipe = new Recipe Name = "Toast", Descrizione = "È brindisi, stai scherzando?", PrepTime = new TimeSpan (0, 0, 15), CookingTime = new TimeSpan (0, 2, 0), indicazioni = nuova lista"Afferra il pane", "Metti il pane nel tostapane", "Mangia brindisi"; restituire nuova RecipeSummaryPage (nuovo RecipeViewModel (ricetta));
Il risultato dovrebbe essere simile ai seguenti screenshot.
Nel passaggio successivo e finale, creeremo e mostreremo un elenco di Ricetta oggetti che l'utente può fare clic per portarli in una pagina di dettaglio. Iniziamo creando un nuovo modello di vista che contiene un elenco di Ricetta oggetti. Aggiungi una nuova classe al ViewModels cartella e chiamarlo RecipeListViewModel. La sua implementazione è la seguente:
public class RecipeListViewModel public ObservableCollectionRicette get; impostato; public RecipeListViewModel () Recipes = new ObservableCollection (); Recipes.Add (new Recipe Name = "Toast", Description = "Stai scherzando? Si tratta di toast.", CookingTime = new TimeSpan (0, 2, 0), PrepTime = new TimeSpan (0, 0, 15), Directions = nuova lista "Pick up bread", "Put break in toaster", "Eat Toast"); Recipes.Add (new Recipe Name = "Cereal", Description = "Sai, le cose per la colazione.", CookingTime = TimeSpan.Zero, PrepTime = new TimeSpan (0, 1, 0), Directions = new List "Metti i cereali nella ciotola", "Metti il latte nella ciotola", "Metti il cucchiaio nella ciotola", "Metti il cucchiaio nella bocca"); Recipes.Add (new Recipe Name = "Sandwich", Description = "Bread and stuff. YUM!", CookingTime = TimeSpan.Zero, PrepTime = new TimeSpan (0, 5, 0), Directions = new List "Prendi 2 fette di pane", "Metti il formaggio tra le fette di rottura", "Metti il prosciutto tra le fette di rottura", "Goditi");
Potresti aver notato che abbiamo codificato le ricette nel codice RecipeListViewModel classe. In un'applicazione reale, le ricette verrebbero recuperate da un servizio Web o da un database.
Crea una nuova pagina per visualizzare l'elenco di ricette. Nel Visualizzazioni cartella, creane una nuova Forma pagina Xaml e chiama questo RecipleListPage. Sostituisci il suo contenuto con quanto segue:
Questo XAML è abbastanza simile all'esempio precedente. Questa volta, tuttavia, hai solo una visualizzazione elenco sulla pagina. Quando si utilizza l'associazione dati in a Visualizzazione elenco, è necessario scavare un po 'più in profondità per eseguire il binding effettivo. Innanzitutto, si lega l'elenco completo al ItemsSource proprietà delVisualizzazione elenco e quindi è necessario definire il Modello e DataTemplate del Visualizzazione elenco essere un TextCell e legalo TextCell alla proprietà individuale del Ricetta istanza che si desidera visualizzare. Questo è ciò che rende i nomi delle ricette sullo schermo.
Puoi anche vedere che c'è un Nome associato al Visualizzazione elenco, recipeList, che tornerà utile un po 'più tardi, così come un gestore di eventi. In questo caso, quando un utente tocca un oggetto nel Visualizzazione elenco, il ItemTapped l'evento è licenziato. Ora sei iscritto a quell'evento e userai un metodo chiamato OnItemSelected per gestirlo.
Nel prossimo passo, dovremo fare un po 'di cablaggio nel RecipeListPage.xaml.cs file per impostare ilBindingContext della nostra nuova pagina così come implementare il OnItemSelected gestore di eventi.
public partial class RecipeListPage public RecipeListPage () InitializeComponent (); this.BindingContext = new RecipeListViewModel (); public void OnItemSelected (mittente dell'oggetto, ItemTappedEventArgs args) var recipe = args.Item as Recipe; se (ricetta == null) ritorno; Navigation.PushAsync (nuova RecipeSummaryPage (nuova RecipeViewModel (ricetta))); // Reimposta l'oggetto selezionato recipeList.SelectedItem = null;
Il BindingContext la proprietà sarà semplicemente impostata su una nuova istanza di RecipleListViewModel che hai creato prima. Il metodo del gestore di eventi è leggermente diverso. Innanzitutto, è necessario verificare che l'elemento selezionato sia una ricetta, che viene eseguita nelle seguenti righe:
var recipe = args.Item as Recipe; se (ricetta == null) ritorno;
Se l'elemento selezionato è a Ricetta oggetto, quindi usi il Navigazione proprietà per aggiungere una nuova istanza di RecipleSummaryPage alla corrente NavigationView. Infine, è necessario assicurarsi che nessun elemento nell'elenco sia attualmente selezionato.
Navigation.PushAsync (nuova RecipeSummaryPage (nuova RecipeViewModel (ricetta))); // Reimposta l'oggetto selezionato recipeList.SelectedItem = null;
Accedere al Visualizzazione elenco è fatto attraverso il Nome che è stato assegnato ad esso in precedenza. Puoi accedere a qualsiasi vista sulla pagina assegnando a Nome alvista e riferendosi ad esso per nome nel codice.
Il cambiamento finale che dobbiamo fare è aggiornare il GetMainPage metodo nel App.cs file. come mostrato di seguito:
Pagina statica pubblica GetMainPage () return new NavigationPage (new RecipeListPage ());
Si restituisce una nuova istanza di NavigationPage classificare come pagina principale e impostare la sua pagina radice su una nuova istanza di RecipleListPage classe. Ora che tutto è cablato, puoi eseguire la tua app su tutte e tre le piattaforme e vedere qualcosa di simile al seguente:
Toccando una delle righe nell'elenco, si accede alla pagina di riepilogo della ricetta corrispondente, come si è visto prima.
Ora hai visto le diverse opzioni per disporre la tua applicazione usando Xamarin.Forms. Dovresti sentirti a tuo agio nella creazione di applicazioni di base che possono essere eseguite sulle principali piattaforme mobili utilizzando una singola base di codice sia per la business logic che per l'interfaccia utente dell'applicazione. Quando hai trascorso un po 'di tempo a lavorare con Xamarin.Forms, il prossimo passo sarà imparare come personalizzare l'interfaccia utente dell'applicazione e aggiungere nuovi controlli. Ma questo è per un altro giorno.
Se desideri ulteriori informazioni su Xamarin, consulta il nostro corso Creazione di app multipiattaforma con C # in Xamarin.
Nel corso, imparerai come creare un'applicazione multipiattaforma da un singolo codice base che verrà eseguito su tre piattaforme distinte: iOS, Android e Windows Phone 8. Pensa che non può essere fatto? Tra poco lo farai tu stesso. Andiamo a lavorare.
Puoi prendere subito il completamente gratis Prova di 14 giorni di un abbonamento a Tuts +. Dai un'occhiata alle nostre opzioni di abbonamento per iniziare o, se sei interessato a questo corso, puoi acquistarlo singolarmente per $ 15! Ecco un'anteprima per iniziare:
Accentsconagua