Teil 1.Part 1. Erste Schritte mit XAMLGetting Started with XAML

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

In einer- Xamarin.Forms Anwendung wird XAML größtenteils zum Definieren des visuellen Inhalts einer Seite und zusammen mit einer c#-Code Behind-Datei verwendet.In a Xamarin.Forms application, XAML is mostly used to define the visual contents of a page and works together with a C# code-behind file.

Die Code-Behind-Datei bietet Code Unterstützung für das Markup.The code-behind file provides code support for the markup. In kombinieren diese beiden Dateien zu einer neuen Klassendefinition, die untergeordnete Sichten und die Initialisierung von Eigenschaften enthält.Together, these two files contribute to a new class definition that includes child views and property initialization. In der XAML-Datei werden auf Klassen und Eigenschaften mit XML-Elementen und-Attributen verwiesen, und es werden Links zwischen Markup und Code erstellt.Within the XAML file, classes and properties are referenced with XML elements and attributes, and links between the markup and code are established.

Erstellen der ProjektmappeCreating the Solution

Um mit der Bearbeitung Ihrer ersten XAML-Datei zu beginnen, verwenden Sie Visual Studio oder Visual Studio für Mac, um eine neue Projekt Mappe zu erstellen Xamarin.Forms .To begin editing your first XAML file, use Visual Studio or Visual Studio for Mac to create a new Xamarin.Forms solution. (Wählen Sie die unten stehende Registerkarte aus, die Ihrer Umgebung entspricht.)(Select the tab below corresponding to your environment.)

Starten Sie in Windows Visual Studio 2019, und klicken Sie im Startfenster auf Neues Projekt erstellen , um ein neues Projekt zu erstellen:In Windows, launch Visual Studio 2019, and in the start window click Create a new project to create a new project:

Neues projektmappenfenster

Klicken Sie im Fenster Neues Projekt erstellen in der Dropdownliste Projekttyp auf Mobil, wählen Sie die Vorlage Mobile App (Xamarin.Forms) aus, und klicken Sie auf Weiter:In the Create a new project window, select Mobile in the Project type drop down, select the Mobile App (Xamarin.Forms) template, and click the Next button:

Fenster "Neues Projekt"

Legen Sie im Fenster Neues Projekt konfigurieren den Projektnamen auf xamlsamples fest (oder was Sie bevorzugen), und klicken Sie auf die Schaltfläche Erstellen .In the Configure your new project window, set the Project name to XamlSamples (or whatever your prefer), and click the Create button.

Klicken Sie im Dialogfeld neue plattformübergreifende App auf leer, und klicken Sie dann auf die Schaltfläche OK :In the New Cross Platform App dialog, click Blank, and click the OK button:

Dialog Feld für neue APP

In der Projekt Mappe werden vier Projekte erstellt: XamlSamples die xamlsamples .NET Standard Library, xamlsamples. Android, xamlsamples. IOSund die universelle Windows-Plattform Projekt Mappe xamlsamples. UWP.Four projects are created in the solution: the XamlSamples .NET Standard library, XamlSamples.Android, XamlSamples.iOS, and the Universal Windows Platform solution, XamlSamples.UWP.

Nachdem Sie die xamlsamples -Projekt Mappe erstellt haben, möchten Sie möglicherweise Ihre Entwicklungsumgebung testen, indem Sie die verschiedenen Platt Form Projekte als projektmappenstartprojekt auswählen und die einfache Anwendung, die von der Projektvorlage erstellt wurde, entweder auf Telefon Emulatoren oder echten Geräten erstellen und bereitstellen.After creating the XamlSamples solution, you might want to test your development environment by selecting the various platform projects as the solution startup project, and building and deploying the simple application created by the project template on either phone emulators or real devices.

Wenn Sie keinen plattformspezifischen Code schreiben müssen, ist das freigegebene xamlsamples -.NET Standard Bibliotheksprojekt, in dem Sie praktisch die gesamte Programmierzeit ausgeben.Unless you need to write platform-specific code, the shared XamlSamples .NET Standard library project is where you’ll be spending virtually all of your programming time. Diese Artikel sind außerhalb des Projekts nicht vertraut.These articles will not venture outside of that project.

Anatomie einer XAML-DateiAnatomy of a XAML File

In der xamlsamples -.NET Standard Bibliothek handelt es sich um ein paar von Dateien mit den folgenden Namen:Within the XamlSamples .NET Standard library are a pair of files with the following names:

  • App. XAML, die XAML-Datei immerApp.xaml, the XAML file; and
  • App.XAML.cs, eine c# -Code Behind- Datei, die der XAML-Datei zugeordnet ist.App.xaml.cs, a C# code-behind file associated with the XAML file.

Sie müssen auf den Pfeil neben " app. XAML " klicken, um die Code Behind-Datei anzuzeigen.You'll need to click the arrow next to App.xaml to see the code-behind file.

