Arquivos .xib no Xamarin.Mac

Este artigo aborda o trabalho com arquivos .xib criados no Construtor de Interfaces do Xcode para criar e manter interfaces de usuário para um aplicativo Xamarin.Mac.

Observação

A maneira preferida de criar uma interface de usuário para um aplicativo Xamarin.Mac é com storyboards. Esta documentação foi deixada no lugar por razões históricas e para trabalhar com projetos Xamarin.Mac mais antigos. Para obter mais informações, consulte nossa documentação de Introdução aos Storyboards .

Visão geral

Ao trabalhar com C# e .NET em um aplicativo Xamarin.Mac, você tem acesso aos mesmos elementos e ferramentas da interface do usuário que um desenvolvedor que trabalha no Objective-C Xcode faz. Como o Xamarin.Mac se integra diretamente ao Xcode, você pode usar o Construtor de Interfaces do Xcode para criar e manter suas interfaces de usuário (ou, opcionalmente, criá-las diretamente no código C#).

Um arquivo .xib é usado pelo macOS para definir elementos da interface do usuário do aplicativo (como Menus, Windows, Views, Labels, Text Fields) que são criados e mantidos graficamente no Construtor de Interfaces do Xcode.

An example of the running app

Neste artigo, abordaremos os conceitos básicos de como trabalhar com arquivos .xib em um aplicativo Xamarin.Mac. É altamente recomendável que você trabalhe com o artigo Olá, Mac primeiro, pois ele aborda os principais conceitos e técnicas que usaremos neste artigo.

Você pode querer dar uma olhada na seção Expondo classes C# / métodos paraObjective-Cdo documento Xamarin.Mac Internals também, ele explica os Register atributos e Export usados para conectar suas classes C# a Objective-C objetos e elementos da interface do usuário.

Introdução ao Interface Builder e ao Xcode

Como parte do Xcode, a Apple criou uma ferramenta chamada Interface Builder, que permite que você crie sua interface de usuário visualmente em um designer. O Xamarin.Mac integra-se fluentemente com o Construtor de Interfaces, permitindo-lhe criar a sua IU com as mesmas ferramentas que Objective-C os utilizadores.

Componentes do Xcode

Quando você abre um arquivo .xib no Xcode do Visual Studio para Mac, ele é aberto com um Project Navigator à esquerda, a hierarquia de interface e o Editor de interface no meio e uma seção Properties & Utilities à direita:

The components of the Xcode UI

Vamos dar uma olhada no que cada uma dessas seções do Xcode faz e como você as usará para criar a interface para seu aplicativo Xamarin.Mac.

Navegação do projeto

Quando você abre um arquivo .xib para edição no Xcode, o Visual Studio para Mac cria um arquivo de projeto Xcode em segundo plano para comunicar alterações entre ele e o Xcode. Mais tarde, quando você alternar de volta para o Visual Studio para Mac do Xcode, todas as alterações feitas neste projeto são sincronizadas com seu projeto Xamarin.Mac pelo Visual Studio para Mac.

A seção Navegação do projeto permite que você navegue entre todos os arquivos que compõem este projeto Xcode shim . Normalmente, você só estará interessado nos arquivos .xib nesta lista, como MainMenu.xib e MainWindow.xib.

Hierarquia de interface

A seção Hierarquia da Interface permite que você acesse facilmente várias propriedades importantes da Interface do Usuário, como seus Espaços Reservados e a Janela principal. Você também pode usar esta seção para acessar os elementos individuais (modos de exibição) que compõem sua interface do usuário e ajustar a maneira como eles são aninhados arrastando-os dentro da hierarquia.

Editor de interface

A seção Editor de Interface fornece a superfície na qual você esquematiza graficamente sua Interface do Usuário. Você arrastará elementos da seção Biblioteca da seção Propriedades e Utilitários para criar seu design. À medida que você adiciona elementos da interface do usuário (modos de exibição) à superfície de design, eles serão adicionados à seção Hierarquia de Interface na ordem em que aparecem no Editor de Interface.

Propriedades & utilitários

A seção Propriedades & Utilitários é dividida em duas seções principais com as quais trabalharemos, Propriedades (também chamadas de Inspetores) e a Biblioteca:

The Property Inspector

Inicialmente, esta seção está quase vazia, no entanto, se você selecionar um elemento no Editor de Interface ou na Hierarquia de Interface, a seção Propriedades será preenchida com informações sobre o elemento fornecido e as propriedades que você pode ajustar.

Na seção Propriedades há 8 diferentes guias de inspetor, conforme mostrado na ilustração a seguir:

An overview of all Inspectors

Da esquerda para a direita, essas guias são:

  • Inspetor de Arquivo – o Inspetor de Arquivo mostra informações do arquivo, como o nome do arquivo e o local do arquivo Xib que está sendo editado.
  • Ajuda Rápida – a guia Ajuda Rápida fornece ajuda contextual com base no que está selecionado no Xcode.
  • Inspetor de Identidade – o Inspetor de Identidade fornece informações sobre a exibição/controle selecionado.
  • Inspetor de Atributos – O Inspetor de Atributos permite personalizar vários atributos do controle/exibição selecionados.
  • Inspetor de Tamanho – O Inspetor de Tamanho permite controlar o tamanho e o comportamento de redimensionamento do controle/exibição selecionado.
  • Inspetor de Conexões – O Inspetor de Conexões mostra as conexões de saída e ação dos controles selecionados. Examinaremos Outlets e Ações em apenas um momento.
  • Inspetor de Ligações – O Inspetor de Ligações permite configurar controles para que seus valores sejam automaticamente vinculados a modelos de dados.
  • Inspetor de Efeitos de Exibição – O Inspetor de Efeitos de Exibição permite especificar efeitos nos controles, como animações.

Na seção Biblioteca, você pode encontrar controles e objetos para colocar no designer para criar graficamente sua interface do usuário:

An example of the Library Inspector

Agora que você está familiarizado com o Xcode IDE e o Construtor de Interfaces, vamos ver como usá-lo para criar uma interface de usuário.

Criando e mantendo janelas no Xcode

O método preferido para criar a Interface do Usuário de um aplicativo Xamarin.Mac é com Storyboards (consulte nossa documentação de Introdução aos Storyboards para obter mais informações) e, como resultado, qualquer novo projeto iniciado no Xamarin.Mac usará Storyboards por padrão.

Para alternar para o uso de uma interface do usuário baseada em .xib, faça o seguinte:

  1. Abra o Visual Studio para Mac e inicie um novo projeto Xamarin.Mac.

  2. No Solution Pad, clique com o botão direito do mouse no projeto e selecione Add>New File...

  3. Selecione Mac>Windows Controller:

    Adding a new Window Controller

  4. Digite MainWindow o nome e clique no botão Novo :

    Adding a new Main Window

  5. Clique com o botão direito do mouse no projeto novamente e selecione Adicionar>novo arquivo...

  6. Selecione o menu principal do Mac>:

    Adding a new Main Menu

  7. Deixe o nome como MainMenu e clique no botão Novo .

  8. No Solution Pad, selecione o arquivo Main.storyboard, clique com o botão direito do mouse e selecione Remover:

    Selecting the main storyboard

  9. Na caixa de diálogo Remover, clique no botão Excluir :

    Confirming the deletion

  10. No Solution Pad, clique duas vezes no arquivo Info.plist para abri-lo para edição.

  11. Selecione MainMenu na lista suspensa Interface Principal:

    Setting the main menu

  12. No Solution Pad, clique duas vezes no arquivo MainMenu.xib para abri-lo para edição no Construtor de Interfaces do Xcode.

  13. No Inspetor de biblioteca, digite object no campo de pesquisa e arraste um novo objeto para a superfície de design:

    Editing the main menu

  14. No Inspetor de Identidade, insira AppDelegate para a Classe:

    Selecting the App Delegate

  15. Selecione Proprietário do Arquivo na Hierarquia de Interface, alterne para o Inspetor de Conexão e arraste uma linha do delegado para o AppDelegateObjeto recém-adicionado ao projeto:

    Connecting the App Delegate

  16. Salve as alterações e retorne ao Visual Studio para Mac.

Com todas essas alterações, edite o arquivo AppDelegate.cs e faça com que ele tenha a seguinte aparência:

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

Agora, a Janela Principal do aplicativo é definida em um arquivo .xib incluído automaticamente no projeto ao adicionar um Controlador de Janela. Para editar o design do Windows, no Solution Pad, clique duas vezes no arquivo MainWindow.xib :

Selecting the MainWindow.xib file

Isso abrirá o design da janela no Construtor de Interfaces do Xcode:

Editing the MainWindow.xib

Fluxo de trabalho de janela padrão

Para qualquer janela que você cria e trabalha em seu aplicativo Xamarin.Mac, o processo é basicamente o mesmo:

  1. Para novas janelas que não são o padrão adicionado automaticamente ao seu projeto, adicione uma nova definição de janela ao projeto.
  2. Clique duas vezes no arquivo .xib para abrir o design da janela para edição no Construtor de Interfaces do Xcode.
  3. Defina todas as propriedades de janela necessárias no Inspetor de Atributos e no Inspetor de Tamanho.
  4. Arraste os controles necessários para criar sua interface e configure-os no Inspetor de Atributos.
  5. Use o Inspetor de Tamanho para manipular o redimensionamento dos elementos da interface do usuário.
  6. Exponha os elementos da interface do usuário da janela ao código C# por meio de saídas e ações.
  7. Salve suas alterações e volte para o Visual Studio para Mac para sincronizar com o Xcode.

Criando um layout de janela

O processo para o layout de uma Interface do Usuário no Construtor de Interface é basicamente o mesmo para cada elemento adicionado:

  1. Encontre o controle desejado no Inspetor de Biblioteca e arraste-o para o Editor de Interface e posicione-o.
  2. Defina todas as propriedades de janela necessárias no Inspetor de Atributos.
  3. Use o Inspetor de Tamanho para manipular o redimensionamento dos elementos da interface do usuário.
  4. Se você estiver usando uma classe personalizada, defina-a no Inspetor de Identidade.
  5. Exponha os elementos da interface do usuário ao código C# por meio de saídas e ações.
  6. Salve suas alterações e volte para o Visual Studio para Mac para sincronizar com o Xcode.

Por exemplo:

  1. No Xcode, arraste um botão de ação da seção Biblioteca:

    Selecting a button from the Library

  2. Solte o botão na janela no Editor de interface:

    Adding a button to the window

  3. Clique na propriedade Título no Inspetor de atributos e altere o título do botão para Click Me:

    Setting the button attributes

  4. Arraste um rótulo da seção Biblioteca:

    Selecting a label in the Library

  5. Solte o rótulo na janela ao lado do botão no Editor de interface:

    Adding a label to the window

  6. Pegue a alça direita no rótulo e arraste-a até que ela esteja perto da borda da janela:

    Resizing the label

  7. Com o rótulo ainda selecionado no Editor de Interface, alterne para o Inspetor de Tamanho:

    Selecting the Size Inspector

  8. Na Caixa de Dimensionamento Automático, clique no Colchete Vermelho Escurecido à direita e na Seta Horizontal Vermelho Escurecido no centro:

    Editing the Autosizing properties

  9. Isso garante que o rótulo se estenda para crescer e diminuir à medida que a janela é redimensionada no aplicativo em execução. Os colchetes vermelhos e a parte superior e esquerda da caixa de caixa de dimensionamento automático dizem ao rótulo para ser colado em seus locais X e Y determinados.

  10. Salve suas alterações na Interface do Usuário

À medida que você estava redimensionando e movendo controles, você deve ter notado que o Construtor de Interface fornece dicas úteis de ajuste que são baseadas nas Diretrizes de Interface Humana do OS X. Estas diretrizes irão ajudá-lo a criar aplicativos de alta qualidade que terão uma aparência familiar para usuários de Mac.

Se você olhar na seção Hierarquia de Interface , observe como o layout e a hierarquia dos elementos que compõem nossa Interface do usuário são mostrados:

Selecting an element in the Interface Hierarchy

A partir daqui, você pode selecionar itens para editar ou arrastar para reordenar elementos da interface do usuário, se necessário. Por exemplo, se um elemento da interface do usuário estivesse sendo coberto por outro elemento, você poderia arrastá-lo para a parte inferior da lista para torná-lo o item mais alto da janela.

Para obter mais informações sobre como trabalhar com o Windows em um aplicativo Xamarin.Mac, consulte nossa documentação do Windows .

Expondo elementos da interface do usuário ao código C#

Depois de terminar de definir a aparência da interface do usuário no Construtor de Interfaces, você precisará expor elementos da interface do usuário para que eles possam ser acessados a partir do código C#. Para fazer isso, você estará usando ações e saídas.

Definindo um controlador de janela principal personalizado

Para poder criar Outlets e Actions para expor elementos da interface do usuário ao código C#, o aplicativo Xamarin.Mac precisará estar usando um Controlador de Janela Personalizado.

Faça o seguinte:

  1. Abra o Storyboard do aplicativo no Construtor de Interfaces do Xcode.

  2. Selecione o na superfície de NSWindowController design.

  3. Alterne para o modo de exibição Inspetor de Identidade e digite WindowController como o Nome da classe:

    Editing the class name

  4. Salve suas alterações e retorne ao Visual Studio para Mac para sincronizar.

  5. Um arquivo WindowController.cs será adicionado ao seu projeto no Solution Pad no Visual Studio para Mac:

    The new class name in Visual Studio for Mac

  6. Reabra o Storyboard no Construtor de Interfaces do Xcode.

  7. O arquivo WindowController.h estará disponível para uso:

    The matching .h file in Xcode

Saídas e ações

Então, o que são saídas e ações? Na programação tradicional de interface do usuário do .NET, um controle na interface do usuário é exposto automaticamente como uma propriedade quando ele é adicionado. As coisas funcionam de modo diferente no Mac, simplesmente adicionar um controle a um modo de exibição não o torna acessível ao código. O desenvolvedor deve expor explicitamente o elemento de interface do usuário ao código. Para fazer isso, a Apple nos dá duas opções:

  • Saídas – saídas são análogas às propriedades. Se você conectar um controle a um Outlet, ele será exposto ao seu código por meio de uma propriedade, para que você possa fazer coisas como anexar manipuladores de eventos, métodos de chamada nele, etc.
  • Ações – ações são análogas ao padrão de comando no WPF. Por exemplo, quando uma Ação é executada em um controle, digamos um clique no botão, o controle chamará automaticamente um método em seu código. As ações são poderosas e convenientes porque você pode conectar vários controles à mesma Ação.

No Xcode, as saídas e ações são adicionadas diretamente no código por meio do controle arrastado. Mais especificamente, isso significa que, para criar uma tomada ou ação, você escolhe qual elemento de controle deseja adicionar uma tomada ou ação, mantenha pressionado o botão Controle no teclado e arraste esse controle diretamente para o código.

Para desenvolvedores do Xamarin.Mac, isso significa que você arrasta para os Objective-C arquivos de stub que correspondem ao arquivo C# onde deseja criar a saída ou a ação. O Visual Studio para Mac criou um arquivo chamado MainWindow.h como parte do projeto Xcode shim que ele gerou para usar o Construtor de Interfaces:

An example of a .h file in Xcode

Esse arquivo .h de stub espelha o MainWindow.designer.cs que é adicionado automaticamente a um projeto Xamarin.Mac quando um novo NSWindow é criado. Esse arquivo será usado para sincronizar as alterações feitas pelo Construtor de Interface e é onde criaremos suas saídas e ações para que os elementos da interface do usuário sejam expostos ao código C#.

Adicionando uma tomada

Com uma compreensão básica do que são saídas e ações, vamos examinar a criação de uma saída para expor um elemento da interface do usuário ao seu código C#.

Faça o seguinte:

  1. No Xcode, no canto direito superior da tela, clique no botão com o círculo duplo para abrir o Editor assistente:

    Selecting the Assistant Editor

  2. O Xcode mudará para um modo de exibição de divisão com o Editor de interface em um lado e um Editor de código no outro.

  3. Observe que o Xcode selecionou automaticamente o arquivo MainWindowController.m no Editor de códigos, o que está incorreto. Se você se lembra de nossa discussão sobre quais saídas e ações estão acima, precisamos ter o MainWindow.h selecionado.

  4. Na parte superior do Editor de Códigos, clique no Link Automático e selecione o arquivo MainWindow.h:

    Selecting the correct .h file

  5. O Xcode agora deve estar com o arquivo correto selecionado:

    The correct file selected

  6. A última etapa era muito importante. Se você não tiver o arquivo correto selecionado, você não poderá criar saídas e ações ou elas serão expostas à classe errada em C#!

  7. No Editor de Interface, mantenha pressionada a tecla Control no teclado e clique e arraste o rótulo que criamos acima para o editor de código logo abaixo do @interface MainWindow : NSWindow { } código:

    Dragging to create a new Outlet

  8. Uma caixa de diálogo será exibida. Deixe a Conexão definida como saída e digite ClickedLabel o Nome:

    Setting the Outlet properties

  9. Clique no botão Conectar para criar a tomada:

    The completed Outlet

  10. Salve as alterações no arquivo.

Adicionando uma ação

Em seguida, vamos examinar a criação de uma ação para expor uma interação do usuário com o elemento da interface do usuário ao seu código C#.

Faça o seguinte:

  1. Verifique se ainda estamos no Editor Assistente e se o arquivo MainWindow.h está visível no Editor de Códigos.

  2. No Editor de Interface, mantenha pressionada a tecla Control no teclado e clique e arraste o botão que criamos acima para o editor de código logo abaixo do @property (assign) IBOutlet NSTextField *ClickedLabel; código:

    Dragging to create an Action

  3. Altere o tipo de conexão para ação:

    Select an Action type

  4. Digite ClickedButton como o Nome:

    Configuring the Action

  5. Clique no botão Conectar para criar uma ação:

    The completed Action

  6. Salve as alterações no arquivo.

Com sua interface do usuário conectada e exposta ao código C#, alterne de volta para o Visual Studio para Mac e permita que ele sincronize as alterações do Xcode e do Construtor de Interfaces.

Escrevendo o código

Com sua interface do usuário criada e seus elementos de interface do usuário expostos ao código por meio de saídas e ações, você está pronto para escrever o código para dar vida ao seu programa. Por exemplo, abra o arquivo MainWindow.cs para edição clicando duas vezes nele no Solution Pad:

The MainWindow.cs file

E adicione o seguinte código à MainWindow classe para trabalhar com a saída de exemplo que você criou acima:

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

Observe que o NSLabel é acessado em C# pelo nome direto que você atribuiu a ele no Xcode quando você criou sua saída no Xcode, neste caso, ele é chamado ClickedLabelde . Você pode acessar qualquer método ou propriedade do objeto exposto da mesma forma que faria com qualquer classe C# normal.

Importante

