Archivos .xib en Xamarin.Mac

En este artículo se explica cómo trabajar con archivos .xib creados en el Interface Builder Xcode para crear y mantener interfaces de usuario para una aplicación xamarin.mac.

Información general

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

MacOS usa un archivo .xib para definir elementos de la interfaz de usuario de la aplicación (por ejemplo, menús, Windows, vistas, etiquetas, campos de texto) que se crean y mantienen gráficamente en los archivos Interface Builder de Xcode.

Un ejemplo de la aplicación en

En este artículo, se tratarán los conceptos básicos del trabajo con archivos .xib en una aplicación xamarin.mac. Se recomienda encarecidamente que trabaje primero en el artículo Hello, Mac, 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 Xamarin.Mac Internals (Aspectos internos de Exposing C# classes / methods to Objective-CExposing C# classes / methods to Objective-C donde se explican los atributos y que se usan para conectar las clases de C# a objetos y elementos de interfaz de RegisterExportObjective-C usuario.

Introducción a Xcode y a Interface Builder

Como parte de Xcode, Apple ha creado una herramienta denominada Interface Builder, que le permite crear el Interfaz de usuario visualmente en un diseñador. Xamarin.Mac se integra fluidamente con Interface Builder, lo que le permite crear la interfaz de usuario con las mismas herramientas que Objective-C hacen los usuarios.

Componentes de Xcode

Cuando se abre un archivo .xib en Xcode desde Visual Studio para Mac, se abre con un navegador de Project a la izquierda, la jerarquía de interfaz y el editor de interfaces en el centro y una sección Utilidades de propiedades a la derecha:

Echemos un vistazo a lo que hace cada una de estas secciones de Xcode y cómo las usará para crear la interfaz para la aplicación Xamarin.Mac.

Project navegación

Al abrir un archivo .xib para editarlo en Xcode, Visual Studio para Mac crea un archivo de proyecto Xcode en segundo plano para comunicar los cambios entre sí y Xcode. Más adelante, al volver a Visual Studio para Mac desde Xcode, los cambios realizados en este proyecto se sincronizan con el proyecto de Xamarin.Mac Visual Studio para Mac.

La Project navegación le permite navegar entre todos los archivos que forma parte de este proyecto de Xcode de correcciones de compatibilidad (shim). Normalmente, solo le interesarán los archivos .xib de esta lista, como MainMenu.xib y MainWindow.xib.

Jerarquía de la interfaz

La sección Jerarquía de interfaz permite acceder fácilmente a varias propiedades clave de la Interfaz de usuario como sus marcadores de posición y la ventana principal. También puede usar esta sección para acceder a los elementos individuales (vistas) que la interfaz de usuario y ajustar la forma en que se anidan arrastrándolos dentro de la jerarquía.

Editor de interfaz

La sección Editor de interfaces proporciona la superficie en la que se va a crear gráficamente el Interfaz de usuario. Arrastrará elementos desde la sección Biblioteca de la sección Utilidades de propiedades para crear el diseño. A medida que agregue elementos de interfaz de usuario (vistas) a la superficie de diseño, se agregarán a la sección Jerarquía de interfaz en el orden en que aparecen en el Editor de interfaces.

Utilidades & de propiedades

La sección Utilidades de propiedades se divide en dos secciones principales con las que trabajaremos: Propiedades (también denominadas Inspectores) y Biblioteca:

Inicialmente, esta sección está casi vacía; sin embargo, si selecciona un elemento en el Editor de interfaces o la jerarquía de interfaces, la sección Propiedades se rellenará con información sobre el elemento y las propiedades especificados que puede ajustar.

En la sección Propiedades hay 8 pestañas de inspectores diferentes, como se muestra en la siguiente ilustración:

De izquierda a derecha, estas pestañas son:

• File Inspector (Inspector de archivos): en esta pestaña se muestra la información del archivo, como el nombre de archivo y la ubicación del archivo Xib que se está editando.
• Ayuda rápida: en la pestaña Ayuda rápida se proporciona ayuda contextual según lo que está seleccionado en Xcode.
• Identity Inspector (Inspector de identidad): en esta pestaña se proporciona información sobre el control o la vista seleccionados.
• Inspector de atributos: el inspector de atributos permite personalizar varios atributos del control o vista seleccionados.
• Inspector de tamaño: el inspector de tamaño permite controlar el tamaño y el comportamiento de cambio de tamaño del control o vista seleccionados.
• Inspector de conexiones: el inspector de conexiones muestra las conexiones de salida y acción de los controles seleccionados. Examinaremos salidas y acciones en un momento.
• Inspector de enlaces: el inspector de enlaces permite configurar controles para que sus valores se enlacen automáticamente a los modelos de datos.
• Inspector de efectos de vista: el inspector de efectos de vista permite especificar efectos en los controles, como animaciones.

En la sección Biblioteca, puede encontrar controles y objetos que colocar en el diseñador para compilar gráficamente la interfaz de usuario:

Un ejemplo del inspector de

Ahora que está familiarizado con el IDE de Xcode Interface Builder, echemos un vistazo a su uso para crear una interfaz de usuario.

Creación y mantenimiento de ventanas en Xcode

El método preferido para crear el Interfaz de usuario de una aplicación xamarin.Mac es con guiones gráficos (consulte nuestra documentación introducción a los guiones gráficos para obtener más información) y, como resultado, cualquier proyecto nuevo iniciado en Xamarin.Mac usará guiones gráficos de forma predeterminada.

Para cambiar al uso de una interfaz de usuario basada en .xib, haga lo siguiente:

1. Abra Visual Studio para Mac e inicie un nuevo proyecto de Xamarin.Mac.

2. En la Panel de solución, haga clic con el botón derecho en el proyecto y seleccione Agregar nuevo archivo...

3. Seleccione Controlador deWindows Mac:

   Agregar un nuevo controlador de

4. Escriba MainWindow como nombre y haga clic en el MainWindow Nuevo:

   una nueva ventana

5. Haga clic con el botón derecho en el proyecto de nuevo y seleccione Agregarnuevo archivo...

6. Seleccione menú principaldeMac:

   un nuevo menú

7. Deje el nombre como y MainMenu haga clic en el MainMenu Nuevo.

8. En la Panel de solución el archivo Main.storyboard, haga clic con el botón derecho y seleccione Quitar:

   

9. En el cuadro de diálogo Quitar , haga clic en el botón Eliminar:

   

10. En la Panel de solución, haga doble clic en el archivo Info.plist para abrirlo para su edición.

11. Seleccione MainMenu en la lista desplegable MainMenu principal:

    

12. En la Panel de solución, haga doble clic en el archivo MainMenu.xib para abrirlo para editarlo en la página de Xcode Interface Builder.

13. En el Inspector de biblioteca, escriba en el campo de búsqueda y arrastre un nuevo objeto a la superficie de diseño:

    

14. En el Inspector de identidad,escriba para la clase:

    Selección del delegado de

15. Seleccione Propietario del archivo en la jerarquía de interfaz, cambie al Inspector de conexión y arrastre una línea desde el delegado al objeto que acaba de agregar al proyecto:

    que conecta el delegado de

16. Guarde los cambios y vuelva a Visual Studio para Mac.

Con todos estos cambios en su lugar, edite el archivo AppDelegate.cs y haga que sea parecido al siguiente:

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

Ahora, la ventana principal de la aplicación se define en un archivo .xib que se incluye automáticamente en el proyecto al agregar un controlador de ventana. Para editar el diseño de windows, en la Panel de solución, haga doble clic en el archivo MainWindow.xib:

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

Flujo de trabajo de ventana estándar

Para cualquier ventana que cree y trabaje con en la aplicación Xamarin.Mac, el proceso es básicamente el mismo:

1. Para las nuevas ventanas que no son el valor predeterminado agregado automáticamente al proyecto, agregue una nueva definición de ventana al proyecto.
2. Haga doble clic en el archivo .xib para abrir el diseño de la ventana para editarlo en la página de Xcode Interface Builder.
3. Establezca las propiedades de ventana necesarias en el Inspector de atributos y el Inspector de tamaño.
4. Arrastre los controles necesarios para compilar la interfaz y configurarlos en el Inspector de atributos.
5. Use el Inspector de tamaño para controlar el tamaño de los elementos de la interfaz de usuario.
6. Exponga los elementos de la interfaz de usuario de la ventana al código de C# mediante salidas y acciones.
7. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode.

Diseño de un diseño de ventana

El proceso para la creación de una Interfaz de usuario en interface builder es básicamente el mismo para cada elemento que agregue:

1. Busque el control deseado en el Inspector de biblioteca y arrástrelo al Editor de interfaces y posiciones.
2. Establezca las propiedades de ventana necesarias en el Inspector de atributos.
3. Use el Inspector de tamaño para controlar el tamaño de los elementos de la interfaz de usuario.
4. Si usa una clase personalizada, esta establezca esta opción en el inspector de identidad.
5. Exponga los elementos de la interfaz de usuario al código de C# a través de salidas y acciones.
6. Guarde los cambios y vuelva a Visual Studio para Mac para sincronizar con Xcode.

Por ejemplo:

1. En Xcode, arrastre un botón de comando de la sección Biblioteca:

   un botón de la

2. Coloque el botón en la ventana del Editor de interfaz:

   un botón a la

3. Haga clic en la propiedad Título del Attribute Inspector (Inspector de atributos) y cambie el título del botón por :

   Establecimiento de los atributos del

4. Arrastre una Etiqueta de la sección Biblioteca:

   Selección de una etiqueta en la

5. Coloque la etiqueta en la Ventana situada junto al botón en el Interface Editor (Editor de la interfaz):

   una etiqueta a la

6. Agarre el controlador derecho de la etiqueta y arrástrelo hasta que esté cerca del borde de la ventana:

   

7. Con la etiqueta aún seleccionada en el Editor de interfaces,cambie al Inspector de tamaño:

   Selección del inspector de

8. En el cuadro De tamaño automático, haga clic en el corchete rojo atenuado situado a la derecha y en la flecha horizontal de color rojo atenuado en el centro:

   

9. Esto garantiza que la etiqueta se ajustará para crecer y reducirse a medida que se cambie el tamaño de la ventana en la aplicación en ejecución. Los corchetes rojos y la parte superior e izquierda del cuadro Cuadro de escalado automático le dicen a la etiqueta que se atasca en sus ubicaciones X e Y dadas.

10. Guarde los cambios en el Interfaz de usuario

Al cambiar el tamaño y mover los controles, debería haber observado que Interface Builder proporciona sugerencias de ajuste útiles que se basan en las directrices de interfaz humana de OS X. Estas directrices le ayudarán a crear aplicaciones de alta calidad que tendrán una apariencia familiar para los usuarios de Mac.

Si busca en la sección Jerarquía de interfaces, observe cómo se muestran el diseño y la jerarquía de los elementos que la estructura de interfaz de usuario:

Selección de un elemento en la jerarquía de

Desde aquí puede seleccionar elementos para editar o arrastrar para reordenar los elementos de la interfaz de usuario si es necesario. Por ejemplo, si un elemento de la interfaz de usuario estaba cubierto por otro elemento, podría arrastrarlo a la parte inferior de la lista para que sea el elemento de nivel superior de la ventana.

Para obtener más información sobre cómo trabajar Windows en una aplicación xamarin.mac, consulte nuestra documentación Windows.

Exposición de elementos de la interfaz de usuario al código de C#

Una vez que haya terminado de exponer la apariencia de la interfaz de usuario en Interface Builder, deberá exponer elementos de la interfaz de usuario para que se pueda acceder a ellos desde código de C#. Para ello, va a usar acciones y salidas.

Establecimiento de un controlador de ventana principal personalizado

Para poder crear salidas y acciones para exponer elementos de la interfaz de usuario al código de C#, la aplicación Xamarin.Mac debe usar un controlador de ventana personalizado.

Haga lo siguiente:

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

2. Seleccione en NSWindowController la Superficie de diseño.

3. Cambie a la vista Inspector de identidad y escriba como nombre de clase:

   

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

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

   Nombre de clase nuevo en

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:

   

Salidas y acciones

¿Qué son las salidas y las acciones? En la programación tradicional de interfaz de usuario de .NET, un control de la interfaz de usuario se expone de forma automática como una propiedad cuando se agrega. En Mac es algo diferente, al agregar simplemente un control a una vista, el código no puede obtener acceso a él. El desarrollador debe exponer de forma explícita el elemento de interfaz de usuario al código. Para ello, Apple nos ofrece dos opciones:

• Salidas: las salidas son análogas a las propiedades. Si conecta un control a una salida, se expone al código a través de una propiedad , por lo que puede hacer cosas como adjuntar controladores de eventos, llamar a métodos en él, etc.
• Acciones: las acciones son análogas al patrón de comando en WPF. Por ejemplo, cuando se realiza una acción en un control, por ejemplo, un clic de botón, el control llamará automáticamente a un método en el código. Las acciones son eficaces y prácticas porque puede conectar muchos controles a la misma acción.

En Xcode, las salidas y las acciones se agregan directamente en el código a través del arrastre de control. Más concretamente, esto significa que, para crear una salida o una acción, elija qué elemento de control desea agregar una salida o acción, mantenga presionado el botón Control en el teclado y arrastre ese control directamente al código.

Para los desarrolladores de Xamarin.Mac, esto significa que arrastra a los archivos de código auxiliar que corresponden al archivo de C# donde desea crear la Objective-C salida o la acción. Visual Studio para Mac un archivo denominado MainWindow.h como parte del proyecto shim Xcode que generó para usar el Interface Builder:

Este archivo .h de código auxiliar refleja mainwindow.designer.cs que se agrega automáticamente a un proyecto de Xamarin.Mac cuando se crea un nuevo. Este archivo se usará para sincronizar los cambios realizados por Interface Builder y es donde crearemos las salidas y las acciones para que los elementos de la interfaz de usuario se exponán al código de C#.

Adición de una salida

Con un conocimiento básico de qué salidas y acciones son, echemos un vistazo a la creación de una salida para exponer un elemento de interfaz de usuario al código de C#.

Haga lo siguiente:

1. En Xcode, en la esquina superior disponible más a la derecha de la pantalla, haga clic en el botón de doble círculo para abrir Assistant Editor (Editor del asistente):

   Seleccionar el editor del

2. Xcode cambiará a un modo de vista en dos paneles con el Interface Editor (Editor de la interfaz) en un lado y un Editor de código en el otro.

3. Observe que Xcode ha seleccionado automáticamente el archivo MainWindowController.m en el Editorde código, lo que es incorrecto. Si recuerda de nuestra discusión sobre qué salidas y acciones están por encima, es necesario seleccionar MainWindow.h.

4. En la parte superior del Editor de código, haga clic en el vínculo automático y seleccione el archivo MainWindow.h:

   

5. Ahora, Xcode debería tener el archivo correcto seleccionado:

   archivo correcto

6. El último paso es muy importante. Si no tiene seleccionado el archivo correcto, no podrá crear salidas y acciones o se exponen a la clase incorrecta en C#.

7. En el Editor de interfaces,mantenga presionada la tecla Control en el teclado y haga clic y arrastre la etiqueta que creamos anteriormente al editor de código justo debajo del código:

   para crear una nueva

8. Aparecerá un cuadro de diálogo. Deje connection set to outlet (Conexión establecida en salida) y escriba en Name (Nombre):

   Establecimiento de las propiedades de

9. Haga clic en Conectar botón de salida para crear la salida:

   

10. Guarde los cambios en el archivo.

Adición de una acción

A continuación, echemos un vistazo a la creación de una acción para exponer una interacción del usuario con el elemento de interfaz de usuario en el código de C#.

Haga lo siguiente:

1. Asegúrese de que todavía estamos en el Editor del asistente y de que el archivo MainWindow.h está visible en el Editor de código.

2. En el Editor de interfaces,mantenga presionada la tecla Control en el teclado y arrastre el botón que creamos anteriormente al editor de código justo debajo del código:

   

3. Cambie el tipo de conexión a action:

   Seleccione un tipo de

4. Escriba ClickedButton como ClickedButton:

   

5. Haga clic en Conectar para crear la acción:

   

6. Guarde los cambios en el archivo.

Con el Interfaz de usuario conectado y expuesto al código de C#, vuelva a Visual Studio para Mac y deje que sincronice los cambios de Xcode y Interface Builder.

Escritura del código

Una vez Interfaz de usuario y sus elementos de interfaz de usuario expuestos al código a través de salidas y acciones, está listo para escribir el código para que el programa se haga más útil. Por ejemplo, abra el archivo MainWindow.cs para editarlo haciendo doble clic en él en la Panel de solución:

Y agregue el código siguiente a la MainWindow clase para trabajar con la salida de ejemplo que creó anteriormente:

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

Tenga en cuenta que se accede a en C# mediante el nombre directo que le asignó en Xcode cuando creó su salida en Xcode; en este caso, se NSLabel denomina ClickedLabel . Puede tener acceso a cualquier método o propiedad del objeto expuesto de la misma manera que lo haría con cualquier clase de C# normal.

A continuación, agregue la siguiente clase parcial a la MainWindow clase :

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

Este código se asocia a la acción que creó en Xcode y Interface Builder y se llamará cada vez que el usuario haga clic en el botón.

Algunos elementos de la interfaz de usuario tienen automáticamente acciones integradas, por ejemplo, elementos en la barra de menús predeterminada, como el elemento de menú Abrir... ( ). En el Panel de solución, haga doble clic en el archivo AppDelegate.cs para abrirlo para editarlo y agregue el código siguiente debajo del método :

[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 ();
    }
}