Sowohl app. XAML als auch app.XAML.cs tragen zu einer Klasse mit dem Namen bei App , die von abgeleitet wird Application .Both App.xaml and App.xaml.cs contribute to a class named App that derives from Application. Die meisten anderen Klassen mit XAML-Dateien tragen zu einer Klasse bei, die von abgeleitet wird ContentPage . diese Dateien verwenden XAML, um den visuellen Inhalt einer gesamten Seite zu definieren.Most other classes with XAML files contribute to a class that derives from ContentPage; those files use XAML to define the visual contents of an entire page. Dies gilt für die anderen beiden Dateien im xamlsamples -Projekt:This is true of the other two files in the XamlSamples project:

  • MainPage. XAML, die XAML-Datei immerMainPage.xaml, the XAML file; and
  • MainPage.XAML.cs, die c#-Code Behind-Datei.MainPage.xaml.cs, the C# code-behind file.

Die Datei " MainPage. XAML " sieht wie folgt aus (obwohl die Formatierung etwas unterschiedlich sein kann):The MainPage.xaml file looks like this (although the formatting might be a little different):

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples"
             x:Class="XamlSamples.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>

</ContentPage>

Die beiden Deklarationen von XML-Namespaces ( xmlns ) verweisen auf URIs, das erste scheinbar auf der xamarin-Website und das zweite auf den von Microsoft.The two XML namespace (xmlns) declarations refer to URIs, the first seemingly on Xamarin’s web site and the second on Microsoft’s. Überprüfen Sie nicht, auf welche URIs diese URIs verweisen.Don’t bother checking what those URIs point to. Es gibt nichts.There’s nothing there. Sie sind einfach URIs im Besitz von xamarin und Microsoft und fungieren im Grunde als Versions Bezeichner.They are simply URIs owned by Xamarin and Microsoft, and they basically function as version identifiers.

Die erste XML-Namespace Deklaration bedeutet, dass Tags, die in der XAML-Datei ohne Präfix definiert Xamarin.Forms sind, z. b. auf Klassen in verweisen ContentPage .The first XML namespace declaration means that tags defined within the XAML file with no prefix refer to classes in Xamarin.Forms, for example ContentPage. Die zweite Namespace Deklaration definiert ein Präfix von x .The second namespace declaration defines a prefix of x. Diese wird für mehrere Elemente und Attribute verwendet, die in XAML selbst integriert sind und von anderen XAML-Implementierungen unterstützt werden.This is used for several elements and attributes that are intrinsic to XAML itself and which are supported by other implementations of XAML. Diese Elemente und Attribute unterscheiden sich jedoch geringfügig von dem Jahr, das in den URI eingebettet ist.However, these elements and attributes are slightly different depending on the year embedded in the URI. Xamarin.Formsunterstützt die 2009 XAML-Spezifikation, aber nicht alle.Xamarin.Forms supports the 2009 XAML specification, but not all of it.

Die local Namespace Deklaration ermöglicht den Zugriff auf andere Klassen aus dem .NET Standard Bibliotheksprojekt.The local namespace declaration allows you to access other classes from the .NET Standard library project.

Am Ende dieses ersten Tags x wird das Präfix für ein Attribut mit dem Namen verwendet Class .At the end of that first tag, the x prefix is used for an attribute named Class. Da die Verwendung dieses x Präfixes für den XAML-Namespace praktisch universell ist, werden XAML-Attribute wie Class fast immer als bezeichnet x:Class .Because the use of this x prefix is virtually universal for the XAML namespace, XAML attributes such as Class are almost always referred to as x:Class.

Das- x:Class Attribut gibt einen voll qualifizierten .net-Klassennamen an: die- MainPage Klasse im- XamlSamples Namespace.The x:Class attribute specifies a fully qualified .NET class name: the MainPage class in the XamlSamples namespace. Dies bedeutet, dass diese XAML-Datei eine neue Klasse MainPage mit dem Namen in dem XamlSamples Namespace definiert, der von abgeleitet wird ContentPage – das Tag, in dem das x:Class Attribut angezeigt wird.This means that this XAML file defines a new class named MainPage in the XamlSamples namespace that derives from ContentPage—the tag in which the x:Class attribute appears.

Das- x:Class Attribut kann nur im Root-Element einer XAML-Datei angezeigt werden, um eine abgeleitete c#-Klasse zu definieren.The x:Class attribute can only appear in the root element of a XAML file to define a derived C# class. Dies ist die einzige neue Klasse, die in der XAML-Datei definiert ist.This is the only new class defined in the XAML file. Alle anderen Elemente, die in der XAML-Datei angezeigt werden, werden stattdessen einfach aus vorhandenen Klassen instanziiert und initialisiert.Everything else that appears in the XAML file is instead simply instantiated from existing classes and initialized.

