Fala ai Radizeiros e Radizeiras, tudo bem com vocês?
No post anterior falamos sobre o menu global, e no post de hoje irei mostrar como criar o menu de contexto.
Na nossa imagem de exemplo iremos implementar esse menu azul.
Quando clicar em um dos botões do menu global, ele irá abrir o menu de contexto.
Para trabalharmos com o menu de contexto iremos precisar de um outro TSplitView, caso não tenha visto o post anterior clique aqui
O TSplitView já é alinhado a esquerda automaticamente.
Agora no TSplitView ná propriedade color dele iremos alterar para azul da nossa imagem.
Veja como ele está.
Vamos adicionar o TCategoryButtons nesse nosso TSplitView e iremos definir como None o BevelInner e o BevelNone, também iremos deixar como None o BorderStyle.
Vamos agora adicionar uma nova categoria.
E vamos alterar a cor dessa categoria para clNone.
Vamos adicionar 5 itens a essa categoria, que irão ser nossos botões, assim como visemos na criação do menu global.
Nas opções dos botões vamos deixa-los como a imagem abaixo.
Alterar a propriedade ButtonHeight para 60, a RegularButtonColor para clNone e a SelectedButtonColor também para clNone.
Muito simples né?
No ActionList já adicionamos as ações para os botões e no ImageList já adicionamos as imagens, e cada botão será vinculado a uma ação do ActionList, como podemos ver na imagem abaixo da categoria posição 0 chamado de Emissor.
Um pequeno detalhe que iremos fazer agora é alterar a fonte do TCategoryButton.
Pronto veja como está ficando nosso projeto.
Esta ficando muito lega né?
Ao passa o mouse em cima dos botões a cor da propriedade HotButtonColor é acionada.
Agora vamos fazer com que ele venha aparece escondido ao compilarmos nosso projeto, ao clicar em um dos botões do menu global venha aparecer os botões de contexto.
Vamos alterar as propriedades CloseStyle para svcCollapse, e o Opened para False, para que ele já venha iniciar como fechado, e numa ação iremos chamar esse nosso SplitView.
procedure TForm1.Action2Execute(Sender: TObject);
begin
if SplitView2.Opened then
SplitView2.Close
else
SplitView2.Open;
end;
Pronto, nosso menu de contexto já está pronto para ser chamado, vamos compilar nosso projeto e ver como ficou.
Antes de clicar no botão.
Depois de clicar no botão.
Agora já temos criado nosso menu de contexto no projeto.
Neste post você aprendeu como criar um menu de contexto e usa-lo juntamente com o menu global, e com esse pequeno exemplo você pode fazer em seus projetos deixando-os com um visual mais elegante.
Em falar de layout elegantes, estamos na 4ª semana de interfaces em Delphi, e nesta semana estarei disponibilizando 4 videos onde iremos mostrar na pratica como melhorar o visual do seu software e poder encantar seu clientes.
São 4 aulas totalmente grátis, ISSO MESMO 0800, basta clicar no link abaixo e fazer parte do grupo vip do WhatsApp e você receberá os links para as aulas que estão sendo disponibilizadas essa semana.
CLIQUE AQUI E FAÇA PARTE DO NOSSO GRUPO VIP DA SEMANA DE INTERFACES EM DELPHI.
