Hello, Mac: Exemplarische VorgehensweiseHello, Mac – Walkthrough

Mit Xamarin.Mac können Sie vollständig native Mac-Apps in C# und .NET mit den gleichen macOS-APIs entwickeln, die auch bei der Entwicklung von Objective-C und Swift verwendet werden.Xamarin.Mac allows for the development of fully native Mac apps in C# and .NET using the same macOS APIs that are used when developing in Objective-C or Swift. Da Xamarin.Mac direkt in Xcode integriert wird, können Entwickler mit Interface Builder von Xcode Benutzeroberflächen von Anwendungen erstellen (optional geht dies auch direkt in C#-Code).Because Xamarin.Mac integrates directly with Xcode, the developer can use Xcode's Interface Builder to create an app's user interfaces (or optionally create them directly in C# code).

Zusätzlich kann Code für mobile Xamarin.iOS- und Xamarin.Android-Apps freigegeben werden, während auf jeder Plattform eine native Benutzeroberfläche bereitgestellt wird. Dies liegt daran, dass Xamarin.Mac-Anwendungen in C# und .NET geschrieben sind.Additionally, since Xamarin.Mac applications are written in C# and .NET, code can be shared with Xamarin.iOS and Xamarin.Android mobile apps; all while delivering a native experience on each platform.

In diesem Artikel werden die Hauptkonzepte vorgestellt, die zum Erstellen einer Mac-App mit Xamarin.Mac, Visual Studio für Mac und Interface Builder von Xcode wichtig sind. Zu diesem Zweck führt der Artikel Sie durch die Erstellung einer einfachen Hallo, Mac-App, die zählt, wie häufig auf eine Schaltfläche geklickt wird:This article will introduce the key concepts needed to create a Mac app using Xamarin.Mac, Visual Studio for Mac and Xcode's Interface Builder by walking through the process of building a simple Hello, Mac app that counts the number of times a button has been clicked:

Die folgenden Konzepte werden besprochen:The following concepts will be covered:

  • Visual Studio für Mac: Einführung in Visual Studio für Mac und die Erstellung von Xamarin.Mac-Anwendungen mit diesem Tool.Visual Studio for Mac – Introduction to the Visual Studio for Mac and how to create Xamarin.Mac applications with it.
  • Die Anatomie einer Xamarin.Mac-Anwendung: Aufbau einer Xamarin.Mac-AnwendungAnatomy of a Xamarin.Mac Application – What a Xamarin.Mac application consists of.
  • Interface Builder von Xcode: Verwendung von Interface Builder von Xcode zum Definieren der App-BenutzeroberflächeXcode’s Interface Builder – How to use Xcode’s Interface Builder to define an app’s user interface.
  • Outlets und Aktionen: Verwendung von Outlets und Aktionen zum Verbinden von Steuerelementen auf der BenutzeroberflächeOutlets and Actions – How to use Outlets and Actions to wire up controls in the user interface.
  • Bereitstellung/Tests: So führen Sie eine Xamarin.Mac-App aus und testen diese.Deployment/Testing – How to run and test a Xamarin.Mac app.

Requirements (Anforderungen)Requirements

Zum Entwickeln von Xamarin.Mac-Anwendungen benötigen Sie Folgendes:Xamarin.Mac application development requires:

Zum Ausführen einer mit Xamarin.Mac erstellten Anwendung benötigen Sie Folgendes:To run an application built with Xamarin.Mac, you will need:

  • Einen Mac-Computer mit macOS 10.7 oder höherA Mac computer running macOS 10.7 or greater.

Warnung

Die anstehende Version Xamarin.Mac 4.8 unterstützt nur macOS 10.9 oder höher.The upcoming Xamarin.Mac 4.8 release will only support macOS 10.9 or higher. Ältere Versionen von Xamarin.Mac unterstützen macOS 10.7 oder höher, aber diese älteren Versionen von MacOS verfügen nicht über ausreichende TLS-Infrastruktur zur Unterstützung von TLS 1.2.Previous versions of Xamarin.Mac supported macOS 10.7 or higher, but these older macOS versions lack sufficient TLS infrastructure to support TLS 1.2. Für macOS 10.7 oder macOS 10.8 sollten Sie Xamarin.Mac 4.6 oder niedriger verwenden.To target macOS 10.7 or macOS 10.8, use Xamarin.Mac 4.6 or earlier.

Starten einer neuen Xamarin.Mac-App in Visual Studio für MacStarting a new Xamarin.Mac App in Visual Studio for Mac

Wie oben erwähnt führt dieser Leitfaden Sie durch die Schritte zum Erstellen einer Mac-App mit dem Namen Hello_Mac, durch die eine einzelne Schaltfläche und eine Beschriftung im Hauptfenster hinzugefügt wird.As stated above, this guide will walk through the steps to create a Mac app called Hello_Mac that adds a single button and label to the main window. Wenn Sie auf die Schaltfläche klicken, zeigt die Beschriftung an, wie oft sie bereits geklickt wurde.When the button is clicked, the label will display the number of times it has been clicked.

So beginnen SieTo get started, do the following steps:

  1. Starten Sie Visual Studio für Mac:Start Visual Studio for Mac:

  2. Klicken Sie auf die Schaltfläche Neues Projekt... , um das Dialogfeld Neues Projekt zu öffnen, wählen Sie dann Mac > App > Cocoa-App aus, und klicken Sie auf die Schaltfläche Weiter:Click on the New Project... button to open the New Project dialog box, then select Mac > App > Cocoa App and click the Next button:

  3. Geben Sie als App-Namen Hello_Mac ein, und behalten Sie für alles andere die Standardwerte bei.Enter Hello_Mac for the App Name, and keep everything else as default. Klicken Sie auf Weiter:Click Next:

  4. Bestätigen Sie den Speicherort des neuen Projekts auf Ihrem Computer:Confirm the location of the new project on your computer:

  5. Klicken Sie auf die Schaltfläche Erstellen.Click the Create button.

Visual Studio für Mac erstellt die neue Xamarin.Mac-App und zeigt die Standarddateien an, die der Projektmappe der App hinzugefügt werden:Visual Studio for Mac will create the new Xamarin.Mac app and display the default files that get added to the app's solution:

Visual Studio für Mac verwendet die gleiche Struktur für Projektmappen und Projekte wie Visual Studio 2019.Visual Studio for Mac uses the same Solution and Project structure as Visual Studio 2019. Eine Projektmappe ist ein Container, der mindestens ein Projekt enthalten kann. Projekte sind z.B. Anwendungen, unterstützende Bibliotheken, Testanwendungen usw. Die Vorlage Datei > Neues Projekt erstellt automatisch eine Projektmappe und ein Anwendungsprojekt.A solution is a container that can hold one or more projects; projects can include applications, supporting libraries, test applications, etc. The File > New Project template creates a solution and an application project automatically.

Aufbau einer Xamarin.Mac-AnwendungAnatomy of a Xamarin.Mac Application

Die Programmierung von Xamarin.Mac-Anwendungen ähnelt der von Xamarin.iOS.Xamarin.Mac application programming is very similar to working with Xamarin.iOS. iOS verwendet das CocoaTouch-Framework, eine reduzierte Version von Cocoa, die von Mac verwendet wird.iOS uses the CocoaTouch framework, which is a slimmed-down version of Cocoa, used by Mac.

