Storyboards no Xamarin.Mac – Início Rápido
Como uma introdução rápida ao uso de Storyboards para definir a Interface do Usuário de um aplicativo Xamarin.Mac, vamos iniciar um novo projeto Xamarin.Mac. Selecione Aplicativo Mac>>Cocoa App e clique no botão Avançar:
Use o Nome do Aplicativo de MacStoryboard e clique no botão Avançar :
Use o Nome do Projeto e o Nome da Solução padrão e clique no botão Criar :
No Gerenciador de Soluções, clique duas vezes no Main.storyboard arquivo para abri-lo para edição no Construtor de Interfaces do Xcode:
Como você pode ver acima, o Storyboard padrão define a Barra de Menus do aplicativo e sua janela main com ele Exibir Controlador e Exibição. Para nosso aplicativo de exemplo, vamos criar uma interface do usuário que tenha uma exibição de conteúdo main de um lado e uma exibição de inspetor na segunda.
Para fazer isso, primeiro precisaremos remover o Controlador de Exibição e o Modo de Exibição padrão que vem com o Storyboard selecionando-o no Construtor de Interfaces e pressionando a tecla Delete :
Em seguida, digite split na área Filtro , selecione o Controlador de Exibição de Divisão Vertical e arraste-o para a Superfície de Design:
Observe que o controlador incluiu automaticamente dois Controladores de Exibição filho (e suas exibições relacionadas), com fio para os lados esquerdo e direito da exibição dividida. Para vincular o modo de exibição dividido à janela pai, pressione a tecla Control , clique no Controlador de Janela (o círculo azul no quadro do Controlador de Janela) e arraste uma linha para o Controlador de Modo de Exibição Dividido. Selecione o conteúdo da janela no pop-up:
Isso unirá os dois elementos de interface usando um Segue:
Queremos colocar um Modo de Exibição de Texto no lado esquerdo do Modo de Exibição De Divisão e fazer com que ele preencha automaticamente a área disponível quando a Janela ou o Modo de Exibição de Divisão for redimensionado. Arraste uma Exibição de Texto para o controlador de exibição superior anexado à Exibição de Divisão e clique na restrição Fixar layout automático (o segundo ícone à direita na parte inferior da Superfície de Design).
A partir daqui, clicaremos em todos os quatro ícones I-Beam ao redor da caixa delimitadora na parte superior do Popover restrições e clicaremos no botão Adicionar 4 Restrições na parte inferior para adicionar as restrições necessárias.
Se retornarmos ao Visual Studio para Mac e executarmos o projeto, observe que a Exibição de Texto redimensiona automaticamente para preencher o lado esquerdo do Modo de Exibição De Divisão à medida que a Janela ou a divisão são redimensionadas:
Como vamos usar o lado direito da exibição dividida como uma área inspetor, queremos que ela tenha um tamanho menor e permita que ela seja recolhida. Retorne ao Xcode e edite o Modo de Exibição para o lado direito selecionando-o na Superfície de Design e clicando no Inspetor de Tamanho. A partir daqui, insira uma Largura de 250:
Em seguida, selecione a caixa de seleção Dividir Item que representa o lado direito, defina uma Prioridade de Retenção mais alta e clique na caixa de seleção Usuário Pode Recolher :
Se voltarmos ao Visual Studio para Mac e executarmos o projeto agora, observe que o lado direito mantém o tamanho menor e a janela é redimensionada:
Definindo uma apresentação segue
Vamos definir o layout do lado direito do Modo de Exibição Dividida para atuar como inspetor para as propriedades do texto selecionado. Arrastaremos alguns controles para a exibição inferior para layout da interface do usuário do inspetor. Para o último controle, queremos exibir um popover que permite que o usuário selecione entre quatro estilos de caractere predefinidos.
Adicionaremos um Botão ao Inspetor e um Controlador de Exibição à Superfície de Design. Redimensionaremos o Controlador de Exibição para ter o tamanho que queremos que nosso Popover seja e adicionaremos quatro Botões a ele. Em seguida, controlaremos o clique com a tecla no botão no Modo de Exibição inspetor e arrastaremos para o Controlador de Exibição que representará nosso popover:
No menu pop-up, selecionaremos Popover:
Por fim, selecionaremos o Segue na Superfície de Design e definiremos a Borda Preferencial como Esquerda. Em seguida, arrastaremos uma linha do Modo de Exibição de Âncora para o Botão ao qual queremos que o popover seja anexado:
Se retornarmos ao Visual Studio para Mac, execute o aplicativo e clique no botão Nenhum no Inspetor, o popover será exibido:
Criando preferências de aplicativo
A maioria dos aplicativos macOS padrão fornece uma Caixa de Diálogo de Preferência que permite que o usuário defina várias opções que controlam vários aspectos do aplicativo, como aparência ou contas de usuário.
Para definir uma janela de diálogo de preferência padrão, primeiro arraste um Controlador de Exibição de Tabulação para a Superfície de Design:
Novamente, isso virá automaticamente com dois controladores de exibição filho anexados. Por exemplo, adicionaremos um rótulo a cada exibição que será centralizada dentro dele:
Em seguida, queremos exibir a janela Preferências quando o usuário selecionar o item de menu Preferências... . Na Barra de Menus, selecione o item de menu preferências, Clique na tecla Control e arraste uma linha para o controlador de exibição de tabulação:
No pop-up, selecionaremos Modal para mostrar essa janela como uma Caixa de Diálogo Modal:
Se salvarmos nossas alterações, retornaremos ao Visual Studio para Mac, executaremos o aplicativo e selecionaremos o item de menu Preferências..., nossa nova caixa de diálogo Preferências será exibida:
Você pode notar que isso não se parece com uma janela de diálogo de preferência de aplicativo macOS padrão. Para corrigir isso, inclua dois arquivos de imagem na pasta do Resources aplicativo Xamarin.Mac no Gerenciador de Soluções e retorne ao Construtor de Interfaces do Xcode.
Selecione o Controlador de Exibição de Guia e alterne seu Estilo para a Barra de Ferramentas:
Selecione cada Guia e dê a ela um Rótulo e selecione uma das imagens para representá-la:
Se salvarmos nossas alterações, retornarmos ao Visual Studio para Mac, executarmos o aplicativo e selecionarmos o item de menu Preferências... , a caixa de diálogo agora será exibida como um aplicativo macOS padrão:
Para obter mais informações, consulte nossa documentação Trabalhando com imagens, menus, Windows e caixas de diálogo .