Créer des boutons dans Microsoft VisualStudio


Lors de la création des applications dans Visual Studio vos choix en ce qui concerne bouton variétés est question sont limitées, le seul choix est un bouton rectangulaire avec un label et une image peut bouton. Visual Studio 2015 devrait changer la situation, mais en attendant, si vous voulez faire preuve de créativité et essayer de faire l'interface utilisateur plus attrayant qu'il est nécessaire de venir avec leur propre solution. Heureusement, il existe des moyens que vous pouvez réaliser avec un minimum d'effort. Pour les fins de cet article, je vais utiliser les boutons sociaux comme le montre l'image ci-dessous (EXEMPLE PERSO). Nous allons créer un bouton qui change d'aspect lorsque la souris survole, réagit à l'événement bouton de la souris et les changements de nouveau quand un utilisateur clique sur un bouton ou déplacez la souris hors.

BOUTON CHAMPIONS CUSTOM

Que devez-vous pour commencer

Pour créer un bouton graphique, nous aurons besoin d'une image pour chaque état de bouton. Dans notre exemple, nous avons trois boutons d'état et nous avons donc besoin de créer trois images à notre bouton. Si vous le souhaitez, vous pouvez créer vos propres graphiques, ou vous pouvez acheter ou télécharger un clip art libre ou d'autres images, en fonction de la conception. Je ai utilisé un éditeur d'image GIMP pour créer rapidement un simple bouton, sans arrière-plan Twitter et un anneau autour du logo lorsque le bouton répond à la souris sur l'événement. D'abord, nous incluons les images dans notre application, nous devons décider de la taille de nos boutons. Nous allons utiliser la taille des boutons pour créer nos images en fonction de la taille du bouton pour éviter le redimensionnement des images lorsque le bouton se affiche sur le formulaire. Évitez redimensionnement est important parce que nos images seront très interactif et sera chargé et tiré sur la forme de la surface encore et encore, nous ne devrions pas mettre un peu plus d'effort sur notre ordinateur qui exécute l'application et les ressources de marée de redimensionner les images, ce est particulièrement important pour éviter les images qui sont plus grandes que nos boutons, dans cette situation, il serait un gaspillage de ressources, telles que la mémoire et le processeur pour charger une grande image et réduire la taille des se appuyer sur la surface de notre bouton. Dans mon expérience, il est préférable de définir la taille ou les boutons à quatre pixels plus large et plus haute que quatre pixels des images et définir le mode SizeMode = CenterImage "d'affichage. Pour notre démonstration actuelle, je ai créé trois images de taille 41 pixels par 41 pixels avec un fond transparent et les sauver comme tButton41, tButton41_MOver et tButton41_MClick. Lorsque nous aurons terminé nos graphiques dans une taille désirée et sauvés, nous sommes prêts à aller dans Visual Studio pour compléter la conception et de codage pour le bouton de l'application création démo.




Personnaliser Conception du projet Button

Nous avons l'intention d'utiliser un PictureBox comme notre bouton cliquable. Ce est un excellent choix, car il prend en charge presque toutes les fonctionnalités qu'un contrôle de bouton, le seul défaut d'un contrôle PictureBox est un contrôle PictureBox ne peut être assigné comme AcceptButton CancelButton ou la forme, mais je vais vous montrer comment vous pouvez excéder cette limite d'ici la fin de ce tutoriel. Dans notre démo je ai créé un PictureBox et de mettre sur un formulaire. La prochaine étape est d'ajuster certaines de ses propriétés d'accepter nos images, de manière à définir la taille du bouton: cmdSocial.Size = 45,45 (nos photos sont 41 pixels par 41 pixels), puis réglez le mode affichage de l'image: cmdSocial.SizeMode = CenterImage, ce paramètre ne sera pas redimensionner l'image source d'origine et si l'image est plus petite que le contrôle puis l'espace occupé est laissé comme la couleur de contrôle arrière. Je ne veux pas voir la zone d'image de fond, je ai dû régler la cmdSocial.BackColor = transparent. Ensuite, je ai importé mes images dans les ressources du projet et définir les première Image Control: cmdTest.Image = CustomButton.My.Resources.Resources.tButton41. Pour notre formulaire de détails de conception, voir photo ci-dessous (TOUCHE DESIGN - détails) screenshots d'image de notre formulaire en studio Visual Design.

