Barras de herramientas en Xamarin.Mac

En este artículo se describe cómo trabajar con barras de herramientas en una aplicación de Xamarin.Mac. Trata sobre la creación y el mantenimiento de barras de herramientas en Xcode y Interface Builder, exponerlas al código y trabajar con ellas mediante programación.

Los desarrolladores de Xamarin.Mac que trabajan con Visual Studio para Mac tienen acceso a los mismos controles de interfaz de usuario disponibles para los desarrolladores de macOS que trabajan con Xcode, incluido el control de barra de herramientas. Dado que Xamarin.Mac se integra directamente con Xcode, es posible usar el Interface Builder de Xcode para crear y mantener elementos de la barra de herramientas. Estos elementos de la barra de herramientas también se pueden crear en C#.

Las barras de herramientas de macOS se agregan a la sección superior de una ventana y proporcionan un acceso sencillo a los comandos relacionados con su funcionalidad. Los usuarios de una aplicación pueden ocultar, mostrar o personalizar las barras de herramientas, y pueden presentar elementos de la barra de herramientas de varias maneras.

En este artículo se tratan los conceptos básicos de trabajar con barras de herramientas y elementos de barra de herramientas en una aplicación de Xamarin.Mac.

Antes de continuar, lea el artículo Hello, Mac (en concreto, las secciones Introducción a Xcode y Interface Builder y Salidas y acciones), ya que trata los conceptos y técnicas clave que se usarán en esta guía.

Consulte también la sección del documento Aspectos internos Exposing C# classes / methods to Objective-C de Exposing C# classes / methods to Objective-C Se explican los atributos Register y que se usan para conectar clases de Export C# a Objective-C clases.

Introducción a las barras de herramientas

Cualquier ventana de una aplicación macOS puede incluir una barra de herramientas:

Una ventana de ejemplo con una barra de

Las barras de herramientas proporcionan una manera sencilla para que los usuarios de la aplicación accedan rápidamente a características importantes o de uso frecuente. Por ejemplo, una aplicación de edición de documentos podría proporcionar elementos de la barra de herramientas para establecer el color del texto, cambiar la fuente o imprimir el documento actual.

Las barras de herramientas pueden mostrar elementos de tres maneras:

1. Icono y texto

   Una barra de herramientas con iconos y

2. Solo icono

   Una barra de herramientas de solo

3. Solo texto

   Una barra de herramientas de solo

Cambie entre estos modos haciendo clic con el botón derecho en la barra de herramientas y seleccionando un modo de presentación en el menú contextual:

Menú contextual de una barra de

Use el mismo menú para mostrar la barra de herramientas con un tamaño menor:

barra de herramientas con iconos

El menú también permite personalizar la barra de herramientas:

El diálogo usado para personalizar una barra de

Al configurar una barra de herramientas en el Interface Builder Xcode, un desarrollador puede proporcionar elementos de barra de herramientas adicionales que no forman parte de su configuración predeterminada. A continuación, los usuarios de la aplicación pueden personalizar la barra de herramientas, agregando y quitando estos elementos predefinidos según sea necesario. Por supuesto, la barra de herramientas se puede restablecer a su configuración predeterminada.

La barra de herramientas se conecta automáticamente al menú Ver, lo que permite a los usuarios ocultarla, mostrarla y personalizarla:

relacionados con la barra de herramientas del menú

Consulte la documentación de funcionalidad de menú integrada para obtener más detalles.

Además, si la barra de herramientas está configurada correctamente en Interface Builder, la aplicación conservará automáticamente las personalizaciones de la barra de herramientas en varios inicios de la aplicación.

En las secciones siguientes de esta guía se describe cómo crear y mantener barras de herramientas con la Interface Builder de Xcode y cómo trabajar con ellas en el código.

Establecimiento de un controlador de ventana principal personalizado

Para exponer elementos de la interfaz de usuario al código de C# a través de salidas y acciones, la aplicación Xamarin.Mac debe usar un controlador de ventana personalizado:

1. Abra el guión gráfico de la aplicación en el Interface Builder de Xcode.

2. Seleccione el controlador de ventana en la superficie de diseño.

