Symbolleisten in Xamarin.Mac

In diesem Artikel wird das Arbeiten mit Symbolleisten in einer Xamarin.Mac-Anwendung beschrieben. Es behandelt das Erstellen und Standard Beibehalten von Symbolleisten im Xcode- und Schnittstellen-Generator, das Verfügbarmachen dieser Symbolleisten für Code und die programmgesteuerte Arbeit mit ihnen.

Xamarin.Mac-Entwickler, die mit Visual Studio für Mac arbeiten, haben Zugriff auf die gleichen UI-Steuerelemente, die macOS-Entwicklern zur Verfügung stehen, die mit Xcode arbeiten, einschließlich des Symbolleistensteuerelements. Da Xamarin.Mac direkt in Xcode integriert ist, ist es möglich, den Schnittstellen-Generator von Xcode zu verwenden, um Symbolleistenelemente zu erstellen und Standard. Diese Symbolleistenelemente können auch in C# erstellt werden.

Symbolleisten in macOS werden dem oberen Abschnitt eines Fensters hinzugefügt und bieten einfachen Zugriff auf Befehle im Zusammenhang mit seiner Funktionalität. Symbolleisten können von den Benutzern einer Anwendung ausgeblendet, angezeigt oder angepasst werden, und sie können Symbolleistenelemente auf verschiedene Weise präsentieren.

In diesem Artikel werden die Grundlagen der Arbeit mit Symbolleisten und Symbolleistenelementen in einer Xamarin.Mac-Anwendung behandelt.

Bevor Sie fortfahren, lesen Sie den Artikel "Hello, Mac ", insbesondere die Abschnitte "Einführung in Xcode" und "Interface Builder " und "Outlets" und "Actions ", da sie wichtige Konzepte und Techniken behandelt, die in diesem Handbuch verwendet werden.

Sehen Sie sich auch die Exposing C#-Klassen /Methoden zum Objective-C Abschnitt des Xamarin.Mac Internals-Dokuments an. Es wird erläutert, welche Register Attribute Export zum Verbinden von C#-Klassen mit Objective-C Klassen verwendet werden.

Einführung in Symbolleisten

Jedes Fenster in einer macOS-Anwendung kann eine Symbolleiste enthalten:

An example window with a toolbar

Symbolleisten bieten benutzern Ihrer Anwendung eine einfache Möglichkeit, schnell auf wichtige oder häufig verwendete Features zuzugreifen. Eine Dokumentbearbeitungsanwendung kann z. B. Symbolleistenelemente zum Festlegen der Textfarbe, Ändern der Schriftart oder Drucken des aktuellen Dokuments bereitstellen.

Symbolleisten können Elemente auf drei Arten anzeigen:

  1. Symbol und Text

    A toolbar with icons and text

  2. Nur Symbol

    An icon-only toolbar

  3. Nur Text

    A text-only toolbar

Wechseln Sie zwischen diesen Modi, indem Sie mit der rechten Maustaste auf die Symbolleiste klicken und im Kontextmenü einen Anzeigemodus auswählen:

The contextual menu for a toolbar

Verwenden Sie dasselbe Menü, um die Symbolleiste in einer kleineren Größe anzuzeigen:

A toolbar with small icons

Das Menü ermöglicht außerdem das Anpassen der Symbolleiste:

The dialog used to customize a toolbar

Beim Einrichten einer Symbolleiste im Benutzeroberflächen-Generator von Xcode kann ein Entwickler zusätzliche Symbolleistenelemente bereitstellen, die nicht Teil der Standardkonfiguration sind. Benutzer der Anwendung können dann die Symbolleiste anpassen und diese vordefinierten Elemente bei Bedarf hinzufügen und entfernen. Natürlich kann die Symbolleiste auf die Standardkonfiguration zurückgesetzt werden.

Die Symbolleiste stellt automatisch eine Verbindung mit dem Menü "Ansicht" her, sodass Benutzer sie ausblenden, anzeigen und anpassen können:

Toolbar-related items in the View menu

Weitere Details finden Sie in der Integrierten Menüfunktionalitätsdokumentation .