Você precisa usar AwakeFromNib, em vez de outro método, como Initialize, porque AwakeFromNib é chamado depois que o sistema operacional carrega e instancia a interface do usuário do arquivo .xib. Se você tentou acessar o controle de rótulo antes que o arquivo .xib tenha sido totalmente carregado e instanciado, você receberá um NullReferenceException erro porque o controle de rótulo ainda não teria sido criado.

Em seguida, adicione a seguinte classe parcial à MainWindow classe:

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

Esse código é anexado à ação que você criou no Xcode e no Construtor de Interfaces e será chamado sempre que o usuário clicar no botão.

Alguns elementos da interface do usuário têm ações incorporadas automaticamente, por exemplo, itens na Barra de Menus padrão, como o itemopenDocument: de menu Abrir... (). No Solution Pad, clique duas vezes no arquivo AppDelegate.cs para abri-lo para edição e adicione o seguinte código abaixo do DidFinishLaunching 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 ();
    }
}

A linha principal aqui é [Export ("openDocument:")], ele informa NSMenu que o AppDelegate tem um método void OpenDialog (NSObject sender) que responde à openDocument: ação.

Para obter mais informações sobre como trabalhar com menus, consulte nossa documentação de menus .

Sincronizando alterações com o Xcode

Quando você alterna de volta para o Visual Studio para Mac a partir do Xcode, todas as alterações feitas no Xcode serão sincronizadas automaticamente com seu projeto Xamarin.Mac.

Se você selecionar o MainWindow.designer.cs no Solution Pad , poderá ver como nossa tomada e ação foram conectadas em nosso código C#:

Synchronizing Changes with Xcode

Observe como as duas definições no arquivo MainWindow.designer.cs:

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

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

Alinhe-se com as definições no arquivo MainWindow.h no Xcode:

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

Como você pode ver, o Visual Studio para Mac escuta as alterações no arquivo .h e, em seguida, sincroniza automaticamente essas alterações no respectivo arquivo .designer.cs para expô-las ao seu aplicativo. Você também pode notar que MainWindow.designer.cs é uma classe parcial, para que o Visual Studio para Mac não precise modificar MainWindow.cs que substituiria quaisquer alterações feitas na classe.

Você normalmente nunca precisará abrir o MainWindow.designer.cs sozinho, ele foi apresentado aqui apenas para fins educacionais.

Importante

Na maioria das situações, o Visual Studio para Mac verá automaticamente todas as alterações feitas no Xcode e as sincronizará com seu projeto Xamarin.Mac. Na improvável ocorrência de que a sincronização não aconteça automaticamente, retorne para o Xcode e depois novamente para o Visual Studio para Mac. Isso normalmente dará início a um ciclo de sincronização.

Adicionando uma nova janela a um projeto

Além da janela principal do documento, um aplicativo Xamarin.Mac pode precisar exibir outros tipos de janelas para o usuário, como Preferências ou Painéis do Inspetor. Ao adicionar uma nova janela ao seu projeto, você deve sempre usar a opção Cocoa Window with Controller , pois isso facilita o processo de carregamento da janela do arquivo .xib.

Para adicionar uma nova janela, faça o seguinte:

  1. No Solution Pad, clique com o botão direito do mouse no projeto e selecione Add>New File...

  2. Na caixa de diálogo Novo arquivo, selecione Xamarin.Mac>Cocoa Window with Controller:

    Adding an new Window Controller

  3. Digite PreferencesWindow para o Nome e clique no botão Novo.

  4. Clique duas vezes no arquivo PreferencesWindow.xib para abri-lo para edição no Interface Builder:

    Editing the window in Xcode

  5. Projete sua interface:

    Designing the windows layout

  6. Salve suas alterações e retorne ao Visual Studio para Mac para sincronizar com o Xcode.

Adicione o seguinte código ao AppDelegate.cs para exibir sua nova janela:

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

A var preferences = new PreferencesWindowController (); linha cria uma nova instância do Controlador de Janela que carrega a Janela do arquivo .xib e a infla. A preferences.Window.MakeKeyAndOrderFront (this); linha exibe a nova janela para o usuário.