Schauen Sie sich die Dateien im Projekt an:Take a look at the files in the project:

  • Main.cs enthält den Haupteinstiegspunkt für die Anwendung.Main.cs contains the main entry point of the app. Wenn die App gestartet wird, enthält die Main-Klasse die erste Methode, die ausgeführt wird.When the app is launched, the Main class contains the very first method that is run.
  • AppDelegate.cs enthält die AppDelegate-Klasse, die auf Ereignisse des Betriebssystems lauscht.AppDelegate.cs contains the AppDelegate class that is responsible for listening to events from the operating system.
  • Info.plist enthält App-Eigenschaften wie den Anwendungsnamen, ihr Symbol usw.Info.plist contains app properties such as the application name, icons, etc.
  • Entitlements.plist enthält die Berechtigungen der Anwendung und ermöglicht den Zugriff auf z.B. Sandboxing- und iCloud-Support.Entitlements.plist contains the entitlements for the app and allows access to things such as Sandboxing and iCloud support.
  • Main.storyboard definiert die Benutzeroberfläche (Fenster und Menüs) einer App und beschreibt die Verbindungen zwischen Fenstern mit Segues.Main.storyboard defines the user interface (Windows and Menus) for an app and lays out the interconnections between Windows via Segues. Storyboards sind XML-Dateien, die eine Definition der Ansichten enthalten (Benutzeroberflächenelemente).Storyboards are XML files that contain the definition of views (user interface elements). Diese Datei kann von Interface Builder in Xcode erstellt und verwaltet werden.This file can be created and maintained by Interface Builder inside of Xcode.
  • ViewController.cs ist der Controller des Hauptfensters.ViewController.cs is the controller for the main window. Controller werden in einem anderen Artikel ausführlicher besprochen. Für den Moment reicht es, sich den Controller als Haupt-Engine einer jeden Ansicht vorzustellen.Controllers will be covered in detail in another article, but for now, a controller can be thought of the main engine of any particular view.
  • ViewController.designer.cs enthält Grundlagencode, der bei der Integration in die Benutzeroberfläche des Hauptbildschirms hilft.ViewController.designer.cs contains plumbing code that helps integrate with the main screen’s user interface.

In den folgenden Abschnitten werden diese Dateien kurz behandelt.The following sections, will take a quick look through some of these files. Sie werden später ausführlicher besprochen. Allerdings wird empfohlen, sich jetzt schon grundlegend mit ihnen vertraut zu machen.Later, they will be explored in more detail, but it’s a good idea to understand their basics now.

Main.csMain.cs

Die Datei main.cs ist sehr einfach aufgebaut.The Main.cs file is very simple. Sie enthält eine statische Main-Methode, die eine neue Instanz einer Xamarin.Mac-App erstellt und den Namen der Klasse zurückgibt, die das OS-Ereignis behandelt. In diesem Fall ist dies die Klasse AppDelegate:It contains a static Main method which creates a new Xamarin.Mac app instance and passes the name of the class that will handle OS events, which in this case is the AppDelegate class:

using System;
using System.Drawing;
using Foundation;
using AppKit;
using ObjCRuntime;

namespace Hello_Mac
{
    class MainClass
    {
        static void Main (string[] args)
        {
            NSApplication.Init ();
            NSApplication.Main (args);
        }
    }
}

AppDelegate.csAppDelegate.cs

Die AppDelegate.cs-Datei enthält eine AppDelegate-Klasse, die für das Erstellen von Fenstern und das Lauschen auf OS-Ereignisse verantwortlich ist:The AppDelegate.cs file contains an AppDelegate class, which is responsible for creating windows and listening to OS events:

using AppKit;
using Foundation;

namespace Hello_Mac
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
        }

        public override void WillTerminate (NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}

Dieser Code ist wahrscheinlich unbekannt, es sei denn, der Entwickler hat schon einmal eine iOS-App entwickelt. Er ist jedoch recht einfach.This code is probably unfamiliar unless the developer has built an iOS app before, but it’s fairly simple.

Die DidFinishLaunching-Methode wird ausgeführt, nachdem die App instanziiert wurde. Sie ist dafür verantwortlich, das Fenster der App zu erstellen und die Ansicht in dieser anzuzeigen.The DidFinishLaunching method runs after the app has been instantiated, and it’s responsible for actually creating the app's window and beginning the process of displaying the view in it.

Die WillTerminate-Methode wird aufgerufen, wenn der Benutzer oder das System das Beenden der App instanziiert hat.The WillTerminate method will be called when the user or the system has instantiated a shutdown of the app. Der Entwickler sollte diese Methode verwenden, um die App fertig zu stellen, bevor sie beendet wird (wie z.B. das Speichern der Benutzereinstellungen oder die Fenstergröße und -stelle).The developer should use this method to finalize the app before it quits (such as saving user preferences or window size and location).

ViewController.csViewController.cs

Cocoa (und das davon abgeleitete CocoaTouch) verwendet das sogenannte MVC-Muster (Model View Controller).Cocoa (and by derivation, CocoaTouch) uses what’s known as the Model View Controller (MVC) pattern. Die ViewController-Deklaration stellt das Objekt dar, das das App-Fenster steuert.The ViewController declaration represents the object that controls the actual app window. Für jedes erstellte Fenster (und für viele der Elemente in Fenstern) gibt es einen Controller, der für den Lebenszyklus eines Fensters verantwortlich ist, z.B. für das Anzeigen oder das Hinzufügen von neuen Ansichten (Steuerelementen).Generally, for every window created (and for many other things within windows), there is a controller, which is responsible for the window’s lifecycle, such as showing it, adding new views (controls) to it, etc.

Die ViewController-Klasse ist der Controller des Hauptfenster.The ViewController class is the main window’s controller. Der Controller ist für den Lebenszyklus des Hauptfensters verantwortlich.The controller is responsible for the life cycle of the main window. Dies wird später ausführlicher diskutiert. Schauen Sie sich nun aber zunächst dies an:This will be examined in detail later, for now take a quick look at it:

using System;

using AppKit;
using Foundation;

namespace Hello_Mac
{
    public partial class ViewController : NSViewController
    {
        public ViewController (IntPtr handle) : base (handle)
        {
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Do any additional setup after loading the view.
        }

        public override NSObject RepresentedObject {
            get {
                return base.RepresentedObject;
            }
            set {
                base.RepresentedObject = value;
                // Update the view, if already loaded.
            }
        }
    }
}

ViewController.Designer.csViewController.Designer.cs

Die Designerdatei für die Hauptfensterklasse ist anfangs leer, wird aber automatisch von Visual Studio für Mac aufgefüllt, wenn die Benutzeroberfläche mit Xcode Interface Builder erstellt wird:The designer file for the Main Window class is initially empty, but it will be automatically populated by Visual Studio for Mac as the user interface is created with Xcode Interface Builder:

// WARNING
//
// This file has been generated automatically by Visual Studio for Mac to store outlets and
// actions made in the UI designer. If it is removed, they will be lost.
// Manual changes to this file may not be handled correctly.
//
using Foundation;

namespace Hello_Mac
{
    [Register ("ViewController")]
    partial class ViewController
    {
        void ReleaseDesignerOutlets ()
        {
        }
    }
}

Designerdateien sollten nicht direkt bearbeitet werden, da sie automatisch von Visual Studio für Mac verwaltet werden, um den Grundlagencode bereitzustellen, der den Zugriff auf Steuerelemente ermöglicht, die Fenstern oder Ansichten in der App hinzugefügt wurden.Designer files should not be edited directly, as they’re automatically managed by Visual Studio for Mac to provide the plumbing code that allows access to controls that have been added to any window or view in the app.

Wenn das Xamarin.Mac-App-Projekt erstellt wurde und Sie ein grundlegendes Verständnis seiner Komponenten haben, wechseln Sie zu Xcode, um die Benutzeroberfläche mit Interface Builder zu erstellen.With the Xamarin.Mac app project created and a basic understanding of its components, switch to Xcode to create the user interface using Interface Builder.

Info.plistInfo.plist

