XIB-Dateien in Xamarin.Mac

In diesem Artikel wird die Arbeit mit XIB-Dateien behandelt, die im Schnittstellen-Generator von Xcode erstellt wurden, um Benutzeroberflächen für eine Xamarin.Mac-Anwendung zu erstellen und zu Standard.

Hinweis

Die bevorzugte Methode zum Erstellen einer Benutzeroberfläche für eine Xamarin.Mac-App ist mit Storyboards. Diese Dokumentation wurde aus historischen Gründen und für die Arbeit mit älteren Xamarin.Mac-Projekten beibehalten. Weitere Informationen finden Sie in unserer Dokumentation zur Einführung in Storyboards .

Übersicht

Beim Arbeiten mit C# und .NET in einer Xamarin.Mac-Anwendung haben Sie Zugriff auf die gleichen Benutzeroberflächenelemente und -tools, die ein Entwickler ausführt Objective-C und Xcode ausführt. Da Xamarin.Mac direkt in Xcode integriert wird, können Sie den Schnittstellen-Generator von Xcode verwenden, um Ihre Benutzeroberflächen zu erstellen und zu Standard (oder optional direkt in C#-Code zu erstellen).

Eine XIB-Datei wird von macOS verwendet, um Elemente der Benutzeroberfläche Ihrer Anwendung (z. B. Menüs, Windows, Ansichten, Bezeichnungen, Textfelder) zu definieren, die erstellt und Standard grafisch im Benutzeroberflächen-Generator von Xcode enthalten sind.

An example of the running app

In diesem Artikel behandeln wir die Grundlagen der Arbeit mit XIB-Dateien in einer Xamarin.Mac-Anwendung. Es wird dringend empfohlen, dass Sie zuerst den Artikel "Hello, Mac " durcharbeiten, da er wichtige Konzepte und Techniken behandelt, die wir in diesem Artikel verwenden werden.

Möglicherweise möchten Sie sich auch die Exposing C#-Klassen /-Methoden im Objective-C Abschnitt des Xamarin.Mac Internals-Dokuments ansehen. Außerdem werden die Register C#-Klassen und Export -Attribute erläutert, die zum Verbinden Ihrer C#-Klassen mit Objective-C Objekten und UI-Elementen verwendet werden.

Einführung in Xcode und Interface Builder

Als Teil von Xcode hat Apple ein Tool namens Interface Builder erstellt, mit dem Sie Ihre Benutzeroberfläche visuell in einem Designer erstellen können. Xamarin.Mac lässt sich fließend in den Schnittstellen-Generator integrieren, sodass Sie Ihre Benutzeroberfläche mit den gleichen Tools erstellen können, die Objective-C Benutzer ausführen.

Komponenten von Xcode

Wenn Sie eine XIB-Datei in Xcode aus Visual Studio für Mac öffnen, wird sie mit einem Project Navigator auf der linken Seite, der Schnittstellenhierarchie und dem Schnittstellen-Editor in der Mitte und einem Abschnitt "Properties & Utilities" auf der rechten Seite geöffnet:

The components of the Xcode UI

Sehen wir uns an, was jeder dieser Xcode-Abschnitte bewirkt und wie Sie diese verwenden, um die Schnittstelle für Ihre Xamarin.Mac-Anwendung zu erstellen.

Projektnavigation

Wenn Sie eine XIB-Datei zum Bearbeiten in Xcode öffnen, erstellt Visual Studio für Mac eine Xcode-Projektdatei im Hintergrund, um Änderungen zwischen sich selbst und Xcode zu kommunizieren. Wenn Sie später von Xcode zurück zu Visual Studio für Mac wechseln, werden alle an diesem Projekt vorgenommenen Änderungen mit Ihrem Xamarin.Mac-Projekt durch Visual Studio für Mac synchronisiert.

Im Abschnitt "Projektnavigation " können Sie zwischen allen Dateien navigieren, aus denen dieses Shim Xcode-Projekt besteht. Normalerweise interessieren Sie sich nur für die XIB-Dateien in dieser Liste wie "MainMenu.xib " und "MainWindow.xib".

Schnittstellenhierarchie

Im Abschnitt "Schnittstellenhierarchie" können Sie auf einfache Weise auf mehrere wichtige Eigenschaften der Benutzeroberfläche zugreifen, z. B. die Platzhalter und Standard Window. Sie können diesen Abschnitt auch verwenden, um auf die einzelnen Elemente (Ansichten) zuzugreifen, die Ihre Benutzeroberfläche bilden, und die Art und Weise anpassen, wie sie geschachtelt werden, indem Sie sie innerhalb der Hierarchie ziehen.

Schnittstellen-Editor

Der Abschnitt "Schnittstellen-Editor " stellt die Oberfläche bereit, auf der Sie Die Benutzeroberfläche grafisch gestalten. Sie ziehen Elemente aus dem Abschnitt "Bibliothek " des Abschnitts "Eigenschaften und Dienstprogramme ", um Ihr Design zu erstellen. Wenn Sie der Entwurfsoberfläche Benutzeroberflächenelemente (Ansichten) hinzufügen, werden sie dem Abschnitt "Schnittstellenhierarchie " in der Reihenfolge hinzugefügt, in der sie im Schnittstellen-Editor angezeigt werden.

Eigenschaften und Dienstprogramme

Der Abschnitt "Properties & Utilities" ist in zwei Standard Abschnitte unterteilt, mit denen wir arbeiten werden, Eigenschaften (auch als Inspectors bezeichnet) und die Bibliothek:

The Property Inspector

Zunächst ist dieser Abschnitt fast leer, wenn Sie jedoch ein Element im Schnittstellen-Editor oder in der Schnittstellenhierarchie auswählen, wird der Abschnitt "Eigenschaften" mit Informationen über das angegebene Element und die Eigenschaften gefüllt, die Sie anpassen können.

Im Abschnitt Eigenschaften gibt es wie in der folgenden Abbildung gezeigt acht verschiedene Inspektorregisterkarten:

An overview of all Inspectors

Es gibt die folgenden Registerkarten (von links nach rechts):

  • Dateiinspektor: Der Dateiinspektor zeigt Dateiinformationen an, wie z.B. den Dateinamen der XIB-Datei, die bearbeitet wird.
  • Schnellhilfe: Die Registerkarte „Schnellhilfe“ bietet Kontexthilfe, je nachdem, was in Xcode ausgewählt ist.
  • Identitätsinspektor: Der Identitätsinspektor bietet Informationen zu dem ausgewählten Steuerelement bzw. der ausgewählten Ansicht.
  • Attributes Inspector – Mit dem Attributes Inspector können Sie verschiedene Attribute des ausgewählten Steuerelements/der ausgewählten Ansicht anpassen.
  • Größenprüfung – Mit dem Größeninspektor können Sie das Größen- und Größenverhalten des ausgewählten Steuerelements/der ausgewählten Ansicht steuern.
  • Verbinden ions Inspector – Der Verbinden ions Inspector zeigt die Auslass- und Aktionsverbindungen der ausgewählten Steuerelemente an. Wir werden Outlets und Aktionen in nur einem Moment untersuchen.
  • Bindings Inspector – Mit dem Bindings Inspector können Sie Steuerelemente so konfigurieren, dass ihre Werte automatisch an Datenmodelle gebunden werden.
  • View Effects Inspector – Mit dem View Effects Inspector können Sie Effekte für die Steuerelemente angeben, z. B. Animationen.

Im Abschnitt "Bibliothek" finden Sie Steuerelemente und Objekte, die im Designer platziert werden sollen, um Die Benutzeroberfläche grafisch zu erstellen:

An example of the Library Inspector

Nachdem Sie nun mit der Xcode-IDE und dem Schnittstellen-Generator vertraut sind, sehen wir uns die Verwendung der IDE und des Schnittstellen-Generators an, um eine Benutzeroberfläche zu erstellen.

Erstellen und Standard Beibehalten von Fenstern in Xcode

Die bevorzugte Methode zum Erstellen der Benutzeroberfläche einer Xamarin.Mac-App ist mit Storyboards (weitere Informationen finden Sie in unserer Dokumentation "Einführung in Storyboards ") und daher verwendet jedes neue Projekt, das in Xamarin.Mac gestartet wurde, standardmäßig Storyboards.

Gehen Sie wie folgt vor, um zur Verwendung einer XIB-basierten Benutzeroberfläche zu wechseln:

  1. Öffnen Sie Visual Studio für Mac, und beginnen Sie ein neues Xamarin.Mac-Projekt.

  2. Klicken Sie im Projektmappen-Pad mit der rechten Maustaste auf das Projekt, und wählen Sie "Neue Datei hinzufügen>" aus...

  3. Mac Windows>Controller auswählen:

    Adding a new Window Controller

  4. Geben Sie MainWindow den Namen ein, und klicken Sie auf die Schaltfläche "Neu ":

    Adding a new Main Window

  5. Klicken Sie erneut mit der rechten Maustaste auf das Projekt, und wählen Sie "Neue Datei hinzufügen>" aus...

  6. Hauptmenü für Mac>auswählen:

    Adding a new Main Menu

  7. Behalten Sie den Namen bei MainMenu , und klicken Sie auf die Schaltfläche "Neu ".

  8. Wählen Sie im Lösungspad die Datei "Main.storyboard" aus, klicken Sie mit der rechten Maustaste, und wählen Sie "Entfernen" aus:

    Selecting the main storyboard

  9. Klicken Sie im Dialogfeld "Entfernen" auf die Schaltfläche "Löschen ":

    Confirming the deletion

  10. Doppelklicken Sie im Lösungspad auf die Datei "Info.plist", um sie zur Bearbeitung zu öffnen.

  11. Wählen Sie MainMenu aus der Dropdownliste "Hauptschnittstelle" aus:

    Setting the main menu

  12. Doppelklicken Sie im Lösungspad auf die Datei "MainMenu.xib ", um sie zum Bearbeiten im Schnittstellen-Generator von Xcode zu öffnen.

  13. Geben Sie im Bibliotheksinspektor das Suchfeld ein, und ziehen Sie dann ein neues Objekt auf die Entwurfsoberflächeobject:

    Editing the main menu

  14. Geben Sie im Identitätsinspektor für die Klasse folgendes einAppDelegate:

    Selecting the App Delegate

  15. Wählen Sie den Besitzer der Datei aus der Schnittstellenhierarchie aus, wechseln Sie zum Verbinden ion Inspector, und ziehen Sie eine Linie von der Stellvertretung in das AppDelegateObjekt, das dem Projekt hinzugefügt wurde:

    Connecting the App Delegate

  16. Speichern Sie die Änderungen, und kehren Sie zu Visual Studio für Mac zurück.

Bearbeiten Sie mit all diesen Änderungen die AppDelegate.cs Datei, und sehen Sie wie folgt aus:

using AppKit;
using Foundation;

namespace MacXib
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public MainWindowController mainWindowController { get; set; }

        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
            mainWindowController = new MainWindowController ();
            mainWindowController.Window.MakeKeyAndOrderFront (this);
        }

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

Jetzt wird das Hauptfenster der App in einer XIB-Datei definiert, die beim Hinzufügen eines Fenstercontrollers automatisch im Projekt enthalten ist. Doppelklicken Sie auf die Datei "MainWindow.xib", um das Fensterdesign zu bearbeiten:

Selecting the MainWindow.xib file

Dadurch wird das Fensterdesign im Schnittstellen-Generator von Xcode geöffnet:

Editing the MainWindow.xib

Standardfensterworkflow

Für jedes Fenster, mit dem Sie in Ihrer Xamarin.Mac-Anwendung arbeiten, ist der Prozess im Grunde identisch:

  1. Fügen Sie für neue Fenster, die dem Projekt nicht automatisch hinzugefügt werden, eine neue Fensterdefinition zum Projekt hinzu.
  2. Doppelklicken Sie auf die XIB-Datei, um das Fensterdesign zur Bearbeitung im Benutzeroberflächen-Generator von Xcode zu öffnen.
  3. Legen Sie alle erforderlichen Fenstereigenschaften im Attributinspektor und im Größeninspektor fest.
  4. Ziehen Sie das Shape in die Steuerelemente, die zum Erstellen der Benutzeroberfläche erforderlich sind, und konfigurieren Sie sie im Attributinspektor.
  5. Verwenden Sie den Größeninspektor , um die Größenänderung für Ihre UI-Elemente zu behandeln.
  6. Machen Sie die UI-Elemente des Fensters über Ausgänge und Aktionen für C#-Code verfügbar.
  7. Speichern Sie Ihre Änderungen, und wechseln Sie zurück zu Visual Studio für Mac, um mit Xcode zu synchronisieren.

Entwerfen eines Fensterlayouts

Der Prozess zum Gestalten einer Benutzeroberfläche im Benutzeroberflächen-Generator ist im Wesentlichen für jedes Element identisch, das Sie hinzufügen:

  1. Suchen Sie das gewünschte Steuerelement im Bibliotheksinspektor , und ziehen Sie es in den Schnittstellen-Editor , und positionieren Sie es.
  2. Legen Sie alle erforderlichen Fenstereigenschaften im Attributinspektor fest.
  3. Verwenden Sie den Größeninspektor , um die Größenänderung für Ihre UI-Elemente zu behandeln.
  4. Wenn Sie eine benutzerdefinierte Klasse verwenden, legen Sie sie im Identitätsinspektor fest.
  5. Machen Sie die UI-Elemente über Ausgänge und Aktionen für C#-Code verfügbar.
  6. Speichern Sie Ihre Änderungen, und wechseln Sie zurück zu Visual Studio für Mac, um mit Xcode zu synchronisieren.

