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

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

delete221380

Invité
    Réponse de delete221380 Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #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 ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)



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 ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)

sans DevExpress >
Vous devez vous inscrire ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)

avec Menu d'origine Visual Studio >
Vous devez vous inscrire ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)



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 ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)



Episode précédent :
Vous devez vous inscrire ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)

Vous devez vous inscrire ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)

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 ou vous connecter pour voir les liens ! (c'est gratuit et rapide 🚀)
.
 
Dernière édition par un modérateur:

iMoDz | GsRClans’

Les Biatchs #Chris #AlexS ♥ , Le Nwar #Angel' ♥
Premium
Inscription
15 Octobre 2012
Messages
1 547
Points
8 033
    Réponse de iMoDz | GsRClans’ Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #2
Merci Gros <3
 

Emeric'

Membre depuis Juin 2013
Premium
Inscription
23 Juin 2013
Messages
3 356
Points
7 211
    Réponse de Emeric' Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #4
Merci Mec ;)
 

Destroy'

Ancien staff
Ancien staff
Inscription
14 Juillet 2012
Messages
25 025
Points
20 178
    Réponse de Destroy' Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #5
Je l'ai mis en important ça peut servir à plus d'une personne :D
Tu as gérés enfin "on" :d: <3
 
D

delete221380

Invité
    Réponse de delete221380 Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #6
Je l'ai mis en important ça peut servir à plus d'une personne :D
Tu as gérés enfin "on" :d: <3
Merci <3
Je rajoute quelques outils sympa pour l'HxD Editor et il sera enfin prêt :p
 

T93C

Membre
Inscription
3 Décembre 2013
Messages
48
Points
71
    Réponse de T93C Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #7
Super topic, encore une fois du lourd ;)
 

iMoDz | GsRClans’

Les Biatchs #Chris #AlexS ♥ , Le Nwar #Angel' ♥
Premium
Inscription
15 Octobre 2012
Messages
1 547
Points
8 033
    Réponse de iMoDz | GsRClans’ Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #8

FM|T iMCSx

French Modding | Team
Premium
Inscription
10 Avril 2013
Messages
69
Points
2 586
    Réponse de FM|T iMCSx Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #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.
 
D

delete221380

Invité
    Réponse de delete221380 Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #11
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.
Merci a toi CS ;), mais faut préciser qu'il faut ajouter la directive System.Threading; (c'est pas évident pour tout le monde).
 

FM|T iMCSx

French Modding | Team
Premium
Inscription
10 Avril 2013
Messages
69
Points
2 586
    Réponse de FM|T iMCSx Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #12
Merci a toi CS ;), mais faut préciser qu'il faut ajouter la directive System.Threading; (c'est pas évident pour tout le monde).
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).
 
D

delete221380

Invité
    Réponse de delete221380 Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #13
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).
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 ^^
 

FM|T iMCSx

French Modding | Team
Premium
Inscription
10 Avril 2013
Messages
69
Points
2 586
    Réponse de FM|T iMCSx Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #14
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 ^^
Ouais, bah pourquoi tu l'a met partout ? les lignes de code deviennent longue à écrire comme ça :p
 
D

delete221380

Invité
    Réponse de delete221380 Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #15
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 ;)
 

8zy

Membre
Inscription
4 Février 2014
Messages
18
Points
36
    Réponse de 8zy Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #16
Super contenu, super présentation, SUPER tutoriel !
 

KTC Lobby

Lobby All COD - Platines - GtaV = Dispo' en MP
VIP
Inscription
20 Mars 2013
Messages
7 657
Points
11 775
    Réponse de KTC Lobby Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #17
Super tuto mon petit nwar :trollface:
OMG ton logo o.O
Tu m'en fais un :trollface:
 

Swag'

RGPC MEMBER - GFX
Premium
Inscription
18 Janvier 2014
Messages
1 465
Points
926
    Réponse de Swag' Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #18
Qui m'explique ? :trollface:
 

XModzBroX™

Lobbyman
Premium
Inscription
20 Mars 2013
Messages
2 580
Points
3 173
    Réponse de XModzBroX™ Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #19
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 :/
 

B2O | KingS #GradyOG

Membre Premium
Premium
Inscription
30 Novembre 2011
Messages
1 493
Points
4 801
    Réponse de B2O | KingS #GradyOG Forums généraux Informatique ⌨️ Programmation Programmation logiciel : [C#] Tutoriel | Le style + Label L/L(Episode 2)
  • #20
Magnifique tuto ma biche :love:
 
Statut
N'est pas ouverte pour d'autres réponses.


Haut