Xamarin.Forms Ausführliche Erläuterungen zum SchnellstartXamarin.Forms Quickstart Deep Dive

Im Xamarin.Forms-Schnellstart wurde die Notes-Anwendung erstellt.In the Xamarin.Forms Quickstart, the Notes application was built. In diesem Artikel wird dieser Vorgang noch einmal genauer betrachtet, um ein Verständnis für die Funktionsweise von Xamarin.Forms-Anwendungen zu entwickeln.This article reviews what has been built to gain an understanding of the fundamentals of how Xamarin.Forms applications work.

Einführung in Visual StudioIntroduction to Visual Studio

In Visual Studio wird Code in Projektmappen und Projekten organisiert.Visual Studio organizes code into Solutions and Projects. Eine Projektmappe ist ein Container, der mindestens ein Projekt enthält.A solution is a container that can hold one or more projects. Ein Projekt kann z.B. eine Anwendung, eine unterstützende Bibliothek oder eine Testanwendung sein.A project can be an application, a supporting library, a test application, and more. Die Notes-Anwendung besteht wie im folgenden Screenshot gezeigt aus einer Projektmappe mit vier Projekten:The Notes application consists of one solution containing four projects, as shown in the following screenshot:

Projektmappen-Explorer von Visual Studio

Diese Projekte sind folgende:The projects are:

  • Notes: Dieses Projekt ist das .NET Standard-Klassenbibliotheksprojekt, das den gesamten freigegebenen Code und die gesamte freigegebene Benutzeroberfläche enthält.Notes – This project is the .NET Standard library project that holds all of the shared code and shared UI.
  • Notes.Android: Dieses Projekt enthält Android-spezifischen Code und ist der Einstiegspunkt für die Android-Anwendung.Notes.Android – This project holds Android-specific code and is the entry point for the Android application.
  • Notes.iOS: Dieses Projekt enthält iOS-spezifischen Code und ist der Einstiegspunkt für die iOS-Anwendung.Notes.iOS – This project holds iOS-specific code and is the entry point for the iOS application.
  • Notes.UWP: Dieses Projekt enthält für die Universelle Windows-Plattform (UWP) spezifischen Code und ist der Einstiegspunkt für die UWP-Anwendung.Notes.UWP – This project holds Universal Windows Platform (UWP) specific code and is the entry point for the UWP application.

Struktur einer Xamarin.Forms-AnwendungAnatomy of a Xamarin.Forms application

Der folgende Screenshot zeigt den Inhalt des .NET Standard-Bibliotheksprojekts „Notes“ in Visual Studio:The following screenshot shows the contents of the Notes .NET Standard library project in Visual Studio:

Inhalt des Phoneword-Projekts für .NET Standard

Das Projekt verfügt über den Knoten Abhängigkeiten, der die Knoten NuGet und SDK enthält:The project has a Dependencies node that contains NuGet and SDK nodes:

  • NuGet: Die NuGet-Pakete für Xamarin.Forms und „sqlite-net-pcl“, die dem Projekt hinzugefügt wurdenNuGet – the Xamarin.Forms and sqlite-net-pcl NuGet packages that have been added to the project.
  • SDK: Das Metapaket NETStandard.Library verweist auf alle NuGet-Pakete, die .NET Standard definieren.SDK – the NETStandard.Library metapackage that references the complete set of NuGet packages that define .NET Standard.

Einführung in Visual Studio für MacIntroduction to Visual Studio for Mac

Die Codeorganisation in Visual Studio für Mac baut auf Visual Studio auf und gliedert sich in Projektmappen und Projekte.Visual Studio for Mac follows the Visual Studio practice of organizing code into Solutions and Projects. Eine Projektmappe ist ein Container, der mindestens ein Projekt enthält.A solution is a container that can hold one or more projects. Ein Projekt kann z.B. eine Anwendung, eine unterstützende Bibliothek oder eine Testanwendung sein.A project can be an application, a supporting library, a test application, and more. Die Notes-Anwendung besteht wie im folgenden Screenshot gezeigt aus einer Projektmappe mit drei Projekten:The Notes application consists of one solution containing three projects, as shown in the following screenshot:

Visual Studio für Mac: Projektmappenbereich

Diese Projekte sind folgende:The projects are:

  • Notes: Dieses Projekt ist das .NET Standard-Klassenbibliotheksprojekt, das den gesamten freigegebenen Code und die gesamte freigegebene Benutzeroberfläche enthält.Notes – This project is the .NET Standard library project that holds all of the shared code and shared UI.
  • Notes.Android: Dieses Projekt enthält Android-spezifischen Code und ist der Einstiegspunkt für Android-Anwendungen.Notes.Android – This project holds Android-specific code and is the entry point for Android applications.
  • Notes.iOS: Dieses Projekt enthält iOS-spezifischen Code und ist der Einstiegspunkt für iOS-Anwendungen.Notes.iOS – This project holds iOS specific-code and is the entry point for iOS applications.

Struktur einer Xamarin.Forms-AnwendungAnatomy of a Xamarin.Forms application

Der folgende Screenshot zeigt den Inhalt des .NET Standard-Bibliotheksprojekts „Notes“ in Visual Studio für Mac:The following screenshot shows the contents of the Notes .NET Standard library project in Visual Studio for Mac:

Inhalt des .NET Standard-Bibliotheksprojekts „Phoneword“

Das Projekt verfügt über den Knoten Abhängigkeiten, der die Knoten NuGet und SDK enthält:The project has a Dependencies node that contains NuGet and SDK nodes:

  • NuGet: Die NuGet-Pakete für Xamarin.Forms und „sqlite-net-pcl“, die dem Projekt hinzugefügt wurdenNuGet – the Xamarin.Forms and sqlite-net-pcl NuGet packages that have been added to the project.
  • SDK: Das Metapaket NETStandard.Library verweist auf alle NuGet-Pakete, die .NET Standard definieren.SDK – the NETStandard.Library metapackage that references the complete set of NuGet packages that define .NET Standard.

Das Projekt besteht aus mehreren Dateien:The project also consists of a number of files:

  • Data\NoteDatabase.cs: Diese Klasse enthält Code, mit dem die Datenbank erstellt wird und Daten aus ihr gelesen bzw. in sie geschrieben und aus ihr gelöscht werden.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: Diese Klasse definiert ein Note-Modell, dessen Instanzen Daten über jede Notiz in der Anwendung speichert.Models\Note.cs – This class defines a Note model whose instances store data about each note in the application.
  • App.xaml: Das XAML-Markup für die App-Klasse, die ein Ressourcenverzeichnis für die Anwendung definiertApp.xaml – The XAML markup for the App class, which defines a resource dictionary for the application.
  • App.xaml.cs: Das CodeBehind-Modell für die App-Klasse, das die erste Seite instanziiert, die von der Anwendung auf jeder Plattform angezeigt wird, und für die Behandlung von Ereignissen im App-Lebenszyklus zuständig istApp.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: Diese Datei enthält ein Anwendungsattribut für das Projekt, das auf Assemblyebene angewendet wird.AssemblyInfo.cs – This file contains an application attribute about the project, that is applied at the assembly level.
  • NotesPage.xaml: das XAML-Markup für die NotesPage-Klasse, das die Benutzeroberfläche für die Seite definiert, die beim Start der Anwendung angezeigt wirdNotesPage.xaml – The XAML markup for the NotesPage class, which defines the UI for the page shown when the application launches.
  • NotesPage.xaml.cs: das CodeBehind für die NotesPage-Klasse, das die Geschäftslogik enthält, die ausgeführt wird, wenn der Benutzer mit der Seite interagiertNotesPage.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: das XAML-Markup für die NoteEntryPage-Klasse, das die Benutzeroberfläche für die Seite definiert, die angezeigt wird, wenn der Benutzer eine Notiz eingibtNoteEntryPage.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: das CodeBehind für die NoteEntryPage-Klasse, das die Geschäftslogik enthält, die ausgeführt wird, wenn der Benutzer mit der Seite interagiertNoteEntryPage.xaml.cs – The code-behind for the NoteEntryPage class, which contains the business logic that is executed when the user interacts with the page.

Weitere Informationen zum Aufbau einer Xamarin.iOS-Anwendung finden Sie unter Hello, iOS: Deep Dive (Hallo iOS: Ausführliche Informationen).For more information about the anatomy of a Xamarin.iOS application, see Anatomy of a Xamarin.iOS Application. Weitere Informationen zum Aufbau einer Xamarin.Android-Anwendung finden Sie unter Hello, Android: Deep Dive (Hallo Android: Ausführliche Informationen).For more information about the anatomy of a Xamarin.Android application, see Anatomy of a Xamarin.Android Application.

Architektur und AnwendungsgrundlagenArchitecture and application fundamentals

Eine Xamarin.Forms-Anwendung ist genauso aufgebaut wie eine traditionelle plattformübergreifende Anwendung.A Xamarin.Forms application is architected in the same way as a traditional cross-platform application. Freigegebener Code wird in der Regel in einer .NET Standard-Bibliothek platziert und von plattformspezifischen Anwendungen genutzt.Shared code is typically placed in a .NET Standard library, and platform-specific applications consume the shared code. Die folgende Abbildung bietet für die Notes-Anwendung einen Überblick über diese Beziehung:The following diagram shows an overview of this relationship for the Notes application:

Notes-Architektur

Notes-Architektur

Um die Wiederverwendung von Startcode zu maximieren, enthalten Xamarin.Forms-Anwendungen eine einzelne Klasse namens App, die die erste Seite instanziiert, die von der Anwendung wie im folgenden Codebeispiel gezeigt auf jeder Plattform angezeigt wird: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());
        }
        ...
    }
}

Mit diesem Code wird die Eigenschaft MainPage der Klasse App auf eine NavigationPage-Instanz festgelegt, die eine NotesPage-Instanz beinhaltet.This code sets the MainPage property of the App class to a NavigationPage instance whose content is a NotesPage instance.

Außerdem enthält die Datei AssemblyInfo.cs ein einzelnes Anwendungsattribut, das auf Assemblyebene angewendet wird: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)]

