Criando uma barra de ferramentas auto ocultável em Delphi

Introdução

Com a chegada do Windows 8 e até antes disso, com o surgimento da interface estilo Metro, a aparência das aplicações tende a ficar visualmente mais “leve”. Os gráficos que abusam de recursos como brilho, texturas e efeitos 3D foram deixados um pouco de lado para dar lugar a visuais mais simples.

Um recurso largamente utilizado nesse tipo de interface são as barras de ferramentas “fluidas”, que são exibidas apenas quando necessário e, ao remover o cursor do mouse de sobre elas, as mesmas são ocultadas.

Neste artigo apresentarei uma solução simples e de fácil entendimento para o desenvolvimento de uma barra superior para formulários com esta característica. A ideia é substituir os botões de fechar, maximizar e minimizar que ficam fixos no topo da janela, por uma barra que seja visualizada apenas quando o cursor do mouse for movido para o limite superior da mesma.

Observação: neste artigo estou utilizando o Delphi XE2, mas como os recursos aplicados foram todos nativos e bastante básicos, versões anteriores da ferramenta também podem ser igualmente utilizadas.

Preparando o form

Inicialmente crie uma aplicação de formulários a partir do menu File > New > VCL Forms Application.

Altere as propriedades do form principal conforme é mostrado abaixo:

• Border: bsNone;
• WindowState: wsMaximized;
• ShowHint: True.

Se preferir, dê uma cor diferente para o formulário. Executando o projeto, apenas a tela limpa será exibida.

Montando a barra

A barra consiste apenas de um painel com outros dois controles do mesmo tipo em seu interior servindo de botões.

Adicione então um TPanel e defina suas propriedades como a seguir:

• Name: “pnlBarra”;
• BevelOuter: bvNone;
• Color: uma cor de sua preferência, mas diferente da do form.
• Height: uma altura razoável, por exemplo, 40 pixels;
• Visible: False;
• Top: 0;
• Left: 0.

Em seguida, no interior do pnlBarra, insira mais dois TPanel os configure da seguinte forma:

• Name: “btnFechar” e “btnMinimizar”;
• BevelOuter: bvNone;
• Align: alRight.
• Caption: “X” e “-“;
• Font: escolha um tamanho de fonte bem grande para destacar o texto;
• Width: igual ao height, que é automaticamente definido;
• Hint: “Fechar” e “Minimizar”.

O form deve ficar semelhante à Figura 1.

Figura 1: Aparência inicial do form no editor

O próximo passo é dar funcionalidade aos botões de fechar a minimizar. Inicialmente seleciona o dois e, no Object Inspector, dê dois cliques no campo de edição do evento OnMouseEnter.

Altere o código do evento da seguinte forma:

Listagem 1: Evento OnMouseEnter dos painéis btnMinimizar e btnFechar

procedure TForm1.btnMinimizarMouseEnter(Sender: TObject);
begin
  (Sender as TPanel).Font.Color := clWhite;
end;

Agora, ainda com os dois painéis selecionados repita o processo para o evento OnMouseLeave, alterando seu código conforme a Listagem 2.

Listagem 2: Evento OnMouseLeave dos painéis btnMinimizar e btnFechar

procedure TForm1.btnMinimizarMouseLeave(Sender: TObject);
begin
  (Sender as TPanel).Font.Color := clBlack;
end;

Esses dois trechos de código servem apenas para dar um destaque visual aos botões quando o cursor for posto sobre eles, alterando a cor da sua fonte.

Em seguida, modifique o evento OnClick apenas do btnFechar de acordo com o código mostrado na listagem a seguir.

Listagem 3: Evento OnClick do btnFechar

procedure TForm1.btnFecharClick(Sender: TObject);
begin
  Self.Close();
end;

Repita o processo para o btnMinimizar, utilizando agora o código da Listagem 4.

Listagem 4: Evento OnClick do btnMinimizar

procedure TForm1.btnMinimizarClick(Sender: TObject);
begin
  Application.Minimize();
end;

Execute o projeto e experimente clicar nos dois botões para verificar se estão funcionando corretamente, ou seja, minimizando e fechando a aplicação.

Exibindo e ocultando a barra

Agora entramos no ponto principal deste artigo que é fazer com que a barra seja exibida e ocultada quando necessário. O primeiro passo é manter o painel com a mesma largura da janela, independente do tamanho desta. Para isso, edite o evento OnResize do formulário conforme a Listagem 5.

Listagem 5: Evento OnResize do form

procedure TForm1.FormResize(Sender: TObject);
begin
  pblBarra.Width := Self.Width;
end;

Em seguida, no evento OnMouseMove do formulário, precisamos verificar se o cursor está posicionado no limite superior da página, ou seja, se a coordenada Y (vertical) é zero. Se isso ocorrer, o painel é exibido. A Listagem 6 mostra o código para tratar isso.

Listagem 6: Evento OnMouseMove do form

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if y = 0 then
     pnlBarra.Show();
end;

Para complementar, é preciso que ao remover o cursor de sobre a barra, esta seja ocultada. Isso é feito no evento OnMouseLeave do painel pnlBarra.

Listagem 7: Evento OnMouseLeave do pnlBarra

procedure TForm1.pnlBarraMouseLeave(Sender: TObject);
var
  P: TPoint;
begin
  GetCursorPos(P);
  if P.Y > pnlBarra.Height then
     pnlBarra.Hide();
end;

Esse código é um pouco mais complexo que o de exibição da barra. É preciso verificar se o cursor realmente está saindo do pnlBarra, pois caso o cursor fosse posicionado sobre um dos botões dentro desse painel, o evento OnMouseLeave seria disparado e a barra seria ocultada.

Com a função GetCursorPos, obtemos a posição do cursor e se essa for maior que a altura do painel, ou seja, se “passou” dele, ele é ocultado com o método Hide.

Testando o projeto

Agora já é possível executar o projeto para testar o funcionamento dos códigos até aqui apresentados.

A figura a seguir mostra o projeto em execução, com a barra exibida.

Figura 2: Projeto em execução com a barra exibida no topo

Nesse ponto, é preciso apresentar mais um trecho de código que visa contornar uma situação bastante comum de ocorrer.

Caso seja adicionado um controle qualquer no topo do formulário, ao mover o cursor sobre ele o evento OnMouseMove do form não seria disparado e, com isso, a barra não seria exibida.

A solução para isso é tratar o evento OnMouseMove do controle conforme mostra a Listagem 8.

Listagem 8: Evento OnMouseMove de um controle alinhado ao topo do form

procedure TForm1.Label1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  if (Sender as TControl).Top = 0 then
      if Y = 0 then
         pnlBarra.Show();
end;

O primeiro IF verifica se o controle realmente está no topo, em seguida é feita a mesma verificação da Listagem 6. Com isso, esse mesmo código poderia ser usado para qualquer controle que possa ser alinhado ao topo em algum momento.

Bem, com isso nosso código está completo e o artigo chega ao fim.

Apesar de simples, o conteúdo aqui apresentado pode ser útil para desenvolvedores que buscam oferecer interfaces diferenciadas em seus sistemas, além de poder servir como base para o desenvolvimento de outras soluções.

Agradeço a atenção de todos. Até a próxima.