Utilizando o componente dxSkinController da DevExpress

Ter aplicações com visual diferenciado e agradável tem se tornado cada vez mais importante no mercado de software, e a busca por componentes para atender esse requisito não é uma novidade para boa parte dos programadores. Existem atualmente várias bibliotecas e componentes individuais que garantem tal recurso, cada um com seus pontos positivos e negativos.

Aqui veremos como utilizar o componente dxSkinController da biblioteca DevExpress que é, sem dúvida, uma das mais completas do mercado da atualidade.

Para o exemplo que desenvolveremos neste artigo, devemos criar uma aplicação VCL e adicionar à tela principal um ComboBox (aqui utilizei um cxComboBox, mas o nativo pode ser usado igualmente) e um dxSkinController. Estes dois controles serão utilizados para alternar entre os skins disponíveis.

Para facilitar a visualização dos efeitos de cada skin, adicionemos também alguns controles como Edits e Buttons (no meu exemplo, utilizei um cxButton, um cxTextEdit e uma cxProgressBar, todos da mesma biblioteca, mas o leitor pode usar os componentes nativos). A minha tela principal ficou como na Figura 1.

Figura 1: Configuração do form

Antes de partirmos para a prática, vamos conhecer melhor o componente, entendendo cada uma de suas propriedades, as quais são listadas abaixo.

• Kind: Define um estilo inicial para os controles da aplicação quando não há nenhum skin aplicado.
• NativeStyle: Quando verdadeira (valor true), esta propriedade faz com que os controles mantenham o estilo nativo (sem efeitos visuais diferenciados) mesmo que sejam aplicados skins.
• SkinName: Define qual skin será aplicado aos controles. O valor pode ser selecionado numa lista pré-definida.
• UseSkins: Quando verdadeira (valor true), permite a aplicação de skins. Caso seja definida como falsa (valor false), o skin selecionado na propriedade SkinName não terá efeito. Resumindo, ativa e desativa o uso de skins.

Caso desejássemos definir um skin fixo para a aplicação, bastaria selecionar um dos valores disponíveis para a propriedade SkinName (o leitor pode fazer isso para visualizar, em tempo de design, o efeito dos skins), porém, veremos como listar os skins disponíveis para que o usuário possa escolher aquele de sua preferência.

Considerando que o ComboBox que adicionamos inicialmente foi chamado de “cbSkins”, adicionemos, no evento onShow do form, o código da Listagem 1.

Listagem 1: Listando os skins disponíveis

var
  j:integer;
begin
  for j := 0 to Pred(GetExtendedStylePainters.Count) do
      cbSkins.Properties.Items.Add(GetExtendedStylePainters.Names[j]);
end;

Se executarmos a aplicação, veremos que os skins disponíveis para seleção são listados no ComboBox conforme ilustra a Figura 2.

Figura 2: Lista de skins disponíveis

Agora, para aplicar o skin selecionado, codifiquemos o evento onChange do ComboBox conforme a Listagem 2.

Listagem 2: Ativando o skin selecionado

dxSkinController1.SkinName := cbSkins.Text;

A Figura 3 ilustra alguns skins já aplicados à tela.

Figura 3: Exemplos de skins aplicados à tela

Sabendo como listar e aplicar os skins, poderíamos, por exemplo, salvar o nome do skin selecionado em um arquivo .ini e ativá-lo ao iniciar a aplicação.

Este artigo foi breve, porém, acredito que possa ser útil para quem utiliza essa poderosa biblioteca de componentes no Delphi.

Um abraço a todos e até o próximo artigo.