Die MainPage.XAML.cs -Datei sieht wie folgt aus (abgesehen von nicht verwendeten using Direktiven):The MainPage.xaml.cs file looks like this (aside from unused using directives):

using Xamarin.Forms;

namespace XamlSamples
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Die- MainPage Klasse wird von abgeleitet ContentPage , aber beachten Sie die partial Klassendefinition.The MainPage class derives from ContentPage, but notice the partial class definition. Dies deutet darauf hin, dass eine andere partielle Klassendefinition für vorhanden sein sollte MainPage , aber wo ist Sie?This suggests that there should be another partial class definition for MainPage, but where is it? Und was ist diese InitializeComponent Methode?And what is that InitializeComponent method?

Wenn das Projekt in Visual Studio erstellt wird, wird die XAML-Datei analysiert, um eine c#-Codedatei zu generieren.When Visual Studio builds the project, it parses the XAML file to generate a C# code file. Wenn Sie das Verzeichnis " xamlsamples\xamlsamples\obj\debug " betrachten, finden Sie eine Datei mit dem Namen XamlSamples.MainPage.XAML.g.cs.If you look in the XamlSamples\XamlSamples\obj\Debug directory, you’ll find a file named XamlSamples.MainPage.xaml.g.cs. Das "g" steht für "generiert".The ‘g’ stands for generated. Dies ist die andere partielle Klassendefinition von MainPage , die die Definition der Methode enthält, die InitializeComponent vom MainPage Konstruktor aufgerufen wird.This is the other partial class definition of MainPage that contains the definition of the InitializeComponent method called from the MainPage constructor. Diese beiden partiellen MainPage Klassendefinitionen können dann zusammen kompiliert werden.These two partial MainPage class definitions can then be compiled together. Abhängig davon, ob der XAML-Code kompiliert wird, wird entweder die XAML-Datei oder eine binäre Form der XAML-Datei in die ausführbare Datei eingebettet.Depending on whether the XAML is compiled or not, either the XAML file or a binary form of the XAML file is embedded in the executable.

Zur Laufzeit ruft der Code im bestimmten Platt Form Projekt eine- LoadApplication Methode auf und übergibt ihr eine neue Instanz der- App Klasse in der .NET Standard-Bibliothek.At runtime, code in the particular platform project calls a LoadApplication method, passing to it a new instance of the App class in the .NET Standard library. Der App Klassenkonstruktor instanziiert MainPage .The App class constructor instantiates MainPage. Der Konstruktor dieser Klasse ruft auf InitializeComponent und ruft dann die-Methode auf, die LoadFromXaml die XAML-Datei (oder die kompilierte Binärdatei) aus der .NET Standard Bibliothek extrahiert.The constructor of that class calls InitializeComponent, which then calls the LoadFromXaml method that extracts the XAML file (or its compiled binary) from the .NET Standard library. LoadFromXamlInitialisiert alle in der XAML-Datei definierten-Objekte, verbindet Sie alle in über-und untergeordneten Beziehungen, fügt Ereignishandler, die im Code definiert sind, an Ereignisse an, die in der XAML-Datei festgelegt sind, und legt die resultierende Struktur von Objekten als Inhalt der Seite fest.LoadFromXaml initializes all the objects defined in the XAML file, connects them all together in parent-child relationships, attaches event handlers defined in code to events set in the XAML file, and sets the resultant tree of objects as the content of the page.

Obwohl Sie normalerweise nicht viel Zeit mit generierten Code Dateien aufwenden müssen, werden manchmal Lauf Zeit Ausnahmen für Code in den generierten Dateien ausgelöst, sodass Sie mit Ihnen vertraut sein sollten.Although you normally don’t need to spend much time with generated code files, sometimes runtime exceptions are raised on code in the generated files, so you should be familiar with them.

Wenn Sie dieses Programm kompilieren und ausführen, wird das Label Element in der Mitte der Seite angezeigt, wie die XAML vorschlägt:When you compile and run this program, the Label element appears in the center of the page as the XAML suggests:

Standard::: NO-LOC (xamarin. Forms)::: DisplayDefault Xamarin.Forms display

Für interessantere Visualisierungen benötigen Sie lediglich eine interessantere XAML-Datei.For more interesting visuals, all you need is more interesting XAML.

Hinzufügen von neuen XAML-SeitenAdding New XAML Pages

