Панели инструментов в Xamarin.Mac

В этой статье описывается работа с панелями инструментов в приложении Xamarin.Mac. Он охватывает создание и обслуживание панелей инструментов в Xcode и Interface Builder, предоставление их коду и программное взаимодействие с ними.

Разработчики Xamarin.Mac, работающие с Visual Studio для Mac, имеют доступ к тем же элементам управления пользовательского интерфейса, которые доступны разработчикам macOS, работающим с Xcode, включая элемент управления панели инструментов. Так как Xamarin.Mac интегрируется непосредственно с Xcode, можно использовать построитель интерфейсов Xcode для создания и поддержания элементов панели инструментов. Эти элементы панели инструментов также можно создать в C#.

Панели инструментов в macOS добавляются в верхний раздел окна и обеспечивают простой доступ к командам, связанным с ее функциональностью. Панели инструментов могут быть скрыты, показаны или настроены пользователями приложения, и они могут представлять элементы панели инструментов различными способами.

В этой статье рассматриваются основы работы с панелями инструментов и элементами панели инструментов в приложении Xamarin.Mac.

Прежде чем продолжить, прочитайте статью Hello, Mac , в частности общие сведения о Xcode и конструкторе интерфейсов и торговых точках и действиях , как это касается ключевых понятий и методов, которые будут использоваться в этом руководстве.

Кроме того, ознакомьтесь с разделом Xamarin.Mac Internals в разделе классов И методов Objective-C C#. В нем описываются Register и Export атрибуты, используемые для подключения классов C# к Objective-C классам.

Общие сведения о панелях инструментов

Любое окно в приложении macOS может включать панель инструментов:

An example window with a toolbar

Панели инструментов позволяют пользователям приложения быстро получать доступ к важным или часто используемым функциям. Например, приложение редактирования документов может предоставлять элементы панели инструментов для настройки цвета текста, изменения шрифта или печати текущего документа.

Панели инструментов могут отображать элементы тремя способами:

  1. Значок и текст

    A toolbar with icons and text

  2. Только значок

    An icon-only toolbar

  3. Только текст

    A text-only toolbar

Переключитесь между этими режимами, щелкнув правой кнопкой мыши панель инструментов и выбрав режим отображения в контекстном меню:

The contextual menu for a toolbar

Используйте то же меню, чтобы отобразить панель инструментов с меньшим размером:

A toolbar with small icons

Меню также позволяет настроить панель инструментов:

The dialog used to customize a toolbar

При настройке панели инструментов в построителе интерфейсов Xcode разработчик может предоставить дополнительные элементы панели инструментов, которые не являются частью конфигурации по умолчанию. Пользователи приложения могут настроить панель инструментов, добавить и удалить эти предварительно определенные элементы при необходимости. Конечно, панель инструментов можно сбросить в конфигурацию по умолчанию.

Панель инструментов автоматически подключается к меню "Вид ", что позволяет пользователям скрывать его, отображать его и настраивать:

Toolbar-related items in the View menu

Дополнительные сведения см. в документации по встроенным функциям меню.

Кроме того, если панель инструментов настроена правильно в Конструкторе интерфейсов, приложение автоматически сохраняет настройки панели инструментов в нескольких запусках приложения.

В следующих разделах этого руководства описано, как создавать и поддерживать панели инструментов с помощью построителя интерфейсов Xcode и как работать с ними в коде.

Настройка пользовательского контроллера главного окна

Чтобы предоставить элементы пользовательского интерфейса коду C# через точки и действия, приложение Xamarin.Mac должно использовать пользовательский контроллер окна:

  1. Откройте раскадровки приложения в построителе интерфейсов Xcode.

  2. Выберите контроллер окна в области конструктора.

  3. Перейдите в инспектор удостоверений и введите "WindowController" в качестве имени класса:

    Setting a custom class name for the window controller

  4. Сохраните изменения и вернитесь к Visual Studio для Mac для синхронизации.

  5. Файл WindowController.cs будет добавлен в проект на панели решения в Visual Studio для Mac:

    Selecting WindowController.cs in the Solution Pad

  6. Откройте раскадровку в построителе интерфейсов Xcode.

  7. Файл WindowController.h будет доступен для использования:

    The WindowController.h file

Создание и обслуживание панелей инструментов в Xcode

Панели инструментов создаются и поддерживаются с помощью построителя интерфейсов Xcode. Чтобы добавить панель инструментов в приложение, измените основную раскадровку приложения (в данном случае Main.storyboard), дважды щелкнув ее на панели решения:

Opening Main.storyboard in the Solution Pad

В инспекторе библиотеки введите "инструмент" в поле поиска, чтобы упростить просмотр всех доступных элементов панели инструментов:

The Library Inspector, filtered to show toolbar items

Перетащите панель инструментов в окно в редакторе интерфейса. Выбрав панель инструментов, настройте его поведение, задав свойства в инспекторе атрибутов:

The Attributes Inspector for a toolbar