3. Cambie al Inspector de identidad y escriba "WindowController" como nombre de clase:

   Establecer un nombre de clase personalizado para el controlador de

4. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar.

5. Se agregará un archivo WindowController.cs al proyecto en la Panel de solución en Visual Studio para Mac:

   

6. Vuelva a abrir el guión gráfico en el Interface Builder de Xcode.

7. El archivo WindowController.h estará disponible para su uso:

   

Creación y mantenimiento de barras de herramientas en Xcode

Las barras de herramientas se crean y mantienen con el Interface Builder de Xcode. Para agregar una barra de herramientas a una aplicación, edite el guión gráfico principal de la aplicación (en este caso Main.storyboard)haciendo doble clic en él en la Panel de solución:

En el Inspector de biblioteca,escriba "herramienta" en el cuadro de búsqueda para que sea más fácil ver todos los elementos de la barra de herramientas disponibles:

de la barra de herramientas El inspector de

Arrastre una barra de herramientas a la ventana del Editor de interfaces. Con la barra de herramientas seleccionada, configure su comportamiento estableciendo propiedades en el Inspector de atributos:

El inspector de atributos para una barra de

Están disponibles las propiedades siguientes:

1. Mostrar: controla si la barra de herramientas muestra iconos, texto o ambos
2. Visible al iniciar: si está seleccionada, la barra de herramientas está visible de forma predeterminada.
3. Personalizable: si está seleccionada, los usuarios pueden editar y personalizar la barra de herramientas.
4. Separador: si está seleccionada, una línea horizontal fina separa la barra de herramientas del contenido de la ventana.
5. Tamaño: establece el tamaño de la barra de herramientas
6. Autoguardar: si está seleccionada, la aplicación conservará los cambios de configuración de la barra de herramientas de un usuario entre los inicios de la aplicación.

Seleccione la opción Autoguardar y deje todas las demás propiedades en su configuración predeterminada.

Después de abrir la barra de herramientas en la jerarquía deinterfaz , abra el cuadro de diálogo de personalización seleccionando un elemento de la barra de herramientas:

Use este cuadro de diálogo para establecer las propiedades de los elementos que ya forman parte de la barra de herramientas, para diseñar la barra de herramientas predeterminada para la aplicación y para proporcionar elementos de barra de herramientas adicionales para que un usuario los seleccione al personalizar la barra de herramientas. Para agregar elementos a la barra de herramientas, arrástrelos desde el Inspector de biblioteca:

Se pueden agregar los siguientes elementos de la barra de herramientas:

• Elemento de la barra de herramientas de imagen: elemento de la barra de herramientas con una imagen personalizada como icono.

• Elemento de barra de herramientas de espacio flexible: espacio flexible que se usa para justificar los elementos posteriores de la barra de herramientas. Por ejemplo, uno o varios elementos de la barra de herramientas seguidos de un elemento de barra de herramientas de espacio flexible y otro elemento de barra de herramientas anclaría el último elemento al lado derecho de la barra de herramientas.

• Elemento de barra de herramientas de espacio: espacio fijo entre los elementos de la barra de herramientas

• Elemento de barra de herramientas separador: separador visible entre dos o más elementos de la barra de herramientas, para la agrupación

• Personalizar elemento de la barra de herramientas: permite a los usuarios personalizar la barra de herramientas

• Imprimir elemento de la barra de herramientas: permite a los usuarios imprimir el documento abierto

• Mostrar elemento de la barra de herramientas colores: muestra el selector de colores del sistema estándar:

  de colores del

• Mostrar elemento de la barra de herramientas de fuentes: muestra el cuadro de diálogo de fuente del sistema estándar:

  de

Agregar un elemento a una barra de herramientas

Para agregar un elemento a una barra de herramientas, seleccione la barra de herramientas en jerarquía de interfaz y haga clic en uno de sus elementos, lo que hace que aparezca el cuadro de diálogo de personalización. A continuación, arrastre un nuevo elemento desde el Inspector de biblioteca al área Elementos permitidos de la barra de herramientas:

Elementos permitidos de la barra de herramientas en el cuadro de diálogo de

Para asegurarse de que un nuevo elemento forma parte de la barra de herramientas predeterminada, arrástrelo al área Elementos predeterminados de la barra de herramientas:

el arrastre

Para reordenar los elementos de la barra de herramientas predeterminados, arrástrelos a la izquierda o a la derecha.

A continuación, use el Inspector de atributos para establecer las propiedades predeterminadas del elemento:

Están disponibles las propiedades siguientes:

• Nombre de imagen: imagen que se usará como icono para el elemento.
• Etiqueta: texto que se muestra para el elemento en la barra de herramientas
• Etiqueta de paleta: texto que se muestra para el elemento en el área Elementos permitidos de la barra de herramientas
• Etiqueta: identificador único opcional que ayuda a identificar el elemento en el código.
• Identificador: define el tipo de elemento de la barra de herramientas. Se puede usar un valor personalizado para seleccionar un elemento de la barra de herramientas en el código.
• Seleccionable: si está activada, el elemento actuará como un botón de encendido y apagado.

Agregar otros controles de interfaz de usuario a una barra de herramientas

También se pueden agregar varios elementos de la interfaz de usuario de Cocoa, como los campos de búsqueda y los controles segmentados, a una barra de herramientas.

Para probar esto, abra la barra de herramientas en jerarquía de interfaz y seleccione un elemento de barra de herramientas para abrir el cuadro de diálogo de personalización. Arrastre un campo de búsqueda desde el Inspector de biblioteca hasta el área Elementos permitidos de la barra de herramientas:

herramientas Mediante el cuadro de diálogo de

Desde aquí, use Interface Builder para configurar el campo de búsqueda y exponerlo al código a través de una acción o salida.

Compatibilidad integrada con elementos de la barra de herramientas

De forma predeterminada, varios elementos de la interfaz de usuario de Cocoa interactúan con los elementos de la barra de herramientas estándar. Por ejemplo, arrastre una vista de texto a la ventana de la aplicación y posiciones para rellenar el área de contenido:

Guarde el documento, vuelva a Visual Studio para Mac para sincronizar con Xcode, ejecute la aplicación, escriba texto, selecciónelo y haga clic en el elemento de la barra de herramientas Colores. Observe que la vista de texto funciona automáticamente con el selector de colores:

de texto y una funcionalidad de barra de herramientas integrada del selector de colores con una vista de texto y un selector de

Uso de imágenes con elementos de la barra de herramientas

Con un elemento de la barrade herramientas de imagen , cualquier imagen de mapa de bits agregada a la carpeta Recursos (y dada una acción de compilación de Recurso de agrupación) se puede mostrar en la barra de herramientas como un icono:

1. En Visual Studio para Mac, en la Panel de solución ,haga clic con el botón derecho en la carpeta Recursos y seleccione Agregaragregar archivos.

2. En el cuadro de diálogo Agregar archivos, vaya a las imágenes deseadas, selecciónelos y haga clic en el botón Abrir:

   Selección de imágenes para

3. Seleccione Copiar,active Usar la misma acción para todos los archivos seleccionadosy haga clic en Aceptar:

   

4. En la Panel de solución, haga doble clic en MainWindow.xib para abrirlo en Xcode.

5. Seleccione la barra de herramientas en jerarquía de interfaz y haga clic en uno de sus elementos para abrir el cuadro de diálogo de personalización.

6. Arrastre un elemento de la barra de herramientas de imagen desde el Inspector de biblioteca hasta el área Elementos permitidos de la barra de herramientas de la barra de herramientas:

   permitidos de la barra de herramientas Un elemento de la barra de herramientas de imagen agregado al área Elementos permitidos de la barra de

7. En el Inspector de atributos, seleccione la imagen que se acaba de agregar en Visual Studio para Mac:

   Establecer una imagen personalizada para un elemento de barra de

8. Establezca la etiqueta en "Papelera" y la etiqueta de paleta en "Borrar documento":

   Establecer el elemento de la barra de herramientas Etiqueta y Etiqueta de

9. Arrastre un elemento de barra de herramientas separador desde el Inspector de biblioteca hasta el área Elementos permitidos de la barra de herramientas de la barra de herramientas:

   permitidos de la barra de herramientas Un elemento de barra de herramientas separador agregado al área Elementos permitidos de la barra de

