[C#] Tutoriel | Le style + Label L/L(Episode 2)

  • Auteur de la discussion Auteur de la discussion delete221380
  • Créé le Créé le
Statut
N'est pas ouverte pour d'autres réponses.
D

delete221380

Yop tout le monde c'est DEVR0, aujourd'hui on ce retrouve donc pour un nouvel épisode de ma série sur la programmation C#.

Ce tutoriel sera assez court, je compte continuer la série plus sérieusement. Cela peut servir a chacun d'entre vous ;)

Je vais vous montrer quelques effets de style sympa, peu de gens le prennent en compte mais lors de la création d'un logiciel il est important que votre Interface soit soigné, tant au niveau des couleurs qu'au niveau du placement des composants.

Je vais donc vous aiguillé un peu sur le design.

Sommaire :
  • I - l'UI ou L'interface Utilisateurs.
  • II - Le choix des couleurs et le placement des composants.
  • III - Quelques effet de styles

Les pré-requis :

  • Visual Studio ou Visual C# Express.
  • Un Cerveau :troll:
I - L'interface utilisateur

Entrons directement dans le vif du sujet avec l'Interface Utilisateur, ça peut vous sembler un peu étranger mais au finale non, c'est en faite l'apparence générale avec les options de votre logiciel, on peut aussi appeler ça un "menu"

Il existe différentes technique pour faire son interface, je vous en cite quelques une suivit d'explications
  • La technique avec des extensions.
  • La technique sans extensions (Technique DEVR0 :troll: )
  • La technique de "Je laisse tout d'origine" :troll:
La technique avec les extensions est beaucoup utilisés, surtout depuis l'arriver massives des logiciel de Real Time. Cette technique est assez simple, mais va considérablement alourdir votre applications.

La technique de DevExpress (fonctionne également avec DevComponents).

DevExpress est un outils payant, cependant la version Trial (évaluations) est disponible sur leur site officiel. La version d'essai expira au bout de 30 jours, soit vous payer (990$) soit vous employer la méthode "pas très très légale" :troll:.

Ceci est très simple d'utilisations faisont un exemple avec un logiciel que je développe actuellement avec @Destroy' .

1386103900-screenshot-3.png

​
Le rendu visuel est plutôt sympathique ;). Qui plus est DevExpress vous offre la possibilité d'avoir plus d'une 20 aines de Skins (apparence) différents selon vos envie, il vous reste plus qu'à choisir.

Je vous explique de façon simple et rapide comment l'utiliser.

  • Rendez vous sur le site de DevExpress
  • Télécharger la version d'évaalutation
  • Installer la (c'est assez long et dépendant de votre connexion)
  • Une fois installer ouvrez un nouveau projet et choissez le langage donc dans l'exemple c'est du C#

  • Vous allez donc avoir une Form basique, comme avant (c'est tout a fait normal).
1386104199-screenshot-4.png

​
  • Ensuite il vous faudra ajouter les référence donc cliquer sur Projet > Ajouter une référence > Assembly > Extensions et ajouté les même .dll que moi ;)
1386104355-dll.png

​
  • Une fois ceci fait votre Form n'aura toujours pas changer de Style (c'est encore une fois normal), double cliquer sur votre Form vous allez être redirigé vers le code.
  • Une fois dans le code il faudra inscrire
Code: 
using DevExpress.XtraEditors;
using DevExpress.XtraNarBar;

  • Il faudra aussi changer le public partial class Form1 : Form par public partial class Form1 : XtraForm
  • Si vous ne rencontrer aucune erreur c'est que tout est bon et nous pouvons passez a l'étape suivante
Normalement dans le code de public Form_1 vous devez avoir InitializeComponent();
Il faudra alors rajouter 2 ligne supplémentaire.

Code: 
  DevExpress.Skins.SkinManager.EnableFormSkins();
            DevExpress.UserSkins.BonusSkins.Register();

Au finale vous devriez avoir ceci :

1386104996-screenshot-5.png


