{"id":3715,"date":"2022-10-06T11:12:19","date_gmt":"2022-10-06T10:12:19","guid":{"rendered":"https:\/\/gdksoftware.com\/knowledgebase\/creating-a-custom-ui-with-devexpress"},"modified":"2022-11-01T17:53:40","modified_gmt":"2022-11-01T16:53:40","slug":"creating-a-custom-ui-with-devexpress","status":"publish","type":"knowledge","link":"https:\/\/gdksoftware.com\/pt-br\/base-de-conhecimento\/creating-a-custom-ui-with-devexpress","title":{"rendered":"Criando um UI customizada com DevExpress"},"content":{"rendered":"

Introdu\u00e7\u00e3o<\/h2>\n

Recentemente, temos trabalhado em um projeto que requer a cria\u00e7\u00e3o de uma interface de usu\u00e1rio totalmente personalizada. O objetivo deste projeto era criar uma interface de usu\u00e1rio que se assemelhasse muito a uma aplica\u00e7\u00e3o web moderna.<\/p>\n

O DevExpress tem sido excepcionalmente \u00fatil neste processo. Temos sido capazes de modificar muitos componentes usando uma skin personalizada que criamos atrav\u00e9s do editor de skin DevExpress. \u00c9 uma ferramenta que permite ao usu\u00e1rio customizar quase todos os aspectos dos componentes padr\u00e3o Delphi e DevExpress.<\/p>\n

Vou rever a customiza\u00e7\u00e3o de um \u00fanico componente como um exemplo de utiliza\u00e7\u00e3o do editor de skin.<\/p>\n

Editor de Skin<\/h2>\n

Com sua licen\u00e7a DevExpress, voc\u00ea tem acesso ao dxSkinEditor. O SkinEditor est\u00e1 localizado em sua pasta de instala\u00e7\u00e3o do DevExpress. Ap\u00f3s abri-la, voc\u00ea pode criar um novo projeto usando qualquer um dos modelos padr\u00e3o DevExpress. Para este exemplo, o bot\u00e3o b\u00e1sico ser\u00e1 modificado para um estilo personalizado de modo escuro.<\/p>\n

No painel lateral no lado esquerdo, voc\u00ea encontrar\u00e1 os grupos de produtos. Estes cont\u00eam os componentes que podem ser editados ordenados em grupos. O bot\u00e3o estar\u00e1 em Comum >Bot\u00e3o. Ap\u00f3s selecionar o bot\u00e3o, voc\u00ea ser\u00e1 atendido com estas configura\u00e7\u00f5es:<\/p>\n

\"\"<\/p>\n

Aqui voc\u00ea tem todas as propriedades habituais que tem em Delphi, mas tamb\u00e9m podemos mudar a imagem. Isto permitir\u00e1 que voc\u00ea tenha cantos arredondados nos bot\u00f5es, por exemplo. No primeiro dropdown \u00e0 esquerda, voc\u00ea ver\u00e1 todos os estados que precisam ser preenchidos. Para o bot\u00e3o, estes estados s\u00e3o: Normal, Quente, Apertado, Deficiente, Ativo e Checado. Para este exemplo, estarei usando a seguinte imagem para preencher estes estados.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Usando a Skin personalizada<\/h2>\n

Depois de fazer suas mudan\u00e7as, voc\u00ea deve construir sua skin personalizada. O SkinEditor salvar\u00e1 o projeto nos seguintes arquivos:<\/p>\n