La línea clave aquí es [Export ("openDocument:")] , indica NSMenu que [Export ("openDocument:")] tiene un método void OpenDialog (NSObject sender) que responde a la openDocument: acción.

Para obtener más información sobre cómo trabajar con menús, consulte nuestra documentación de menús.

Sincronización de 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 MainWindow.designer.cs en el Panel de solución podrá ver cómo se han conectado nuestras salidas y acciones en nuestro código de C#:

Observe cómo las dos definiciones del archivo MainWindow.designer.cs:

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

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

Alinee con las definiciones del archivo MainWindow.h en Xcode:

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

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

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

Agregar una nueva ventana a un proyecto

Aparte de la ventana principal del documento, es posible que una aplicación de Xamarin.Mac tenga que mostrar otros tipos de ventanas al usuario, como Preferencias o Paneles de inspector. Al agregar una nueva ventana al proyecto, siempre debe usar la opción Cocoa Window with Controller (Ventana de Cocoa con controlador), ya que esto facilita el proceso de carga de la ventana desde el archivo .xib.

Para agregar una nueva ventana, haga lo siguiente:

1. En la Panel de solución, haga clic con el botón derecho en el proyecto y seleccione Agregarnuevo archivo. .

2. En el cuadro de diálogo Nuevo archivo, seleccione Xamarin.MacCocoa Window with Controller (Ventana de Cocoa de Xamarin.Mac con controlador):

   