​
  • Une fois ceci fait vous pouvez retourné sur votre Form1.cs[Design] la encore rien n'as changer, il vous suffira que cliquer une fois sur la Form et d'allez dans les propriétés. Chercher la propriété appeler Look And Feel > Allez dans SkinName et choisissez votre Skins > Penser bien a mettre la propriété UseDefaultLookAndFeel sur False (on a pas ajouter l'outil DefaultLookAndFeel), une fois la votre Form est devenu un peu plus blanche, il vous suffira de Lancer (Debugger) votre logiciel et voila le Skins aura changer.
1386105216-screenshot-6.png

​
  • Pour les SkinName, je vous laisse essayer tout les Skins disponible et a vous de voir lequel vous correspond le mieux.
La technique sans extensions :

Dans l'épisode numero 1 j'ai parler rapidement du design sans extension, je vous conseille de le consulté afin d'y voir un peu plus clair ;)

Lien du topic ici > Ici


II - Le choix des couleurs et le placement des composants.

Pour que votre logiciel plaise a un maximum de personnes, je vous conseil d'utilisé des couleur en rapport avec le thème de votre logiciel, je m'explique, un logiciel plus orienté utilitaire pourra avoir un fond bleu (selon vos choix).

Un tool RTE pour Call Of Duty Ghost ne peut pas avoir de fond bleu, un fond orienté gris sera préférable. En gros utilisé toujours des couleurs en rapport avec votre thème. Pour le choix des couleurs je laisse votre imagination faire le travail.

Il est également important que votre logiciel possède une "identité", créer vous même un design différent.


Pour ce qui est du placement de composants, je vais m'attarder sur la navigation.
Des menu sobre, simple et fluide sont recommandé.

DevExpress vous offre la posibilité d'avoir une NavBar, cette outil permet d'afficher une barre de navigation verticale avec le choix des Skins comme pour votre Form. Si vous n'avez aucune idée de comment faire votre style de menu je vous conseille d'utilisé cette outils, il est simple d'utilisations et très esthétique.

Pour ceux qui préfére ne pas utilisé d'extension vous pouvez toujours compté sur le MenuStrip présent de base dans votre boite d'outil Visual Studio ou Visual C# Express.


/! Les choses a éviter sur un logiciel /!\
​
  • La surcharge de composants dans un menu
  • L'utilisation massive de boutons antagonistes (préféré les CheckBox pour une action activé et désactivé)
  • Des caractère trop gros.
Je vous laisse 3 images montrant la dispositions des composants ainsi que 3 menu différents

avec DevExpress >
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

sans DevExpress >
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

avec Menu d'origine Visual Studio >
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.



III - Quelques effet de styles

Je vais vous montrer 2 effet de styles réaliser uniquement avec un label et un timer.
J'utilise uniquement des composants de base fournit avec Visual Studio ;) toutefois il est possible de créer quelques choses de plus esthétique grâce a DevExpress.

  • Ecrire un label en lettre par lettre :
Oui avec un timer vous pouvez faire ecrire un label lettre par lettre ;)
Je vous explique rapidement la méthode a suivre.

Ajouter un label et un timer sur votre form > Cliquer sur votre timer et allez dans les propriétés > Changer l'interval ( se sera la vitesse d'écriture ) > Pour ma part un interval de 500 est parfait

1386107064-screenshot-7.png

/!\ Rappel : l'interval est en milliseconde donc a vous de calculer ;) /!\
​
Une fois ceci fait, double cliquer sur votre timer, vous allez être redirigé vers le code.
Au dessus du code private void timer1_Tick(object sender, EventArgs e) Ajouter
int val = 0;

Comme ceci :

Code: 
 int val = 0;
        private void timer1_Tick(object sender, EventArgs e)
        {

        }


Ensuite dans le code dans votre timer, inscrivez le code ci-dessous :

Code: 
string devro = ("VVotre Text a écrire ici"); //(Rajouter une lettre inutiles devant la première lettre)

            val++;
            try
            {
                label1.Text = label1.Text + devro.Substring(val, 1 - 0);

                if (val == devro.Length)
                {
                    timer1.Enabled = false;
        
                }
            }
            catch (Exception)
            {
                timer1.Enabled = false;
  
            }

Au finale vous allez vous retrouvez avec ceci :

1386107287-screenshot-8.png


PS : Vous pouvez changer le nom de la variable appeler devro ainsi que val ;)​


  • Faire clignoter un label :

C'est la même méthode, un timer est requis.

Sauf que la on a pas besoin du int val=0;
Regler l'interval du timer sur 1000 = 1secondes.

Allez dans le code la

Code: 
  private void Form1_Load(object sender, EventArgs e)
        {

        }