Доступны следующие свойства.

  1. Отображение — определяет, отображается ли панель инструментов значки, текст или оба
  2. Видимый при запуске — если выбрано, панель инструментов отображается по умолчанию.
  3. Настраиваемая настройка. Если выбрано, пользователи могут изменять и настраивать панель инструментов.
  4. Разделитель — если выбрано, тонкая горизонтальная линия отделяет панель инструментов от содержимого окна.
  5. Размер — задает размер панели инструментов
  6. Автосохранение — если выбрано, приложение будет сохранять изменения конфигурации панели инструментов пользователя во время запуска приложения.

Выберите параметр автосохранение и оставьте все остальные свойства по умолчанию.

Открыв панель инструментов в иерархии интерфейса, откройте диалоговое окно настройки, выбрав элемент панели инструментов:

Customizing the toolbar

Используйте это диалоговое окно для задания свойств для элементов, которые уже являются частью панели инструментов, для разработки панели инструментов по умолчанию для приложения, а также для предоставления дополнительных элементов панели инструментов, которые пользователь выбирает при настройке панели инструментов. Чтобы добавить элементы на панель инструментов, перетащите их из инспектора библиотеки:

The Library Inspector

Можно добавить следующие элементы панели инструментов:

  • Элемент панели инструментов изображения — элемент панели инструментов с пользовательским изображением в виде значка.

  • Элемент панели инструментов гибкого пространства — гибкое пространство, используемое для оправдания последующих элементов панели инструментов. Например, один или несколько элементов панели инструментов, за которыми следует гибкий элемент панели инструментов, а другой элемент панели инструментов закрепляет последний элемент справа от панели инструментов.

  • Элемент панели инструментов пробела — фиксированное пространство между элементами на панели инструментов

  • Элемент панели инструментов разделителя — видимый разделитель между двумя или несколькими элементами панели инструментов для группировки

  • Настройка элемента панели инструментов. Позволяет пользователям настраивать панель инструментов

  • Элемент панели инструментов печати— позволяет пользователям распечатать открытый документ

  • Элемент панели инструментов "Показать цвета" — отображает стандартный системный средство выбора цветов:

    The system color picker

  • Отображение элемента панели инструментов шрифта. Отображается диалоговое окно стандартного системного шрифта:

    The font selector

Внимание

Как видно позже, многие стандартные элементы управления пользовательского интерфейса Cocoa, такие как поля поиска, сегментированные элементы управления и горизонтальные ползунки, также можно добавить на панель инструментов.

Добавление элемента на панель инструментов

Чтобы добавить элемент на панель инструментов, выберите панель инструментов в иерархии интерфейса и щелкните один из его элементов, что приводит к отображению диалогового окна настройки. Затем перетащите новый элемент из инспектора библиотеки в область разрешенных элементов панели инструментов:

The Allowed Toolbar Items in the toolbar customization dialog

Чтобы убедиться, что новый элемент является частью панели инструментов по умолчанию, перетащите его в область элементов панели инструментов по умолчанию:

Reordering a toolbar item by dragging

Чтобы изменить порядок элементов панели инструментов по умолчанию, перетащите их влево или вправо.

Затем используйте инспектор атрибутов, чтобы задать свойства по умолчанию для элемента:

Customizing a toolbar item using the Attributes Inspector

Доступны следующие свойства.

  • Имя изображения — изображение, используемое в качестве значка элемента
  • Метка — текст для элемента на панели инструментов
  • Метка палитры — текст для элемента в области "Разрешенные элементы панели инструментов"
  • Тег — необязательный уникальный идентификатор, который помогает идентифицировать элемент в коде.
  • Идентификатор — определяет тип элемента панели инструментов. Настраиваемое значение можно использовать для выбора элемента панели инструментов в коде.
  • Можно выбрать. Если проверка, элемент будет действовать как кнопка "Вкл/выкл".

Внимание

Добавьте элемент в область "Разрешенные элементы панели инструментов" , но не на панели инструментов по умолчанию, чтобы предоставить параметры настройки для пользователей.

Добавление других элементов управления пользовательского интерфейса на панель инструментов

Несколько элементов пользовательского интерфейса Cocoa, таких как поля поиска и сегментированные элементы управления, также можно добавить на панель инструментов.

Чтобы попробовать это, откройте панель инструментов в иерархии интерфейса и выберите элемент панели инструментов, чтобы открыть диалоговое окно настройки. Перетащите поле поиска из инспектора библиотеки в область разрешенных элементов панели инструментов:

Using the toolbar customization dialog

Здесь используйте конструктор интерфейсов, чтобы настроить поле поиска и предоставить его коду через действие или выход.

Поддержка встроенных элементов панели инструментов

По умолчанию несколько элементов пользовательского интерфейса Cocoa взаимодействуют со стандартными элементами панели инструментов. Например, перетащите текстовое представление в окно приложения и поместите его, чтобы заполнить область содержимого:

Adding a text view to the application

Сохраните документ, вернитесь к Visual Studio для Mac для синхронизации с Xcode, запустите приложение, введите текст, выберите его и щелкните элемент панели инструментов Colors. Обратите внимание, что представление текста автоматически работает с средство выбора цвета:

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

Использование изображений с элементами панели инструментов