Wenn Sie Ihrem Projekt andere XAML-basierte Klassen hinzufügen möchten ContentPage , wählen Sie das Projekt xamlsamples .NET Standard Library aus, klicken Sie mit der rechten Maustaste, und wählen Sie > neues Element hinzufügen... aus. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Visual c#-Elemente > Xamarin.Forms > Inhaltsseite (keine Inhaltsseite (c#) aus, die eine Code basierte Seite oder eine Inhaltsansichterstellt, die keine Seite ist).To add other XAML-based ContentPage classes to your project, select the XamlSamples .NET Standard library project, right-click, and select Add > New Item.... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page (not Content Page (C#), which creates a code-only page, or Content View, which is not a page). Geben Sie der Seite einen Namen, z. b. helloxamlpage:Give the page a name, for example, HelloXamlPage:

Dialog Feld Neues Element hinzufügen

Dem Projekt werden zwei Dateien hinzugefügt: helloxamlpage. XAML und die Code-Behind-Datei HelloXamlPage.XAML.cs.Two files are added to the project, HelloXamlPage.xaml and the code-behind file HelloXamlPage.xaml.cs.

Festlegen von Seiten InhaltSetting Page Content

Bearbeiten Sie die Datei " helloxamlpage. XAML ", sodass die einzigen Tags für ContentPage und sind ContentPage.Content :Edit the HelloXamlPage.xaml file so that the only tags are those for ContentPage and ContentPage.Content:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage">
    <ContentPage.Content>

    </ContentPage.Content>
</ContentPage>

Die ContentPage.Content Tags sind Teil der eindeutigen Syntax von XAML.The ContentPage.Content tags are part of the unique syntax of XAML. Zunächst erscheint dies möglicherweise als ungültiges XML, aber Sie sind zulässig.At first, they might appear to be invalid XML, but they are legal. Der Zeitraum ist kein Sonderzeichen in XML.The period is not a special character in XML.

Die ContentPage.Content Tags werden als Eigenschaften Element Tags bezeichnet.The ContentPage.Content tags are called property element tags. Contentist eine Eigenschaft von ContentPage und ist in der Regel auf eine einzelne Ansicht oder ein Layout mit untergeordneten Ansichten festgelegt.Content is a property of ContentPage, and is generally set to a single view or a layout with child views. Normalerweise werden Eigenschaften zu Attributen in XAML, aber es wäre schwierig, ein Content Attribut auf ein komplexes Objekt festzulegen.Normally properties become attributes in XAML, but it would be hard to set a Content attribute to a complex object. Aus diesem Grund wird die-Eigenschaft als XML-Element ausgedrückt, das aus dem Klassennamen und dem Eigenschaftsnamen besteht, die durch einen Zeitraum getrennt sind.For that reason, the property is expressed as an XML element consisting of the class name and the property name separated by a period. Nun kann die- Content Eigenschaft zwischen den Tags wie folgt festgelegt werden ContentPage.Content :Now the Content property can be set between the ContentPage.Content tags, like this:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage"
             Title="Hello XAML Page">
    <ContentPage.Content>

        <Label Text="Hello, XAML!"
               VerticalOptions="Center"
               HorizontalTextAlignment="Center"
               Rotation="-15"
               IsVisible="true"
               FontSize="Large"
               FontAttributes="Bold"
               TextColor="Blue" />

    </ContentPage.Content>
</ContentPage>

Beachten Sie auch, dass ein- Title Attribut für das Stammtag festgelegt wurde.Also notice that a Title attribute has been set on the root tag.

Zu diesem Zeitpunkt sollte die Beziehung zwischen Klassen, Eigenschaften und XML ersichtlich sein: eine Xamarin.Forms Klasse (z. b. ContentPage oder Label ) wird in der XAML-Datei als XML-Element angezeigt.At this time, the relationship between classes, properties, and XML should be evident: A Xamarin.Forms class (such as ContentPage or Label) appears in the XAML file as an XML element. Eigenschaften dieser Klasse – einschließlich Title on ContentPage und sieben Eigenschaften von Label – werden normalerweise als XML-Attribute angezeigt.Properties of that class—including Title on ContentPage and seven properties of Label—usually appear as XML attributes.

Viele Verknüpfungen sind vorhanden, um die Werte dieser Eigenschaften festzulegen.Many shortcuts exist to set the values of these properties. Einige Eigenschaften sind grundlegende Datentypen: die-Eigenschaft und die-Eigenschaft sind z. b. vom Typ, Title Text String Rotation ist Double vom Typ, und IsVisible ( true Standardmäßig wird hier nur zur Veranschaulichung festgelegt) ist vom Typ Boolean .Some properties are basic data types: For example, the Title and Text properties are of type String, Rotation is of type Double, and IsVisible (which is true by default and is set here only for illustration) is of type Boolean.

Die-Eigenschaft weist den HorizontalTextAlignment Typ auf TextAlignment , bei dem es sich um eine Enumeration handelt.The HorizontalTextAlignment property is of type TextAlignment, which is an enumeration. Für eine Eigenschaft eines beliebigen Enumerationstyps müssen Sie lediglich einen Elementnamen angeben.For a property of any enumeration type, all you need to supply is a member name.

