Controles estándar en Xamarin.Mac

En este artículo se explica cómo trabajar con los controles de AppKit estándar, como botones, etiquetas, campos de texto, casillas y controles segmentados en una aplicación Xamarin.Mac. Describe cómo agregarlos a una interfaz con Interface Builder e interactuar con ellos en el código.

Al trabajar con C# y .NET en una aplicación de Xamarin.Mac, tiene acceso a los mismos controles de AppKit en los que trabaja un desarrollador Objective-CObjective-C Dado que Xamarin.Mac se integra directamente con Xcode, puede usar el Interface Builder de Xcode para crear y mantener los controles de Appkit (o, opcionalmente, crearlos directamente en código de C#).

Los controles appkit son los elementos de interfaz de usuario que se usan para crear Interfaz de usuario de la aplicación Xamarin.Mac. Constan de elementos como botones, etiquetas, campos de texto, casillas y controles segmentados y provocan acciones instantáneas o resultados visibles cuando un usuario los manipula.

La pantalla principal de la aplicación de ejemplo

En este artículo, se tratarán los conceptos básicos del trabajo con controles AppKit en una aplicación Xamarin.Mac. Se recomienda encarecidamente que trabaje primero en el artículo Hello, Mac, en concreto en las secciones Introduction to Xcode and Interface Builder and Outlets and Actions (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 este artículo.

También puede echar un vistazo a la sección del documento Exposing C# classes / methods to Objective-CExposing C# classes / methods to Objective-C internos de Xamarin.Mac), donde se explican los comandos y que se usan para conectar las clases de C# a objetos y elementos de interfaz de RegisterExportObjective-C usuario.

Introducción a los controles y vistas

macOS (anteriormente conocido como Mac OS X) proporciona un conjunto estándar de controles Interfaz de usuario a través de AppKit Framework. Constan de elementos como botones, etiquetas, campos de texto, casillas y controles segmentados y provocan acciones instantáneas o resultados visibles cuando un usuario los manipula.

Todos los controles de AppKit tienen una apariencia integrada estándar que será adecuada para la mayoría de los usos; algunos especifican una apariencia alternativa para su uso en un área de marco de ventana o en un contexto de efecto de vibración, como en un área barra lateral o en un widget del Centro de notificaciones.

Apple sugiere las siguientes directrices al trabajar con controles AppKit:

  • Evite mezclar tamaños de control en la misma vista.
  • En general, evite el redimensionamiento de los controles verticalmente.
  • Use la fuente del sistema y el tamaño de texto adecuado dentro de un control .
  • Use el espaciado adecuado entre los controles.

Para obtener más información, vea la sección Acerca de los controles y vistas de las directrices de interfaz humana de OS X deApple.

Usar controles en un marco de ventana

Hay un subconjunto de controles de AppKit que incluyen un estilo de presentación que permite incluirlos en el área Marco de una ventana. Para obtener un ejemplo, consulte la barra de herramientas de la aplicación Mail:

Marco de ventana de Mac

  • Botón con textura redondeada: un objeto con un estilo de NSTexturedRoundedBezelStyle .
  • Control segmentado redondeado con textura: A con un estilo de NSSegmentStyleTexturedRounded .
  • Control segmentado redondeado con textura: A con un estilo de NSSegmentStyleSeparated .
  • Menú de Pop-Up con textura redondeada: A con un estilo de NSTexturedRoundedBezelStyle .
  • Menú de Drop-Down con textura redondeada: A con un estilo de NSTexturedRoundedBezelStyle .
  • Barra de búsqueda: un .

Apple sugiere las siguientes directrices al trabajar con controles AppKit en un marco de ventana:

  • No use estilos de control específicos del marco de ventana en el cuerpo de la ventana.
  • No use controles ni estilos del cuerpo de la ventana en el marco de ventana.

Para obtener más información, vea la sección Acerca de los controles y vistas de las directrices de interfaz humana de OS X deApple.

Creación de un Interfaz de usuario en Interface Builder

Cuando se crea una nueva aplicación Xamarin.Mac Cocoa, se obtiene una ventana estándar en blanco de forma predeterminada. Esta ventana se define en un .storyboard archivo incluido automáticamente en el proyecto. Para editar el diseño de windows, en la Explorador de soluciones, haga doble clic en el archivo:

Selección del guión gráfico principal en el Explorador de soluciones

Se abrirá el diseño de la ventana en la ventana de Xcode Interface Builder:

Edición del guión gráfico en Xcode

Para crear el Interfaz de usuario, arrastrará elementos de la interfaz de usuario (controles de AppKit) desde el Inspector de biblioteca al Editor de interfaces en Interface Builder. En el ejemplo siguiente, un control Vista dividida vertical ha sido utilizado por el Inspector de biblioteca y se ha colocado en la ventana del Editor de interfaz:

Selección de una vista dividida de la biblioteca

Para obtener más información sobre cómo crear Interfaz de usuario en Interface Builder, consulte nuestra introducción a Xcode y Interface Builder documentación.

Tamaño y posición

Una vez incluido un control en el Interfaz de usuario, use el Editor de restricciones para establecer su ubicación y tamaño especificando los valores manualmente y controlando cómo se coloca y cambia el tamaño automáticamente del control cuando se cambia el tamaño de la ventana o vista primaria:

Establecimiento de las restricciones

Use red I-Beams alrededor del exterior del cuadro Autoresizing para pegar un control a una ubicación determinada (x,y). Por ejemplo:

Edición de una restricción

Especifica que el control seleccionado (en el Editor de interfaz de vista de jerarquía) se atascará en la ubicación superior y derecha de la ventana o vista a medida que se cambia de tamaño o se mueve.

Otros elementos de las propiedades del control del editor, como Height y Width:

Establecimiento del alto

También puede controlar la alineación de elementos con restricciones mediante el Editor de alineación:

Editor de alineación

Importante

A diferencia de iOS, donde (0,0) es la esquina superior izquierda de la pantalla, en macOS (0,0) es la esquina inferior izquierda. Esto se debe a que macOS usa un sistema de coordenadas matemático con los valores numéricos aumentando en valor hacia arriba y hacia la derecha. Debe tener esto en cuenta al colocar controles de AppKit en un Interfaz de usuario.

Establecer una clase personalizada

Hay ocasiones en las que se trabaja con controles de AppKit que deberá crear una subclase y un control existente, y crear su propia versión personalizada de esa clase. Por ejemplo, definir una versión personalizada de la lista de origen:

using System;
using AppKit;
using Foundation;

namespace AppKit
{
    [Register("SourceListView")]
    public class SourceListView : NSOutlineView
    {
        #region Computed Properties
        public SourceListDataSource Data {
            get {return (SourceListDataSource)this.DataSource; }
        }
        #endregion

        #region Constructors
        public SourceListView ()
        {

        }

        public SourceListView (IntPtr handle) : base(handle)
        {

        }

        public SourceListView (NSCoder coder) : base(coder)
        {

        }

        public SourceListView (NSObjectFlag t) : base(t)
        {

        }
        #endregion

        #region Override Methods
        public override void AwakeFromNib ()
        {
            base.AwakeFromNib ();

        }
        #endregion

        #region Public Methods
        public void Initialize() {

            // Initialize this instance
            this.DataSource = new SourceListDataSource (this);
            this.Delegate = new SourceListDelegate (this);

        }

        public void AddItem(SourceListItem item) {
            if (Data != null) {
                Data.Items.Add (item);
            }
        }
        #endregion

        #region Events
        public delegate void ItemSelectedDelegate(SourceListItem item);
        public event ItemSelectedDelegate ItemSelected;

        internal void RaiseItemSelected(SourceListItem item) {
            // Inform caller
            if (this.ItemSelected != null) {
                this.ItemSelected (item);
            }
        }
        #endregion
    }
}

Donde la [Register("SourceListView")] instrucción expone la clase a para que se pueda usar en SourceListViewObjective-C Interface Builder. Para más información, consulte la sección del documento Exposing C# classes / methods to Objective-CExposing C# classes / methods to Objective-C (Elementos internos de Xamarin.Mac), donde se explican los comandos y que se usan para conectar las clases de C# a objetos y elementos de la interfaz Register de ExportObjective-C usuario.

Con el código anterior en su lugar, puede arrastrar un control AppKit, del tipo base que está ampliando, ala superficie de diseño (en el ejemplo siguiente, una lista de origen), cambiar al Inspector de identidad y establecer la clase personalizada en el nombre que ha expuesto (ejemplo ):

Establecimiento de una clase personalizada en Xcode

Exposición de salidas y acciones

Para que se pueda acceder a un control AppKit en código de C#, debe exponerse como salida o acción. Para ello, seleccione el control dado en la jerarquía de interfaces o en el Editor de interfaces y cambie a la vista Asistente (asegúrese de que tiene seleccionado el de la ventana para editar):

Selección del archivo correcto para editar

Arrastre el control desde el control AppKit al archivo give .h para empezar a crear una .h o una acción:

Arrastrar para crear una salida o una acción

Seleccione el tipo de exposición que desea crear y asigne unnombre a la salidao acción:

Configuración de la salida o la acción

Para obtener más información sobre cómo trabajar con salidas y acciones, consulte la sección Salidas y acciones de nuestra introducción a Xcode y Interface Builder documentación.

Sincronizar los cambios con Xcode

Al volver a Visual Studio para Mac desde Xcode, los cambios realizados en Xcode se sincronizarán automáticamente con el proyecto de Xamarin.Mac.

Si selecciona el en la Explorador de soluciones podrá ver cómo se han conectado la salida y la acción en SplitViewController.designer.cs nuestro código de C#: SplitViewController.designer.cs

Sincronización de cambios con Xcode

Observe cómo se define en el SplitViewController.designer.cs archivo:

[Outlet]
AppKit.NSSplitViewItem LeftController { get; set; }

[Outlet]
AppKit.NSSplitViewItem RightController { get; set; }

[Outlet]
AppKit.NSSplitView SplitView { get; set; }

Alinee con la definición del MainWindow.h archivo en Xcode:

@interface SplitViewController : NSSplitViewController {
    NSSplitViewItem *_LeftController;
    NSSplitViewItem *_RightController;
    NSSplitView *_SplitView;
}

@property (nonatomic, retain) IBOutlet NSSplitViewItem *LeftController;

@property (nonatomic, retain) IBOutlet NSSplitViewItem *RightController;

@property (nonatomic, retain) IBOutlet NSSplitView *SplitView;

Como puede ver, Visual Studio para Mac escucha los cambios en el archivo y, a continuación, sincroniza automáticamente esos cambios en el archivo correspondiente para exponerlos a .h.designer.cs la aplicación. También puede observar que es una clase parcial, por lo que Visual Studio para Mac no tiene que modificar, lo que sobrescribiría los cambios realizados SplitViewController.designer.csSplitViewController.cs en la clase.

Normalmente, nunca tendrá que abrir el , que se presentó aquí solo con SplitViewController.designer.cs fines educativos.

Importante

En la mayoría de Visual Studio para Mac, verá automáticamente los cambios realizados en Xcode y los sincronizará con el proyecto de Xamarin.Mac. En caso de que esa sincronización no se realice de forma automática, vuelva a Xcode y después vuelva a Visual Studio para Mac. Normalmente, esto iniciará un ciclo de sincronización.

Trabajar con botones

AppKit proporciona varios tipos de botón que se pueden usar en el Interfaz de usuario Diseño. Para obtener más información, consulte la sección Botones de las directrices de interfaz humana de OS X deApple.

Un ejemplo de los distintos tipos de botón

Si se ha expuesto un botón a través de una salida, el código siguiente responderá a que se presiona:

ButtonOutlet.Activated += (sender, e) => {
        FeedbackLabel.StringValue = "Button Outlet Pressed";
};

En el caso de los botones que se han expuesto a través de Acciones ,se creará automáticamente un método con el nombre que eligió en Xcode. Para responder a la acción, complete el método parcial de la clase en la que se definió la acción. Por ejemplo:

partial void ButtonAction (Foundation.NSObject sender) {
    // Do something in response to the Action
    FeedbackLabel.StringValue = "Button Action Pressed";
}

Para los botones que tienen un estado (como Activado y Desactivado),el estado se puede comprobar o establecer con la propiedad en la enumeración. Por ejemplo:

DisclosureButton.Activated += (sender, e) => {
    LorumIpsum.Hidden = (DisclosureButton.State == NSCellStateValue.On);
};

Dónde NSCellStateValue puede estar:

  • Activada: se inserta el botón o se selecciona el control (por ejemplo, una marca de verificación en una casilla).
  • Desactivado: el botón no se inserta o el control no está seleccionado.
  • Mixto: combinación de los estados Ony Off.

Marcar un botón como predeterminado y establecer clave equivalente

Para cualquier botón que haya agregado a un diseño de interfaz de usuario, puede marcar ese botón como el botón Predeterminado que se activará cuando el usuario presione la tecla Entrar/Devolver en el teclado. En macOS, este botón recibirá un color de fondo azul de forma predeterminada.

Para establecer un botón como predeterminado, selecciónelo en la página de Xcode Interface Builder. A continuación, en el Inspector de atributos,seleccione el campo Equivalente de clave y presione la tecla Devolver/Entrar:

Edición del equivalente de clave

Igualmente, puede asignar cualquier secuencia de teclas que se pueda usar para activar el botón mediante el teclado en lugar del mouse. Por ejemplo, presionando las teclas Command-C de la imagen anterior.

Cuando se ejecuta la aplicación y la ventana con el botón es Clave y enfocado, si el usuario presiona Comando-C, se activará la acción del botón (como si el usuario hubiera hecho clic en el botón).

Trabajar con casillas y botones de radio

AppKit proporciona varios tipos de casillas y grupos de botones de radio que se pueden usar en Interfaz de usuario Diseño. Para obtener más información, consulte la sección Botones de las directrices de interfaz humana de OS X deApple.

Un ejemplo de los tipos de casilla disponibles

Las casillas y los botones de radio (expuestos a través de salidas)tienen un estado (como Activado y Desactivado),el estado se puede comprobar o establecer con la propiedad en la enumeración. Por ejemplo:

AdjustTime.Activated += (sender, e) => {
    FeedbackLabel.StringValue = string.Format("Adjust Time: {0}",AdjustTime.State == NSCellStateValue.On);
};

Dónde NSCellStateValue puede estar:

  • Activada: se inserta el botón o se selecciona el control (por ejemplo, una marca de verificación en una casilla).
  • Desactivado: el botón no se inserta o el control no está seleccionado.
  • Mixto: combinación de los estados Ony Off.

Para seleccionar un botón en un grupo de botones de radio, exponga el botón de radio para seleccionarlo como salida y establezca su propiedad. Por ejemplo:

partial void SelectCar (Foundation.NSObject sender) {
    TransportationCar.State = NSCellStateValue.On;
    FeedbackLabel.StringValue = "Car Selected";
}

Para obtener una colección de botones de radio que actúen como un grupo y controle automáticamente el estado seleccionado, cree una nueva acción y adjunte cada botón del grupo a él:

Creación de una nueva acción

A continuación, asigne un único Tag a cada botón de radio en el Inspector de Tag:

Edición de una etiqueta de botón de radio

Guarde los cambios y vuelva a Visual Studio para Mac, agregue el código para controlar la acción a la que están asociados todos los botones de radio:

partial void NumberChanged(Foundation.NSObject sender)
{
    var check = sender as NSButton;
    Console.WriteLine("Changed to {0}", check.Tag);
}

Puede usar la propiedad Tag para ver qué botón de radio se ha seleccionado.

Trabajar con controles de menú

AppKit proporciona varios tipos de controles de menú que se pueden usar en el Interfaz de usuario Diseño. Para obtener más información, consulte la sección Controles de menú de las directrices de interfaz humana de OS X deApple.

Controles de menú de ejemplo

Proporcionar datos de control de menú

Los controles de menú disponibles para macOS se pueden establecer para rellenar la lista desplegable desde una lista interna (que se puede definir previamente en Interface Builder o rellenarse mediante código) o proporcionando su propio origen de datos externo personalizado.

Trabajar con datos internos

Además de definir elementos en Interface Builder, los controles de menú (como ), proporcionan un conjunto completo de métodos que permiten agregar, editar o eliminar los elementos de la lista interna que NSComboBox mantienen:

  • Add : agrega un nuevo elemento al final de la lista.
  • GetItem : devuelve el elemento en el índice especificado.
  • Insert : inserta un nuevo elemento en la lista en la ubicación especificada.
  • IndexOf : devuelve el índice del elemento especificado.
  • Remove : quita el elemento especificado de la lista.
  • RemoveAll : quita todos los elementos de la lista.
  • RemoveAt : quita el elemento en el índice especificado.
  • Count : devuelve el número de elementos de la lista.

Importante

Si usa un origen de datos extern ( ), al llamar a cualquiera de UsesDataSource = true los métodos anteriores se producirá una excepción.

Trabajar con un origen de datos externo

En lugar de usar los datos internos integrados para proporcionar las filas para el control de menús, opcionalmente puede usar un origen de datos externo y proporcionar su propio almacén de respaldo para los elementos (por ejemplo, una base de datos sqlite).

Para trabajar con un origen de datos externo, creará una instancia del origen de datos del control de menú ( por ejemplo) e invalidará varios métodos para proporcionar NSComboBoxDataSource los datos necesarios:

  • ItemCount : devuelve el número de elementos de la lista.
  • ObjectValueForItem : devuelve el valor del elemento para un índice determinado.
  • IndexOfItem : devuelve el índice del valor del elemento give.
  • CompletedString : devuelve el primer valor de elemento correspondiente para el valor de elemento con tipo parcial. Solo se llama a este método si autocompletar se ha habilitado ( Completes = true ).

Consulte la sección Bases de datos y comboBoxes del documento Trabajar con bases de datos para obtener más detalles.

Ajustar la apariencia de la lista

Los métodos siguientes están disponibles para ajustar la apariencia del control de menú:

  • HasVerticalScroller - Si true es , el control mostrará una barra de desplazamiento vertical.
  • VisibleItems : ajuste el número de elementos que se muestran cuando se abre el control. El valor predeterminado es cinco (5).
  • IntercellSpacing - Ajuste la cantidad de espacio alrededor de un elemento determinado proporcionando un donde especifica los márgenes izquierdo y derecho y especifica el espacio antes y después NSSizeWidth de un Height elemento.
  • ItemHeight : especifica el alto de cada elemento de la lista.

Para Drop-Down tipos de NSPopupButtons , el primer elemento de menú proporciona el título para el control . Por ejemplo:

Un control de menú de ejemplo

Para cambiar el título, exponga este elemento como salida y use código como el siguiente:

DropDownSelected.Title = "Item 1";

Manipular los elementos seleccionados

Los métodos y propiedades siguientes permiten manipular los elementos seleccionados en la lista del control de menú:

  • SelectItem : selecciona el elemento en el índice especificado.
  • Select - Seleccione el valor de elemento especificado.
  • DeselectItem : anula la selección del elemento en el índice especificado.
  • SelectedIndex : devuelve el índice del elemento seleccionado actualmente.
  • SelectedValue : devuelve el valor del elemento seleccionado actualmente.

Use para presentar el elemento en el índice especificado en la parte superior de la lista y para desplazarse a la lista hasta que el elemento del ScrollItemAtIndexToTopScrollItemAtIndexToVisible índice especificado esté visible.

Respuesta a eventos

Los controles de menú proporcionan los siguientes eventos para responder a la interacción del usuario:

  • SelectionChanged : se llama a cuando el usuario ha seleccionado un valor de la lista.
  • SelectionIsChanging : se llama a antes de que el nuevo elemento seleccionado por el usuario se convierta en la selección activa.
  • WillPopup : se llama a antes de que se muestre la lista desplegable de elementos.
  • WillDismiss : se llama a antes de cerrar la lista desplegable de elementos.

Para los controles, incluyen todos los mismos eventos que , como el evento al que se llama cada vez que el usuario edita el valor del texto en NSComboBoxNSTextField el cuadro Changed combinado.

Opcionalmente, puede responder a los elementos de menú de datos internos definidos en Interface Builder que se seleccionan adjuntando el elemento a una acción y usar código como el siguiente para responder a la acción desencadenada por el usuario:

partial void ItemOne (Foundation.NSObject sender) {
    DropDownSelected.Title = "Item 1";
    FeedbackLabel.StringValue = "Item One Selected";
}

Para obtener más información sobre cómo trabajar con menús y controles de menú, consulte nuestra documentación menús y botones emergentesy Pull-Down listas.

Trabajar con controles de selección

AppKit proporciona varios tipos de controles de selección que se pueden usar en el Interfaz de usuario Diseño. Para más información, consulte la sección Controles de selección de las directrices de interfaz humana de OS X deApple.

Controles de selección de ejemplo

Hay dos maneras de realizar un seguimiento de cuándo un control de selección tiene interacción con el usuario, exponiéndolo como una acción. Por ejemplo:

partial void SegmentButtonPressed (Foundation.NSObject sender) {
    FeedbackLabel.StringValue = string.Format("Button {0} Pressed",SegmentButtons.SelectedSegment);
}

O bien, adjunte un delegado al evento . Por ejemplo:

TickedSlider.Activated += (sender, e) => {
    FeedbackLabel.StringValue = string.Format("Stepper Value: {0:###}",TickedSlider.IntValue);
};

Para establecer o leer el valor de un control de selección, use la IntValue propiedad . Por ejemplo:

FeedbackLabel.StringValue = string.Format("Stepper Value: {0:###}",TickedSlider.IntValue);

Los controles especializados (como Color Well e Image Well) tienen propiedades específicas para sus tipos de valor. Por ejemplo:

ColorWell.Color = NSColor.Red;
ImageWell.Image = NSImage.ImageNamed ("tag.png");

tiene NSDatePicker las siguientes propiedades para trabajar directamente con fecha y hora:

  • DateValue: el valor de fecha y hora actual como .
  • Local: la ubicación del usuario como .
  • TimeInterval: el valor de hora como .
  • Zona horaria: la zona horaria del usuario como .

Trabajar con controles de indicador

AppKit proporciona varios tipos de controles de indicador que se pueden usar en el diseño Interfaz de usuario diseño. Para obtener más información, consulte la sección Controles de indicador de las directrices de interfaz humana de OS X deApple.

Controles de indicador de ejemplo

Hay dos maneras de realizar un seguimiento de cuándo un control de indicador tiene interacción con el usuario, ya sea exponiéndolo como una acción o una salida y asociando un delegado al evento. Por ejemplo:

LevelIndicator.Activated += (sender, e) => {
    FeedbackLabel.StringValue = string.Format("Level: {0:###}",LevelIndicator.DoubleValue);
};

Para leer o establecer el valor del Control de indicador, use la DoubleValue propiedad . Por ejemplo:

FeedbackLabel.StringValue = string.Format("Rating: {0:###}",Rating.DoubleValue);

Los indicadores de progreso indeterminado y asincrónico deben animarse cuando se muestran. Use el StartAnimation método para iniciar la animación cuando se muestren. Por ejemplo:

Indeterminate.StartAnimation (this);
AsyncProgress.StartAnimation (this);

Al llamar StopAnimation al método se detendrá la animación.

Trabajar con controles de texto

AppKit proporciona varios tipos de controles de texto que se pueden usar en el diseño Interfaz de usuario diseño. Para más información, consulte la sección Controles de texto de las directrices de interfaz humana de OS X deApple.

Controles de texto de ejemplo

Para Campos de texto ( ), se pueden usar los siguientes eventos NSTextField para realizar un seguimiento de la interacción del usuario:

  • Modificado: se desencadena cada vez que el usuario cambia el valor del campo. Por ejemplo, en cada carácter con tipo.
  • EditingBegan: se desencadena cuando el usuario selecciona el campo para editarlo.
  • EditingEnded: cuando el usuario presiona la tecla Entrar en el campo o sale del campo.

Use la StringValue propiedad para leer o establecer el valor del campo. Por ejemplo:

FeedbackLabel.StringValue = string.Format("User ID: {0}",UserField.StringValue);

Para los campos que muestran o editan valores numéricos, puede usar la IntValue propiedad . Por ejemplo:

FeedbackLabel.StringValue = string.Format("Number: {0}",NumberField.IntValue);

un NSTextView proporciona un área completa de edición y visualización de texto con formato integrado. Al igual NSTextField que un , use la propiedad para leer o establecer el valor del StringValue área.

Para obtener un ejemplo de un ejemplo complejo de trabajar con vistas de texto en una aplicación de Xamarin.Mac, consulte la aplicación de ejemplo SourceWriter. SourceWriter es un editor de código fuente simple que proporciona compatibilidad con la finalización de código y el resaltado de sintaxis simple.

El código de SourceWriter se ha comentado completamente y, si están disponibles, se han proporcionado vínculos de métodos o tecnologías clave a información relevante en la documentación de las guías de Xamarin.Mac.

Trabajar con vistas de contenido

AppKit proporciona varios tipos de vistas de contenido que se pueden usar en el diseño Interfaz de usuario diseño. Para obtener más información, consulte la sección Vistas de contenido de las directrices de interfaz humana de OS X deApple.

Una vista de contenido de ejemplo

Elementos emergentes

Un elemento emergente es un elemento transitorio de la interfaz de usuario que proporciona funcionalidad que está directamente relacionada con un control específico o un área en pantalla. Un elemento emergente flota sobre la ventana que contiene el control o área con el que está relacionada, y su borde incluye una flecha para indicar el punto desde el que salió.

Para crear una ventana emergente, haga lo siguiente:

  1. Abra el archivo de la ventana a la que desea agregar una ventana emergente haciendo doble clic en él .storyboard en el .storyboard

  2. Arrastre un controlador de vista desde el Inspector de biblioteca hasta el Editor de interfaces:

    Selección de un controlador de vistas de la biblioteca

  3. Defina el tamaño y el diseño de la vista personalizada:

    Edición del diseño

  4. Haga clic con el botón de control y arrástrelo desde el origen del elemento emergente al Controlador de vistas:

    Arrastrar para crear un segue

  5. Seleccione Popover en el menú emergente:

    Establecimiento del tipo de segue

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

Vistas de pestañas

Las vistas de pestañas constan de una lista de pestañas (que es similar a un control segmentado) combinada con un conjunto de vistas denominadas Paneles. Cuando el usuario selecciona una nueva pestaña, se muestra el panel que está asociado a ella. Cada panel contiene su propio conjunto de controles.

Al trabajar con una vista de pestañas en el Interface Builder de Xcode, use el Inspector de atributos para establecer el número de pestañas:

Edición del número de pestañas

Seleccione cada pestaña de la jerarquía de interfaz para establecer su título y agregar elementos de la interfaz de usuario a su panel:

Edición de las pestañas en Xcode

Controles AppKit de enlace de datos

Al usar Key-Value codificación y enlace de datos en la aplicación de Xamarin.Mac, puede reducir considerablemente la cantidad de código que tiene que escribir y mantener para rellenar y trabajar con elementos de la interfaz de usuario. También tiene la ventaja de desacomantear aún más los datos de respaldo(modelode datos) de sufront-endInterfaz de usuario (controlador de vista de modelo), lo que facilita el mantenimiento y el diseño de aplicaciones más flexible.

Key-Value Coding (KVC) es un mecanismo para acceder indirectamente a las propiedades de un objeto, mediante claves (cadenas con formato especial) para identificar propiedades en lugar de acceder a ellas a través de variables de instancia o métodos de accessor ( get/set ). Al implementar Key-Value de acceso compatibles con codificación en la aplicación xamarin.mac, se obtiene acceso a otras características de macOS, como Key-Value Observing (KVO), enlace de datos, datos principales, enlaces de Cocoa y capacidad de script.

Para obtener más información, consulte la sección Enlace de datos simple de nuestra documentación sobre enlace de datos Key-Value codificación.

Resumen

En este artículo se ha detallado cómo trabajar con los controles de AppKit estándar, como botones, etiquetas, campos de texto, casillas y controles segmentados en una aplicación de Xamarin.Mac. Se ha abordado cómo agregarlos a un diseño de Interfaz de usuario en el Interface Builder de Xcode, exponerlos al código a través de salidas y acciones y trabajar con controles AppKit en código de C#.