17/09/2018 Artigos

Delphi XE5 - Trabalhando com estilos na VCL –

Delphi XE5

 
 
Olá pessoal, no artigo deste mês vamos mostrar um recurso nativo e bem interessante do Delphi XE5, na verdade este
recurso está presente na instalação do Embarcadero RAD Studio desde sua versão XE2. É o VCL Style.
Foi também na versão XE2 que a Embarcadero incorporou ao RAD Studio a plataforma de desenvolvimento
Firemonkey, e com ela vieram muitos recursos de personificação da aparência das aplicações desenvolvidas nesta plataforma,
além é claro de muitas outras funcionalidades que possui o Firemonkey. A revista The Club publicou alguns artigos
exemplificando o uso do componente “TstyleBook”, por exemplo, é uma ótima forma de se personalizar uma aplicação e
bastante simples também.
Mas como o assunto deste artigo não é o Firemonkey, vamos direto ao ponto, a VCL Style é um recurso nativo do
Delphi, ou seja, não depende de nenhum componente de terceiros. E sua aplicação é bem simples. Vamos direto à prática então.
 

Onde configurar o VCL Style?

 
A configuração do VCL Style fica na janela de Project Options, ou seja, onde fazemos a configuração de nosso projeto.
Vale ressaltar que essa configuração será apenas para o projeto aberto no Delphi. É uma configuração individual para cada
projeto. Portanto crie um novo projeto “VCL Forms Application - Delphi” para começarmos. Para abrir a janela Project Options
acesse o menu (Project -> Options) ou usando as teclas de atalho (Shift + Ctrl + F11). 
A janela é dividida em duas partes, ao lado esquerdo fica o um menu em árvore com as opções de configurações do
projeto atual agrupadas por categorias. O restante da janela é a área onde são exibidas as opções de configuração de cada
categoria.
Acesse na árvore de menu a opção “Application” e selecione sua subcategoria “Apearence” (ver figura 1). Serão exibidos
dois grupos de opções de configurações, “Application Settings” e “Custom Styles”. A Embarcadero já disponibiliza alguns estilos
juntamente com a instalação do RAD Studio, estes são listados no grupo de opções Custom Styles. Pode-se também criar um
novo estilo personalizado ou também editar qualquer outro estilo já configurado usando a ferramenta “Bitmap Style Designer”,
mas isso fica para um próximo artigo.
 

Figura 1 – Configuração de estilo na janela Project Options

http://www.theclub.com.br/restrito/revistas/201410/delp1410.aspx 1/5
17/09/2018 Artigos

 
Repare na figura 1, que foi checado o estilo “Luna”, note também que a caixa de seleção “Default Style” ficou definida
com o tema checado. O estilo selecionado em Default Style será o qual ficará aplicado ao projeto por padrão todo vez que o
projeto for executado. Todo estilo definido nesta caixa, exceto o padrão estilo do Windows, será definido automaticamente no
arquivo Source de seu projeto, com a extensão (.DPR). Veja na listagem 1 como ficará esta definição. Para acessar o arquivo
Source de seu projeto, clique no menu “Project” e depois em “View Source”.
 
Listagem 1 – Definição do estilo padrão do projeto no código
 

program Exemplo1;

uses
Vcl.Forms, Vcl.Themes, Vcl.Styles,
unPrincipal in 'unPrincipal.pas' {Form1};

{$R *.res}

begin
Application.Initialize;
Application.MainFormOnTaskbar := True;
Application.Title := 'Exemplo TheClub';

TStyleManager.TrySetStyle('Luna');

Application.CreateForm(TForm1, Form1);
Application.Run;
end.

 
Note que foi usada a função “TrySetStyle” da classe “TstyleManager”, onde é passado como parâmetro o nome do estilo
que deseja aplicar ao projeto, ela ainda possui um parâmetro oculto do tipo booleano que por padrão assume “True”, este
parâmetro define se será exibida ou não uma mensagem de aviso caso o estilo não seja encontrado. Essa função retorna um
valor booleano “False” caso dê erro e “True” em caso contrário. 
Vale ressaltar que esta linha de código, onde informa o estilo, foi adicionada automaticamente pelo Delphi. Ainda sim, é
interessante conhecer este método, pois pode-se ter a necessidade de alterar o estilo do projeto em tempo de execução, e
neste caso este método seria uma mão na roda. Para por chamá-lo em uma Unit de seu projeto é necessário adicionar na Uses
sua biblioteca, a “Vcl.Themes”. Caso a biblioteca “Vcl.Styles” ainda não esteja adicionada ao Source do projeto, você deverá
adicioná-la na Unit em que for realizar a alteração dos temas, pois é nesta biblioteca que ficam as classes de estilos do Delphi.
Se quiser ver uma prévia de como ficará o estilo em seus formulários, basta selecionar um estilo e clicar no botão
“Preview”, será exibido um formulário com a estilização do tema escolhido. Veja a figura 2 a pré-visualização do estilo “Cyan
Night”, um dos estilos que vem com a instalação do RAD Studio XE5.
 

