# Prop: LayoutContainer ![](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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.gvinci.com.br/manual-do-usuario/ide/untitled-1/gvinci-controles-less-than-f6-greater-than/controles-responsivos/layoutcontainer/prop-layoutcontainer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.