Für Eigenschaften komplexer Typen werden jedoch Konverter für die XAML-Verarbeitung verwendet.For properties of more complex types, however, converters are used for parsing the XAML. Dies sind Klassen in Xamarin.Forms , die von abgeleitet sind TypeConverter .These are classes in Xamarin.Forms that derive from TypeConverter. Viele sind öffentliche Klassen, andere jedoch nicht.Many are public classes but some are not. Für diese bestimmte XAML-Datei spielen einige dieser Klassen eine Rolle hinter den Kulissen:For this particular XAML file, several of these classes play a role behind the scenes:

  • LayoutOptionsConverterfür die VerticalOptions EigenschaftLayoutOptionsConverter for the VerticalOptions property
  • FontSizeConverterfür die FontSize EigenschaftFontSizeConverter for the FontSize property
  • ColorTypeConverterfür die TextColor EigenschaftColorTypeConverter for the TextColor property

Diese Konverter steuern die zulässige Syntax der Eigenschafts Einstellungen.These converters govern the allowable syntax of the property settings.

Der ThicknessTypeConverter kann eine, zwei oder vier Zahlen, die durch Kommas getrennt sind, verarbeiten.The ThicknessTypeConverter can handle one, two, or four numbers separated by commas. Wenn eine Zahl angegeben wird, gilt sie für alle vier Seiten.If one number is supplied, it applies to all four sides. Bei zwei Zahlen sind die ersten Links und die Rechte Auffüll Zeichen, und der zweite Wert ist oben und unten.With two numbers, the first is left and right padding, and the second is top and bottom. Vier Zahlen liegen in der Reihenfolge Links, oben, rechts und unten.Four numbers are in the order left, top, right, and bottom.

Der LayoutOptionsConverter kann die Namen der öffentlichen statischen Felder der- LayoutOptions Struktur in Werte vom Typ konvertieren LayoutOptions .The LayoutOptionsConverter can convert the names of public static fields of the LayoutOptions structure to values of type LayoutOptions.

Der FontSizeConverter kann einen NamedSize Member oder eine numerische Schriftgröße verarbeiten.The FontSizeConverter can handle a NamedSize member or a numeric font size.

