> For the complete documentation index, see [llms.txt](https://docs.gvinci.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gvinci.com.br/manual-do-usuario/ide/untitled-1/gvinci-controles-less-than-f6-greater-than/controles-responsivos/layoutcontainer/prop-layoutcontainer.md). # Prop: LayoutContainer Propriedades ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-Mbq7pVFmdh1SpzpgpCW%2F-Mbq9juWmMJ_H0FHZnTE%2Fimage.png?alt=media\&token=1cc6d4e0-888f-44f6-ba07-b8074fca5780) ## Aparência ### BackColor Defina uma cor de fundo para o controle. Clique no extensor da propriedade e selecione entre Personalizar (incluindo Gradiente), Cores do sistema e Web. ### BackgroundImage Selecione uma imagem de fundo através da galeria de imagens clicando no botão extensor da propriedade. ### BackgroundPosition ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-Mbq7pVFmdh1SpzpgpCW%2F-MbqBLzMfT_Si4OB_yP5%2Fimage.png?alt=media\&token=77acae9f-5d37-4e1b-aa16-7e5db83e8aaa) Define o posicionamento da imagem de fundo na área interna do LayoutContainer. None - Imagem é posicionada no ### BackgroundRepeat Selecione o modo que deseja que a imagem de fundo seja repetida. ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-Mbq7pVFmdh1SpzpgpCW%2F-MbqBVFLiYOdwHN-4NL1%2Fimage.png?alt=media\&token=67009fa5-4366-4378-a03e-100580245b5f) NoRepeat - Imagem aparece apenas uma vez. Repeat - Imagem de fundo é repetida de modo a preencher todo o fundo lado a lado. RepeatX - Imagem de fundo é repetida horizontalmente, no eixo X. RepeatY - Imagem de fundo é repetida verticalemtne, no eixo Y. ### BackgroundSize ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-Mbq7pVFmdh1SpzpgpCW%2F-MbqBrdbETaWTU-mEvzv%2Fimage.png?alt=media\&token=3a1bd5e9-bc5f-46e8-9b38-ba11f2d42c25) ### BackgroundStretch ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-Mbq7pVFmdh1SpzpgpCW%2F-MbqByrfmmYMaNjqcL83%2Fimage.png?alt=media\&token=b72af80c-6c67-4ebc-adb6-dfb79ef41120) ### ContainerType ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-Mbq7pVFmdh1SpzpgpCW%2F-MbqC5q3UEmbBpoSOrFi%2Fimage.png?alt=media\&token=e91e9371-e013-4e3e-887a-1c9279b8acdb) ## Diversos ### ExtraProperties Defina propriedades extras para o controle ASP.NET/HTML. O controle LayoutContainer é gerado como um objeto do tipo div. ```
``` Veja que por padrão o controle tem as propriedades "id" e "class". Usando a propriedade ExtraProperties, poderá adicionar mais propriedades que serão geradas para o objeto div correspondente ao LayoutContainer que está definindo as propriedades, obtendo uma customização de um controle padrão, conforme sua necessidade de projeto. ### ExtraStyleProperties As propriedades extras de estilo são adicionadas no arquivo .CSS específico de cada página. Será criada uma classe com um prefixo "c\_" no arquivo .CSS do módulo em questão e acrescentado o ID do controle LayoutContainer onde estarão as definições definidas nesta propriedade. Assim, se seu LayoutContainer se chamar "LayoutContainer1", na propriedade ID, então, no arquivo .CSS da página, existirá uma definição como abaixo: ``` .c_LayoutContainer1 { border: 8px; background-size: auto; cursor: inherit; } ``` Na propriedade ExtraStypeProperties, ao clicar no botão extensor da propriedade, é aberto o SimpleEditor. Onde irá editar a lista de propriedades e valores, no seguinte padrão: nomepropriedade: valorpropriedade; Caso precise definir apenas algumas poucas propriedades, poderá editar diretamente no campo da propriedade ou clique no botão extensor para que todo o texto com as definições seja aberto para edição. ## Layout ### ShowGrid {% hint style="danger" %} Propriedade não está em uso atualmente e pode ser retirada e futuras versões. {% endhint %} ### VerticalAlignment ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-MbrBMxCp3PBaa2epRVH%2F-MbrEBD9PpOyTlov5AJS%2Fimage.png?alt=media\&token=80c17784-c3bb-45ea-8b16-246e4d08fcf3) Define o alinhamento vertical do controle LayoutContainer com relação ao Form. A opção "Manual" determina um alinhamento livre, conforme posicionamento feito arrastando o controle com o mouse ou usando as teclas de setas de movimentação para cima ou para baixo. A opção "Top" alinha o controle no topo do Form. A opção "Center" centraliza o controle verticalmente na região central do formulário. Enquanto que a opção "Bottom" alinha verticalmente o controle na parte inferior do Form. ### ZIndex Define a ordem de empilhamento de objetos. Um objeto com valor maior de ZIndex estará sempre na frente de objetos com ZIndex menor. As teclas CTRL+K e CTRL+Q levam o objeto a um maior ZIndex ou menor ZIndex, respectivamente. Fazendo com que um controle fique mais para frente ou mais para trás de outro. O valor da propriedade pode ser editado diretamente. Na barra de ferramentas da janela de design, os botões destacados na imagem abaixo são responsáveis por trazer um objeto para a frente dos demais ou levar o objeto para trás dos demais. Portanto, alterando o ZIndex dos mesmos: ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-MbrBMxCp3PBaa2epRVH%2F-MbrHNd6OeUbHVN7_C35%2Fimage.png?alt=media\&token=edf63de5-e434-4057-8341-7518a7d13d38) ## Miscellaneous ### ID Define um nome ou identificação para o controle, de modo que possa ser referenciado em código e também seja identificado de forma unívoca nos locais onde são listados. Exemplo: ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-MbrHQx3v3TM5w1tQeZN%2F-MbrIEI3hzT1e6G3gfjn%2Fimage.png?alt=media\&token=cfd5ed04-f743-439b-bf7b-9af9a61f27f6) No topo do painel de propriedades são listados numa caixa de seleção todos os controles posicionados na tela. Sendo exibido do lado esquerdo o ID do controle e do lado direito o tipo do controle. O nome do controle é de livre escolha, evitando-se o uso de palavras-chaves que corresponda a comandos das linguagens de programação envolvidas. Devem começar com letras, evitar caracteres especiais e preferencialmente usar nomes autoexplicativos que tenham significado claro para o objetivo que estão empregados no projeto. O Gvinci gera um ID padrão para cada controle adicionado na tela de design, usando o nome do tipo de controle seguido de um valor numérico sequencial. Dessa forma, já é possível a identificação de cada controle, mas fique livre para renomeá-los como achar adequado. ## Visibility ### Display ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-MbrJCvnFVTFmjOpcuiM%2F-MbrLzgO0S3gDo_6LSWF%2Fimage.png?alt=media\&token=ca64b046-8fe9-408e-bb83-aaeadb065808) Define a visibilidade dos controles conforme as definições de [Display do Bootstrap](https://getbootstrap.com/docs/4.0/utilities/display/). Veja também: e ### LoginVisibility ![](https://3521539368-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVmi7h0JAU6xMpwoFs2%2F-MbrJCvnFVTFmjOpcuiM%2F-MbrMLaO2qECzRV5FduE%2Fimage.png?alt=media\&token=5b2da157-6dfc-4e1c-8230-e12344927389) Define a visibilidade do controle conforme o status da autenticação. Always - Exibe sempre o controle. OnlyLoggedIn - Exibe o controle apenas quando existe uma seção autenticada ativa. OnlyLoggedOut - Exibe o controle apenas quando não existe uma seção autenticada ativa.