3. Escriba PreferencesWindow en Nombre PreferencesWindow haga clic en el botón Nuevo.

4. Haga doble clic en el archivo PreferencesWindow.xib para abrirlo para editarlo en Interface Builder:

   

5. Diseñe la interfaz:

   Diseño del diseño de

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

Agregue el código siguiente a AppDelegate.cs para mostrar la nueva ventana:

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

La línea crea una nueva instancia del controlador de ventana que carga la ventana desde var preferences = new PreferencesWindowController (); el archivo .xib y la infla. La preferences.Window.MakeKeyAndOrderFront (this); línea muestra la nueva ventana al usuario.

Si ejecuta el código y selecciona Preferencias... en el menú Aplicación, se mostrará la ventana:

Para obtener más información sobre cómo trabajar Windows en una aplicación de Xamarin.Mac, consulte nuestra documentación Windows.

Agregar una nueva vista a un proyecto

Hay ocasiones en las que es más fácil dividir el diseño de la ventana en varios archivos .xib más fáciles de administrar. Por ejemplo, como cambiar el contenido de la ventana principal al seleccionar un elemento de la barra de herramientas en una ventana de preferencias o intercambiar contenido en respuesta a una selección de lista de origen.

Al agregar una nueva vista al proyecto, siempre debe usar la opción Cocoa View with Controller (Vista de Cocoa con controlador), ya que esto facilita el proceso de carga de la vista desde el archivo .xib.

