C# - Criando uma interface Windows Forms moderna

 Neste artigo vamos criar uma interface moderna usando apenas os recursos do Windows Forms.

Existem milhares de aplicações desenvolvidadas no padrão Windows Forms e ainda existem muitas aplicações que estão sendo criadas e que serão criadas usando este padrão. Como bom desenvolvedor você deve estar sempre aprendendo e acompanhando as rápidas mudanças que ocorrem na área de TI de forma a não ficar desatualizado.

Se você estiver fazendo isso já deve estar sabendo que o futuro do Windows Forms(e porque não dizer também da WPF) não é muito promissor. Ele já deu tudo o que podia render e agora provavelmente não sofrerá atualizações de novos recursos. Ou seja vai entrar em modo piloto automático.

O foco da Microsoft para aplicações smart cliente é a UWP - Universal Windows Platform que fornece uma plataforma de aplicativos comum e permite que os desenvolvedores crie um um aplicativo disponível em todos os dispositivos que são executados no sistema operacional Windows 10.

A idéia é que ao desenvolver um aplicativo para Windows 10 ele seja executado em todos os dispositivos que executam o Windows 10, como Mobiles, Tvs, Xbox, etc.

Neste artigo eu vou mostrar como podemos incrementar a aparência de uma interface criada no Windows Forms sem usar recursos de terceiros como o MetroFramework. Para uma lista de recursos de terceiros veja o link: https://nugetmusthaves.com/Tag/ModernUI.

Nota:  Veja este artigo que mostra o uso do MetroFramework :  C# - CRUD no SQL Server com Dapper e MetroFramework - Macoratti

Nosso objetivo será criar uma interface Windows Forms conforme a que esta sendo exibida a seguir :

Vamos usar apenas os recursos básicos do Windows Forms e o Visual Studio 2017 Community.

Recursos Usados:

Criando o projeto Windows Forms

Abra o VS 2017 Community e crie um projeto usando o template Windows Desktop -> Windows Forms App(.NET Framework) e informe o nome WF_ModernUI

Vamos iniciar alterando o nome do formulário de Form1.cs para FormMenu.cs e definindo as propriedades do formulário:

  • FormBorderStyle = None
  • StartPosition = CenterScreen
  • Size = a seu critério

Inclua um controle Panel no formulário e altere seu nome para panelCabecalho e defina as seguintes propriedades:

  • BackColor = Goldenrod
  • Dock = Top

Vamos agora definir os botões de comando para fechar, maximizar e restaurar a janela do formulário.

Inclua um controle Button no panel panelCabecalho com o nome btnFechar e defina as seguintes propriedades:

  • Anchor = Top.Right
  • FlatStyle = Flat
  • FlatAppearance
    • BorderColor = White
    • BorderSize  = 0
    • MouseDownBackColor = 64; 64; 64
    • MouseOverBackColor = Red
  • Image = Imagem disponível
  • Size = 40; 40 (ajuste conforme as suas escolhas)
  • Text = ""

Agora inclua mais dois controles Buttons com os nomes btnMaximizar e btnRestaurar e defina as mesmas propriedades acima alterando apenas a imagem:

  • Anchor = Top.Right
  • FlatStyle = Flat
  • FlatAppearance
    • BorderColor = White
    • BorderSize  = 0
    • MouseDownBackColor = 64; 64; 64
    • MouseOverBackColor = Red
  • Image = Imagens disponíveis
  • Size = 40; 40 (ajuste conforme as suas escolhas)
  • Text = ""

A seu critério inclua uma Label no panel panelCabecalho e defina o nome do programa:

  • Label => Text = Sistema Vendas
  • ForeColor - A seu gosto

Vamos agora definir os botões de comando simulando o menu lateral.

Inclua um Button no panelMenu com o nome btnClientes e defina as seguintes propriedades:

  • BackColor = 37; 46; 59
  • ForeColor = White
  • FlatStyle = Flat
  • FlatAppearance
    • BorderColor = White
    • BorderSize  = 0
    • MouseDownBackColor =White
    • MouseOverBackColor = Goldenrod
  • Font = A seu critério
  • Size = (ajuste conforme as suas escolhas)
  • Image = Imagens disponíveis
  • ImageAlign = MiddleLeft
  • Text = "Clientes"
  • TextAlign = MIddleCenter

Repita o procedimento acima para os demais botões usando as mesmas propriedades e somente alterando o nome, a imagem e o texto do botão.

  • BackColor = 37; 46; 59
  • ForeColor = White
  • FlatStyle = Flat
  • FlatAppearance
    • BorderColor = White
    • BorderSize  = 0
    • MouseDownBackColor =White
    • MouseOverBackColor = Goldenrod
  • Font = A seu critério
  • Size = (ajuste conforme as suas escolhas)
  • Image = Imagens disponíveis
  • ImageAlign = MiddleLeft
  • Text = conforme o botão
  • TextAlign = MIddleCenter

Agora vamos incluir um novo Panel onde vamos abrir os formulários do programa.

Inclua um Panel a partir da ToolBox com o nome panelConteudo e defina a sua propriedade Dock igual a Fill:

  • Dock=Fill

Agora vamos definir o código do formulário começando com os botões para fechar, maximizar e restaurar:

A seguir vamos definir o código para poder mover o formulário usando o mouse. Para isso vamos usar recursos de interoperabilidade que permitem que você use código nativa a partir de aplicações .NET bem como permite acessar assemblies .NET como se fossem componentes COM.

Precisamos referenciar o namespace using System.Runtime.InteropServices;

A seguir vamos definir a utilização das funções SendMessage e ReleaseCapture da user32.dll no formulário conforme mostra o código abaixo:

Para concluir basta definir o código no evento MouseMove do panel panelCabecalho conforme a seguir:

Pronto ! Agora podemos mover o formulário usando o mouse.

Precisamos incluir um método no formulário para poder abrir os formulários no panel panelConteudo. Veja abaixo uma sugestão para o código que faz esse serviço:

Criamos o método genérico AbrirFormNoPanel<Forms>() que vai receber os formulários a serem abertos no panelConteudo. Assim podemos ter mais de um formulário no Panel.

A seguir obtemos o primeiro formulário no Panel e verificamos se existe ele é null, neste caso criamos uma instância do formulário e definimos algumas propriedades incluindo o formulário no Panel, exibindo-o e trazendo-o para frente.

Se o formulário já existe no Panel então verificamos se não esta minimizado e ativamos sua exibição normal e o trazemos para frente da visualização.

Você pode alterar este código ajustando ao seu projeto.

Para testar vamos incluir dois formuláriosvia menu Project-> Add Windows Forms : Form1.cs e Form2.cs com um leiaute bem simples conforme abaixo:

A seguir vamos definir o código dos botões de comando do menu para chamar os formulários acima:

Pronto ! Executando o projeto iremos obter o seguinte resultado:

Pegue o projeto aqui :    WF_ModerUI.zip

Vimos assim uma opção (um tanto trabalhosa na verdade) para criar uma interface um pouco mais moderna sem usar componentes de terceiros.

'Ora, o homem natural não compreende as coisas do Espírito de Deus, porque lhe parecem loucura; e não pode entendê-las, porque elas se discernem espiritualmente.'
 1 Coríntios 2:14

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti