Layout do contêiner

O layout de um contêiner ajuda a criar um layout complexo de sua escolha de modo fácil e simples. Quando o controle do layout de um contêiner é adicionado, por padrão, um único contêiner fica disponível. É possível adicionar outros contêineres, clicando no sinal de “+”, na tela.

Os contêineres dentro do layout do contêiner podem ser reposicionados, bastando arrastar um contêiner e soltá-lo em qualquer lugar dentro do layout. Os contêineres podem ser redimensionados, arrastando seu canto. É possível excluir um contêiner, selecionando-o e pressionando a tecla “delete” do teclado ou, então, a partir do modo de exibição de árvore.

O controle de layout de contêiner tem dois conjuntos de propriedades. Um para o layout do contêiner e outro para cada um dos contêineres dentro do layout.

Observação:

Recomendação

Os layouts de contêiner são melhores quando usados no nível da página, ou seja, quando se deseja criar o layout de uma página com diferentes seções. Para alinhar e posicionar os controles na página, sugerimos o uso de Contêineres

Importante:

Avoid Nested Container Layouts. It is recommended to avoid nested container layouts for ease of maintenance and consistency between design time and runtime.

Propriedades de layout de contêiner

Geral

• Dica de ferramentas — São exibidas dicas de ferramentas sobre o layout do contêiner. Use a dica para fornecer informações adicionais sobre o controle.
• Hidden- If selected, hides the control in the runtime.
• Desabilitado — Quando selecionado, desabilita o controle no tempo de execução.

Events

Não há eventos.

Estilo

• Cor de fundo — Conjuntos de cores de fundo do layout do contêiner.
• Fonte — Define a família de fontes para o layout do contêiner. Todos os contêineres dentro do layout terão a mesma família de fontes do layout.
• Margin- Sets the margin of the layout. By default 0px margin is set. Top/Bottom and Left/Right margin properties are combined. These properties can be unlinked using the unlink button on the right side of the Margin section heading.
• Preenchimento — Define o preenchimento do layout. Por padrão, o preenchimento O px vem definido. As propriedades de preenchimento Superior/Inferior e Direita/Esquerda são combinadas. Essas propriedades podem ser desvinculadas com o ícone de desvinculação, que fica do lado direito do cabeçalho, na seção de preenchimento, caso outros valores de preenchimento precisarem ser definidos para cada lado.
• Tamanho — A largura e a altura do layout podem ser definidas na seção de Tamanho. A largura padrão é definida como 100%. A altura do layout se ajusta automaticamente, com base nos contêineres dentro dele, pois está definido como “Auto”.

Container Properties

Geral

• Hidden- If selected, hides the control in the runtime.
• Desabilitado — Quando selecionado, desabilita o controle no tempo de execução.

Events

• Clicando em — Configure o que acontece ao se clicar no contêiner.

Estilo

• Layout — Determine como os controles dentro do contêiner serão posicionados:
  • Direction (Horizontal/Vertical) - Controls are arranged one below the other (vertical) or side by side (horizontal).
  • Alignment- Controls alignment within the template ( Left, Center, Right & Stretch for Vertical direction and Top, Middle, Bottom, Stretch for Horizontal direction).
  • Justify- Top, Middle, Bottom & Distribute for Vertical direction and Left, Center, Right & Distribute for Horizontal direction.
  • Permitir encapsulamento — se habilitada, encapsula o controle no contêiner se não houver espaço suficiente.
• Cor de fundo — Conjuntos de cores de fundo do contêiner.
• Borda — Define a borda do controle. Com relação à borda, é possível configurar a espessura, a cor e o raio da borda.
• Fonte — Define a família de fontes para o contêiner. Todos os controles dentro do contêiner terão a mesma família de fontes do contêiner.