Das Attribut XamlCompilation aktiviert den XAML-Compiler, sodass XAML direkt in der Zwischensprache kompiliert wird.The XamlCompilation attribute turns on the XAML compiler, so that XAML is compiled directly into intermediate language. Weitere Informationen finden Sie unter XAML Compilation (XAML-Kompilierung).For more information, see XAML Compilation.

Starten der Anwendung auf den verschiedenen PlattformenLaunching the application on each platform

iOSiOS

Zum Aufrufen der Xamarin.Forms-Startseite in iOS definiert das Notes.iOS-Projekt die Klasse AppDelegate, die von der Klasse FormsApplicationDelegate erbt: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);
        }
    }
}

Mit der FinishedLaunching-Außerkraftsetzung wird das Xamarin.Forms-Framework durch Aufrufen der Init-Methode initialisiert.The FinishedLaunching override initializes the Xamarin.Forms framework by calling the Init method. Dadurch wird die iOS-spezifische Implementierung von Xamarin.Forms in die Anwendung geladen, bevor der Stammansichtscontroller durch den Aufruf der LoadApplication-Methode festgelegt wird.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

Zum Aufrufen der Xamarin.Forms-Startseite in Android enthält das Notes.Android-Projekt Code, der eine Aktivität (Activity) mit dem Attribut MainLauncher erstellt, wobei die Aktivität von der Klasse FormsAppCompatActivity erbt: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());
        }
    }
}

Mit der OnCreate-Außerkraftsetzung wird das Xamarin.Forms-Framework durch Aufrufen der Init-Methode initialisiert.The OnCreate override initializes the Xamarin.Forms framework by calling the Init method. Dadurch wird die Android-spezifische Implementierung von Xamarin.Forms in die Anwendung geladen, bevor die Xamarin.Forms-Anwendung geladen wird.This causes the Android-specific implementation of Xamarin.Forms to be loaded in the application before the Xamarin.Forms application is loaded.

Universelle Windows-PlattformUniversal Windows Platform

In UWP-Anwendungen (Universelle Windows-Plattform) wird die Init-Methode, die das Xamarin.Forms-Framework initialisiert, über die App-Klasse aufgerufen: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)
{
  ...
}

Dadurch wird die UWP-spezifische Implementierung von Xamarin.Forms in die Anwendung geladen.This causes the UWP-specific implementation of Xamarin.Forms to be loaded in the application. Die Xamarin.Forms-Startseite wird von der Klasse MainPage gestartet: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());
        }
    }
}

Die Xamarin.Forms-Anwendung wird mit der LoadApplication-Methode geladen.The Xamarin.Forms application is loaded with the LoadApplication method.

Hinweis

UWP-Apps (Universelle Windows-Plattform) können mit Xamarin.Forms erstellt werden, jedoch nur mit Visual Studio unter Windows.Universal Windows Platform apps can be built with Xamarin.Forms, but only using Visual Studio on Windows.

BenutzeroberflächeUser interface

Es gibt vier Hauptsteuerelementgruppen, mit denen die Benutzeroberfläche einer Xamarin.Forms-Anwendung erstellt wird:There are four main control groups used to create the user interface of a Xamarin.Forms application:

  1. Seiten: Xamarin.Forms-Seiten stellen Bildschirme plattformübergreifender mobiler Anwendungen dar.Pages – Xamarin.Forms pages represent cross-platform mobile application screens. Die Notes-Anwendung verwendet die ContentPage-Klasse, um einzelne Bildschirme anzuzeigen.The Notes application uses the ContentPage class to display single screens. Weitere Informationen zu Seiten finden Sie unter Xamarin.Forms-Seiten.For more information about pages, see Xamarin.Forms Pages.
  2. Ansichten: Xamarin.Forms-Ansichten sind die auf der Benutzeroberfläche angezeigten Steuerelemente, z. B. Bezeichnungen, Schaltflächen und Texteingabefelder.Views – Xamarin.Forms views are the controls displayed on the user interface, such as labels, buttons, and text entry boxes. Die fertige Notes-Anwendung verwendet die Ansichten ListView, Editor und Button.The finished Notes application uses the ListView, Editor, and Button views. Weitere Informationen zu Ansichten finden Sie unter Xamarin.Forms-Ansichten.For more information about views, see Xamarin.Forms Views.
  3. Layouts: Xamarin.Forms-Layouts sind Container, die zum Erstellen von Ansichten in Form von logischen Strukturen verwendet werden.Layouts – Xamarin.Forms layouts are containers used to compose views into logical structures. Die Notes-Anwendung verwendet die Klasse StackLayout, um Ansichten in einem vertikalen Stapel anzuordnen, und die Klasse Grid, um Schaltflächen horizontal anzuordnen.The Notes application uses the StackLayout class to arrange views in a vertical stack, and the Grid class to arrange buttons horizontally. Weitere Informationen zu Layouts finden Sie unter Xamarin.Forms-Layouts.For more information about layouts, see Xamarin.Forms Layouts.
  4. Zellen: Xamarin.Forms-Zellen sind spezielle Elemente für Listenelemente und beschreiben, wie die einzelnen Elemente in einer Liste gezeichnet werden sollen.Cells – Xamarin.Forms cells are specialized elements used for items in a list, and describe how each item in a list should be drawn. Die Notes-Anwendung verwendet die Klasse TextCell, um für jede Zeile in der Liste zwei Elemente anzuzeigen.The Notes application uses the TextCell to display two items for each row in the list. Weitere Informationen zu Zellen finden Sie unter Xamarin.Forms-Zellen.For more information about cells, see Xamarin.Forms Cells.

Zur Laufzeit wird jedes Steuerelement seinem nativen Äquivalent zugeordnet. Dieses wird dann gerendert.At runtime, each control will be mapped to its native equivalent, which is what will be rendered.

LayoutLayout

Die Notes-Anwendung verwendet die Klasse StackLayout, um die plattformübergreifende Anwendungsentwicklung zu vereinfachen, indem Anzeigen unabhängig von der Bildschirmgröße automatisch angeordnet werden.The Notes application uses the StackLayout to simplify cross-platform application development by automatically arranging views on the screen regardless of the screen size. Alle untergeordneten Elemente werden nacheinander horizontal oder vertikal in der Reihenfolge positioniert, in der sie hinzugefügt wurden.Each child element is positioned one after the other, either horizontally or vertically in the order they were added. Wie viel Speicherplatz das StackLayout verwendet, hängt davon ab, wie die Eigenschaften HorizontalOptions und VerticalOptions festgelegt sind. Das StackLayout versucht jedoch standardmäßig, den gesamten Bildschirm zu verwenden.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.

Der folgende XAML-Code zeigt ein Beispiel für die Verwendung einer StackLayout-Klasse zur Gestaltung von NoteEntryPage: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>

Standardmäßig geht die Klasse StackLayout von einer vertikalen Ausrichtung aus.By default the StackLayout assumes a vertical orientation. Wenn aber eine horizontale Ausrichtung gewünscht wird, kann die Eigenschaft StackLayout.Orientation auf den Enumerationsmember StackOrientation.Horizontal festgelegt werden.However, it can be changed to a horizontal orientation by setting the StackLayout.Orientation property to the StackOrientation.Horizontal enumeration member.

Hinweis

Die Größe der Ansichten kann mithilfe der Eigenschaften HeightRequest und WidthRequest festgelegt werden.The size of views can be set through the HeightRequest and WidthRequest properties.

Weitere Informationen zur StackLayout-Klasse finden Sie unter StackLayout.For more information about the StackLayout class, see StackLayout.

Reagieren auf eine BenutzerinteraktionResponding to user interaction

Ein in XAML definiertes Objekt kann ein Ereignis auslösen, das in der CodeBehind-Datei behandelt wird.An object defined in XAML can fire an event that is handled in the code-behind file. Das folgende Codebeispiel zeigt die Methode OnSaveButtonClicked im CodeBehind für die Klasse NoteEntryPage, die als Reaktion auf das Ereignis Clicked ausgeführt wird, das über die Schaltfläche Speichern ausgelöst wird.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();
}

Die Methode OnSaveButtonClicked speichert die Notiz in der Datenbank und wechselt zurück zur vorherigen Seite.The OnSaveButtonClicked method saves the note in the database, and navigates back to the previous page.

Hinweis

Die CodeBehind-Datei für eine XAML-Klasse kann auf ein Objekt zugreifen, das mit dem Namen, der ihm mit dem x:Name-Attribut zugewiesen wurde, in XAML definiert wurde.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. So wie bei C#-Variablen muss der diesem Attribut zugewiesene Wert mit einem Buchstaben oder Unterstrich beginnen und darf keine eingebetteten Leerzeichen enthalten.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.

Die Verknüpfung der Schaltfläche „Speichern“ mit der OnSaveButtonClicked-Methode erfolgt im XAML-Markup für die Klasse NoteEntryPage:The wiring of the save button to the OnSaveButtonClicked method occurs in the XAML markup for the NoteEntryPage class:

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

ListenLists

Über die Klasse ListView wird eine Sammlung von Elementen vertikal in einer Liste angeordnet.The ListView is responsible for displaying a collection of items vertically in a list. Jedes Element in der Klasse ListView ist in einer einzelnen Zelle enthalten.Each item in the ListView will be contained in a single cell.

Das folgende Codebeispiel zeigt die Klasse ListView über die NotesPage: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>

Das Layout jeder Zeile in der Klasse ListView wird im Element ListView.ItemTemplate definiert und verwendet Datenbindung, um sämtliche Notizen anzuzeigen, die von der Anwendung abgerufen werden.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. Die Eigenschaft ListView.ItemsSource ist in NotesPage.xaml.cs auf die Datenquelle festgelegt: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();
}

Dieser Code befüllt die Klasse ListView mit sämtlichen Notizen, die in der Datenbank gespeichert sind.This code populates the ListView with any notes stored in the database.

Wenn eine Zeile in der Klasse ListView ausgewählt wird, wird das Ereignis ItemSelected ausgelöst.When a row is selected in the ListView, the ItemSelected event fires. Ein Ereignishandler mit dem Namen OnListViewItemSelected wird ausgeführt, wenn das Ereignis ausgelöst wird:An event handler, named OnListViewItemSelected, is executed when the event fires:

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