Se você executar o código e selecionar as Preferências... no menu do aplicativo, a janela será exibida:

Screenshot shows the Preferences window displayed from the Application Menu.

Para obter mais informações sobre como trabalhar com o Windows em um aplicativo Xamarin.Mac, consulte nossa documentação do Windows .

Adicionando um novo modo de exibição a um projeto

Há momentos em que é mais fácil dividir o design do Windows em vários arquivos .xib mais gerenciáveis. Por exemplo, como alternar o conteúdo da Janela principal ao selecionar um item da Barra de Ferramentas em uma Janela de Preferências ou trocar o conteúdo em resposta a uma seleção da Lista de Fontes.

Ao adicionar uma nova View ao seu projeto, você deve sempre usar a opção Cocoa View with Controller , pois isso facilita o processo de carregamento da View do arquivo .xib.

Para adicionar um novo modo de exibição, faça o seguinte:

  1. No Solution Pad, clique com o botão direito do mouse no projeto e selecione Add>New File...

  2. Na caixa de diálogo Novo arquivo, selecione Xamarin.Mac>Cocoa View with Controller:

    Adding a new view

  3. Digite SubviewTable para o Nome e clique no botão Novo.

  4. Clique duas vezes no arquivo SubviewTable.xib para abri-lo para edição no Construtor de Interface e Criar a Interface do Usuário:

    Designing the new view in Xcode

  5. Conecte todas as ações e saídas necessárias.

  6. Salve suas alterações e retorne ao Visual Studio para Mac para sincronizar com o Xcode.

Em seguida, edite o SubviewTable.cs e adicione o seguinte código ao arquivo AwakeFromNib para preencher o novo View quando ele for carregado:

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

Adicione um enum ao projeto para controlar qual exibição está sendo exibida no momento. Por exemplo, SubviewType.cs:

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

Edite o arquivo .xib da janela que consumirá a exibição e a exibirá. Adicione um Modo de Exibição Personalizado que atuará como o contêiner para o Modo de Exibição depois que ele for carregado na memória pelo código C# e o exporá a uma saída chamada ViewContainer:

Creating the required Outlet

Salve suas alterações e retorne ao Visual Studio para Mac para sincronizar com o Xcode.

Em seguida, edite o arquivo de .cs da janela que exibirá o novo modo de exibição (por exemplo, MainWindow.cs) e adicione o seguinte código:

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

Quando precisamos mostrar um novo View carregado de um arquivo .xib no Contêiner da Janela (o Modo de Exibição Personalizado adicionado acima), esse código lida com a remoção de qualquer modo de exibição existente e a troca pelo novo. Parece vê-lo que você já tem uma exibição exibida, se assim for, ele o remove da tela. Em seguida, ele usa o modo de exibição que foi passado (conforme carregado de um controlador de exibição), redimensiona-o para caber na área de conteúdo e adiciona-o ao conteúdo para exibição.

Para exibir um novo modo de exibição, use o seguinte código:

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

Isso cria uma nova instância do View Controller para o novo modo de exibição a ser exibido, define seu tipo (conforme especificado pelo enum adicionado ao projeto) e usa o DisplaySubview método adicionado à classe Window para realmente exibir o modo de exibição. Por exemplo:

Screenshot shows Table View selected in the Working with Images window.

Para obter mais informações sobre como trabalhar com o Windows em um aplicativo Xamarin.Mac, consulte nossa documentação do Windows e Diálogos .

Resumo

Este artigo deu uma olhada detalhada no trabalho com arquivos .xib em um aplicativo Xamarin.Mac. Vimos os diferentes tipos e usos de arquivos .xib para criar a Interface do Usuário do seu aplicativo, como criar e manter arquivos .xib no Construtor de Interface do Xcode e como trabalhar com arquivos .xib em código C#.