Beispiel:

  1. Ziehen Sie in Xcode eine Befehlsschaltfläche aus dem Bibliotheksbereich:

    Selecting a button from the Library

  2. Legen Sie die Schaltfläche im Schnittstellen-Editor auf das Fenster ab:

    Adding a button to the window

  3. Klicken Sie auf die Eigenschaft Titel im Attributinspektor, und ändern Sie den Titel der Schaltfläche in Click Me:

    Setting the button attributes

  4. Ziehen Sie eine Bezeichnung aus dem Bibliotheksbereich:

    Selecting a label in the Library

  5. Fügen Sie die Bezeichnung im Fenster neben der Schaltfläche im Schnittstellen-Editor ein:

    Adding a label to the window

  6. Klicken Sie auf den rechten Ziehpunkt der Bezeichnung, und ziehen Sie diesen nach rechts, bis der Rand des Fensters erreicht ist:

    Resizing the label

  7. Wenn die Beschriftung weiterhin im Schnittstellen-Editor ausgewählt ist, wechseln Sie zum Größeninspektor:

    Selecting the Size Inspector

  8. Klicken Sie im Feld für die automatische Größenanpassung auf die rote Klammer rechts und den horizontalen Pfeil "Dim Red" in der Mitte:

    Editing the Autosizing properties

  9. Dadurch wird sichergestellt, dass die Beschriftung gestreckt wird, um zu vergrößern und zu verkleinern, wenn die Größe des Fensters in der ausgeführten Anwendung geändert wird. Die roten Klammern und die obere und linke Ecke des Felds für die automatische Größe weisen die Beschriftung an, an den angegebenen X- und Y-Positionen hängen zu bleiben.

  10. Speichern Ihrer Änderungen auf der Benutzeroberfläche

Da Sie die Größe und das Verschieben von Steuerelementen geändert haben, sollten Sie bemerkt haben, dass der Schnittstellen-Generator Hilfreiche Einrasthinweise bietet, die auf os X Human Interface Guidelines basieren. Diese Richtlinien helfen Ihnen, hochwertige Anwendungen zu erstellen, die ein vertrautes Aussehen und Verhalten für Mac-Benutzer haben.

Wenn Sie im Abschnitt "Schnittstellenhierarchie " nachschauen, beachten Sie, wie das Layout und die Hierarchie der Elemente, aus denen sich unsere Benutzeroberfläche gliedert, angezeigt werden:

Selecting an element in the Interface Hierarchy

Von hier aus können Sie Elemente auswählen, die bearbeitet oder gezogen werden sollen, um UI-Elemente bei Bedarf neu anzuordnen. Wenn beispielsweise ein UI-Element von einem anderen Element abgedeckt wurde, können Sie es an den unteren Rand der Liste ziehen, um es zum obersten Element im Fenster zu machen.

Weitere Informationen zum Arbeiten mit Windows in einer Xamarin.Mac-Anwendung finden Sie in unserer Windows-Dokumentation .

Verfügbarmachen von UI-Elementen mit C#-Code

Nachdem Sie das Aussehen und Verhalten Ihrer Benutzeroberfläche im Benutzeroberflächen-Generator eingerichtet haben, müssen Sie Elemente der Benutzeroberfläche verfügbar machen, damit sie über C#-Code aufgerufen werden können. Dazu verwenden Sie Aktionen und Verkaufsstellen.

Festlegen eines benutzerdefinierten Standard-Fenstercontrollers

Um Outlets und Aktionen erstellen zu können, um UI-Elemente für C#-Code verfügbar zu machen, muss die Xamarin.Mac-App einen benutzerdefinierten Fenstercontroller verwenden.

Gehen Sie folgendermaßen vor:

  1. Öffnen Sie das Storyboard der App im Schnittstellen-Generator von Xcode.

  2. Wählen Sie das NSWindowController Design-Surface aus.

  3. Wechseln Sie zur Ansicht "Identitätsinspektor", und geben Sie WindowController als Klassenname ein:

    Editing the class name

  4. Speichern Sie Ihre Änderungen, und kehren Sie zum synchronisierenden Visual Studio für Mac zurück.

  5. In Visual Studio für Mac wird Ihrem Projekt eine WindowController.cs Datei hinzugefügt:

    The new class name in Visual Studio for Mac

  6. Öffnen Sie das Storyboard im Schnittstellen-Generator von Xcode erneut.

  7. Die Datei "WindowController.h " steht zur Verwendung zur Verfügung:

    The matching .h file in Xcode

Verkaufsstellen und Aktionen