Die Info.plist-Datei enthält Informationen zur Xamarin.Mac-App wie z.B. deren Namen und die Bundle-ID:The Info.plist file contains information about the Xamarin.Mac app such as its Name and Bundle Identifier:

Zudem definiert sie das Storyboard, mit dem die Benutzeroberfläche für die Xamarin.Mac-App im Dropdownmenü Main Interface (Hauptschnittstelle) angezeigt wird.It also defines the Storyboard that will be used to display the user interface for the Xamarin.Mac app under the Main Interface dropdown. Im obigen Beispiel bezieht sich Main im Dropdownmenü auf Main.storyboard in der Quellstruktur des Projekts im Projektmappen-Explorer.In example above, Main in the dropdown relates to the Main.storyboard in the project's source tree in the Solution Explorer. Außerdem definiert die Datei das Symbol der App, indem sie den Ressourcenkatalog angibt, der diese enthält (in diesem Fall AppIcon).It also defines the app's icons by specifying the Asset Catalog that contains them (AppIcon in this case).

Entitlements.plistEntitlements.plist

Die Berechtigungen der Entitlements.plist-Dateisteuerelemente der App, über die die Xamarin.Mac-App verfügt, wie z.B. Sandboxing und iCloud:The app's Entitlements.plist file controls entitlements that the Xamarin.Mac app has such as Sandboxing and iCloud:

Für das Hallo Welt-Beispiel benötigen Sie keine Berechtigungen.For the Hello World example, no entitlements will be required. Im nächsten Abschnitt erfahren Sie, wie Sie Interface Builder von Xcode verwenden, um die Main.storyboard-Datei zu bearbeiten und die Benutzeroberfläche der Xamarin.Mac-App zu definieren.The next section shows how to use Xcode's Interface Builder to edit the Main.storyboard file and define the Xamarin.Mac app's UI.

Einführung in Xcode und Interface BuilderIntroduction to Xcode and Interface Builder

Das Tool „Interface Builder“ wurde von Apple für Xcode entwickelt, damit Entwickler eine Benutzeroberfläche visuell im Designer erstellen können.As part of Xcode, Apple has created a tool called Interface Builder, which allows a developer to create a user interface visually in a designer. Xamarin.Mac kann ganz natürlich mit Interface Builder zusammenarbeiten, sodass die UI mit den gleichen Tools entwickelt werden kann, die auch von Objective-C-Benutzern verwendet werden.Xamarin.Mac integrates fluently with Interface Builder, allowing UI to be created with the same tools as Objective-C users.

Doppelklicken Sie im Projektmappen-Explorer auf die Main.storyboard-Datei, um diese zur Bearbeitung in Xcode und Interface Builder zu öffnen.To get started, double-click the Main.storyboard file in the Solution Explorer to open it for editing in Xcode and Interface Builder:

Daraufhin sollte Xcode gestartet werden, wie in diesem Screenshot angezeigt:This should launch Xcode and look like this screenshot:

Bevor Sie mit dem Entwerfen der Oberfläche beginnen, machen Sie sich mit Xcode und den Hauptfunktionen vertraut, die verwendet werden.Before starting to design the interface, take a quick overview of Xcode to orient with the main features that will be used.

Hinweis

Entwickler müssen nicht auf Xcode und Interface Builder zurückgreifen, um die Benutzeroberfläche einer Xamarin.Mac-App zu erstellen. Sie können dies auch direkt in C#-Code tun. Dies übersteigt jedoch den Umfang dieses Artikels.The developer doesn't have to use Xcode and Interface Builder to create the user interface for a Xamarin.Mac app, the UI can be created directly from C# code but that is beyond the scope of this article. Der Einfachheit halber wird im Rest dieses Tutorials Interface Builder zum Erstellen der UI verwendet.For the sake of simplicity, it will be using Interface Builder to create the user interface throughout the rest of this tutorial.

Komponenten von XcodeComponents of Xcode

Wenn Sie eine .storyboard-Datei aus Visual Studio für Mac in Xcode öffnen, wird Folgendes angezeigt: ein Projektnavigator auf der linken Seite, die Schnittstellenhierarchie und der Schnittstellen-Editor in der Mitte sowie der Bereich Eigenschaften und Hilfsprogramme auf der rechten Seite:When opening a .storyboard file in Xcode from Visual Studio for Mac, it opens with a Project Navigator on the left, the Interface Hierarchy and Interface Editor in the middle, and a Properties & Utilities section on the right:

In den folgenden Abschnitten wird diskutiert, wie diese Xcode-Funktionen funktionieren und wie Sie sie verwenden können, um eine Benutzeroberfläche für eine Xamarin.Mac-App zu erstellen.The following sections take a look at what each of these Xcode features do and how to use them to create the interface for a Xamarin.Mac app.

ProjektnavigationProject Navigation

Wenn Sie eine .storyboard-Datei zur Bearbeitung in Xcode öffnen, erstellt Visual Studio für Mac im Hintergrund eine Xcode-Projektdatei, um mit Xcode Änderungen auszutauschen.When opening a .storyboard file for editing in Xcode, Visual Studio for Mac creates a Xcode Project File in the background to communicate changes between itself and Xcode. Wenn der Entwickler später von Xcode zurück zu Visual Studio für Mac wechselt, werden alle an diesem Projekt vorgenommenen Änderungen von Visual Studio für Mac mit dem Xamarin.Mac-Projekt synchronisiert.Later, when the developer switches back to Visual Studio for Mac from Xcode, any changes made to this project are synchronized with the Xamarin.Mac project by Visual Studio for Mac.

Im Abschnitt Projektnavigation kann der Entwickler durch alle Dateien navigieren, aus denen dieses Shim-Xcode-Projekt besteht.The Project Navigation section allows the developer to navigate between all of the files that make up this shim Xcode project. Normalerweise haben Sie nur Interesse an den .storyboard-Dateien in dieser Liste wie z.B. Main.storyboard.Typically, they will only be interested in the .storyboard files in this list such as Main.storyboard.

SchnittstellenhierarchieInterface Hierarchy

Im Abschnitt Interface Hierarchy (Schnittstellenhierarchie) können Entwickler leicht auf verschiedene Schlüsseleigenschaften der Benutzeroberfläche zugreifen, z.B. deren Platzhalter und Hauptfenster.The Interface Hierarchy section allows the developer to easily access several key properties of the user interface such as its Placeholders and main Window. Über diesen Abschnitt besteht auch Zugriff auf die einzelnen Elemente (Ansichten), aus denen die Benutzeroberfläche besteht. Außerdem lässt sich deren Schachtelung anpassen, indem Sie sie in der Hierarchie an eine andere Stelle ziehen.This section can be used to access the individual elements (views) that make up the user interface and to adjust the way they are nested by dragging them around within the hierarchy.

Schnittstellen-EditorInterface Editor

Im Abschnitt Interface Editor (Schnittstellen-Editor) finden Sie die Oberfläche, auf der die Benutzeroberfläche grafisch angeordnet wird. Ziehen Sie Elemente aus dem Abschnitt Bibliothek des Abschnitts Eigenschaften & Dienstprogramme, um den Entwurf zu erstellen.The Interface Editor section provides the surface on which the user interface is graphically laid out. Drag elements from the Library section of the Properties & Utilities section to create the design. Wenn Sie UI-Elemente (Ansichten) der Entwurfsoberfläche hinzufügen, werden Sie auch im Abschnitt Schnittstellenhierarchie hinzugefügt, und zwar in der Reihenfolge, in der Sie im Schnittstellen-Editor aufgelistet sind.As user interface elements (views) are added to the design surface, they will be added to the Interface Hierarchy section in the order that they appear in the Interface Editor.