Das Ereignis ItemSelected kann auf das Objekt zugreifen, das von der Eigenschaft e.SelectedItem der Zelle zugeordnet wurde.The ItemSelected event can access the object that was associated with the cell through the e.SelectedItem property.

Weitere Informationen zur Klasse ListView finden Sie unter ListView.For more information about the ListView class, see ListView.

Xamarin.Forms stellt abhängig vom verwendeten Page-Typ eine Reihe unterschiedlicher Seitennavigationen bereit.Xamarin.Forms provides a number of different page navigation experiences, depending upon the Page type being used. Für ContentPage-Instanzen kann die Navigation hierarchisch oder modal sein.For ContentPage instances navigation can be hierarchical, or modal. Weitere Informationen zur modalen Navigation finden Sie unter Modale Xamarin.Forms-Seiten.For information about modal navigation, see Xamarin.Forms Modal Pages.

Hinweis

Die CarouselPage-, MasterDetailPage-und die TabbedPage-Klasse bieten alternative Navigationen.The CarouselPage, MasterDetailPage and TabbedPage classes provide alternative navigation experiences. Weitere Informationen finden Sie unter Navigation.For more information, see Navigation.

Bei der hierarchischen Navigation wird die Klasse NavigationPage verwendet, um in einen Stapel von ContentPage-Objekten beliebig vor und zurück zu navigieren.In hierarchical navigation, the NavigationPage class is used to navigate through a stack of ContentPage objects, forwards and backwards, as desired. Die Klasse implementiert die Navigation als LIFO-Stapel (Last-In-First-out) von Page-Objekten.The class implements navigation as a last-in, first-out (LIFO) stack of Page objects. Für den Wechsel von einer auf die andere Seite überträgt eine Anwendung eine neue Seite mithilfe von Push in den Navigationsstapel, wo sie dann zur aktiven Seite wird.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. Wenn Sie zur vorherigen Seite zurückkehren möchten, entfernt die Anwendung die aktuelle Seite per Pop vom Navigationsstapel, und die neue oberste Seite wird zur aktiven Seite.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.

Die NavigationPage-Klasse platziert außerdem eine Navigationsleiste oben auf der Seite, in der ein Titel und eine für die Plattform angemessene Zurück-Schaltfläche, über die man zurück auf die vorherige Seite wechseln kann, angezeigt wird.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.

Die erste Seite, die zu einem Navigationsstapel hinzugefügt wird, wird als Stammseite der Anwendung bezeichnet. Das folgende Codebeispiel zeigt, wie dies in der Notes-Anwendung erreicht wird: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 ());
}

Alle ContentPage-Instanzen (Inhaltsseiteninstanzen) beinhalten eine Navigation-Eigenschaft zum Ändern des Seitenstapels.All ContentPage instances have a Navigation property that exposes methods to modify the page stack. Diese Methoden sollten nur angewendet werden, wenn die Anwendung eine NavigationPage einschließt.These methods should only be invoked if the application includes a NavigationPage. Um zu NoteEntryPage navigieren zu können, muss die PushAsync-Methode wie im folgenden Codebeispiel angewendet werden: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());

Dies bewirkt, dass das neue NoteEntryPage-Objekt auf den Navigationsstapel gepusht wird, wo es dann zur aktiven Seite wird.This causes the new NoteEntryPage object to be pushed onto the navigation stack, where it becomes the active page.

Die aktive Seite kann durch Drücken der Schaltfläche Zurück an dem Gerät per Pop von dem Navigationsstapel entfernt werden, und zwar unabhängig davon, ob es sich um eine physische Schaltfläche an dem Gerät oder um eine Schaltfläche auf dem Bildschirm handelt.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. Um programmgesteuert zur ursprünglichen Seite zurückgehen zu können, muss das NoteEntryPage-Objekt die PopAsync-Methode anwenden. Dies wird im folgenden Codebeispiel dargestellt: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();

Weitere Informationen zur hierarchischen Navigation finden Sie unter Hierarchical Navigation (Hierarchische Navigation).For more information about hierarchical navigation, see Hierarchical Navigation.

DatenbindungData binding

Datenbindung wird verwendet, um zu vereinfachen, wie eine Xamarin.Forms-Anwendung Daten anzeigt und mit ihnen interagiert.Data binding is used to simplify how a Xamarin.Forms application displays and interacts with its data. Sie stellt eine Verbindung zwischen der Benutzeroberfläche und der zugrundeliegenden Anwendung her.It establishes a connection between the user interface and the underlying application. Die BindableObject-Klasse beinhaltet einen Großteil der Infrastruktur, um die Datenbindung zu unterstützen.The BindableObject class contains much of the infrastructure to support data binding.

Bei der Datenbindung werden zwei Objekte miteinander verbunden: die Quelle und das Ziel.Data binding connects two objects, called the source and the target. Das Quellobjekt stellt die Daten bereit.The source object provides the data. Das Zielobjekt verwendet Daten aus dem Quellobjekt (und zeigt diese häufig an).The target object will consume (and often display) data from the source object. Mit einem Editor (Zielobjekt) wird die zugehörige Eigenschaft Text beispielsweise häufig an eine öffentliche string-Eigenschaft in einem Quellobjekt gebunden.For example, an Editor (target object) will commonly bind its Text property to a public string property in a source object. Das folgende Diagramm veranschaulicht die Bindungsbeziehung:The following diagram illustrates the binding relationship:

Datenbindung

Der Hauptvorteil der Datenbindung ist, dass Sie Daten zwischen Ihren Ansichten und der Datenquelle nicht mehr synchronisieren müssen.The main benefit of data binding is that you no longer have to worry about synchronizing data between your views and data source. Änderungen im Quellobjekt werden automatisch mithilfe von Push intern vom Bindungsframework in das Zielobjekt übertragen, und Änderungen im Zielobjekt können optional wieder zurück in das Quellobjekt übertragen werden.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.

Die Datenbindung wird in zwei Schritten eingerichtet:Establishing data binding is a two-step process:

  • Die Eigenschaft BindingContext des Zielobjekts muss auf die Quelle festgelegt werden.The BindingContext property of the target object must be set to the source.
  • Zwischen dem Ziel und der Quelle muss eine Bindung eingerichtet werden.A binding must be established between the target and the source. In XAML wird dies mit der Binding-Markuperweiterung erreicht.In XAML, this is achieved by using the Binding markup extension.

In der Notes-Anwendung ist der Editor, der eine Notiz anzeigt, das Bindungsziel, während die Instanz Note, die als die Eigenschaft BindingContext von NoteEntryPage festgelegt ist, die Bindungsquelle darstellt.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.

Die Eigenschaft BindingContext von NoteEntryPage wird wie im folgenden Codebeispiel gezeigt bei der Seitennavigation festgelegt: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
        });
    }
}

In der Methode OnNoteAddedClicked, die ausgeführt wird, wenn der Anwendung eine neue Notiz hinzugefügt wird, ist die Eigenschaft BindingContext von NoteEntryPage auf eine neue Note-Instanz festgelegt.In 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. In der Methode OnListViewItemSelected, die ausgeführt wird, wenn eine vorhandene Notiz in der Klasse ListView ausgewählt wird, wird die Eigenschaft BindingContext von NoteEntryPage auf die ausgewählte Note-Instanz festgelegt, auf die über die Eigenschaft e.SelectedItem zugegriffen werden kann.In 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.

Wichtig

Die Eigenschaft BindingContext der einzelnen Zielobjekte kann einzeln festgelegt werden, dies ist jedoch nicht erforderlich.While the BindingContext property of each target object can be individually set, this isn’t necessary. BindingContext ist eine spezielle Eigenschaft, die von allen zugehörigen untergeordneten Elementen geerbt wird.BindingContext is a special property that’s inherited by all its children. Wenn die Eigenschaft BindingContext auf der Seite ContentPage auf eine Note-Instanz festgelegt wird, verfügen folglich alle untergeordneten Elemente der Seite ContentPage über die gleiche BindingContext-Eigenschaft und können eine Bindung an öffentliche Eigenschaften des Note-Objekts vornehmen.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.

Der Editor auf der Seite NoteEntryPage bindet dann die Eigenschaft Text des Objekts Note:The Editor in NoteEntryPage then binds to the Text property of the Note object:

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

Zwischen der Eigenschaft Editor.Text und der Eigenschaft Text des Quellobjekts wird eine Bindung eingerichtet.A binding between the Editor.Text property and the Text property of the source object is established. Am Editor vorgenommene Änderungen werden automatisch an das Note-Objekt weitergegeben.Changes made in the Editor will automatically be propagated to the Note object. Gleichermaßen aktualisiert die Xamarin.Forms-Bindungs-Engine auch die Inhalte von Editor, wenn Änderungen an der Eigenschaft Note.Text vorgenommen werden.Similarly, if changes are made to the Note.Text property, the Xamarin.Forms binding engine will also update the contents of the Editor. Dies wird als bidirektionale Bindung bezeichnet.This is known as a two-way binding.

Weitere Informationen zur Datenbindung finden Sie unter Xamarin.Forms-Datenbindung.For more information about data binding, see Xamarin.Forms Data Binding.

FormatStyling

Xamarin.Forms-Anwendungen enthalten häufig mehrere visuelle Elemente, die identisch dargestellt werden.Xamarin.Forms applications often contain multiple visual elements that have an identical appearance. Es kann sehr eintönig und fehleranfällig sein, die Darstellung der visuellen Elemente einzeln festzulegen.Setting the appearance of each visual element can be repetitive and error prone. Stattdessen können Formatvorlagen, die die Darstellung definieren, erstellt und anschließend auf die erforderlichen visuellen Elemente angewendet werden.Instead, styles can be created that define the appearance, and then applied to the required visual elements.