TOUCHE DESIGN - DÉTAILS

PictureBox bouton personnalisé chèque - Code de mise en œuvre

Afin de rendre nos boîtes à images agissent comme des boutons de commande que nous devons saisir le code dans les quatre événements suivants: cmdSocial.MouseEnter, cmdSocial.MouseDown, cmdSocial.MouseClick et cmdSocial.MouseLeave. Dans le cas d'un bouton de commande cette norme ne aurait besoin pour créer le code pour gérer l'événement click. Pour nos coordonnées de code se il vous plaît voir ci-dessous des photos # 1 à # 5, qui contient les images de notre formulaire à des stades différents de notre exécution du code d'application et l'extrait de code en charge des effets visuels des boutons. Comme ma préférence personnelle, je ai aussi toujours initialiser mes contrôles personnalisés en cas de module de charge pour se assurer que la charge avec les propriétés souhaitées. Notre démo ne est pas différent, et même si ce est une étape facultative, je inclus également le code de cet événement (photo n ° 1). Tous les extraits de code inclus avec nos photos devrait être compréhensible en soi, cependant, je voudrais mentionner le bloc de code inclus dans "If Not IsNothing (tPic.Image ... End If." Les deux lignes au sein de ce bloc sont entièrement facultative, cependant, de sorte que chaque image est détruite après l'application est terminée avec elle, veille à ce que la mémoire allouée pour l'image est marqué comme «libre» et peut être réutilisé. (Si vous travaillez avec images dans l'application .net devraient toujours prendre toutes les mesures possibles pour se assurer que, lorsqu'il ne est plus nécessaire, sont détruits et la mémoire du système qu'ils ont utilisé peut être libéré et réutilisé par d'autres objets dans l'application).

INITIALISER touche IMAGE SOUS FORME cas de charge

BOUTON PERSO - SOURIS ÉVÉNEMENT

BOUTON PERSO - CAS de la souris vers le bas

BOUTON PERSO - SOURIS Quitter événement

BOUTON PERSO - clic de souris ÉVÉNEMENT

Maintenant, Que propos de la propriété de ceux AcceptButton Et CancelButton forme?

Dans le paragraphe d'ouverture, je vous ai promis que je vais vous montrer une façon de mettre en œuvre AcceptButton CancelButton et les propriétés qui ne peuvent pas être réalisé avec des contrôles PictureBox. Mais d'abord, permettez-moi d'expliquer à ces lecteurs qui ne sont pas familiers avec ces propriétés. AcceptButton propriété d'une forme est une façon d'attribuer ne importe quel bouton sur le formulaire qui répondent à la presse de l'événement clavier Entrez, si un utilisateur appuie sur la touche Entrée d'un clavier, est l'équivalent de cliquer sur le bouton de la souris attribué. La structure CancelButton fonctionne exactement de la même, mais le bouton assigné répond à la touche appuyez sur Echap (Esc) de votre clavier. Maintenant, avec nos boutons personnalisés ne ont pas une configuration de cette option de connexion. Pour mettre en œuvre cette fonctionnalité, vous devez créer les boutons souhaités et les ajouter à notre formulaire. Inclure le code pour gérer les événements et lorsque notre bouton de commande est terminée, définir votre position à le rendre invisible. Je positionne généralement -20,000, -20 000 pour se assurer que sur l'interface d'utilisateur et seules les touches par défaut du clavier peuvent accéder et exécuter le code dans son gestionnaire d'événements clic du bouton.

Informations supplémentaires.

Pour plus d'informations sur la conception et le codage des boutons personnalisés, vous pouvez regarder une vidéo inclus à la fin de ce tutoriel. Il utilise des images et taille des boutons différents, mais le concept et le codage est identique.

Création de boutons personnalisés dans Visual Studio - Tutorial Video

(0)
(0)

Commentaires - 0

Sans commentaires

Ajouter un commentaire

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caractères restants: 3000
captcha