Der ColorTypeConverter akzeptiert die Namen öffentlicher statischer Felder der Color Struktur oder Hexadezimal-RGB-Werte mit oder ohne Alphakanal, dem ein Nummern Zeichen (#) vorangestellt ist.The ColorTypeConverter accepts the names of public static fields of the Color structure or hexadecimal RGB values, with or without an alpha channel, preceded by a number sign (#). Hier ist die Syntax ohne einen Alphakanal:Here’s the syntax without an alpha channel:

TextColor="#rrggbb"

Bei jedem der kleinen Buchstaben handelt es sich um eine hexadezimale Ziffer.Each of the little letters is a hexadecimal digit. Es folgt ein Alphakanal:Here is how an alpha channel is included:

TextColor="#aarrggbb">

Beachten Sie für den Alphakanal, dass FF vollständig deckend und 00 vollständig transparent ist.For the alpha channel, keep in mind that FF is fully opaque and 00 is fully transparent.

Mit zwei anderen Formaten können Sie nur eine einzelne hexadezimal Ziffer für jeden Kanal angeben:Two other formats allow you to specify only a single hexadecimal digit for each channel:

TextColor="#rgb" TextColor="#argb"TextColor="#rgb" TextColor="#argb"

In diesen Fällen wird die Ziffer wiederholt, um den Wert zu bilden.In these cases, the digit is repeated to form the value. #CF3 ist beispielsweise die RGB-Farbe CC-FF-33.For example, #CF3 is the RGB color CC-FF-33.

Wenn Sie das xamlsamples -Programm ausführen, MainPage wird das angezeigt.When you run the XamlSamples program, the MainPage is displayed. Um den neuen anzuzeigen HelloXamlPage , können Sie diesen entweder als neue Startseite in der app.XAML.cs -Datei festlegen, oder Sie können von zur neuen Seite navigieren MainPage .To see the new HelloXamlPage you can either set that as the new startup page in the App.xaml.cs file, or navigate to the new page from MainPage.

Um die Navigation zu implementieren, ändern Sie zuerst Code im app.XAML.cs -Konstruktor, sodass ein- NavigationPage Objekt erstellt wird:To implement navigation, first change code in the App.xaml.cs constructor so that a NavigationPage object is created:

public App()
{
    InitializeComponent();
    MainPage = new NavigationPage(new MainPage());
}

Im MainPage.XAML.cs -Konstruktor können Sie eine einfache Erstellen Button und den-Ereignishandler verwenden, um zu zu navigieren HelloXamlPage :In the MainPage.xaml.cs constructor, you can create a simple Button and use the event handler to navigate to HelloXamlPage:

public MainPage()
{
    InitializeComponent();

    Button button = new Button
    {
        Text = "Navigate!",
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
    };

    button.Clicked += async (sender, args) =>
    {
        await Navigation.PushAsync(new HelloXamlPage());
    };

    Content = button;
}

Durch Festlegen der- Content Eigenschaft der Seite wird die Einstellung der- Content Eigenschaft in der XAML-Datei ersetzt.Setting the Content property of the page replaces the setting of the Content property in the XAML file. Wenn Sie die neue Version dieses Programms kompilieren und bereitstellen, wird auf dem Bildschirm eine Schaltfläche angezeigt.When you compile and deploy the new version of this program, a button appears on the screen. Das Drücken der IT navigiert zu HelloXamlPage .Pressing it navigates to HelloXamlPage. Dies ist die resultierende Seite auf iPhone, Android und UWP:Here’s the resultant page on iPhone, Android, and UWP:

Bezeichnungs Text gedrehtRotated Label Text

Sie können zurück zur MainPage Schaltfläche zurückkehren, indem Sie die Schaltfläche zurück< auf IOS verwenden. verwenden Sie dazu den Pfeil nach links oben auf der Seite oder am unteren Rand des Telefons unter Android, oder verwenden Sie den Pfeil nach links am oberen Rand der Seite unter Windows 10.You can navigate back to MainPage using the < Back button on iOS, using the left arrow at the top of the page or at the bottom of the phone on Android, or using the left arrow at the top of the page on Windows 10.

Sie können mit dem XAML experimentieren, um unterschiedliche Möglichkeiten zum renderenden zu haben Label .Feel free to experiment with the XAML for different ways to render the Label. Wenn Sie Unicode-Zeichen in den Text einbetten müssen, können Sie die Standard-XML-Syntax verwenden.If you need to embed any Unicode characters into the text, you can use the standard XML syntax. Wenn Sie z. b. den Gruß in Smarttags einfügen möchten, verwenden Sie Folgendes:For example, to put the greeting in smart quotes, use:

<Label Text="&#x201C;Hello, XAML!&#x201D;" … />

Dies sieht wie folgt aus:Here’s what it looks like:

Bezeichnungs Text mit Unicode-Zeichen gedrehtRotated Label Text with Unicode Characters

XAML-und Code InteraktionenXAML and Code Interactions

Das helloxamlpage -Beispiel enthält nur ein einzelnes Label auf der Seite, aber dies ist sehr ungewöhnlich.The HelloXamlPage sample contains only a single Label on the page, but this is very unusual. Bei den meisten ContentPage Ableitungen wird die- Content Eigenschaft auf ein Layout einer bestimmten Art festgelegt, z StackLayout . b..Most ContentPage derivatives set the Content property to a layout of some sort, such as a StackLayout. Die Children -Eigenschaft der StackLayout ist so definiert, dass Sie vom Typ ist IList<View> , aber tatsächlich ein Objekt vom Typ ist ElementCollection<View> . diese Auflistung kann mit mehreren Sichten oder anderen Layouts aufgefüllt werden.The Children property of the StackLayout is defined to be of type IList<View> but it’s actually an object of type ElementCollection<View>, and that collection can be populated with multiple views or other layouts. In XAML werden diese Beziehungen zwischen übergeordneten und untergeordneten Elementen mit der normalen XML-Hierarchie hergestellt.In XAML, these parent-child relationships are established with normal XML hierarchy. Im folgenden finden Sie eine XAML-Datei für eine neue Seite mit dem Namen xamlpluscodepage:Here’s a XAML file for a new page named XamlPlusCodePage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <StackLayout>
        <Slider VerticalOptions="CenterAndExpand" />

        <Label Text="A simple Label"
               Font="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Diese XAML-Datei ist syntaktisch vollständig und sieht wie folgt aus:This XAML file is syntactically complete, and here’s what it looks like:

Mehrere Steuerelemente auf einer SeiteMultiple Controls on a Page

Allerdings ist es wahrscheinlich, dass dieses Programm funktionell unzureichend ist.However, you are likely to consider this program to be functionally deficient. Vielleicht Slider soll das bewirken, dass den Label aktuellen Wert anzeigt, und das Button ist wahrscheinlich für die Ausführung von etwas innerhalb des Programms vorgesehen.Perhaps the Slider is supposed to cause the Label to display the current value, and the Button is probably intended to do something within the program.

Wie Sie in Teil 4 sehen werden. Grundlagen der Datenbindung: die Aufgabe der Anzeige eines Slider Werts mithilfe eines Label kann vollständig in XAML mit einer Datenbindung behandelt werden.As you’ll see in Part 4. Data Binding Basics, the job of displaying a Slider value using a Label can be handled entirely in XAML with a data binding. Es ist jedoch hilfreich, zuerst die Code Lösung anzuzeigen.But it is useful to see the code solution first. Auch wenn Sie den Klick bearbeiten, Button erfordert dies definitiv Code.Even so, handling the Button click definitely requires code. Dies bedeutet, dass die Code-Behind-Datei für XamlPlusCodePage Handler für das ValueChanged -Ereignis von Slider und das- Clicked Ereignis von enthalten muss Button .This means that the code-behind file for XamlPlusCodePage must contain handlers for the ValueChanged event of the Slider and the Clicked event of the Button. Fügen wir Sie hinzu:Let’s add them:

namespace XamlSamples
{
    public partial class XamlPlusCodePage
    {
        public XamlPlusCodePage()
        {
            InitializeComponent();
        }

        void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
        {

        }

        void OnButtonClicked(object sender, EventArgs args)
        {

        }
    }
}

Diese Ereignishandler müssen nicht öffentlich sein.These event handlers do not need to be public.

In der XAML-Datei müssen die Slider -und- Button Tags Attribute für das ValueChanged -Ereignis und das-Ereignis einschließen, Clicked die auf diese Handler verweisen:Back in the XAML file, the Slider and Button tags need to include attributes for the ValueChanged and Clicked events that reference these handlers:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <StackLayout>
        <Slider VerticalOptions="CenterAndExpand"
                ValueChanged="OnSliderValueChanged" />

        <Label Text="A simple Label"
               Font="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

Beachten Sie, dass das Zuweisen eines Handlers zu einem Ereignis dieselbe Syntax aufweist wie das Zuweisen eines Werts zu einer Eigenschaft.Notice that assigning a handler to an event has the same syntax as assigning a value to a property.

Wenn der Handler für das- ValueChanged Ereignis von das Slider verwendet, Label um den aktuellen Wert anzuzeigen, muss der Handler vom Code auf dieses Objekt verweisen.If the handler for the ValueChanged event of the Slider will be using the Label to display the current value, the handler needs to reference that object from code. LabelBenötigt einen Namen, der mit dem-Attribut angegeben wird x:Name .The Label needs a name, which is specified with the x:Name attribute.

<Label x:Name="valueLabel"
       Text="A simple Label"
       Font="Large"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />

Das x Präfix des x:Name Attributs gibt an, dass dieses Attribut in XAML intrinsisch ist.The x prefix of the x:Name attribute indicates that this attribute is intrinsic to XAML.

Der Name, den Sie dem x:Name Attribut zuweisen, hat dieselben Regeln wie c#-Variablennamen.The name you assign to the x:Name attribute has the same rules as C# variable names. Er muss z. b. mit einem Buchstaben oder Unterstrich beginnen und darf keine eingebetteten Leerzeichen enthalten.For example, it must begin with a letter or underscore and contain no embedded spaces.

Nun ValueChanged kann der Ereignishandler das Festlegen Label , um den neuen Slider Wert anzuzeigen.Now the ValueChanged event handler can set the Label to display the new Slider value. Der neue Wert ist in den Ereignis Argumenten verfügbar:The new value is available from the event arguments:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    valueLabel.Text = args.NewValue.ToString("F3");
}