Wenn die Symbolleiste im Schnittstellen-Generator ordnungsgemäß konfiguriert ist, speichert die Anwendung außerdem automatisch Anpassungen der Symbolleisten über mehrere Starts der Anwendung hinweg.

In den nächsten Abschnitten dieses Handbuchs wird beschrieben, wie Sie Symbolleisten mit dem Schnittstellen-Generator von Xcode erstellen und Standard und wie Sie mit ihnen im Code arbeiten.

Festlegen eines benutzerdefinierten Standard-Fenstercontrollers

Um UI-Elemente über Ausgänge und Aktionen für C#-Code verfügbar zu machen, muss die Xamarin.Mac-App einen benutzerdefinierten Fenstercontroller verwenden:

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

  2. Wählen Sie den Fenstercontroller auf der Entwurfsoberfläche aus.

  3. Wechseln Sie zum Identitätsinspektor , und geben Sie "WindowController" als Klassennamen ein:

    Setting a custom class name for the window controller

  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:

    Selecting WindowController.cs in the Solution Pad

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

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

    The WindowController.h file

Erstellen und Standard Speichern von Symbolleisten in Xcode

Symbolleisten werden erstellt und Standard mit dem Schnittstellen-Generator von Xcode beibehalten. Um einer Anwendung eine Symbolleiste hinzuzufügen, bearbeiten Sie das primäre Storyboard der App (in diesem Fall "Main.storyboard") durch Doppelklicken im Lösungsblock:

Opening Main.storyboard in the Solution Pad

Geben Sie im Bibliotheksinspektor "Tool" in das Suchfeld ein, um die Anzeige aller verfügbaren Symbolleistenelemente zu vereinfachen:

The Library Inspector, filtered to show toolbar items

Ziehen Sie eine Symbolleiste auf das Fenster im Schnittstellen-Editor. Wenn die Symbolleiste ausgewählt ist, konfigurieren Sie das Verhalten, indem Sie Eigenschaften im Attributes Inspector festlegen:

The Attributes Inspector for a toolbar

Die folgenden Eigenschaften sind verfügbar:

  1. Anzeige – Steuert, ob die Symbolleiste Symbole, Text oder beides anzeigt
  2. Sichtbar beim Start – Wenn diese Option ausgewählt ist, ist die Symbolleiste standardmäßig sichtbar.
  3. Anpassbar – Wenn ausgewählt, können Benutzer die Symbolleiste bearbeiten und anpassen.
  4. Trennzeichen – Bei Auswahl trennt eine dünne horizontale Linie die Symbolleiste vom Inhalt des Fensters.
  5. Größe – Legt die Größe der Symbolleiste fest.
  6. Automatisches Speichern – Wenn diese Option ausgewählt ist, behält die Anwendung änderungen an der Symbolleistenkonfiguration eines Benutzers bei allen Anwendungsstarts bei.

Wählen Sie die Option "Automatisches Speichern " aus, und behalten Sie alle anderen Eigenschaften bei ihren Standardeinstellungen bei.

Nachdem Sie die Symbolleiste in der Schnittstellenhierarchie geöffnet haben, rufen Sie das Anpassungsdialogfeld auf, indem Sie ein Symbolleistenelement auswählen:

Customizing the toolbar

Verwenden Sie dieses Dialogfeld, um Eigenschaften für Elemente festzulegen, die bereits Teil der Symbolleiste sind, die Standardsymbolleiste für die Anwendung zu entwerfen und zusätzliche Symbolleistenelemente bereitzustellen, die ein Benutzer beim Anpassen der Symbolleiste auswählen kann. Um der Symbolleiste Elemente hinzuzufügen, ziehen Sie sie aus dem Bibliotheksinspektor:

The Library Inspector

