Um layout define o tamanho da janela do aplicativo e o arranjo básico de componentes de visualização na aplicação de tempo real. Pode-se definir partes fixas como menus e índices e partes que são substituidas quando se passa de uma tela para a outra. Certifique-se de planejar como você deseja utilizar as telas.

Criação de Layouts

Por exemplo, considere se você quer uma barra de menu, barra de ferramentas ou outros elementos para exibir sempre no topo da janela da aplicação.
Muitas vezes você pode precisar de um único layout para enquadrar qualquer das telas com toda a informação na aplicação. Usa-se a aba Layouts no ambiente de Displays para a definição de layouts.

NOTA - A última Tela listada na aba Layout é a única que é substituída quando você troca de Tela. Por exemplo, os novos projetos incluem um layout padrão chamado Startup. Veja na figura que há outras duas telas, ou componentes, neste Layout: AN_Header (uma barra de ferramentas) e AN_Footer (um rodapé). A tela AN_MainPage que está listada na última linha do DataGrid é a área que, por default, será trocada quando você solicita para a aplicação Abrir outra tela.

Na figura, os botões acima do DataGrid à esquerda na barra servem, respectivamente, para:

Adicionar nova linha e descrever posição da tela
Retirar a linha selecionada
Subir a linha selecionada
Descer a linha selecionada

Para criar um novo layout:

Vá para Edit> Displays> Layouts .
Clique o botão New. Será mostrada a janela para a criação de Layouts.

Digite ou selecione as informações, conforme necessário.

Coluna	Descrição
Layout name	Entre com um Nome para o layout
Layout	Selecione o tipo de Layout sendo criado: DockPanel - Selecione este tipo para posicionar telas em relação ao layout e a outras telas. Canvas - Selecione para posicionar telas em uma posição absoluta, introduzindo a posição em unidades WPF (pixels independentes do monitor).
Description	Digite uma descrição desse layout.

Clique em OK. A janela de criação de Layouts será fechada
No canto superior direito da aba Layouts, digite ou selecione as informações, conforme necessário:

Coluna	Descrição
Width	Digite a altura, em unidades WPF (pixels independentes do monitor), do layout. Esta é a altura da tela da aplicação em tempo de execução.
Height	Digite a largura, em unidades WPF (pixels independentes do monitor), do layout. Esta é a largura do pedido de execução
Background	Selecione uma cor para fundo deste layout.

Clique em Adicionar linha para adicionar uma nova linha para posicionar uma Tela
Digite ou selecione as informações, conforme necessário. As Telas que você adiciona são as primeiras telas que o layout utilizará.

Coluna	Descrição
Page	Selecione uma Tela que você deseja incluir no layout. Somente Telas tipo Page podem ser utilizadas para posicionamento em Layouts.
Docking	Selecione a margem da área principal de visualização da aplicação, para ser o local de fixação (docagem) para esta Tela: Left (esquerda), Top (topo), Right (direita), Bottom (inferior)
HorizontalAlign	Selecione o alinhamento horizontal desta tela no Layout: Left (esquerda), Center (centro), Right (direita)
VerticalAlign	Selecione o alinhamento vertical desta tela no Layout: Top (topo), Center (centro), Bottom (inferior)

O exemplo de Layout StartUp

O Layout Startup, mostrado no DataGrid acima, vem no projeto Default do Action.NET. A seguir informações sobre cada uma destas áreas:
Trata-se de um esquema definindo uma tela de cabeçalho outra de rodapé e a tela principal na parte central do monitor. Para que sejam mostradas como uma única tela deve-se definir por um Layout conforme apresentado abaixo no layout Startup:

AN_Header: é o cabeçalho da tela ajustado no topo à esquerda. Como a dimensão do layout é 1024 x 768, para o cabeçalho ocupar toda a parte horizontal superior do layout deverá ter comprimento (width) de 1024. No caso desta aplicação, sua dimensão é 1024 x 60.

AN_Footer: é o rodapé da tela, ajustado na parte inferior da tela à esquerda. De forma similar ao cabeçalho, deverá ter comprimento de 1024 para ocupar toda a parte inferior da tela. No caso desta aplicação sua dimensão é 1024 x 45.

AN_MainPage: será o miolo do layout com as diversas telas de processo que serão utilizadas. Nesta aplicação, considerando que o cabeçalho tem altura (Height) de 60 pontos e o rodapé 45, as telas de miolo deverão ter dimensão vertical de 768 – 60 – 45 = 663. Assim, todas as telas inseridas no miolo deste layout deverão ter a dimensão de 1024 x 663.