Eigenschaften und DienstprogrammeProperties & Utilities

Der Abschnitt Eigenschaften & Dienstprogramme ist in zwei Hauptabschnitte aufgeteilt: Eigenschaften (auch als Inspektoren bezeichnet) und Bibliothek:The Properties & Utilities section is divided into two main sections, Properties (also called Inspectors) and the Library:

Zunächst ist dieser Abschnitt nahezu leer. Wenn der Entwickler jedoch ein Element im Schnittstellen-Editor oder der Schnittstellenhierarchie auswählt, wird der Abschnitt Eigenschaften mit Informationen zu diesem Element und Eigenschaften, die angepasst werden können, aufgefüllt.Initially this section is almost empty, however if the developer selects an element in the Interface Editor or Interface Hierarchy, the Properties section will be populated with information about the given element and properties that they can adjust.

Im Abschnitt Eigenschaften gibt es wie in der folgenden Abbildung dargestellt acht verschiedene Inspector Tabs (Inspektorregisterkarten):Within the Properties section, there are eight different Inspector Tabs, as shown in the following illustration:

Eigenschaften- und DienstprogrammtypenProperties & Utility Types

Es gibt die folgenden Registerkarten (von links nach rechts):From left-to-right, these tabs are:

  • Dateiinspektor: Der Dateiinspektor zeigt Dateiinformationen an, wie z.B. den Dateinamen der XIB-Datei, die bearbeitet wird.File Inspector – The File Inspector shows file information, such as the file name and location of the Xib file that is being edited.
  • Schnellhilfe: Die Registerkarte „Schnellhilfe“ bietet Kontexthilfe, je nachdem, was in Xcode ausgewählt ist.Quick Help – The Quick Help tab provides contextual help based on what is selected in Xcode.
  • Identitätsinspektor: Der Identitätsinspektor bietet Informationen zu dem ausgewählten Steuerelement bzw. der ausgewählten Ansicht.Identity Inspector – The Identity Inspector provides information about the selected control/view.
  • Attributinspektor: Mit dem Attributinspektor kann der Entwickler verschiedene Attribute des ausgewählten Steuerelements bzw. der ausgewählten Ansicht anpassen.Attributes Inspector – The Attributes Inspector allows the developer to customize various attributes of the selected control/view.
  • Größeninspektor: Mit dem Größeninspektor kann der Entwickler die Größe und das Größenänderungsverhalten des ausgewählten Steuerelements bzw. der ausgewählten Ansicht steuern.Size Inspector – The Size Inspector allows the developer to control the size and resizing behavior of the selected control/view.
  • Verbindungsinspektor: Der Verbindungsinspektor zeigt die Outlet- und Aktionsverbindungen des ausgewählten Steuerelements an.Connections Inspector – The Connections Inspector shows the Outlet and Action connections of the selected controls. Outlets und Aktionen werden weiter unten ausführlich vorgestellt.Outlets and Actions will be discussed in detail below.
  • Bindungsinspektor: Mit dem Bindungsinspektor können Entwickler Steuerelemente so konfigurieren, dass deren Werte automatisch an Datenmodelle gebunden werden.Bindings Inspector – The Bindings Inspector allows the developer to configure controls so that their values are automatically bound to data models.
  • Ansichteffektinspektor: Mit dem Ansichteffektinspektor können Entwickler Effekte für die Steuerelemente angeben, wie z.B. Animationen.View Effects Inspector – The View Effects Inspector allows the developer to specify effects on the controls, such as animations.

Verwenden Sie den Abschnitt Bibliothek, um Steuerelemente und Objekte zu finden, die Sie im Designer einfügen können, um die Benutzeroberfläche graphisch zu erstellen:Use the Library section to find controls and objects to place into the designer to graphically build the user interface:

Erstellen der SchnittstelleCreating the Interface

Jetzt wo die Grundlagen der Xcode-IDE und von Interface Builder geklärt wurden, kann der Entwickler die Benutzeroberfläche für das Hauptfenster erstellen.With the basics of the Xcode IDE and Interface Builder covered, the developer can create the user interface for the main view.

So verwenden Sie Interface BuilderFollow these steps to use Interface Builder:

  1. Ziehen Sie in Xcode eine Befehlsschaltfläche aus dem Bibliotheksbereich:In Xcode, drag a Push Button from the Library Section:

  2. Fügen Sie die Schaltfläche in die Ansicht (unter dem Fenstercontroller) im Schnittstellen-Editor ein:Drop the button onto the View (under the Window Controller) in the Interface Editor:

  3. Klicken Sie auf die Eigenschaft Titel im Attributinspektor, und ändern Sie den Titel der Schaltfläche in Click Me:Click on the Title property in the Attribute Inspector and change the button's title to Click Me:

  4. Ziehen Sie eine Bezeichnung aus dem Bibliotheksbereich:Drag a Label from the Library Section:

  5. Fügen Sie die Bezeichnung im Fenster neben der Schaltfläche im Schnittstellen-Editor ein:Drop the label onto the Window beside the button in the Interface Editor:

  6. Klicken Sie auf den rechten Ziehpunkt der Bezeichnung, und ziehen Sie diesen nach rechts, bis der Rand des Fensters erreicht ist:Grab the right handle on the label and drag it until it is near the edge of the window:

  7. Wählen Sie die gerade hinzugefügte Schaltfläche im Schnittstellen-Editor aus, und klicken sie auf das Symbol des Einschränkungs-Editors am unteren Rand des Fensters:Select the Button just added in the Interface Editor, and click the Constraints Editor icon at the bottom of the window:

  8. Klicken Sie oben im Editor auf den oberen und den linken roten Balken.At the top of the editor, click the Red I-Beams at the top and left. Wenn Sie die Größe des Fensters anpassen, bleibt die Schaltfläche an der gleichen Stelle oben links im Bildschirm.As the window is resized, this will keep the button in the same location at the top left corner of the screen.

  9. Aktivieren Sie als Nächstes die Kontrollkästchen für die Höhe und Breite, und verwenden Sie die Standardwerte.Next, check the Height and Width boxes and use the default sizes. Dadurch bleibt die Größe der Schaltfläche unverändert, wenn die Größe des Fensters geändert wird.This keeps the button at the same size when the window resizes.

  10. Klicken Sie auf die Schaltfläche Add 4 Contraints (4 Einschränkungen hinzufügen), um die Einschränkungen hinzuzufügen und den Editor zu schließen.Click the Add 4 Constraints button to add the constraints and close the editor.

  11. Wählen Sie die Bezeichnung aus, und klicken Sie erneut auf das Symbol des Einschränkungs-Editors:Select the label and click the Constraints Editor icon again:

  12. Wenn Sie auf den oberen, rechten und linken roten Balken im Einschränkungs-Editor klicken, bleibt die Bezeichnung an ihrer ursprünglichen Stelle und wird nur vergrößert oder verkleinert, wenn die Größe des Fensters in der ausgeführten App geändert wird.By clicking Red I-Beams at the top, right and left of the Constraints Editor, tells the label to be stuck to its given X and Y locations and to grow and shrink as the window is resized in the running application.

  13. Aktivieren Sie erneut das Kontrollkästchen Höhe, und verwenden Sie den Standardwert. Klicken Sie anschließend auf Add 4 Constraints (4 Einschränkungen hinzufügen), um die Einschränkungen hinzuzufügen und den Editor zu schließen.Again, check the Height box and use the default size, then click the Add 4 Constraints button to add the constraints and close the editor.

  14. Speichern Sie die Änderungen an der Benutzeroberfläche.Save the changes to the user interface.

