Este artigo tem como objetivo apresentar o componente WizardControl da biblioteca DevExpress DXperience, cuja principal função é auxiliar o desenvolvedor .NET na criação de wizards (programas/trechos de instalação e configuração). Apresentarei as principais propriedades e funcionalidades deste componente.

Exemplo prático

Para iniciarmos, devemos criar uma “Windows Forms Application” no Visual Studio e adicionar ao form principal um WizardControl, que se encontra na guia “Navigation & Layout” da ToolBox.

A aparência do form após a adição do controle deve ser semelhante à Figura 1, onde foram marcadas algumas partes do componente que serão explicadas detalhadamente em seguida.

Form principal com WizardControl

Figura 1: Form principal com WizardControl

1. A região azul da figura é reservada para a exibição de uma imagem de preferência do desenvolvedor. Ela pode ser alterada através da propriedade Image do WizardControl, que permite a seleção de uma figura no arquivo.

Algumas propriedades importantes relacionadas à imagem são:

  • ImageLayout: define a forma como a imagem será exibida (centralizada, preenchendo todo o espaço, etc).
  • ImageWidth: define a largura da imagem ou da região dedicada a ela.

2. Este texto pertence à primeira página do wizard, chamada Welcome Page (ou página de boas vindas) e pode ser alterado através da propriedade Text desta página. Para ter acesso a esta propriedade, é necessário clicar no centro do wizard, selecionando a página e não o controle como um todo.

3. Este é um texto introdutório que também pertence à primeira página e pode ser alterado pela propriedade IntroductionText (também na página e não no wizard).

4. Nesta área podem ser inseridos outros controles a serem exibidos na página de boas vindas. As demais páginas também possuem uma região análoga com o mesmo objetivo (nela devem ser inseridos os controles para realizar o processo em questão).

5. Este é um texto informativo que indica qual deve ser a ação do usuário para ir à próxima página. Pode ser alterado através da propriedade ProceedText da página de boas vindas.

6. A barra com os botões para avançar, retroceder e cancelar pertencem ao wizard. Algumas propriedades importantes são:

  • FinishText: texto do botão “Finalizar”, que aparece na última página.
  • HelpText: texto do botão “Ajuda”.
  • CancelText: texto do botão “Cancelar”.
  • NextText: texto do botão “Próximo”.
  • PreviousText: texto do botão “Anterior”.

A seguir, customizei o controle, alterando algumas das propriedades citadas até aqui. O resultado é exibido na Figura 2.

WizarControl customizado

Figura 2: WizarControl customizado

Existem dois pontos que merecem destaque na tela acima:

1. Adicionei uma imagem a mais no canto superior esquerdo, sobre a imagem que foi citada anteriormente (que também foi alterada). Este ícone pode ser alterado através da propriedade HeaderImage, selecionando o arquivo e definindo a propriedade ShowHeaderImage como true.

2. Adicionei alguns controles na região central (GroupControl com labels e textboxes). Isso já foi comentando, a Figura 2 apenas ilustrou essa possibilidade.

Clicando no botão “Próximo”, ainda em tempo de design, vamos à segunda página na qual também adicionei alguns controles e alterei as propriedades Text e DescriptionText que representam, respectivamente, o título e o subtítulo da página, como mostra a Figura 3.

Segunda página customizada

Figura 3: Segunda página customizada

A página de finalização é bastante semelhante às intermediárias e não necessita de tanto detalhamento. Vejamos agora algumas propriedades e eventos importantes do controle como um todo e de cada página.

Detalhes do WizardControl

Abaixo veremos listadas as principais propriedades e eventos do WizarControl.

  • AllowPagePadding: define uma margem para a região central das páginas. Caso esteja defininda como false, a região central encostará na imagem lateral e na borda direita.
  • AllowTransitionAnimation: define se a navegação entre as páginas será animada com um efeito sutil de fade ou se nenhum efeito será aplicado.
  • AnimationIntereval: tempo de duração da animação de transição entre páginas.
  • Aperance: permite alterar detalhes das páginas e do controle como fonte e cores de background.
  • TitleImage: define uma imagem que será exibida no cabeçalho do wizard caso a propriedade WizardStyle seja definida como WizardAero (explicado a seguir).
  • WizardStyle: permite selecionar um estilo para o wizard entre o estilo padrão (Wizard97) e o aero (WizardAero). Caso seja escolhida o segundo, a propriedade Text ganha maior importância pois será exibida no cabeçalho conforme mostra a Figura 4.

Wizard com estilo aero

Figura 4: Wizard com estilo aero

Vale observar que o botão “Anterior” foi transferido para o topo da página e que lá é exibida a imagem definida na propriedade TitleImage juntamente com a propriedade Text.

O clique dos botões “Anterior”, “Próximo”, “Cancelar” e “Finalizar” pode ser tratado através dos eventos PrevClick, NextClick, CancelClick e FinishClick, respectivamente.

Detalhes das páginas

Neste ponto, a maior parte das propriedades mais importantes das páginas já foram citadas e explicadas. Veremos a seguir apenas algumas adicionais, mas que não deixam de ter sua importância no desenvolvimento do wizard.

  • AllowBack: define se o usuário poderá voltar à página anterior.
  • AllowCancel: define se o usuário poderá clicar no botão “Cancelar” nesse página.
  • AllowNext: define se o usuário poderá avançar para a próxima página.

Conclusão

Como se pôde ver, o WizardControl permite ao desenvolvedor .NET desenvolver aplicações ou trechos de aplicação com função de wizard, para instalar ou configurar algum componente, por exemplo.

Mostrar todas as propriedades e eventos deste componente levaria algum tempo e não é este o objetivo deste artigo, cujo intuito é apresentar de forma prática o WizardControl.

Mais uma vez, a biblioteca DevExpress DXperience se mostrou uma das mais completas do mercado, tornando simples uma tarefa que iria requerer a utilização de uma série de componentes e códigos em conjunto.

Grato pela atenção, finalizo por aqui este artigo. Até o próximo.