Para agregar una nueva vista, haga lo siguiente:

1. En la Panel de solución, haga clic con el botón derecho en el proyecto y seleccione Agregarnuevo archivo. .

2. En el cuadro de diálogo Nuevo archivo, seleccione Xamarin.MacCocoa View with Controller (Vista de Cocoa de Xamarin.Mac con controlador):

   

3. Escriba SubviewTable en Nombre SubviewTable haga clic en el botón Nuevo.

4. Haga doble clic en el archivo SubviewTable.xib para abrirlo para editarlo en Interface Builder y diseñar el Interfaz de usuario:

   

5. Conectar las acciones y salidas necesarias.

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

A continuación, edite SubviewTable.cs y agregue el código siguiente al archivo AwakeFromNib para rellenar la nueva vista cuando se cargue:

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

Agregue una enumeración al proyecto para realizar un seguimiento de la vista que se muestra actualmente. Por ejemplo, SubviewType.cs:

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

Edite el archivo .xib de la ventana que consumirá la vista y la mostrará. Agregue una vista personalizada que actuará como contenedor para la vista una vez que el código de C# lo cargue en la memoria y exponga la vista en una salida denominada :

la salida

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

A continuación, edite el archivo .cs de la ventana que mostrará la nueva vista (por ejemplo, MainWindow.cs)y agregue el código siguiente:

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