Was sind also Verkaufsstellen und Aktionen? Bei der herkömmlichen .NET-Benutzeroberflächenprogrammierung wird ein Steuerelement auf der Benutzeroberfläche automatisch als Eigenschaft verfügbar gemacht, wenn es hinzugefügt wird. Unter Mac ist dies anders. Wenn Sie ein Steuerelement zu einer Ansicht hinzufügen, wird es dadurch nicht automatisch für Code zugänglich. Der Entwickler muss die UI-Elemente explizit für Code verfügbar machen. Um dies zu tun, bietet Apple zwei Optionen:

  • Outlets: Outlets sind vergleichbar mit Eigenschaften. Wenn Sie ein Steuerelement mit einer Steckdose verbinden, wird es ihrem Code über eine Eigenschaft verfügbar gemacht, sodass Sie Dinge wie das Anfügen von Ereignishandlern, das Aufrufen von Methoden usw. ausführen können.
  • Aktionen: Aktionen sind vergleichbar mit dem Befehlsmuster in WPF. Wenn beispielsweise eine Aktion für ein Steuerelement ausgeführt wird, z. B. ein Schaltflächenklick, ruft das Steuerelement automatisch eine Methode in Ihrem Code auf. Aktionen sind leistungsfähig und praktisch, da Sie viele Steuerelemente mit derselben Aktion verbinden können.

In Xcode werden Steckdosen und Aktionen direkt im Code über ctrl-dragging hinzugefügt. Genauer gesagt bedeutet dies, dass Sie zum Erstellen einer Steckdose oder Aktion auswählen, welches Steuerelementelement Sie hinzufügen möchten, halten Sie die Ctrl-Taste auf der Tastatur gedrückt, und ziehen Sie dieses Steuerelement direkt in Ihren Code.

Für Xamarin.Mac-Entwickler bedeutet dies, dass Sie in die Objective-C Stubdateien ziehen, die der C#-Datei entsprechen, in der Sie den Ausgang oder die Aktion erstellen möchten. Visual Studio für Mac eine Datei namens "Erstellt"MainWindow.h als Teil des Shim Xcode-Projekts, das zum Verwenden des Schnittstellen-Generators generiert wurde:

An example of a .h file in Xcode

Diese Stub-H-Datei Spiegel die MainWindow.designer.cs, die beim Erstellen eines neuen NSWindow Projekts automatisch zu einem Xamarin.Mac-Projekt hinzugefügt wird. Diese Datei wird verwendet, um die vom Schnittstellen-Generator vorgenommenen Änderungen zu synchronisieren, und hier erstellen wir Ihre Ausgänge und Aktionen, sodass UI-Elemente für C#-Code verfügbar gemacht werden.

Hinzufügen einer Steckdose

Mit einem grundlegenden Verständnis der Verkaufsstellen und Aktionen sehen wir uns das Erstellen eines Auslasses an, um ein UI-Element für Ihren C#-Code verfügbar zu machen.

Gehen Sie folgendermaßen vor:

  1. Klicken Sie in der rechten oberen Ecke in Xcode auf die Schaltfläche mit den zwei Kreisen, um den Assistenten-Editor zu öffnen:

    Selecting 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.

  3. Beachten Sie, dass Xcode automatisch die Datei "MainWindowController.m " im Code-Editor ausgewählt hat, was falsch ist. Wenn Sie sich aus unserer Diskussion darüber erinnern, welche Verkaufsstellen und Aktionen oben aufgeführt sind, müssen wir die MainWindow.h ausgewählt haben.

  4. Klicken Sie oben im Code-Editor auf den automatischen Link , und wählen Sie die Datei "MainWindow.h " aus:

    Selecting the correct .h file

  5. Xcode sollte jetzt die korrekte Datei ausgewählt haben:

    The correct file selected

  6. Der letzte Schritt war sehr wichtig! Wenn Sie die richtige Datei nicht ausgewählt haben, können Sie keine Ausgänge und Aktionen erstellen, oder sie werden der falschen Klasse in C# verfügbar gemacht!

  7. Halten Sie im Schnittstellen-Editor die CTRL-TASTE auf der Tastatur gedrückt, und klicken Sie auf die beschriftung, die wir oben im Code-Editor direkt unterhalb des @interface MainWindow : NSWindow { } Codes erstellt haben:

    Dragging to create a new Outlet

  8. Es wird ein Dialogfeld geöffnet. Lassen Sie die Verbinden ion auf Auslass festgelegt, und geben Sie ClickedLabel den Namen ein:

    Setting the Outlet properties

  9. Klicken Sie auf die Schaltfläche Verbinden, um die Steckdose zu erstellen:

    The completed Outlet

  10. Speichern Sie die Änderungen in der Datei.

Hinzufügen einer Aktion

Als Nächstes sehen wir uns die Erstellung einer Aktion an, um eine Benutzerinteraktion mit ui-Elementen für Ihren C#-Code verfügbar zu machen.