Entre les accolade inscriver le code timer1.Enabled = true; Ce qui signifie que le timer va se mettre en route une fois la Form ouvertes

Il suffit juste d'ajouter 4 ligne de codes afin que votre label puissent enfin clignoter

Code: 
 label1.Visible = false; //label invisible
            System.Threading.Thread.Sleep(1000); //pause du timer pendant 1seconde
            label1.Visible = true; //après 1seconde le label devient visible
            System.Threading.Thread.Sleep(1000); //pause du timer pendant 1seconde


Autre méthode, merci a iMCSx :D

Code: 
 label1.Visible = !label1.Visible;
    Thread.Sleep(1000);

Resultat

1386107632-screenshot-9.png


​
L'épisode 2 s'achève, comme indiquer au début ce tutoriel est assez court.

L'épisode n°3 arrive au début de la semaine prochaine avec au programme "Comment faire sons HxD Editor"

Episode Bonus par Encryptish pour [Crée sa première application ]: Clique ici


Episode précédent : Clique ici
Episode suivant : Cliquer ici​

Voilà, si tu a aimer n'hésite pas a me le signaler pour m'encourager et me soutenir sans cette série qui s'annonce longue est très instructive :)

Personnes ayant participer a ce topic :

Écrit par iDEVR0, Best Writers Topics. http://reality-gaming.fr/attachments/rd-gif.9719/​
 
Dernière édition par un modérateur:
Merci Mec ;)
 
Je l'ai mis en important ça peut servir à plus d'une personne :D
Tu as gérés enfin "on" (d) (l)
 
Super topic, encore une fois du lourd ;)
 
Ceci fonctionne aussi, un peu plus compact :

Code: 
private void timer1_Tick(object sender, EventArgs e)
{
    label1.Visible = !label1.Visible;
    Thread.Sleep(1000);
}

l'opérateur '!' devant un membre de type boolean renverse de façon logique un bool de la valeur actuelle de manière opposé si elle est désigné comme une attribution de valeur.
 
FM|T iMCSx a dit:
Ceci fonctionne aussi, un peu plus compact :

Code: 
private void timer1_Tick(object sender, EventArgs e)
{
    label1.Visible = !label1.Visible;
    Thread.Sleep(1000);
}

l'opérateur '!' devant un membre de type boolean renverse de façon logique un bool de la valeur actuelle de manière opposé si elle est désigné comme une attribution de valeur.
Cliquez pour agrandir...

Merci a toi CS ;), mais faut préciser qu'il faut ajouter la directive System.Threading; (c'est pas évident pour tout le monde).
 
iDEVR0 BWT a dit:
Merci a toi CS ;), mais faut préciser qu'il faut ajouter la directive System.Threading; (c'est pas évident pour tout le monde).
Cliquez pour agrandir...

Absolument pas.

System.Threading est un namespace, donc :

Code: 
using System.Threading; (en haut du projet)

Et tu n'auras plus besoin de le mettre devant... (logique).
 
FM|T iMCSx a dit:
Absolument pas.

System.Threading est un namespace, donc :

Code: 
using System.Threading; (en haut du projet)

Et tu n'auras plus besoin de le mettre devant... (logique).
Cliquez pour agrandir...

Bah oui une directive using pour l'utilisation de types dans un espace de nom pour ne pas avoir à qualifier l'utilisation a chaque fois ^^
 
iDEVR0 BWT a dit:
Bah oui une directive using pour l'utilisation de types dans un espace de nom pour ne pas avoir à qualifier l'utilisation a chaque fois ^^
Cliquez pour agrandir...
Ouais, bah pourquoi tu l'a met partout ? les lignes de code deviennent longue à écrire comme ça :p
 
Je l'ai pas mis dans celui la vu que c'est un truc fait a la vite, j'y ai juste pensé quand j'ai vu ton code ;)
 
Super contenu, super présentation, SUPER tutoriel !
 
Super tuto mon petit nwar :troll:
OMG ton logo o_O
Tu m'en fais un :troll:​
 
Qui m'explique ? :troll:
 
Alors jai aucune faute dans le codage tout les DLL ajouter et pourtan quand je le demare en mode debug sa me met une erreur de blinde et dev expresse na pas ete ajouter :/
 
Statut
N'est pas ouverte pour d'autres réponses.
Retour
Haut