• Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.


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

Statut
N'est pas ouverte pour d'autres réponses.

Nygma

Modérateur
Modérateur
Inscrit
3 Janvier 2013
Messages
13 209
J'aime
6 300
Points
12 143
#1
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 :trollface:
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 :trollface: )
  • La technique de "Je laisse tout d'origine" :trollface:
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" :trollface:.

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



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).

  • 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 ;)

  • 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 :



  • 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.

  • 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 >
Vous devez vous inscrire pour voir les liens !



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 vous inscrire pour voir les liens !

sans DevExpress >
Vous devez vous inscrire pour voir les liens !

avec Menu d'origine Visual Studio >
Vous devez vous inscrire pour voir les liens !



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


/!\ 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 :



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



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"

Vous devez vous inscrire pour voir les liens !



Episode précédent :
Vous devez vous inscrire pour voir les liens !

Vous devez vous inscrire pour voir les liens !

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,
Vous devez vous inscrire pour voir les liens !
.
 
Dernière édition:

FM|T iMCSx

French Modding | Team
Premium
Inscrit
10 Avril 2013
Messages
69
J'aime
168
Points
2 586
#10
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.
 
Statut
N'est pas ouverte pour d'autres réponses.


Discussions similaires