10. Arrastre el elemento separador y el elemento "Papelera" al área Elementos predeterminados de la barra de herramientas y establezca el orden de los elementos de la barra de herramientas de izquierda a derecha como se muestra a continuación (Colores, Fuentes, Separador, Papelera, Espacio flexible, Imprimir):

    elementos predeterminados de la barra de

11. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode.

Ejecute la aplicación para comprobar que la nueva barra de herramientas se muestra de forma predeterminada:

Exposición de elementos de la barra de herramientas con salidas y acciones

Para tener acceso a una barra de herramientas o elemento de barra de herramientas en el código, debe adjuntarse a una salida o a una acción:

1. En el Panel de solución, haga doble clic en Main.storyboard para abrirlo en Xcode.

2. Asegúrese de que la clase personalizada "WindowController" se ha asignado al controlador de ventana principal en el Inspector de identidad:

   de ventana Mediante el Inspector de identidad para establecer una clase personalizada para el controlador de

3. A continuación, seleccione el elemento de la barra de herramientas en la jerarquía de interfaz:

   Selección del elemento de barra de herramientas en la jerarquía de

4. Abra la vista del asistente,seleccione el archivo WindowController.h y arrastre el control desde el elemento de la barra de herramientas al archivo WindowController.h.

5. Establezca Tipo de conexión en Acción,escriba "trashDocument" en Nombrey haga clic en el Conectar siguiente:

   Configuración de una acción para un elemento de barra de

6. Exponga la vista de texto como una salida denominada "documentEditor" en el archivo ViewController.h:

   Configuración de una salida para la vista de

7. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode.

En Visual Studio para Mac, edite el archivo ViewController.cs y agregue el código siguiente:

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

A continuación, edite el archivo WindowController.cs y agregue el código siguiente a la parte inferior de la clase :

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

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

Al ejecutar la aplicación, el elemento de la barra de herramientas Papelera estará activo:

Barra de herramientas con un elemento de la papelera

Observe que el elemento de la barra de herramientas Papelera ahora se puede usar para eliminar texto.

Deshabilitar elementos de la barra de herramientas

Para deshabilitar un elemento en una barra de herramientas, cree una clase NSToolbarItem personalizada e invalide el Validate método . A continuación, Interface Builder, asigne el tipo personalizado al elemento que desea habilitar o deshabilitar.

Para crear una clase NSToolbarItem personalizada, haga clic NSToolbarItemcon el botón derecho en el proyecto y seleccione >>. Seleccione GeneralEmpty Class (Clase vacíageneral), escriba "ActivatableItem" en Name(Nombre) y haga clic en el botón New (Nuevo):

Agregar una clase vacía en

A continuación, edite el archivo ActivatableItem.cs para leer de la siguiente manera:

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

Haga doble clic en Main.storyboard para abrirlo en Xcode. Seleccione el elemento de la barra de herramientas Papelera creado anteriormente y cambie su clase a "ActivatableItem" en identity inspector:

Establecer una clase personalizada para un elemento de barra de

Cree una salida llamada para trashItem el elemento de la barra de herramientas trashItem Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode. Por último, abra MainWindow.cs y actualice el método para que lea como se muestra a continuación:

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

    // Disable trash
    trashItem.Active = false;
}

Ejecute la aplicación y observe que el elemento Papelera ahora está deshabilitado en la barra de herramientas:

Barra de herramientas con un elemento de papelera

Resumen

En este artículo se ha detallado cómo trabajar con barras de herramientas y elementos de barra de herramientas en una aplicación xamarin.mac. Se ha descrito cómo crear y mantener barras de herramientas en el Interface Builder de Xcode, cómo funcionan automáticamente algunos controles de interfaz de usuario con elementos de la barra de herramientas, cómo trabajar con barras de herramientas en código de C# y cómo habilitar y deshabilitar elementos de la barra de herramientas.

Vínculos relacionados

• MacToolbar (ejemplo)
• Hello, Mac
• Directrices de interfaz humana para barras de herramientas
• Introducción a las barras de herramientas