Gehen Sie folgendermaßen vor:

  1. Stellen Sie sicher, dass wir weiterhin im Assistenten-Editor sind und die Datei "MainWindow.h " im Code-Editor sichtbar ist.

  2. Halten Sie im Schnittstellen-Editor die CTRL-TASTE auf der Tastatur gedrückt, und klicken Sie auf die Schaltfläche, die wir oben auf dem Code-Editor direkt unterhalb des @property (assign) IBOutlet NSTextField *ClickedLabel; Codes erstellt haben:

    Dragging to create an Action

  3. Ändern Sie den Verbinden ionstyp in Aktion:

    Select an Action type

  4. Geben Sie ClickedButton als Namen ein:

    Configuring the Action

  5. Klicken Sie auf die Schaltfläche Verbinden, um eine Aktion zu erstellen:

    The completed Action

  6. Speichern Sie die Änderungen in der Datei.

Wenn Ihre Benutzeroberfläche verkabelt und für C#-Code verfügbar gemacht wird, wechseln Sie zurück zu Visual Studio für Mac, und lassen Sie die Änderungen aus dem Xcode- und Schnittstellen-Generator synchronisieren.

Schreiben des Codes

Nachdem Ihre Benutzeroberfläche erstellt und ihre UI-Elemente über Outlets und Aktionen für Code verfügbar gemacht wurden, können Sie den Code schreiben, um Ihr Programm zum Leben zu erwecken. Öffnen Sie z. B. die MainWindow.cs Datei zum Bearbeiten, indem Sie auf dem Lösungspad darauf doppelklicken:

The MainWindow.cs file

Fügen Sie der Klasse den folgenden Code hinzu MainWindow , um mit dem oben erstellten Beispielauslass zu arbeiten:

private int numberOfTimesClicked = 0;
...

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

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

Beachten Sie, dass auf die NSLabel Datei in C# über den direkten Namen zugegriffen wird, den Sie in Xcode zugewiesen haben, wenn Sie den Ausgang in Xcode erstellt haben. In diesem Fall wird sie aufgerufen ClickedLabel. Sie können auf jede Methode oder Eigenschaft des verfügbar gemachten Objekts auf die gleiche Weise zugreifen wie jede normale C#-Klasse.

Wichtig

Sie müssen anstelle einer anderen Methode wie zInitialize. B. eine andere Methode verwendenAwakeFromNib, da aufgerufen wird, nachdem AwakeFromNib das Betriebssystem die Benutzeroberfläche aus der XIB-Datei geladen und instanziiert hat. Wenn Sie versucht haben, auf das Bezeichnungssteuerelement zuzugreifen, bevor die XIB-Datei vollständig geladen und instanziiert wurde, erhalten Sie einen NullReferenceException Fehler, da das Bezeichnungssteuerelement noch nicht erstellt wurde.

Fügen Sie als Nächstes der Klasse die folgende partielle Klasse hinzu MainWindow :

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 fügt an die Aktion an, die Sie im Xcode- und Schnittstellen-Generator erstellt haben, und wird jedes Mal aufgerufen, wenn der Benutzer auf die Schaltfläche klickt.

Einige UI-Elemente verfügen automatisch über integrierte Aktionen, z. B. Elemente in der Standardmenüleiste, z. B. das Menüelement "Öffnen... " (openDocument:). Doppelklicken Sie auf dem Lösungspad auf die AppDelegate.cs Datei, um sie zur Bearbeitung zu öffnen, und fügen Sie den folgenden Code unter der DidFinishLaunching Methode hinzu:

[Export ("openDocument:")]
void OpenDialog (NSObject sender)
{
    var dlg = NSOpenPanel.OpenPanel;
    dlg.CanChooseFiles = false;
    dlg.CanChooseDirectories = true;

    if (dlg.RunModal () == 1) {
        var alert = new NSAlert () {
            AlertStyle = NSAlertStyle.Informational,
            InformativeText = "At this point we should do something with the folder that the user just selected in the Open File Dialog box...",
            MessageText = "Folder Selected"
        };
        alert.RunModal ();
    }
}

Die folgende Schlüsselzeile zeigt [Export ("openDocument:")]anNSMenu, dass appDelegateeine Methode void OpenDialog (NSObject sender) hat, die auf die openDocument: Aktion reagiert.

Weitere Informationen zum Arbeiten mit Menüs finden Sie in unserer Menüdokumentation .

Synchronisieren der Änderungen mit Xcode

Wenn Sie von Xcode zurück zu Visual Studio für Mac wechseln, werden alle Änderungen, die Sie in Xcode vorgenommen haben, automatisch mit Ihrem Xamarin.Mac-Projekt synchronisiert.

Wenn Sie die MainWindow.designer.cs im Lösungskreuz auswählen, können Sie sehen, wie unser Ausgang und unsere Aktion in unserem C#-Code verkabelt wurden:

Synchronizing Changes with Xcode

Beachten Sie, wie die beiden Definitionen in der datei MainWindow.designer.cs :

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

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