NOTA - Quando em um projeto existe mais de um layout, antes de se abrir uma tela deve-se abrir seu layout e a tela sempre será colocada no último nível do layout (no caso acima nível 2). A título de exemplo, abaixo é mostrado um script abrindo um layout e uma tela.

@Layout.AN_NoFilterReports.Open(); 
@Display.AN_HistoricEventsSummary.Open();

Configurações da área de Visualização

As configurações da área de visualização controlam como o aplicativo deve exibir as telas nos monitores dos computadores clientes, isto é que utilizam os módulos de visualização do Action.NET.
Para esta configuração há botões e controles na parte superior do ambiente Display, mostrados na figura abaixo.
Estas configurações são diferentes para clientes normais MS-Windows daquelas necessárias para clientes utilizando o iOS dos tablets e iPhones da Apple, ou no formato HTML5. As próximas seções detalham estas configurações.

Clientes MS-Windows ("Desktop")

Para definir as configurações do cliente de desktop:

Vá para Edit>Displays>Displays .
Clique em Clients para configurar desktops que usam Windows. Aparece a janela para configuração.
Digite ou selecione as informações, conforme necessário e clique em OK

Coluna	Descrição
Maximize When Open	Selecione para maximizar a janela do cliente de forma a se ajustar ao monitor.
Stretch	Escolha como o layout deve se estender no monitor cliente quando usando o aplicativo: None - Layout não deve se redimensionar: Deve ser mostrado o tamanho exato que foi configurado para o layout. Neste caso recomenda-se selecionar a opção de incluir a barra de rolagem. Fill ( Preencher) - O layout será redimensionado para preencher completamente o espaço disponível no monitor do cliente., sem levar em conta a proporção do layout original. Uniforme - O layout será redimensionado proporcionalmente ao tamanho do monitor do cliente, mantendo a proporção do layout. original. UniformToFill - O layout redimensionado tanto para manter a proporção como também para preencher completamente o espaço disponível no monitor do cliente. Isto pode resultar em cortar algumas partes da disposição.
Scrollbar	Selecione para visualização da barra de rolagem na janela do cliente.
Title	Digite um título para a janela do cliente.
MinimizeBox	Selecione para exibir o botão padrão de minimizar.
MaximizeBox	Selecione para exibir o botão padrão de maximização.
CloseBox	Selecione para exibir o botão padrão de fechar
ResizeBox	Selecione para exibir o puxador padrão de redimensionamento (canto inferior direito)
Menus	Selecione quais menus devem ser mostrados File Tools Security
Mouse Cursor Visible	Selecione para o ponteiro do mouse ser visível.
OnScreen Keyboard	Selecione para exibir um teclado numérico na tela.
Remote Client Comments	Selecione para proibir usuários do aplicativo de enviar comandos para o PLC
When Mouse Is Over Command areas	permitir objeto Alterar o Cursor - Selecione o tipo de cursor.
Verify Tag Quality on Client Displays	On undefined quality show - (Quando a qualidade for indefinida) Selecionar a opção e o caractere que deve ser mostrado quando a qualidade dos dados vindos de campo for indefinida. On OPC Bad quality show - Selecionar a opção e o caractere que deve ser mostrado quando o servidor OPC indica que a qualidade dos dados é ruim.
Multiples users on same computer Share user Logon	Os usuários podem executar múltiplas instâncias do aplicativo no mesmo computador. O usuário pode precisar logar como um usuário diferente de vez em quando. Selecione essa opção para alterar automaticamente o usuário conectado em todas as instâncias em execução do aplicativo no mesmo computador.
Initial Theme	Nome do tema a ser utilizado por default ao iniciar o programa

Digite o número de monitores que o visualizador Cliente vai usar.
Selecione o monitor e o Layout a ser mostrado quando o aplicativo é iniciado.

HTML5

Se for utilizar telas com formato no padrão HTML5, faça também as configurações, para tal.

Para configurar a área de trabalho para telas em HTML5:

Pressione o botão HTML5. Aparece a janela para configuração de HTML5.

Digite ou selecione as informações, conforme necessário e clique em OK .

Coluna	Descrição
Disable Commands	Selecione para proibir usuários do aplicativo de enviar comandos para o campo
Desktop Initial Page	Selecione a Tela que os usuários devem ver quando iniciar a aplicação.
Mobile Initial Page	Selecione a Tela que os usuários de Mobiles devem ver quando iniciar a aplicação no celular.

Nesta página:

Action.Net - Documentação

Utilizando Layouts