Die Klasse Style gruppiert eine Sammlung von Eigenschaftswerten in ein Objekt, das anschließend auf mehrere Instanzen von visuellen Elementen angewendet werden kann.The Style class groups a collection of property values into one object that can then be applied to multiple visual element instances. Formatvorlagen werden entweder auf Anwendungs-, auf Ansichts- oder auf Seitenebene in einer ResourceDictionary-Klasse gespeichert.Styles are stored in a ResourceDictionary, either at the application level, the page level, or the view level. Die Entscheidung, wo Sie eine Style-Klasse definieren, hat Einfluss darauf, wo Sie sie verwenden können:Choosing where to define a Style impacts where it can be used:

  • Eine auf Anwendungsebene definierte Style-Instanz können Sie für die gesamte Anwendung nutzen.Style instances defined at the application level can be applied throughout the application.
  • Eine auf Seitenebene definierte Style-Instanz können Sie nur auf die jeweilige Seite und deren untergeordneten Seiten anwenden.Style instances defined at the page level can be applied to the page and to its children.
  • Eine auf Ansichtsebene definierte Style-Instanz können Sie nur auf die jeweilige Ansicht und deren untergeordneten Ansichten anwenden.Style instances defined at the view level can be applied to the view and to its children.

Wichtig

Alle Formatvorlagen, die in der gesamten Anwendung verwendet werden, werden im Ressourcenverzeichnis der Anwendung gespeichert, damit eine Duplizierung verhindert wird.Any styles that are used throughout the application are stored in the application's resource dictionary to avoid duplication. XAML-Code, der für eine Seite spezifisch ist, sollte jedoch nicht im Ressourcenverzeichnis der Anwendung enthalten sein, da die Ressourcen dann beim Starten der Anwendung analysiert werden und nicht, wenn dies auf einer Seite erforderlich ist.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.

Jede Style-Instanz enthält eine Sammlung mit mindestens einem Setter-Objekt. Dabei weist jedes Setter-Objekt eine Property und einen Value auf.Each Style instance contains a collection of one or more Setter objects, with each Setter having a Property and a Value. Property ist der Name der bindbaren Eigenschaft des Elements, auf das die Formatvorlage angewendet wird, und Value ist der Wert, der auf die Eigenschaft angewendet wird.The 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. Das folgende Codebeispiel zeigt eine Formatvorlage von NoteEntryPage: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>

Diese Formatvorlage wird auf alle Editor-Instanzen auf der Seite angewendet.This style is applied to any Editor instances on the page.

Wenn Sie eine Style-Instanz erstellen, wird immer die Eigenschaft TargetType benötigt.When creating a Style, the TargetType property is always required.

Hinweis

Xamarin.Forms-Anwendungen werden normalerweise mithilfe von XAML-Formatvorlagen formatiert.Styling a Xamarin.Forms application is traditionally accomplished by using XAML styles. Xamarin.Forms unterstützt jedoch auch das Formatieren von visuellen Elementen mithilfe von Cascading Stylesheets (CSS).However, Xamarin.Forms also supports styling visual elements using Cascading Style Sheets (CSS). Weitere Informationen finden Sie unter Formatieren von Xamarin.Forms-Apps mithilfe von Cascading Stylesheets (CSS).For more information, see Styling Xamarin.Forms apps using Cascading Style Sheets (CSS).

Weitere Informationen zu XAML-Formatvorlagen finden Sie unter Formatieren von Xamarin.Forms-Apps mithilfe von XAML-Formatvorlagen.For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

Bereitstellen von plattformspezifischen FormatvorlagenProviding platform-specific styles

Die OnPlatform-Markuperweiterungen ermöglichen Ihnen das plattformspezifische Anpassen der Benutzeroberfläche: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>

Die Style-Instanz legt je nach verwendeter Plattform verschiedene Color-Werte für die Eigenschaften BarBackgroundColor und BarTextColor von NavigationPage fest.This Style sets different Color values for the BarBackgroundColor and BarTextColor properties of NavigationPage, depending on the platform being used.

Weitere Informationen über XAML-Markuperweiterungen finden Sie unter XAML Markup Extensions (XAML-Markuperweiterungen).For more information about XAML markup extensions, see XAML Markup Extensions. Weitere Informationen zur Markuperweiterung OnPlatform finden Sie unter OnPlatform-Markuperweiterung.For information about the OnPlatform markup extension, see OnPlatform Markup Extension.

Testen und BereitstellenTesting and deployment

Sowohl Visual Studio für Mac als auch Visual Studio stellen viele Optionen zum Testen und Bereitstellen einer Anwendung bereit.Visual Studio for Mac and Visual Studio both provide many options for testing and deploying an application. Das Debuggen von Anwendungen ist ein üblicher Vorgang im Lebenszyklus der Anwendungsentwicklung und trägt dazu bei, Codeprobleme zu diagnostizieren.Debugging applications is a common part of the application development lifecycle and helps to diagnose code issues. Weitere Informationen finden Sie unter Festlegen eines Haltepunkts, Step Through Code (Detailliertes Durchlaufen von Code) und Output Information to the Log Window (Ausgabeinformationen an das Protokollfenster).For more information, see Set a Breakpoint, Step Through Code, and Output Information to the Log Window.