Richten Sie die Definitionen in der Datei "MainWindow.h " in Xcode ein:

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

Wie Sie sehen können, lauscht Visual Studio für Mac auf Änderungen an der H-Datei und synchronisiert diese Änderungen dann automatisch in der jeweiligen .designer.cs Datei, um sie für Ihre Anwendung verfügbar zu machen. Möglicherweise stellen Sie auch fest, dass MainWindow.designer.cs eine partielle Klasse ist, sodass Visual Studio für Mac keine MainWindow.cs ändern müssen, die alle Änderungen, die wir an der Klasse vorgenommen haben, überschreiben würden.

Normalerweise müssen Sie die MainWindow.designer.cs nie selbst öffnen, es wurde hier nur für Bildungszwecke präsentiert.

Wichtig

In den meisten Fällen sehen Visual Studio für Mac automatisch alle änderungen, die in Xcode vorgenommen wurden, und synchronisieren sie mit Ihrem Xamarin.Mac-Projekt. 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. Dadurch wird normalerweise der Synchronisierungsprozess gestartet.

Hinzufügen eines neuen Fensters zu einem Projekt

Neben dem Standard Dokumentfenster muss möglicherweise eine Xamarin.Mac-Anwendung dem Benutzer andere Fenstertypen anzeigen, z. B. Einstellungen oder Inspektorbereiche. Wenn Sie Ihrem Projekt ein neues Fenster hinzufügen, sollten Sie immer die Option "Cocoa Window with Controller " verwenden, da dadurch das Laden des Fensters aus der XIB-Datei erleichtert wird.

Gehen Sie wie folgt vor, um ein neues Fenster hinzuzufügen:

  1. Klicken Sie auf dem Projektpad mit der rechten Maustaste auf das Projekt, und wählen Sie "Neue Datei hinzufügen>".

  2. Wählen Sie im Dialogfeld "Neue Datei" die Option "Xamarin.Mac>Cocoa Window" mit Controller aus:

    Adding an new Window Controller

  3. Geben Sie für den NamenPreferencesWindow ein, und klicken Sie auf Neu.

  4. Doppelklicken Sie auf die Datei "PreferencesWindow.xib ", um sie zum Bearbeiten im Schnittstellen-Generator zu öffnen:

    Editing the window in Xcode

  5. Entwerfen Sie Ihre Benutzeroberfläche:

    Designing the windows layout

  6. Speichern Sie Ihre Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.

Fügen Sie den folgenden Code hinzu, um AppDelegate.cs , um das neue Fenster anzuzeigen:

[Export("applicationPreferences:")]
void ShowPreferences (NSObject sender)
{
    var preferences = new PreferencesWindowController ();
    preferences.Window.MakeKeyAndOrderFront (this);
}

Die var preferences = new PreferencesWindowController (); Zeile erstellt eine neue Instanz des Fenstercontrollers, die das Fenster aus der XIB-Datei lädt und es aufbläht. In preferences.Window.MakeKeyAndOrderFront (this); der Zeile wird dem Benutzer das neue Fenster angezeigt.

Wenn Sie den Code ausführen und die Einstellungen auswählen... im Anwendungsmenü wird das Fenster angezeigt:

Screenshot shows the Preferences window displayed from the Application Menu.

Weitere Informationen zum Arbeiten mit Windows in einer Xamarin.Mac-Anwendung finden Sie in unserer Windows-Dokumentation .

Hinzufügen einer neuen Ansicht zu einem Projekt

Es gibt Zeiten, in denen es einfacher ist, das Design Ihres Fensters in mehrere, besser verwaltbare XIB-Dateien aufzuteilen. Beispiel: Wenn Sie den Inhalt des Standard-Fensters beim Auswählen eines Symbolleistenelements in einem Einstellungsfenster auswählen oder Inhalte als Reaktion auf eine Auswahl der Quellliste austauschen, können Sie z. B. den Inhalt auswechseln.

Wenn Sie Ihrem Projekt eine neue Ansicht hinzufügen, sollten Sie immer die Option "Cocoa View with Controller " verwenden, da dadurch das Laden der Ansicht aus der XIB-Datei erleichtert wird.

Gehen Sie wie folgt vor, um eine neue Ansicht hinzuzufügen:

  1. Klicken Sie auf dem Projektpad mit der rechten Maustaste auf das Projekt, und wählen Sie "Neue Datei hinzufügen>".

  2. Wählen Sie im Dialogfeld "Neue Datei" die Option "Xamarin.Mac>Cocoa View" mit Controller aus:

    Adding a new view

  3. Geben Sie für den NamenSubviewTable ein, und klicken Sie auf Neu.

  4. Doppelklicken Sie auf die Datei "SubviewTable.xib ", um sie zum Bearbeiten im Benutzeroberflächen-Generator zu öffnen und die Benutzeroberfläche zu entwerfen:

    Designing the new view in Xcode

  5. Verdrahten Sie alle erforderlichen Aktionen und Steckdosen.

  6. Speichern Sie Ihre Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.