http://www.theclub.com.br/restrito/revistas/201410/delp1410.aspx 2/5
17/09/2018 Artigos

Figura 2 – Pré-visualização do estilo Cyan Night

Podem ser checados vários estilos de uma vez, assim as configurações destes estilos serão incorporadas ao executável
de seu projeto, e assim que precisar alternar entre eles, basta chamar o método “TrySetStyle”. Caso chame um estilo pela função
“TrySetStyle” que não esteja vinculado ao seu projeto, será exibida uma mensagem de erro, informando o erro ao usuário (ver
figura 3).
 

Figura 3 – Falha ao trocar ao aplicar o estilo ao projeto

Para confirmar o estilo padrão de seu projeto basta clicar no botão “Ok” da janela Project Options.
Agora iremos adicionar alguns componentes de controle visuais ao formulário e ver a transformação que seu formulário sofrerá
com o novo estilo definido. Colocamos alguns componentes em um formulário e aplicamos ao projeto o estilo padrão “Luna”,
veja na figura 4 como ficou a aplicação deste estilo.
 

Figura 4 – Exemplo com o estilo Luna

Exemplo prático
 
Agora que sabemos como aplicar os estilos ao nosso projeto, podemos criar um projeto de exemplo mostrando como
fazer a alteração de estilos em nosso projeto em tempo de execução.
Crie um novo projeto “VCL Forms Application - Delphi”. Salve a Unit principal com o nome “unPrincipal” e o projeto
como o nome “VCLEstilos”, em um diretório de sua preferência. 
http://www.theclub.com.br/restrito/revistas/201410/delp1410.aspx 3/5
17/09/2018 Artigos

Adicione uma Label com o Caption “Selecione um estilo...” e logo abaixo dela adicione um ComboBox, altere a
propriedade Style do mesmo para “csDropDownList”, assim ele ficará desativado para edição da propriedade Text e o usuário
terá apenas a opção de selecionar os itens que já compõem a lista. 
A lista do ComboBox será preenchida com os estilos que forem vinculados ao projeto, neste exemplo iremos checar
todos os estilos que vem por padrão na instalação do RAD Studio XE5. Portanto acesse a tela Project Options (Shift + Ctrl + F11)
e marque todos os estilos disponíveis. Não se esqueça de alterar o Default Style para “Windows”, pois iremos abrir este por
padrão. 
Depois de vinculado todos os estilos ao projeto agora vamos criar um procedimento para alimentar a lista do
ComboBox quando o formulário principal for criado em memória. Veja na listagem 2 a codificação do método “PreencheEstilos”.
 
Listagem 2 – Codificação do método PreencheEstilos
 

private
{ Private declarations }
procedure PreencheEstilos(ComboBox: TComboBox);
{ Use as teclas de atalho (Shift + Ctrl + C) para criar o corpo da procedure. }

procedure TForm1.PreencheEstilos(ComboBox: TComboBox);

begin
ComboBox.Clear;

// Adicione o estilo definido como padrão ao primeiro item do ComboBox.