Die folgenden Symbolleistenelemente können hinzugefügt werden:

  • Bildsymbolleistenelement – Ein Symbolleistenelement mit einem benutzerdefinierten Bild als Symbol.

  • Flexible Raumsymbolleistenelement – Flexibler Platz, der verwendet wird, um nachfolgende Symbolleistenelemente zu rechtfertigen. Beispielsweise würde ein oder mehrere Symbolleistenelemente gefolgt von einem flexiblen Platzsymbolleistenelement und einem anderen Symbolleistenelement das letzte Element an die rechte Seite der Symbolleiste anheften.

  • Leerzeichensymbolleistenelement – Fester Abstand zwischen Elementen auf der Symbolleiste

  • Trennzeichensymbolleistenelement – Ein sichtbares Trennzeichen zwischen zwei oder mehr Symbolleistenelementen zum Gruppieren

  • Anpassen des Symbolleistenelements – Ermöglicht Benutzern das Anpassen der Symbolleiste

  • Drucksymbolleistenelement – Ermöglicht Benutzern das Drucken des geöffneten Dokuments

  • Farbsymbolleistenelement anzeigen – Zeigt die Standardsystemfarbauswahl an:

    The system color picker

  • Schriftartsymbolleistenelement anzeigen – Zeigt das Standarddialogfeld für die Systemschriftart an:

    The font selector

Wichtig

Wie später zu sehen ist, können viele standardmäßige Cocoa UI-Steuerelemente wie Suchfelder, segmentierte Steuerelemente und horizontale Schieberegler auch zu einer Symbolleiste hinzugefügt werden.

Hinzufügen eines Elements zu einer Symbolleiste

Wenn Sie einer Symbolleiste ein Element hinzufügen möchten, wählen Sie die Symbolleiste in der Schnittstellenhierarchie aus, und klicken Sie auf eines der zugehörigen Elemente, wodurch das Anpassungsdialogfeld angezeigt wird. Ziehen Sie als Nächstes ein neues Element aus dem Bibliotheksinspektor in den Bereich "Zulässige Symbolleistenelemente ":

The Allowed Toolbar Items in the toolbar customization dialog

Um sicherzustellen, dass ein neues Element Teil der Standardsymbolleiste ist, ziehen Sie es in den Bereich "Standardsymbolleistenelemente ":

Reordering a toolbar item by dragging

Wenn Sie Standardsymbolleistenelemente neu anordnen möchten, ziehen Sie sie nach links oder rechts.

Verwenden Sie als Nächstes den Attributes Inspector , um Standardeigenschaften für das Element festzulegen:

Customizing a toolbar item using the Attributes Inspector

Die folgenden Eigenschaften sind verfügbar:

  • Bildname – Bild, das als Symbol für das Element verwendet werden soll
  • Beschriftung – Anzuzeigender Text für das Element auf der Symbolleiste
  • Palettenbeschriftung – Text, der für das Element im Bereich "Zulässige Symbolleistenelemente " angezeigt werden soll
  • Tag – Ein optionaler eindeutiger Bezeichner, der das Element im Code identifiziert.
  • Bezeichner – Definiert den Symbolleistenelementtyp. Ein benutzerdefinierter Wert kann zum Auswählen eines Symbolleistenelements im Code verwendet werden.
  • Auswählbar – Wenn aktiviert, fungiert das Element wie eine Ein-/Aus-Schaltfläche.

Wichtig

Fügen Sie dem Bereich "Zulässige Symbolleistenelemente ", aber nicht der Standardsymbolleiste ein Element hinzu, um Anpassungsoptionen für Benutzer bereitzustellen.

Hinzufügen weiterer UI-Steuerelemente zu einer Symbolleiste

Mehrere Cocoa-UI-Elemente wie Suchfelder und segmentierte Steuerelemente können auch einer Symbolleiste hinzugefügt werden.

Um dies zu versuchen, öffnen Sie die Symbolleiste in der Schnittstellenhierarchie , und wählen Sie ein Symbolleistenelement aus, um das Anpassungsdialogfeld zu öffnen. Ziehen Sie ein Suchfeld aus dem Bibliotheksinspektor in den Bereich zulässige Symbolleistenelemente :

Using the toolbar customization dialog

Verwenden Sie von hier aus den Schnittstellen-Generator, um das Suchfeld zu konfigurieren und ihn über eine Aktion oder steckdose coden zu lassen.

Integrierte Unterstützung für Symbolleistenelemente