Bearbeiten Sie als Nächstes die SubviewTable.cs, und fügen Sie der Datei "AwakeFromNib" den folgenden Code hinzu, um die neue Ansicht aufzufüllen, wenn sie geladen wird:

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

    // Create the Product Table Data Source and populate it
    var DataSource = new ProductTableDataSource ();
    DataSource.Products.Add (new Product ("Xamarin.iOS", "Allows you to develop native iOS Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Android", "Allows you to develop native Android Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Mac", "Allows you to develop Mac native Applications in C#"));
    DataSource.Sort ("Title", true);

    // Populate the Product Table
    ProductTable.DataSource = DataSource;
    ProductTable.Delegate = new ProductTableDelegate (DataSource);

    // Auto select the first row
    ProductTable.SelectRow (0, false);
}

Fügen Sie dem Projekt eine Enumeration hinzu, um nachzuverfolgen, welche Ansicht derzeit angezeigt wird. Beispiel: SubviewType.cs:

public enum SubviewType
{
    None,
    TableView,
    OutlineView,
    ImageView
}

Bearbeiten Sie die XIB-Datei des Fensters, in dem die Ansicht verbraucht wird, und zeigen Sie sie an. Fügen Sie eine benutzerdefinierte Ansicht hinzu, die als Container für die Ansicht fungiert, sobald sie durch C#-Code in den Arbeitsspeicher geladen wird, und machen Sie sie für eine Steckdose verfügbar, die aufgerufen ViewContainerwird:

Creating the required Outlet

Speichern Sie Ihre Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren.

Bearbeiten Sie als Nächstes die .cs Datei des Fensters, in der die neue Ansicht angezeigt wird (z . B. MainWindow.cs), und fügen Sie den folgenden Code hinzu:

private SubviewType ViewType = SubviewType.None;
private NSViewController SubviewController = null;
private NSView Subview = null;
...

private void DisplaySubview(NSViewController controller, SubviewType type) {

    // Is this view already displayed?
    if (ViewType == type) return;

    // Is there a view already being displayed?
    if (Subview != null) {
        // Yes, remove it from the view
        Subview.RemoveFromSuperview ();

        // Release memory
        Subview = null;
        SubviewController = null;
    }

    // Save values
    ViewType = type;
    SubviewController = controller;
    Subview = controller.View;

    // Define frame and display
    Subview.Frame = new CGRect (0, 0, ViewContainer.Frame.Width, ViewContainer.Frame.Height);
    ViewContainer.AddSubview (Subview);
}

Wenn wir eine neue Ansicht anzeigen müssen, die aus einer XIB-Datei im Container des Fensters geladen wurde (die oben hinzugefügte benutzerdefinierte Ansicht ), behandelt dieser Code das Entfernen einer vorhandenen Ansicht und das Austauschen für die neue Ansicht. Es sieht aus, dass sie bereits eine Ansicht angezeigt wird, wenn dies derArt ist, dass sie vom Bildschirm entfernt wird. Als Nächstes wird die Ansicht verwendet, die übergeben wurde (wie aus einem Ansichtscontroller geladen), die Größe ändert, damit sie in den Inhaltsbereich passt und dem Inhalt für die Anzeige hinzugefügt wird.

Verwenden Sie den folgenden Code, um eine neue Ansicht anzuzeigen:

DisplaySubview(new SubviewTableController(), SubviewType.TableView);

Dadurch wird eine neue Instanz des Ansichtscontrollers erstellt, damit die neue Ansicht angezeigt wird, deren Typ (wie durch die dem Projekt hinzugefügte Enumeration angegeben) festgelegt und die DisplaySubview Methode verwendet, die der Klasse "Window" hinzugefügt wurde, um die Ansicht tatsächlich anzuzeigen. Zum Beispiel:

Screenshot shows Table View selected in the Working with Images window.

Weitere Informationen zum Arbeiten mit Windows in einer Xamarin.Mac-Anwendung finden Sie in der Dokumentation zu Windows und Dialogen .

Zusammenfassung

Dieser Artikel hat einen detaillierten Blick auf die Arbeit mit XIB-Dateien in einer Xamarin.Mac-Anwendung genommen. Wir haben die verschiedenen Typen und Verwendungen von XIB-Dateien zum Erstellen der Benutzeroberfläche Ihrer Anwendung, zum Erstellen und Standard enthaltene XIB-Dateien im Benutzeroberflächen-Generator von Xcode und zum Arbeiten mit XIB-Dateien in C#-Code gesehen.