Cuando es necesario mostrar una nueva vista cargada desde un archivo .xib en el contenedor de la ventana (la vista personalizada agregada anteriormente), este código controla la eliminación de cualquier vista existente y su intercambio por la nueva. Busca ver que ya tiene una vista mostrada, si es así, la quita de la pantalla. A continuación, toma la vista que se ha pasado (como se carga desde un controlador de vistas) cambia su tamaño para que quepa en el área de contenido y la agrega al contenido para su presentación.

Para mostrar una nueva vista, use el código siguiente:

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

Esto crea una nueva instancia del Controlador de vistas para que se muestre la nueva vista, establece su tipo (tal y como especifica la enumeración agregada al proyecto) y usa el método agregado a la clase de la ventana para mostrar realmente la DisplaySubview vista. Por ejemplo:

Para obtener más información sobre cómo trabajar Windows en una aplicación de Xamarin.Mac, consulte nuestra documentación de Windows y diálogos.

Resumen

En este artículo se ha detallado cómo trabajar con archivos .xib en una aplicación de Xamarin.Mac. Hemos visto los distintos tipos y usos de archivos .xib para crear el Interfaz de usuario de la aplicación, cómo crear y mantener archivos .xib en el Interface Builder de Xcode y cómo trabajar con archivos .xib en código de C#.

Vínculos relacionados

• MacImages (ejemplo)
• Hello, Mac
• Windows
• Menús
• Diálogos
• Trabajar con imágenes
• Directrices de la interfaz humana de macOS