Em versões anteriores do Delphi, para melhorarmos a aparência de nossas aplicações, era necessário lançar mão de alguns artifícios externos, com por exemplo, instalar componentes de terceiros que habilitavam recursos conhecidos como Skins. Assim, poderíamos mudar rapidamente o visual de nosso software ou deixar que o próprio usuário final escolhesse o skin que melhor lhe atendesse.
Agora não precisamos mais buscar componentes de terceiros para isso. O próprio Delphi já nos disponibiliza este recurso, que nele é chamado de VCL Styles.
Abaixo, a aplicação que desenvolvi no post LiveBindings, sem o VCL Style aplicado:
Para aplicarmos um Style é muito simples, basta acessar o menu ProjectOptions (Shift + Ctrl + F11) e em ApplicationAparence marcar o(s) estilo(s) que você deseja. Veja que ao clicar em cima de um estilo o botão Preview é ativado. Desta forma, você terá uma prévia de como ficará o seu form quando o estilo for aplicado:
Após selecionar o estilo desejado, em Default style, escolha o que irá ser selecionado quando o aplicativo for executado. Vamos escolher Golden Graphite:
Ao executarmos a aplicação, o form já aparece com o estilo aplicado:
Fácil, não é mesmo?!
É possível alterar e até mesmo criar novos estilos.
No meu tools, temos o VCL Style Designer:
Ele nos possibilita personalizar nossos “styles”. Vamos dar uma olhada:
No lado esquerdo se encontram todos os objetos visuais que poderão ser personalizados. Ao centro, o objeto que será editado. E a esquerda, o Inspector (propriedades a serem alteradas).
Você poderá ir personalizando objeto por objeto, o que é um processo mais trabalhoso, porém tem a vantagem de ser uma personalização mais completa. Outra forma é editar a imagem diretamente. Para isso, clique em images e selecione style.png. Aparece a imagem que você vê na figura acima. Clique em Export, para salvar a imagem padrão no disco.
Agora, com um software de edição de imagens você poderá alterar à vontade. Por exemplo, eu aqui utilizo o Gimp:
Não é tão complicado ajustar a imagem de forma que fique como desejamos. Por exemplo, vou selecionar alguns botões com a ferramenta de selação do Gimp e aplicar colorizar:
Vamos alterar também a cor dos forms e aplicar o efeito de nuvem (eu sei, estou exagerando :)):
E para finalizar, vamos alterar a cor dos butons (e fazer um design totalmente louco :)):
Agora, vamos salvar a imagem e voltar para VCL Style Designer. Antes de importar a imagem que acabamos de editar, dê um nome para o seu style em File/Save as…, localize a pasta Styles, coloque o nome e salve:
A pasta Styles fica em:
Salve seus styles sempre neste caminho para que o style apareça no Delphi depois. Agora que temos o nosso estilo salvo, vamos atualizar a imagem style.png para relfetir as alterações feitas na imagem que editamos anteriormente. Para isso:
Defina o nome do seu estilo:
Salve (File/Save) e feche o VCL Style Designer. Volte para o Options/Application/Aparence e escolha o seu estilo:
Execute a aplicação e veja como ficou o seu form:
Não me julguem! 
Realmente não ficou bom, mas já deu para perceber que as possibilidades de ajustes no design do form são imensas.
Fico por aqui, espero que tenham gostado.
Abraços.
Contato:
luiz_sistemas@hotmail.comPosts Relacionados:
Luiz Carlos
Desenvolvedor de software desde 1995. Em 1998, abriu sua própria empresa, a Lukas Sistemas, desde então passou a atender diversas empresas, principalmente autopeças. Apaixonado por Delphi, porém não o impede de flertar com outras linguagens sempre que possível. Mora na cidade de Balsas/MA com sua esposa e dois filhos.
Muito legal Luiz Carlos,
Gostei muito do seu blog. Parabéns.
Obrigado Marcos.
Fico feliz que tenha gostado.
legal.
parabéns..
Seu blog ja esta na minha lista de visita diária.
Muito Obrigado.
Obrigado Luis pela visita!
Vc é o cara mano!! Tá show.
Bacana irmao, otima explicaçao.
Muito boa a sua dica.
Mas Luiz, fica uma pergunta:
Se eu quiser colocar as mesmas opções do VCL Styles em alguma opção do meu programa e deixar o usuário escolher? Como faço para utilizar o VCL Styles do Delphi XE 2 em modo de programação para o usuário ter acesso aos estilos diretamente no programa ?
Gilmar
Caro Gilmar, obrigado pela visita.
Atualmente estou sem o XE2 (sem licensa
), mas pelo que vi, o processo é simples. Coloque os arquivos de styles numa pasta dentro da pasta do seu sistema. Adicione a unit Vcl.Styles ao seu form principal.
Agora você deve registrar os estilos que irá utilizar, para isto crie uma função que verifica se o estilo desejado é válido. Será mais ou menos assim:
procedure RegistraEstilo(const NomeArqEstilo: string); begin try if TStyleManager.IsValidStyle(NomeArqEstilo) then TStyleManager.LoadFromFile(NomeArqEstilo); //apenas lê e registra um VCL Style else application.MessageBox('O estilo escolhido é inválido!','Aviso',Mb_Ok); end;O parâmetro NomeArqEstilo é o endereço completo do arquivo, ou seja, diretório + nome do arquivo de estilo.
Através da função acima você registrou o style no seu sistema, porém não alterou em nada o design do programa. Para isso, voce deve setar o novo estilo sempre que desejar alterar a aparência:
TStyleManager.SetStyle('NomeDoEstilo');Acho que é isso, Gilmar.
Abraços.
Boa tarde Luiz Carlos, estou tentando implementar esse recurso de troca do estilo para que o usuário escolha qual ele vai usar. Acontece que consigo fazer isso na minha máquina, que tenho o Delphi XE2 instalado, mas não consigo fazer funcionar na máquina do cliente. Com certeza estou fazendo alguma besteira, pode me ajudar nessa situação?
Simplesmente não funciona sem qualquer erro ou tem alguma mensagem?
Me dê mais informações sobre como está implementando o recurso.
Abraços.
Pois é, utilizo o comando TStyleManager.TrySetStyle(‘nome do arquivo de estilo’); logo que inicio o programa. Nessa linha tudo bem enquanto estou rodando na IDE o sistema. Mas se aparto o EXE e instalo em outra máquina ele reclama que não existe o arquivo de estilo. Ou seja, entendi que está faltando os arquivos vsf. Mas, como levar esses arquivos com a aplicação?
Você deve copiar os arquivos de styles para dentro de uma pasta do seu sistema. Depois você deve registrar o style,conforme comentário acima (17/02/2012). Só aí você deve setar o style. Estou meio no escuro, sem ter como averiguar isso, mas creio que seja o caso.
Parabéns pelo artigo Luiz! Me ajudou muito.
Só tem uma coisa que eu gostaria de saber e que me parece não ter sido discutida nos comentários acima.
Quando utilizamos componentes de Skins (AlphaControls por exemplo), o “desenho” é aplicado para toda a aplicação e se por ventura não quisermos aplicar tal “desenho” a um determinado componente é só informarmos um valor pré-determinado ao “tag” desse componente.
Dando uma olhada na internet, pude ver que, com o VCL Styles, usa-se uma função chamada RegisterStyleHook para desabilitar o estilo que estiver sendo usado. Porém, pelo que eu entendi, essa função desabilita TODOS os objetos de mesma classe que você passar como parâmetro. Por exemplo, todos os botões, todos os panels, todos os forms, etc.
Como faço para desabilitar o “desenho” do VCL Style de um componente em específico, por mais que existam varios componentes do mesmo tipo em um formulário? (Ex: desabilitar SOMENTE UM BOTÃO, por mais que exitam vários outros em um formulário).
muito bom nao tem porq julgar, continue trazendo pra gente mais novidades sempre to antenado no teu blog
Obrigado!
Dei um tempinho no blog para poder terminar a atualização de um sistema de Guincho para o Delphi XE2. Sim, finalmente consegui a minha versão.
Em breve começarei a colocar artigos com XE2.
Abraços.
otimo post luiz, mais gostaria de se tem como alterar o mainmenu si tiver como faço?
Muito obrigado por todas as informações, Luiz Carlos!
Estou com um problema com relação à utilização de componentes antigos (JVCL) com os estilos do XE2… Simplesmente não usam o estilo definido. Como faço pra que minha JvDBGrid fique com a mesma aparência da DBGrid normal???
Olá Junior
Fiz um pequeno teste aqui. Criei um form com um JvDBGrid e 2 botões. Veja como ficou:
Veja que o jvdbgrid ficou com o style aplicado.
Sinceramente, não sei o que pode ter acontecido com o seu form.
Luiz,
Desculpe a minha falha! Ele consegue usar o estilo… O problema é somente a seleção que não copia a cor do estilo (laranja, no caso do Saphire Kamri), ficando o padrão (azul).
Será que tem como a seleção ficar com a cor do estilo?
Uma solução que de imediato me vem a cabeça é, no evendo OnDrawColumnCell do JvDBGrid, colocar o seguinte código:
if gdSelected in State then begin JvDBGrid1.Canvas.Font.Color := clBlack; //Fonte JvDBGrid1.Canvas.Brush.Color := $000080FF; //Fundo JvDBGrid1.DefaultDrawColumnCell(Rect, DataCol, Column, State); endResultado:
Depois, quando tiver um tempinho aqui, vou dar uma olhada nos eventos para ver se acho uma forma mais prática de se fazer isso.
Abraços.
Blza! Obrigado!