Beachten Sie, dass Interface Builder beim Ändern der Größe und beim Bewegen von Steuerelementen hilfreiche Hinweise gibt, die auf Eingaberichtlinien für macOS basieren.While resizing and moving controls around, notice that Interface Builder gives helpful snap hints that are based on macOS Human Interface Guidelines. Diese Richtlinien helfen dem Entwickler dabei, qualitativ hochwertige Apps zu erstellen, die Mac-Benutzern sowohl optisch als auch bei der Verwendung vertraut sind.These guidelines will help the developer to create high quality apps that will have a familiar look and feel for Mac users.

Sehen Sie sich den Bereich Interface Hierarchy (Schnittstellenhierarchie) an, um zu sehen, wie das Layout und die Hierarchie von den Elementen dargestellt werden, aus denen die Benutzeroberfläche besteht:Look in the Interface Hierarchy section to see how the layout and hierarchy of the elements that make up the user interface are shown:

Hier kann der Entwickler Elemente auswählen, die er bearbeiten möchte, oder UI-Elemente verschieben, um deren Anordnung anzupassen.From here the developer can select items to edit or drag to reorder UI elements if needed. Wenn ein UI-Elemente z.B. von einem anderen Element verdeckt wird, können sie dieses ans Ende der Liste ziehen, um es im Fenster ganz nach oben zu verschieben.For example, if a UI element was being covered by another element, they could drag it to the bottom of the list to make it the top-most item on the window.

Wenn die Benutzeroberfläche erstellt wurde, muss der Entwickler die UI-Elemente verfügbar machen, damit Xamarin.Mac auf diese zugreifen und mit ihnen in C#-Code interagieren kann.With the user interface created, the developer will need to expose the UI items so that Xamarin.Mac can access and interact with them in C# code. Dies wird im nächsten Abschnitt, Outlets und Aktionen, erklärt.The next section, Outlets and Actions, shows how to do this.

Outlets und AktionenOutlets and Actions

Was sind Outlets und Aktionen?So what are Outlets and Actions? Bei der traditionellen .NET-Programmierung wird ein Steuerelement auf der Benutzeroberfläche automatisch als Eigenschaft verfügbar gemacht, wenn es hinzugefügt wird.In traditional .NET user interface programming, a control in the user interface is automatically exposed as a property when it’s added. Unter Mac ist dies anders. Wenn Sie ein Steuerelement zu einer Ansicht hinzufügen, wird es dadurch nicht automatisch für Code zugänglich.Things work differently in Mac, simply adding a control to a view doesn’t make it accessible to code. Der Entwickler muss die UI-Elemente explizit für Code verfügbar machen.The developer must explicitly expose the UI element to code. Dafür bietet Apple zwei Optionen:In order do this, Apple provides two options:

  • Outlets: Outlets sind vergleichbar mit Eigenschaften.Outlets – Outlets are analogous to properties. Wenn ein Entwickler ein Steuerelement mit einem Outlet verbindet, wird es für den Code über eine Eigenschaft verfügbar gemacht, sodass z.B. Ereignishandler und Aufrufmethoden usw. hinzugefügt werden können.If the developer wires up a control to an Outlet, it’s exposed to the code via a property, so they can do things like attach event handlers, call methods on it, etc.
  • Aktionen: Aktionen sind vergleichbar mit dem Befehlsmuster in WPF.Actions – Actions are analogous to the command pattern in WPF. Wenn z.B. eine Aktion für ein Steuerelement ausgeführt wird, wie etwa das Klicken auf eine Schaltfläche, ruft das Steuerelement automatisch eine Methode im Code auf.For example, when an Action is performed on a control, say a button click, the control will automatically call a method in the code. Aktionen sind leistungsstark und praktisch, da der Entwickler viele Steuerelemente mit der gleichen Aktion verbinden kann.Actions are powerful and convenient because the developer can wire up many controls to the same Action.

In Xcode werden Outlets und Aktionen direkt über das Ziehen von Steuerelementen in den Code eingefügt.In Xcode, Outlets and Actions are added directly in code via Control-dragging. Genauer gesagt bedeutet dies, dass der Entwickler zum Erstellen eines Outlets oder einer Aktion ein Steuerelement auswählen muss, dem ein Outlet oder eine Aktion hinzugefügt werden soll. Dann muss er die STRG-TASTE gedrückt halten und das Steuerelement direkt in den Code ziehen.More specifically, this means that to create an Outlet or Action, the developer will choose a control element to add an Outlet or Action to, hold down the Control key on the keyboard, and drag that control directly into the code.

Dies bedeutet für Xamarin.Mac-Entwickler, dass die Entwickler in die Objective-C-Stub-Dateien ziehen, die den C#-Dateien entsprechen, in denen Sie das Outlet oder die Aktion erstellen möchten.For Xamarin.Mac developers, this means that the developer will drag into the Objective-C stub files that correspond to the C# file where they want to create the Outlet or Action. Visual Studio für Mac hat eine Datei namens ViewController.h als Teil des Shim-Xcode-Projekts erstellt, das zur Verwendung von Interface Builder generiert wurde:Visual Studio for Mac created a file called ViewController.h as part of the shim Xcode Project it generated to use Interface Builder:

Diese Stub-.h-Datei spiegelt die ViewController.designer.cs-Datei wider, die automatisch dem Xamarin.Mac-Projekt hinzugefügt wird, wenn ein neues NSWindow erstellt wird.This stub .h file mirrors the ViewController.designer.cs that is automatically added to a Xamarin.Mac project when a new NSWindow is created. Diese Datei wird verwendet, um die von Interface Builder vorgenommenen Änderungen zu synchronisieren. In ihr werden auch die Outlets und Aktionen erstellt, damit UI-Elemente für den C#-Code verfügbar gemacht werden können.This file will be used to synchronize the changes made by Interface Builder and is where the Outlets and Actions are created so that UI elements are exposed to C# code.

Hinzufügen eines OutletsAdding an Outlet

Jetzt wo Sie ein grundlegendes Verständnis von Outlets und Aktionen haben, erstellen Sie ein Outlet, um die erstellte Bezeichnung für unseren C#-Code verfügbar zu machen.With a basic understanding of what Outlets and Actions are, create an Outlet to expose the Label created to our C# code.

Führen Sie folgende Schritte aus:Do the following:

  1. Klicken Sie in der rechten oberen Ecke in Xcode auf die Schaltfläche mit den zwei Kreisen, um den Assistenten-Editor zu öffnen:In Xcode at the far right top-hand corner of the screen, click the Double Circle button to open the Assistant Editor:

  2. Xcode wechselt in eine geteilte Ansicht mit dem Schnittstellen-Editor auf der einen und dem Code-Editor auf der anderen Seite.The Xcode will switch to a split-view mode with the Interface Editor on one side and a Code Editor on the other.

  3. Beachten Sie, dass Xcode automatisch die Datei ViewController.m im Code-Editor ausgewählt hat, was nicht korrekt ist.Notice that Xcode has automatically picked the ViewController.m file in the Code Editor, which is incorrect. Wie oben unter Outlets und Aktionen erwähnt, muss der Entwickler ViewController.h auswählen.From the discussion on what Outlets and Actions are above, the developer will need to have the ViewController.h selected.

  4. Klicken Sie oben im Code-Editor auf die automatische Verknüpfung, und wählen Sie die Datei ViewController.h aus:At the top of the Code Editor click on the Automatic Link and select the ViewController.h file:

  5. Xcode sollte jetzt die korrekte Datei ausgewählt haben:Xcode should now have the correct file selected:

  6. Der letzte Schritt war sehr wichtig. Wenn Sie hier nicht die richtige Datei auswählen, können Sie keine Outlets und Aktionen erstellen, oder diese werden für die falsche Klasse in C# verfügbar gemacht.The last step was very important!: if you didn't have the correct file selected, you won't be able to create Outlets and Actions, or they will be exposed to the wrong class in C#!

  7. Halten Sie im Schnittstellen-Editor die STRG-TASTE gedrückt, und ziehen Sie die oben erstellte Bezeichnung im Code-Editor unter den @interface ViewController : NSViewController {}-Code:In the Interface Editor, hold down the Control key on the keyboard and click-drag the label created above onto the code editor just below the @interface ViewController : NSViewController {} code:

  8. Es wird ein Dialogfeld geöffnet.A dialog box will be displayed. Belassen Sie die Verbindung bei Outlet, und geben Sie für Name ClickedLabel ein:Leave the Connection set to Outlet and enter ClickedLabel for the Name:

  9. Klicken Sie auf Verbinden, um das Outlet zu erstellen:Click the Connect button to create the Outlet:

  10. Speichern Sie die Änderungen in der Datei.Save the changes to the file.