Standardmäßig interagieren mehrere Cocoa-UI-Elemente mit Standardsymbolleistenelementen. Ziehen Sie beispielsweise eine Textansicht auf das Fenster der Anwendung, und positionieren Sie sie, um den Inhaltsbereich auszufüllen:

Adding a text view to the application

Speichern Sie das Dokument, kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren, führen Sie die Anwendung aus, geben Sie Text ein, markieren Sie es, und klicken Sie auf das Symbolleistenelement "Farben". Beachten Sie, dass die Textansicht automatisch mit der Farbauswahl funktioniert:

Built-in toolbar functionality with a text view and color picker

Verwenden von Bildern mit Symbolleistenelementen

Mithilfe eines Bildsymbolleistenelements kann jedes Bitmapbild, das dem Ordner "Ressourcen" hinzugefügt wird (und eine Buildaktion der Bündelressource) auf der Symbolleiste als Symbol angezeigt werden:

  1. Klicken Sie in Visual Studio für Mac im Projektmappenpad mit der rechten Maustaste auf den Ordner "Ressourcen", und wählen Sie "Dateien hinzufügen">aus.

  2. Navigieren Sie im Dialogfeld "Dateien hinzufügen" zu den gewünschten Bildern, wählen Sie sie aus, und klicken Sie auf die Schaltfläche "Öffnen ":

    Selecting images to add

  3. Wählen Sie "Kopieren" aus, aktivieren Sie die gleiche Aktion für alle ausgewählten Dateien, und klicken Sie auf "OK":

    Selecting the copy action for the added images

  4. Doppelklicken Sie im Lösungspad auf "MainWindow.xib", um es in Xcode zu öffnen.

  5. Wählen Sie die Symbolleiste in der Schnittstellenhierarchie aus, und klicken Sie auf eines der zugehörigen Elemente, um das Anpassungsdialogfeld zu öffnen.

  6. Ziehen Sie ein Bildsymbolleistenelement aus dem Bibliotheksinspektor in den Bereich zulässige Symbolleistenelemente der Symbolleiste:

    An Image Toolbar Item added to the Allowed Toolbar Items area

  7. Wählen Sie im Attributes Inspector das Bild aus, das gerade in Visual Studio für Mac hinzugefügt wurde:

    Setting a custom image for a toolbar item

  8. Legen Sie die Bezeichnung auf "Papierkorb" und die Palettenbeschriftung auf "Dokument löschen" fest:

    Setting the toolbar item Label and Palette Label

  9. Ziehen Sie ein Trennzeichensymbolleistenelement aus dem Bibliotheksinspektor in den Bereich zulässige Symbolleistenelemente der Symbolleiste:

    A Separator Toolbar Item added to the Allowed Toolbar Items area

  10. Ziehen Sie das Trennzeichenelement und das Element "Papierkorb" in den Bereich "Standardsymbolleistenelemente ", und legen Sie die Reihenfolge der Symbolleistenelemente von links nach rechts wie folgt fest (Farben, Schriftarten, Trennzeichen, Papierkorb, flexibler Platz, Druck):

    The default toolbar items

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

Führen Sie die Anwendung aus, um zu überprüfen, ob die neue Symbolleiste standardmäßig angezeigt wird:

A toolbar with customized default items

Verfügbarmachen von Symbolleistenelementen mit Ausgängen und Aktionen

Um auf eine Symbolleiste oder ein Symbolleistenelement im Code zuzugreifen, muss es an eine Steckdose oder eine Aktion angefügt werden:

  1. Doppelklicken Sie im Lösungspad auf "Main.storyboard", um es in Xcode zu öffnen.

  2. Stellen Sie sicher, dass die benutzerdefinierte Klasse "WindowController" dem Standard Fenstercontroller im Identitätsinspektor zugewiesen wurde:

    Using the Identity Inspector to set a custom class for the window controller

  3. Wählen Sie als Nächstes das Symbolleistenelement in der Schnittstellenhierarchie aus:

    Selecting the toolbar item in the Interface Hierarchy

  4. Öffnen Sie die Assistentenansicht, wählen Sie die Datei "WindowController.h" aus, und ziehen Sie das Steuerelement aus dem Symbolleistenelement in die Datei "WindowController.h".

  5. Legen Sie den typ der Verbinden ion auf "Action" fest, geben Sie "trashDocument" für den Namen ein, und klicken Sie auf die Schaltfläche Verbinden:

    Configuring an action for a toolbar item

  6. Machen Sie die Textansicht als Steckdose namens "documentEditor" in der Datei ViewController.h verfügbar:

    Configuring an outlet for the text view

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