С помощью элемента панели инструментов изображения любой растровый рисунок, добавленный в папку Resources (и учитывая действие сборки ресурса пакета), можно отобразить на панели инструментов в виде значка:

  1. В Visual Studio для Mac на панели решений щелкните правой кнопкой мыши папку "Ресурсы" и выберите "Добавить>файлы".

  2. В диалоговом окне "Добавить файлы" перейдите к нужным изображениям, выберите их и нажмите кнопку "Открыть".

    Selecting images to add

  3. Выберите "Копировать", проверка Использовать одно действие для всех выбранных файлов и нажмите кнопку "ОК".

    Selecting the copy action for the added images

  4. На панели решения дважды щелкните MainWindow.xib, чтобы открыть его в Xcode.

  5. Выберите панель инструментов в иерархии интерфейса и щелкните один из его элементов, чтобы открыть диалоговое окно настройки.

  6. Перетащите элемент панели инструментов изображения из инспекторабиблиотеки в область разрешенных элементов панели инструментов:

    An Image Toolbar Item added to the Allowed Toolbar Items area

  7. В инспекторе атрибутов выберите только что добавленное изображение в Visual Studio для Mac:

    Setting a custom image for a toolbar item

  8. Задайте для метки "Корзина" и метку палитры значение "Удалить документ":

    Setting the toolbar item Label and Palette Label

  9. Перетащите элемент панели инструментов разделителя из инспекторабиблиотеки в область разрешенных элементов панели инструментов:

    A Separator Toolbar Item added to the Allowed Toolbar Items area

  10. Перетащите элемент разделителя и элемент "Корзина" в область элементов панели инструментов по умолчанию и задайте порядок элементов панели инструментов слева направо, как показано ниже (цвета, шрифты, разделитель, корзина, гибкое пространство, печать):

    The default toolbar items

  11. Сохраните изменения и вернитесь в Visual Studio для Mac для синхронизации с Xcode.

Запустите приложение, чтобы убедиться, что новая панель инструментов отображается по умолчанию:

A toolbar with customized default items

Предоставление элементов панели инструментов с помощью точек и действий

Чтобы получить доступ к элементу панели инструментов или панели инструментов в коде, его необходимо подключить к выходу или действию:

  1. На панели решений дважды щелкните Main.storyboard, чтобы открыть его в Xcode.

  2. Убедитесь, что пользовательский класс WindowController назначен контроллеру главного окна в инспекторе удостоверений:

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

  3. Затем выберите элемент панели инструментов в иерархии интерфейса:

    Selecting the toolbar item in the Interface Hierarchy

  4. Откройте представление помощника, выберите файл WindowController.h и перетащите элемент управления из элемента панели инструментов в файл WindowController.h.

  5. Задайте для типа Подключение ion значение Action, введите "корзинаDocument" для имени и нажмите кнопку Подключение:

    Configuring an action for a toolbar item

  6. Предоставляйте текстовое представление как выход с именем documentEditor в файле ViewController.h :

    Configuring an outlet for the text view

  7. Сохраните изменения и вернитесь к Visual Studio для Mac для синхронизации с Xcode.

В Visual Studio для Mac измените файл ViewController.cs и добавьте следующий код:

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

Затем измените файл WindowController.cs и добавьте следующий код в нижней WindowController части класса:

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

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

При запуске приложения элемент панели инструментов корзины будет активным:

A toolbar with an active trash item

Обратите внимание, что элемент панели инструментов корзины теперь можно использовать для удаления текста.

Отключение элементов панели инструментов

Чтобы отключить элемент на панели инструментов, создайте пользовательский NSToolbarItem класс и переопределите Validate метод. Затем в построителе интерфейсов назначьте пользовательский тип элементу, который требуется включить или отключить.

Чтобы создать пользовательский NSToolbarItem класс, щелкните проект правой кнопкой мыши и выберите команду Добавить>новый файл.... Выберите общий>пустой класс, введите "АктивироватьableItem" для имени и нажмите кнопку "Создать".

Adding an empty class in Visual Studio for Mac

Затем измените файл ActivatableItem.cs , чтобы прочитать следующее:

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;
        }
    }
}

Дважды щелкните Main.storyboard , чтобы открыть его в Xcode. Выберите элемент панели инструментов корзины, созданный выше, и измените его класс на "АктивироватьableItem" в инспекторе удостоверений:

Setting a custom class for a toolbar item

Создайте выход, вызываемый trashItem для элемента панели инструментов корзины . Сохраните изменения и вернитесь в Visual Studio для Mac для синхронизации с Xcode. Наконец, откройте MainWindow.cs и обновите AwakeFromNib метод следующим образом:

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

    // Disable trash
    trashItem.Active = false;
}

Запустите приложение и обратите внимание, что элемент корзины теперь отключен на панели инструментов:

A toolbar with an inactive trash item

Итоги

В этой статье подробно рассматривается работа с панелями инструментов и элементами панели инструментов в приложении Xamarin.Mac. В ней описано, как создавать и поддерживать панели инструментов в построителе интерфейсов Xcode, как некоторые элементы пользовательского интерфейса автоматически работают с элементами панели инструментов, как работать с панелями инструментов в коде C#, а также как включить и отключить элементы панели инструментов.