Simulatoren eigenen sich hervorragend für die Bereitstellung und das Testen einer Anwendung. Außerdem bieten sie nützliche Funktionen zum Testen von Anwendungen.Simulators are a good place to start deploying and testing an application, and feature useful functionality for testing applications. Allerdings verwenden Benutzer die endgültige Anwendung nicht in einem Simulator. Daher sollte die Anwendungen frühzeitig und häufig auf echten Geräten getestet werden.However, users will not consume the final application in a simulator, so applications should be tested on real devices early and often. Weitere Informationen zur Bereitstellung von iOS-Geräten finden Sie unter Device Provisioning (Gerätebereitstellung).For more information about iOS device provisioning, see Device Provisioning. Weitere Informationen zur Bereitstellung von Android-Geräten finden Sie unter Set Up Device for Development (Einrichten eines Geräts für die Entwicklung).For more information about Android device provisioning, see Set Up Device for Development.

Nächste SchritteNext steps

In diesem Artikel wurden die Grundlagen der Anwendungsentwicklung mit Xamarin.Forms erläutert.This deep dive has examined the fundamentals of application development using Xamarin.Forms. Vorgeschlagene nächste Schritte umfassen das Lesen über folgende Funktionen:Suggested next steps include reading about the following functionality:

  • Es gibt vier Hauptsteuerelementgruppen, mit denen die Benutzeroberfläche einer Xamarin.Forms-Anwendung erstellt wird.There are four main control groups used to create the user interface of a Xamarin.Forms application. Weitere Informationen finden Sie unter Steuerelementreferenz.For more information, see Controls Reference.
  • Bei der Datenbindung werden die Eigenschaften von zwei Objekten verknüpft. Dadurch werden Änderungen an einer Eigenschaft automatisch in der anderen widergespiegelt.Data binding is a technique for linking properties of two objects so that changes in one property are automatically reflected in the other property. Weitere Informationen finden Sie unter Datenbindung.For more information, see Data Binding.
  • Xamarin.Forms stellt abhängig vom verwendeten Seitentyp eine Reihe unterschiedlicher Seitennavigationen bereit.Xamarin.Forms provides a number of different page navigation experiences, depending upon the page type being used. Weitere Informationen finden Sie unter Navigation.For more information, see Navigation.
  • Stile können repetitives Markup reduzieren und erleichtern Änderungen an der Darstellung von Anwendungen.Styles help to reduce repetitive markup, and allow an applications appearance to be more easily changed. Weitere Informationen finden Sie unter Formatieren von Xamarin.Forms-Apps.For more information, see Styling Xamarin.Forms Apps.
  • XAML-Markuperweiterungen erweitern die Leistungsfähigkeit und Flexibilität von XAML, indem Elementattribute auch aus anderen Quellen als literalen Textzeichenfolgen festgelegt werden.XAML markup extensions extend the power and flexibility of XAML by allowing element attributes to be set from sources other than literal text strings. Weitere Informationen finden Sie unter XAML Markup Extensions (XAML-Markuperweiterung).For more information, see XAML Markup Extensions.
  • Datenvorlagen bieten die Möglichkeit, die Darstellung von Daten für unterstützte Ansichten zu definieren.Data templates provide the ability to define the presentation of data on supported views. Weitere Informationen finden Sie unter Datenvorlagen.For more information, see Data Templates.
  • Die einzelnen Seiten, Layouts und Ansichten werden auf jeder Plattform auf unterschiedliche Weise über eine Renderer-Klasse gerendert. Diese erstellt ein natives Steuerelement, ordnet dieses auf dem Bildschirm an und fügt das im freigegebenen Code angegebene Verhalten hinzu.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. Entwickler können ihre eigenen benutzerdefinierten Renderer-Klassen implementieren, um die Darstellung und/oder das Verhalten eines Steuerelements anzupassen.Developers can implement their own custom Renderer classes to customize the appearance and/or behavior of a control. Weitere Informationen finden Sie unter Custom Renderers (Benutzerdefinierte Renderer).For more information, see Custom Renderers.
  • Zudem können durch Effekte native Steuerelemente auf den einzelnen Plattformen angepasst werden.Effects also allow the native controls on each platform to be customized. Effekte werden in plattformspezifischen Projekten erstellt, indem Unterklassen für die PlatformEffect-Klasse erstellt werden. Sie werden verarbeitet, indem sie an das entsprechende Xamarin.Forms-Steuerelement angefügt werden.Effects are created in platform-specific projects by subclassing the PlatformEffect class, and are consumed by attaching them to an appropriate Xamarin.Forms control. Weitere Informationen finden Sie unter Effekte.For more information, see Effects.
  • Freigegebener Code kann über die DependencyService-Klasse auf eine native Funktion zugreifen.Shared code can access native functionality through the DependencyService class. Weitere Informationen finden Sie unter Accessing Native Features with DependencyService (Zugreifen auf native Funktionen über DependencyService).For more information, see Accessing Native Features with DependencyService.

Alternativ finden Sie weitere Informationen zu Xamarin.Forms im Buch Creating Mobile Apps with Xamarin.Forms (Erstellen von mobilen Apps mit Xamarin.Forms) von Charles Petzold.Alternatively, Creating Mobile Apps with Xamarin.Forms, a book by Charles Petzold, is a good place to learn more about Xamarin.Forms. Das Buch ist als PDF und in zahlreichen anderen E-Book-Formaten erhältlich.The book is available as a PDF or in a variety of ebook formats.

Auf Channel 9 und auf YouTube finden Sie weitere Videos zu Xamarin.Find more Xamarin videos on Channel 9 and YouTube.