Ir para conteúdo
Faça parte da equipe! (2024) ×

c# Melhorando o visual de sua aplicação via NuGet Packages


TheSkytalos
 Compartilhar

Posts Recomendados

Bom, como é ano de cursinho e estou sem tempo, aqui vai um tópico rápido e sem vídeo, pois o que iremos fazer aqui é bem simples.

 

Algumas observações:

  • Também é valido para VB.NET, porém há de mudar as respectivas linhas para VB.NET;
  • Não é o único jeito de mudar o visual dos Forms, há outros, como WPF por exemplo;
  • Este método não muda o visual do projeto inteiro, apenas muda o que você quer. Você pode intercalá-lo com outros pacotes e com os componentes padrões do .NET Framework;
  • Peço aos mais experientes paciência, este tópico tem o objetivo de ajudar inclusive os que sabem pouco - Isso inclui as traduções bobas -.

Estou a usar o VS 2013 Ultimate, se não houver o NuGet "de fábrica" no teu, há tutoriais no Google de como instalá-lo.

.:: CRIANDO O PROJETO ::.

Crie um projeto Windows Forms como qualquer outro:

 

FILE > New > Project... > C# > Windows > Windows Forms Application

.:: INSTALANDO O PACOTE NUGET ::.

Na aba Project, selecione a opção Manage NuGet Packages, abrirá uma janela, onde no canto esquerdo, haverá 3 abas: Installed Packages, Online e Updates. Estes são: Seus pacotes instalados, operações online e atualizações, respectivamente.

No momento, apenas a aba Online e Installed Packages nos interessam.

  1. Clique na aba Online;
  2. Clique na sub-aba All (Todos);
  3. Agora foque no canto superior direito da janela do NuGet, onde deverá haver uma caixa de texto de pesquisa online. "Search Online" ou algo como "Procurar Online";

Agora vem a escolha de qual pacote instalar, trouxe dois que uso. É claro que podes instalar os dois, mas aqui vais vídeos dos respectivos pacotes caso decida apenas por um:

MaterialSkin, por Ignace Maes

 

Metro Modern UI, por Dennis Magno

Você pode encontrar mais na Galeria do NuGet: NuGet Gallery

Depois de escolhido o pacote desejado (ou ambos), naquela caixa de texto que eu disse para focar, escreva o desejado (Ex: MaterialSkin).

 

kSJOQgb.jpg

Agora que achou o pacote desejado, clique em Install (Instalar). Abrirá uma janela pequena dando informações sobre o download. Concluído todo o processo, deverá lhe aparecer:

 

obkaWSF.jpg

Além disso, só para fim de confirmação, vá na aba Intalled Packages (Pacotes Instalados), e lá deverá aparecer um "Item List" com seu pacote.

 

Feito isto, vamos agora colocar os componentes na Toolbox (Caixa de Ferramentas).

  1. Na Toolbox, clique com o botão direito sobre ela, e selecione a opção Add Tab (Adicionar aba);
  2. Coloque o nome que desejar, de preferência coloque o nome do pacote em especial, no nosso caso, colocarei "Material Skin";
     
  3. Se você instalou o pacote, apareceu uma DLL no bin/Debug do teu projeto, referente ao pacote instalado, neste caso, "MaterialSkin.dll";
  4. Clique e arraste esta DLL sob a ABA QUE VOCÊ CRIOU;
  5. Feito isso, deverá ver já os componentes dentro da aba.
  6. Se aconteceres com vocês igual a mim, todo projeto criado, já aparecerá a aba com os componentes, sem a necessidade de adicionar o pacote em todo projeto.

.:: APLICANDO NO PROJETO ::.

 

Em suma, os componentes já estão preparados para entrar onde tu quiser, porém, ainda hemo-nos de configurar o Form para que o visual dele coincida com os componentes.

 

Abra o código do Form desejado, deverá aparecer algo parecido com isto:

 

É necessário se cadastrar para acessar o conteúdo.

 

Para que o Form fique com o visual do pacote, devemos:

  • Referenciar o pacote;
  • Referenciar os controles do pacote;
  • Mudar a classe de seu Form para a classe do Pacote;
  • Inicializar o tema, o Form e o esquema de cores no Método Construtor;

Isto é feito como segue:

 

É necessário se cadastrar para acessar o conteúdo.

Sobre o código posto no Método Construtor do Form (public Form1()), para um bom entendedor, meia palavra basta, porém como deve haver muitos que aqui sabem pouco:

Não entrarei em mérito do que cada linha faz, o que tu precisa saber é que, a 5ª e 6ª linhas do método construtor, você pode modificar para mudar a "cara" do visual:

  • Na 5ª linha, a palavra LIGHT (Claro), pode ser mudado para DARK (Escuro);
  • Na 6ª linha, todos os parâmetros podem ser mudados, após Primary e Accent, há uma "infinidade" de cores que podem ser mudadas, para saber quais são, apague a cor e o ponto, insira o ponto novamente, e o VS deverá abrir um "ContextMenuStrip" contendo todas as possibilidades possíveis;
  • Ainda na 6ª linha, após TextShade (Sombra do Texto), aceita WHITE (Branco) e BLACK (Preto);
  • Na segunda linha,

É necessário se cadastrar para acessar o conteúdo.

  • É uma linha opcional, serve para o usuário quando o programa estiver rodando, não poder redimensionar o tamanho do Form. Fiz isso aí e não nas Propriedades do Form na UI pois por algum motivo o autor não colocou.

Então, o Form que era assim

ctP2Wae.jpg

 

Fica assim

0jnW5Fi.jpg

 

 

 

Daí, é só clicar e arrastar os componentes da Toolbox para o teu Form, podendo estes componentes serem quais forem, deste Pacote, de outro, ou até mesmo do .NET Framework.

 

Não mostrarei como ficam os componentes pois os vídeos já fizeram isso muito bem.

 

Lembrando que todo Form que tu quiser que tenha esta aparência, você haverá de inserir aquele código mostrado acima. E outra, cada pacote, tem um código de referência diferente. Para o MaterialSkin, é este, para o Metro Modern UI é outro, estes códigos você acham na página principal de cada pacote no GitHub.

 

Um abraço do Tio Sky, poste suas dúvidas, responderei quando possível.

Eu queria estar a ensinar vocês a fazerem seu próprio Launcher, comunicar DLL com a aplicação C#, mas o tempo realmente está apertado.

"May you be in heaven half an hour before the Devil knows you're dead"

Link para o comentário
Compartilhar em outros sites

Este tópico está impedido de receber novos posts.
 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.