Oder der Handler kann das Objekt, Slider das dieses Ereignis erzeugt, aus dem sender -Argument abrufen und die- Value Eigenschaft von diesem abrufen:Or, the handler could obtain the Slider object that is generating this event from the sender argument and obtain the Value property from that:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    valueLabel.Text = ((Slider)sender).Value.ToString("F3");
}

Wenn Sie das Programm zum ersten Mal ausführen, wird der Label Wert von nicht angezeigt, Slider da das ValueChanged Ereignis noch nicht ausgelöst wurde.When you first run the program, the Label doesn’t display the Slider value because the ValueChanged event hasn’t yet fired. Allerdings bewirkt jede Bearbeitung von Slider , dass der Wert angezeigt wird:But any manipulation of the Slider causes the value to be displayed:

Schieberegler-Wert angezeigtSlider Value Displayed

Jetzt für das Button .Now for the Button. Wir simulieren eine Antwort auf ein- Clicked Ereignis, indem wir eine Warnung mit der Text der Schaltfläche anzeigen.Let’s simulate a response to a Clicked event by displaying an alert with the Text of the button. Der Ereignishandler kann das sender -Argument auf sichere Weise in einen umwandeln Button und dann auf dessen Eigenschaften zugreifen:The event handler can safely cast the sender argument to a Button and then access its properties:

async void OnButtonClicked(object sender, EventArgs args)
{
    Button button = (Button)sender;
    await DisplayAlert("Clicked!",
        "The button labeled '" + button.Text + "' has been clicked",
        "OK");
}

Die-Methode wird als definiert async , da die DisplayAlert -Methode asynchron ist und dem- await Operator vorangestellt wird, der zurückgibt, wenn die-Methode abgeschlossen ist.The method is defined as async because the DisplayAlert method is asynchronous and should be prefaced with the await operator, which returns when the method completes. Da diese Methode das Auslösen Button des-Ereignisses aus dem- sender Argument erhält, kann derselbe Handler für mehrere Schaltflächen verwendet werden.Because this method obtains the Button firing the event from the sender argument, the same handler could be used for multiple buttons.

Sie haben gesehen, dass ein in XAML definiertes Objekt ein Ereignis auslösen kann, das in der Code-Behind-Datei behandelt wird, und dass die Code-Behind-Datei auf ein Objekt zugreifen kann, das in XAML unter Verwendung des zugewiesenen namens mit dem-Attribut definiert ist x:Name .You’ve seen that an object defined in XAML can fire an event that is handled in the code-behind file, and that the code-behind file can access an object defined in XAML using the name assigned to it with the x:Name attribute. Dabei handelt es sich um die beiden grundlegenden Methoden zum Interagieren von Code und XAML.These are the two fundamental ways that code and XAML interact.

Weitere Einblicke in die Funktionsweise von XAML finden Sie unter Untersuchen der neu generierten XamlPlusCode.XAML.g.cs-Datei, die jetzt alle Namen enthält, die einem beliebigen x:Name Attribut als privates Feld zugewiesen sind.Some additional insights into how XAML works can be gleaned by examining the newly generated XamlPlusCode.xaml.g.cs file, which now includes any name assigned to any x:Name attribute as a private field. Im folgenden finden Sie eine vereinfachte Version dieser Datei:Here's a simplified version of that file:

public partial class XamlPlusCodePage : ContentPage {

    private Label valueLabel;

    private void InitializeComponent() {
        this.LoadFromXaml(typeof(XamlPlusCodePage));
        valueLabel = this.FindByName<Label>("valueLabel");
    }
}

Die Deklaration dieses Felds ermöglicht die freie Verwendung der Variablen an beliebiger Stelle innerhalb der XamlPlusCodePage partiellen Klassendatei in ihrem Zuständigkeitsbereich.The declaration of this field allows the variable to be freely used anywhere within the XamlPlusCodePage partial class file under your jurisdiction. Zur Laufzeit wird das Feld zugewiesen, nachdem das XAML analysiert wurde.At runtime, the field is assigned after the XAML has been parsed. Dies bedeutet, dass das valueLabel Feld ist, null Wenn der XamlPlusCodePage Konstruktor beginnt, aber gültig ist, nachdem InitializeComponent aufgerufen wurde.This means that the valueLabel field is null when the XamlPlusCodePage constructor begins but valid after InitializeComponent is called.

Nachdem InitializeComponent die Steuerung zurück an den Konstruktor zurückgegeben hat, wurden die visuellen Elemente der Seite so erstellt, als ob Sie im Code instanziiert und initialisiert worden wären.After InitializeComponent returns control back to the constructor, the visuals of the page have been constructed just as if they had been instantiated and initialized in code. Die XAML-Datei spielt keine Rolle mehr in der Klasse.The XAML file no longer plays any role in the class. Sie können diese Objekte auf der Seite auf beliebige Weise ändern, z. b. durch Hinzufügen von Ansichten zu StackLayout oder durch Festlegen der- Content Eigenschaft der Seite auf etwas anderes.You can manipulate these objects on the page in any way that you want, for example, by adding views to the StackLayout, or setting the Content property of the page to something else entirely. Sie können die Struktur durchlaufen, indem Sie die Content -Eigenschaft der Seite und die Elemente in den Auflistungen Children von Layouts untersuchen.You can “walk the tree” by examining the Content property of the page and the items in the Children collections of layouts. Sie können Eigenschaften für Sichten festlegen, auf die auf diese Weise zugegriffen wird, oder Ihnen Ereignishandler dynamisch zuweisen.You can set properties on views accessed in this way, or assign event handlers to them dynamically.

Das ist kostenlos.Feel free. Es ist Ihre Seite, und XAML ist nur ein Tool zum Erstellen des Inhalts.It’s your page, and XAML is only a tool to build its content.

ZusammenfassungSummary

Mit dieser Einführung haben Sie gesehen, wie eine XAML-Datei und eine Codedatei zu einer Klassendefinition beitragen und wie die XAML-und Code Dateien interagieren.With this introduction, you’ve seen how a XAML file and code file contribute to a class definition, and how the XAML and code files interact. XAML verfügt jedoch auch über eigene, einzigartige syntaktische Features, die eine sehr flexible Verwendung ermöglichen.But XAML also has its own unique syntactical features that allow it to be used in a very flexible manner. Sie können diese in Teil 2 untersuchen. Wichtige XAML-Syntax.You can begin exploring these in Part 2. Essential XAML Syntax.