Bearbeiten Sie in Visual Studio für Mac die ViewController.cs-Datei, und fügen Sie den folgenden Code hinzu:

public void EraseDocument() {
    documentEditor.Value = "";
}

Bearbeiten Sie als Nächstes die WindowController.cs-Datei , und fügen Sie den folgenden Code am Ende der WindowController Klasse hinzu:

[Export ("trashDocument:")]
void TrashDocument (NSObject sender) {

    var controller = ContentViewController as ViewController;
    controller.EraseDocument ();
}

Beim Ausführen der Anwendung ist das Papierkorbsymbolleistenelement aktiv:

A toolbar with an active trash item

Beachten Sie, dass das Papierkorbsymbolleistenelement jetzt zum Löschen von Text verwendet werden kann.

Deaktivieren von Symbolleistenelementen

Um ein Element auf einer Symbolleiste zu deaktivieren, erstellen Sie eine benutzerdefinierte NSToolbarItem Klasse, und überschreiben Sie die Validate Methode. Weisen Sie dann im Schnittstellen-Generator dem Element, das Sie aktivieren/deaktivieren möchten, den benutzerdefinierten Typ zu.

Wenn Sie eine benutzerdefinierte NSToolbarItem Klasse erstellen möchten, klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie "Neue Datei hinzufügen>..." aus. Wählen Sie "Allgemein>leere Klasse" aus, geben Sie "AktivableItem" für den Namen ein, und klicken Sie auf die Schaltfläche "Neu":

Adding an empty class in Visual Studio for Mac

Bearbeiten Sie als Nächstes die ActivatableItem.cs Datei, um sie wie folgt zu lesen:

using System;

using Foundation;
using AppKit;

namespace MacToolbar
{
    [Register("ActivatableItem")]
    public class ActivatableItem : NSToolbarItem
    {
        public bool Active { get; set;} = true;

        public ActivatableItem ()
        {
        }

        public ActivatableItem (IntPtr handle) : base (handle)
        {
        }

        public ActivatableItem (NSObjectFlag  t) : base (t)
        {
        }

        public ActivatableItem (string title) : base (title)
        {
        }

        public override void Validate ()
        {
            base.Validate ();
            Enabled = Active;
        }
    }
}

Doppelklicken Sie auf "Main.storyboard ", um es in Xcode zu öffnen. Wählen Sie das oben erstellte Papierkorbsymbolleistenelement aus, und ändern Sie die Klasse in "AktivableItem" im Identitätsinspektor:

Setting a custom class for a toolbar item

Erstellen Sie eine Steckdose, die für das Papierkorbsymbolleistenelement aufgerufen wirdtrashItem. Speichern Sie Änderungen, und kehren Sie zu Visual Studio für Mac zurück, um mit Xcode zu synchronisieren. Öffnen Sie schließlich MainWindow.cs , und aktualisieren Sie die AwakeFromNib Methode wie folgt:

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

    // Disable trash
    trashItem.Active = false;
}

Führen Sie die Anwendung aus, und beachten Sie, dass das Papierkorbelement jetzt in der Symbolleiste deaktiviert ist:

A toolbar with an inactive trash item

Zusammenfassung

Dieser Artikel hat einen detaillierten Blick auf die Arbeit mit Symbolleisten und Symbolleistenelementen in einer Xamarin.Mac-Anwendung gemacht. Es wurde beschrieben, wie Sie Symbolleisten im Benutzeroberflächen-Generator von Xcode erstellen und Standard, wie einige Benutzeroberflächensteuerelemente automatisch mit Symbolleistenelementen arbeiten, wie Sie mit Symbolleisten im C#-Code arbeiten und wie Sie Symbolleistenelemente aktivieren und deaktivieren.