ComboBox.Items.Add('Windows');
ComboBox.Items.Add('Amakrits');
ComboBox.Items.Add('Amethyst Kamri');
ComboBox.Items.Add('Aqua Graphite');
ComboBox.Items.Add('Aqua Light Slate');
ComboBox.Items.Add('Auric');
ComboBox.Items.Add('Carbon');
ComboBox.Items.Add('Charcoal Dark Slate');
ComboBox.Items.Add('Cobalt XEMedia');
ComboBox.Items.Add('Cyan Dusk');
ComboBox.Items.Add('Cyan Night');
ComboBox.Items.Add('Emerald Light Slate');
ComboBox.Items.Add('Golden Graphite');
ComboBox.Items.Add('Iceberg Classico');
ComboBox.Items.Add('Lavender Classico');
ComboBox.Items.Add('Light');
ComboBox.Items.Add('Luna');
ComboBox.Items.Add('Metropolis UI Black');
ComboBox.Items.Add('Metropolis UI Blue');
ComboBox.Items.Add('Metropolis UI Dark');
ComboBox.Items.Add('Metropolis UI Green');
ComboBox.Items.Add('Obsidian');
ComboBox.Items.Add('Ruby Graphite');
ComboBox.Items.Add('Sapphire Kamri');
ComboBox.Items.Add('Silver');
ComboBox.Items.Add('Slate Classico');
ComboBox.Items.Add('Smokey Quartz Kamri');
ComboBox.Items.Add('Turquoise Gray');

// Exibe no ComboBox o tema padrão definido.

ComboBox.ItemIndex := 0;
end;

 
Adicionamos neste procedimento todos os estilos vinculados ao projeto. Os nomes dos estilos deverão estar iguais aos
que são exibidos na janela “Project Options”. Não se preocupe com letras maiúsculas e minúsculas, pois neste caso o Delphi não
fará distinção.
O estilo definido por padrão no projeto deverá ser o primeiro a ser adicionado à lista, pois assim sabemos que para
exibi-lo no ComboBox, bastará atribuir o índice 0 (zero) à propriedade ItemIndex do componente.
Agora adicione no evento OnCreate do formulário a chamada do método “PreencheEstilos” (ver listagem 3).
 
Listagem 3 – Chamada do método PreencheEstilos
 

procedure TForm1.FormCreate(Sender: TObject);

begin

http://www.theclub.com.br/restrito/revistas/201410/delp1410.aspx 4/5
17/09/2018 Artigos
PreencheEstilos(ComboBox1);
end;

 
Note que apenas passamos o ComboBox como parâmetro e o método se encarregará de preenchê-lo com os estilos
que definimos anteriormente ao projeto.
Neste momento os estilos ainda não estão sendo alterados em tempo de projeto. Vamos ao código que irá realizar esta
operação. Ainda em tempo de projeto, selecione o componente ComboBox e acesse na janela Object Inspector a aba de
eventos e dê um duplo click no evento OnChange. Neste evento iremos utilizar a função “TrySetStyle”, mencionada
anteriormente. Portanto, adicione na Uses da unPrincipal a biblioteca da classe “TstyleManager”, a biblioteca “Vcl.Themes”.
Verifique se não há a necessidade de adicionar também a biblioteca “Vcl.styles”, caso ainda não tenha sido adicionada à Uses do
Source do projeto (o arquivo .DPR). O parâmetro que devemos passar a esta função é o nome do estilo que irá ser aplicado, e
este nome nós teremos na propriedade Text do ComboBox, pois já estará previamente preenchida com os estilos que iremos
utilizar em nosso projeto. Veja na listagem 4 como será feita a chamada da função “TrySetStyle”.
 
Listagem 4 – Chamada da função TrySetStyle para alteração de estilos em tempo de execução
 

procedure TForm1.ComboBox1Change(Sender: TObject);

begin
TStyleManager.TrySetStyle(TComboBox(Sender).Text);
end;

 
A partir deste ponto o nosso projeto de exemplo já irá fazer a troca de estilos em tempo de execução, basta adicionar
mais alguns controles visuais para ver como ficarão em cada estilo disponível em nosso projeto. Caso queira verificar a aplicação
dos estilos em mais de um formulário, basta adicionar mais um formulário ao projeto e fazer a sua chamada a partir de um
botão, por exemplo. Pois estes estilos são aplicados à todos os formulário do projeto. Veja na Imagem 5 nosso projeto em
execução com alguns controles visuais que foram adicionados.
 
Figura 5 – Exemplo em execução
 
Conclusão
 
Vimos neste artigo uma ótima forma de se personalizar as aplicações desktop geradas pela VCL do Delphi a partir da
versão XE2. É um recurso muito simples de se aplicar e dará uma cara nova aos seus projetos. Mostramos em nosso exemplo
prático uma forma de se aplicar esta mudança de estilos já em tempo de execução.
Espero que tenham gostado. Uma forte abraço e até a próxima.

http://www.theclub.com.br/restrito/revistas/201410/delp1410.aspx 5/5