Hinzufügen einer AktionAdding an Action

Machen Sie als Nächstes die Schaltfläche für C#-Code verfügbar.Next, expose the button to C# code. Der Entwickler kann die Schaltfläche genauso wie oben die Bezeichnung mit einem Outlet verbinden.Just like the Label above, the developer could wire the button up to an Outlet. Da wir nur eine Reaktion möchten, wenn auf die Schaltfläche geklickt wird, verwenden Sie stattdessen eine Aktion.Since we only want to respond to the button being clicked, use an Action instead.

Führen Sie folgende Schritte aus:Do the following:

  1. Stellen Sie sicher, dass sich Xcode immer noch im Assistenten-Editor befindet und dass die Datei ViewController.h im Code-Editor zu sehen ist.Ensure that Xcode is still in the Assistant Editor and the ViewController.h file is visible in the Code Editor.

  2. Halten Sie im Schnittstellen-Editor die STRG-TASTE gedrückt, und ziehen Sie die oben erstellte Schaltfläche im Code-Editor unter den @property (assign) IBOutlet NSTextField *ClickedLabel;-Code:In the Interface Editor, hold down the Control key on the keyboard and click-drag the button created above onto the code editor just below the @property (assign) IBOutlet NSTextField *ClickedLabel; code:

  3. Ändern Sie den Verbindungstyp in Aktion:Change the Connection type to Action:

  4. Geben Sie ClickedButton als Namen ein:Enter ClickedButton as the Name:

  5. Klicken Sie auf Verbinden, um die Aktion zu erstellen:Click the Connect button to create Action:

  6. Speichern Sie die Änderungen in der Datei.Save the changes to the file.

Wenn die Benutzeroberfläche verbunden und für C#-Code verfügbar gemacht wurde, wechseln Sie zurück zu Visual Studio für Mac, und synchronisieren Sie die in Xcode und Interface Builder vorgenommenen Änderungen.With the user interface wired-up and exposed to C# code, switch back to Visual Studio for Mac and let it synchronize the changes made in Xcode and Interface Builder.

Hinweis

Wahrscheinlich hat die Erstellung dieser Benutzeroberfläche sowie der Outlets und Aktionen viel Zeit in Anspruch genommen, und es kommt Ihnen so vor, als wäre sehr viel Arbeit gewesen. Es wurden jedoch sehr viele neue Konzepte eingeführt und viel Neues erklärt.It probably took a long time to create the user interface and Outlets and Actions for this first app, and it may seem like a lot of work, but a lot of new concepts were introduced and a lot of time was spent covering new ground. Wenn Sie dies mehrmals gemacht und sich mit Interface Builder vertraut gemacht haben, erstellen Sie eine Oberfläche mit all Ihren Outlets und Aktionen in wenigen Minuten.After practicing for a while and working with Interface Builder, this interface and all its Outlets and Actions can be created in just a minute or two.

Synchronisieren von Änderungen mit XcodeSynchronizing Changes with Xcode

Wenn der Entwickler von Xcode zurück zu Visual Studio für Mac wechselt, werden alle in Xcode an diesem Projekt vorgenommenen Änderungen automatisch mit dem Xamarin.Mac-Projekt synchronisiert.When the developer switches back to Visual Studio for Mac from Xcode, any changes that they have made in Xcode will automatically be synchronized with the Xamarin.Mac project.

Wählen Sie die Datei ViewController.designer.cs im Projektmappen-Explorer aus, um zu sehen, wie das Outlet und die Aktion in C#-Code verbunden wurden:Select the ViewController.designer.cs in the Solution Explorer to see how the Outlet and Action have been wired up in the C# code:

Beachten Sie die zwei Definitionen in ViewController.designer.cs:Notice how the two definitions in the ViewController.designer.cs file:

[Outlet]
AppKit.NSTextField ClickedLabel { get; set; }

[Action ("ClickedButton:")]
partial void ClickedButton (Foundation.NSObject sender);

Vergleich mit den Definitionen in der ViewController.h-Datei in Xcode:Line up with the definitions in the ViewController.h file in Xcode:

@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;

Visual Studio für Mac lauscht auf Änderungen an der .h-Datei und synchronisiert diese automatisch mit der entsprechenden .designer.cs-Datei, um die Änderungen für die App verfügbar zu machen.Visual Studio for Mac listens for changes to the .h file, and then automatically synchronizes those changes in the respective .designer.cs file to expose them to the app. Beachten Sie, dass ViewController.designer.cs eine Teilklasse ist, sodass Visual Studio für Mac ViewController.cs nicht anpassen muss, wodurch alle Änderungen des Entwicklers überschrieben würden.Notice that ViewController.designer.cs is a partial class, so that Visual Studio for Mac doesn't have to modify ViewController.cs which would overwrite any changes that the developer has made to the class.

Normalerweise muss der Entwickler ViewController.designer.cs nicht öffnen. Diese wurde hier zum besseren Verständnis vorgestellt.Normally, the developer will never need to open the ViewController.designer.cs, it was presented here for educational purposes only.

Hinweis

In den meisten Fällen erkennt Visual Studio für Mac automatisch alle in Xcode vorgenommenen Änderungen und synchronisiert diese mit dem Xamarin.Mac-Projekt.In most situations, Visual Studio for Mac will automatically see any changes made in Xcode and sync them to the Xamarin.Mac project. Sollte die Synchronisierung nicht automatisch durchgeführt werden – was sehr selten passiert –, wechseln Sie zurück zu Xcode und dann erneut zu Visual Studio für Mac.In the off occurrence that synchronization doesn't automatically happen, switch back to Xcode and then back to Visual Studio for Mac again. Dadurch wird normalerweise der Synchronisierungsprozess gestartet.This will normally kick off a synchronization cycle.

Schreiben des CodesWriting the Code

Wenn die Benutzeroberfläche erstellt und ihre UI-Elemente im Code über Outlets und Aktionen verfügbar gemacht wurden, können Sie nun den Code schreiben, durch den das Programm erstellt wird.With the user interface created and its UI elements exposed to code via Outlets and Actions, we are finally ready to write the code to bring the program to life.

Für diese App wird die Bezeichnung jedes Mal aktualisiert, wenn auf die erste Schaltfläche geklickt wird, sodass sie immer die Zahl an bereits durchgeführten Klicks anzeigt.For this sample app, every time the first button is clicked, the label will be updated to show how many times the button has been clicked. Öffnen Sie dazu die ViewController.cs-Datei zur Bearbeitung, indem Sie auf diese in Projektmappen-Explorer doppelklicken:To accomplish this, open the ViewController.cs file for editing by double-clicking it in the Solution Explorer:

Erstellen Sie zunächst eine Variable auf Klassenebene in der ViewController-Klasse, um die Zahl an ausgeführten Klicks zu erfassen.First, create a class-level variable in the ViewController class to track the number of clicks that have happened. Bearbeiten Sie die Klassendefinition, sodass sie danach folgendermaßen aussieht:Edit the class definition and make it look like the following:

namespace Hello_Mac
{
    public partial class ViewController : NSViewController
    {
        private int numberOfTimesClicked = 0;
        ...

Überschreiben Sie als Nächstes in derselben Klasse (ViewController) die ViewDidLoad-Methode, und fügen Sie Code hinzu, um die erste Meldung für die Bezeichnung anzugeben:Next, in the same class (ViewController), override the ViewDidLoad method and add some code to set the initial message for the label:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Set the initial value for the label
    ClickedLabel.StringValue = "Button has not been clicked yet.";
}

Verwenden Sie ViewDidLoad statt einer anderen Methode (wie etwa Initialize), da ViewDidLoad aufgerufen wird, nachdem das Betriebssystem die Benutzeroberfläche aus der STORYBOARD-Datei geladen und instanziiert hat.Use ViewDidLoad, instead of another method such as Initialize, because ViewDidLoad is called after the OS has loaded and instantiated the user interface from the .storyboard file. Wenn der Entwickler versucht, auf das Label-Steuerelement zuzugreifen, bevor die STORYBOARD-Datei vollständig geladen wurde, erhält er einen NullReferenceException-Fehler, da dieses Steuerelement noch nicht erstellt wurde.If the developer tried to access the label control before the .storyboard file has been fully loaded and instantiated, they would get a NullReferenceException error because the label control would not exist yet.

Fügen Sie als nächstes den Code hinzu, der auf das Klicken der Schaltfläche reagiert.Next, add the code to respond to the user clicking the button. Fügen Sie der ViewController-Klasse folgende Teilklasse hinzu:Add the following partial method to the ViewController class:

partial void ClickedButton (Foundation.NSObject sender) {
    // Update counter and label
    ClickedLabel.StringValue = string.Format("The button has been clicked {0} time{1}.",++numberOfTimesClicked, (numberOfTimesClicked < 2) ? "" : "s");
}

Dieser Code wird an die in Xcode und Interface Builder erstellte Aktion angefügt und wird immer dann aufgerufen, wenn der Benutzer auf die Schaltfläche klickt.This code attaches to the Action created in Xcode and Interface Builder and will be called any time the user clicks the button.

Testen der AnwendungTesting the Application

Erstellen Sie nun die App und führen Sie diese aus, um zu testen, ob sie wie erwartet ausgeführt wird.It’s time to build and run the app to make sure it runs as expected. Der Entwickler kann das Erstellen und Ausführen in einem Schritt durchführen, oder er kann die App erstellen, ohne sie auszuführen.The developer can build and run all in one step, or they can build it without running it.

Wenn eine App erstellt wird, kann sich der Entwickler für die Buildart entscheiden:Whenever an app is built, the developer can choose what kind of build they want:

  • Debug: Ein Debugbuild wird in eine APP-Datei (Anwendung) mit einigen zusätzlichen Metadaten kompiliert, durch die der Entwickler ein Debugging durchführen kann, während die App ausgeführt wird.Debug – A debug build is compiled into an .app (application) file with a bunch of extra metadata that allows the developer to debug what’s happening while the app is running.
  • Release: Ein Releasebuild erstellt auch eine APP-Datei, aber diese enthält keine Debugginginformationen, weshalb sie kleiner ist und schneller ausgeführt werden kann.Release – A release build also creates an .app file, but it doesn’t include debug information, so it’s smaller and executes faster.

Der Entwickler kann den Buildtyp unter Konfigurationsauswahl oben links im Visual Studio für Mac-Bildschirm auswählen:The developer can select the type of build from the Configuration Selector at the upper left-hand corner of the Visual Studio for Mac screen:

Erstellen der AnwendungBuilding the Application

Im Falle dieses Beispiels ist ein Debugbuild erforderlich. Achten Sie also darauf, dass Debug ausgewählt ist.In the case of this example, we just want a debug build, so ensure that Debug is selected. Erstellen Sie zunächst die App, indem Sie entweder auf ⌘B drücken oder im Buildmenü auf Build all (Alle erstellen) klicken.Build the app first by either pressing ⌘B, or from the Build menu, choose Build All.

Wenn keine Fehler auftreten, wird in der Statusleiste von Visual Studio für Mac die Meldung Buildvorgang erfolgreich angezeigt.If there weren't any errors, a Build Succeeded message will be displayed in Visual Studio for Mac's status bar. Wenn Fehler auftreten, überprüfen Sie das Projekt, und achten Sie darauf, dass Sie die oben stehenden Schritte richtig ausgeführt haben.If there were errors, review the project and make sure that the steps above have been followed correctly. Stellen Sie zunächst sicher, dass der Code (sowohl in Xcode als auch in Visual Studio für Mac) mit dem Code im Tutorial übereinstimmt.Start by confirming that the code (both in Xcode and in Visual Studio for Mac) matches the code in the tutorial.

Ausführen der AnwendungRunning the Application

Es gibt drei Möglichkeiten, die App auszuführen:There are three ways to run the app:

  • Drücken Sie ⌘+EINGABE.Press ⌘+Enter.
  • Klicken Sie im Menü Ausführen auf Debug.From the Run menu, choose Debug.
  • Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche Wiedergabe (über dem Projektmappen-Explorer).Click the Play button in the Visual Studio for Mac toolbar (just above the Solution Explorer).

Die App wird erstellt (wenn dies noch nicht geschehen ist), im Debugmodus gestartet und zeigt das Hauptfenster der Benutzeroberfläche an:The app will build (if it hasn’t been built already), start in debug mode and display its main interface window:

Wenn Sie mehrmals auf die Schaltfläche klicken, sollte die Zahl der Bezeichnung aktualisiert werden:If the button is clicked a few times, the label should be updated with the count:

Weitere ThemenWhere to Next

Jetzt wo Sie die Grundlagen einer Xamarin.Mac-App kennen, sehen Sie sich die folgenden Dokumentationen an, um Ihre Kenntnisse auszuweiten:With the basics of working with a Xamarin.Mac application down, take a look at the following documents to get a deeper understanding:

  • Einführung in Storyboards: In diesem Artikel erhalten Sie eine Einführung in die Arbeit mit Storyboards in einer Xamarin.Mac-App.Introduction to Storyboards - This article provides an introduction to working with Storyboards in a Xamarin.Mac app. Sie erfahren, wie Sie die UI der App mit Storyboards und Interface Builder von Xcode erstellen und verwalten.It covers creating and maintaining the app's UI using storyboards and Xcode's Interface Builder.
  • Fenster: In diesem Artikel erhalten Sie eine Einführung in die Arbeit mit Fenstern und Bereichen in einer Xamarin.Mac-Anwendung.Windows - This article covers working with Windows and Panels in a Xamarin.Mac application. Sie erfahren, wie Sie Fenster und Bereiche in Xcode und Interface Builder erstellen und verwalten, Fenster und Bereiche aus XIB-Dateien laden, Fenster benutzen und in C#-Code auf Fenster reagieren.It covers creating and maintaining Windows and Panels in Xcode and Interface builder, loading Windows and Panels from .xib files, using Windows and responding to Windows in C# code.
  • Dialogfelder: In diesem Artikel erhalten Sie eine Einführung in die Arbeit mit Dialogfeldern und modalen Fenstern in einer Xamarin.Mac-Anwendung.Dialogs - This article covers working with Dialogs and Modal Windows in a Xamarin.Mac application. Sie erfahren, wie Sie modale Fenster in Xcode und Interface Builder erstellen und verwalten, mit Standarddialogfeldern arbeiten und Fenster anzeigen und auf diese in C#-Code reagieren.It covers creating and maintaining Modal Windows in Xcode and Interface builder, working with standard dialogs, displaying and responding to Windows in C# code.
  • Warnungen: In diesem Artikel erhalten Sie eine Einführung in die Arbeit mit Warnungen in Xamarin.Mac-Anwendungen.Alerts - This article covers working with Alerts in a Xamarin.Mac application. Sie erfahren, wie Sie Warnungen aus C#-Code erstellen und anzeigen, und wie Sie auf Warnungen reagieren können.It covers creating and displaying Alerts from C# code and responding to Alerts.
  • Menüs: Menüs werden in verschiedenen Teilen der Benutzeroberfläche einer Mac-Anwendung verwendet – vom Hauptmenü der Anwendung am oberen Rand des Bildschirms bis hin zu Popup- und Kontextmenüs, die überall in einem Fenster angezeigt werden können.Menus - Menus are used in various parts of a Mac application's user interface; from the application's main menu at the top of the screen to pop up and contextual menus that can appear anywhere in a window. Menüs sind ein integraler Bestandteil einer Mac-Anwendungsumgebung.Menus are an integral part of a Mac application's user experience. Sie erfahren, wie Sie mit Cocoa-Menüs in einer Xamarin.Mac-Anwendung arbeiten können.This article covers working with Cocoa Menus in a Xamarin.Mac application.
  • Symbolleiste: In diesem Artikel wird beschrieben, wie Sie mit Symbolleisten in einer Xamarin.Mac-Anwendung arbeiten können.Toolbars - This article covers working with Toolbars in a Xamarin.Mac application. Mit ihrer Hilfe können Sie Elemente erstellen und verwalten.It covers creating and maintaining. Sie lernen die Funktionsweise von Symbolleisten in Xcode sowie Interface Builder kennen und wie Sie die Symbolleistenelemente für Code mit Outlets und Aktionen verfügbar machen und aktivieren bzw. deaktivieren. Außerdem lernen Sie, wie Sie in C#-Code auf Symbolleistenelemente reagieren.Toolbars in Xcode and Interface builder, how to expose the Toolbar Items to code using Outlets and Actions, enabling and disabling Toolbar Items and finally responding to Toolbar Items in C# code.
  • Tabellenansichten: In diesem Artikel wird beschrieben, wie Sie mit Tabellenansichten in einer Xamarin.Mac-Anwendung arbeiten können.Table Views - This article covers working with Table Views in a Xamarin.Mac application. Sie erfahren, wie Sie Tabellenansichten in Xcode und Interface Builder erstellen und verwalten, wie Sie die Tabellenansichtenelemente für Code mit Outlets und Aktionen verfügbar machen, Tabellenelemente auffüllen und in C#-Code auf Tabellenansichtenelemente reagieren.It covers creating and maintaining Table Views in Xcode and Interface builder, how to expose the Table View Items to code using Outlets and Actions, populating Table Items and finally responding to Table View Items in C# code.
  • Gliederungsansichten: In diesem Artikel wird beschrieben, wie Sie mit Gliederungsansichten in einer Xamarin.Mac-Anwendung arbeiten.Outline Views - This article covers working with Outline Views in a Xamarin.Mac application. Sie erfahren, wie Sie Gliederungsansichten in Xcode und Interface Builder erstellen und verwalten, wie Sie die Gliederungsansichtelemente für Code mit Outlets und Aktionen verfügbar machen, Gliederungselemente auffüllen und in C#-Code auf Gliederungsansichtelemente reagieren.It covers creating and maintaining Outline Views in Xcode and Interface builder, how to expose the Outline View Items to code using Outlets and Actions, populating Outline Items and finally responding to Outline View Items in C# code.
  • Quelllisten: In diesem Artikel wird beschrieben, wie Sie mit Quelllisten in einer Xamarin.Mac-Anwendung arbeiten.Source Lists - This article covers working with Source Lists in a Xamarin.Mac application. Sie erfahren, wie Sie Quelllisten in Xcode und Interface Builder erstellen und verwalten, wie Sie die Quelllistenelemente für Code mit Outlets und Aktionen verfügbar machen, Quelllistenelemente auffüllen und in C#-Code auf Quelllistenelemente reagieren.It covers creating and maintaining Source Lists in Xcode and Interface builder, how to expose the Source Lists Items to code using Outlets and Actions, populating Source List Items and finally responding to Source List Items in C# code.
  • Auflistungsansichten: In diesem Artikel wird beschrieben, wie Sie mit Auflistungsansichten in einer Xamarin.Mac-Anwendung arbeiten.Collection Views - This article covers working with Collection Views in a Xamarin.Mac application. Sie erfahren, wie Sie Auflistungsansichten in Xcode und Interface Builder erstellen und verwalten, wie Sie die Auflistungsansichtelemente für Code mit Outlets und Aktionen verfügbar machen, Auflistungselemente auffüllen und in C#-Code auf Auflistungsansichtelemente reagieren.It covers creating and maintaining Collection Views in Xcode and Interface builder, how to expose the Collection View elements to code using Outlets and Actions, populating Collection Views and finally responding to Collection Views in C# code.
  • Arbeiten mit Bildern: In diesem Artikel wird beschrieben, wie Sie mit Bildern und Symbolen in einer Xamarin.Mac-Anwendung arbeiten.Working with Images - This article covers working with Images and Icons in a Xamarin.Mac application. Sie erfahren, wie Sie die erforderlichen Bilder erstellen und verwalten, die Sie für das App-Symbol benötigen, und wie Sie Bilder sowohl in C#-Code als auch in Interface Builder von Xcode verwenden.It covers creating and maintaining the images needed to create an app's Icon and using Images in both C# code and Xcode's Interface Builder.

Der Mac-Beispielkatalog enthält fertige Codebeispiele zum Erlernen von Xamarin.Mac.The Mac Samples Gallery contains ready-to-use code examples to help learn Xamarin.Mac.

Eine vollständige Xamarin.Mac-App, die viele Funktionen enthält, die ein Benutzer in einer typischen Mac-Anwendung erwarten würde, finden Sie unter SourceWriter-Beispiel-App.One complete Xamarin.Mac app that includes many of the features a user would expect to find in a typical Mac application is the SourceWriter Sample App. SourceWriter ist ein einfacher Quellcode-Editor, der Unterstützung für die Codevervollständigung und die einfache Syntaxhervorhebung bietet.SourceWriter is a simple source code editor that provides support for code completion and simple syntax highlighting.

Der SourceWriter-Code wurde vollständig kommentiert und es wurden, wenn möglich, Links der Schlüsseltechnologien und -methoden zu wichtigen Informationen in der Xamarin.Mac-Dokumentation bereitgestellt.The SourceWriter code has been fully commented and, where available, links have been provided from key technologies or methods to relevant information in the Xamarin.Mac documentation.

ZusammenfassungSummary

In diesem Artikel wurden die Grundlagen einer Standard-Xamarin.Mac-App beschrieben.This article covered the basics of a standard Xamarin.Mac app. Sie haben erfahren, wie Sie eine neue App in Visual Studio für Mac erstellen, wie Sie die Benutzeroberfläche in Xcode und Interface Builder entwerfen, wie Sie Benutzeroberflächenelemente für C#-Code mit Outlets und Aktionen verfügbar machen, wie Sie Code hinzufügen, der mit Benutzeroberflächenelementen arbeitet, und wie Sie eine Xamarin.Mac-App erstellen und testen.It covered creating a new app in Visual Studio for Mac, designing the user interface in Xcode and Interface Builder, exposing UI elements to C# code using Outlets and Actions, adding code to work with the UI elements and finally, building and testing a Xamarin.Mac app.