L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Une image qui vaut mille mots: découvrez WinForms PictureBox
La première version Telerik UI pour WinForms pour 2021 a apporté à nos clients un tout nouveau thème Office2019Light Toast notifications RadPictureBox Thème Metro avec images vectorielles et prise en charge de Visual Studio au moment du design dans .NET Core / .NET 5.0 . Dans ce blog, nous examinerons plus en détail RadPictureBox, ses fonctionnalités et même une démo entièrement fonctionnelle.
Décrivons d'abord ce qu'est une RadPictureBox. Semblable aux images encadrées que nous accrochons à nos murs, une commande de boîte à images nous permet de «suspendre» des images dans nos applications. En effet, RadPictureBox est conçu pour afficher des images et interagir avec elles. Le contrôle prend en charge les formats d'image raster bien connus tels que PNG, JPG, BMP, ICO, etc. Afin d'étendre la prise en charge des images vectorielles que nous avons introduites dans R2 2020 nous avons fourni la prise en charge des SVG (graphiques vectoriels évolutifs) dans RadPictureBox.
Caractéristiques
Les principales fonctionnalités du tout nouveau contrôle RadPictureBox sont :
Panneaux
Les panneaux, ou barres d'outils, fournissent un moyen facile d'ajouter de nouvelles fonctionnalités au contrôle RadPictureBox. Les barres d'outils sont positionnées sur les quatre côtés de la commande – en haut, en bas, à gauche et à droite.
Modes de panneau
Les panneaux peuvent être affichés dans trois modes différents:
- Toujours – Les panneaux seront visibles à tout moment.
- OnMouseHover – Les panneaux ne sont affichés que lorsque la souris se trouve sur le contrôle de la zone d'image.
- Aucun – Les panneaux ne sont pas visibles et vous devez les afficher par programme.
Ces modes sont contrôlés par le PanelDisplayMode du contrôle.
Priorité horizontale ou verticale
RadPictureBox peut organiser avec priorité le panneau horizontal ou vertical, qui est contrôlé avec la propriété PanelOverflowMode.
La différence entre les deux modes est illustrée dans la capture d'écran ci-dessous:
Collections d'objets
Le panneau supérieur a Left, Center et RightItems, qui vous permettent d'ajouter directement des éléments dans chaque coin ou au centre du panneau, sans besoin d'écrire des mises en page personnalisées.
De plus, chacune des collections d'éléments est hébergée par une pile d'éléments, qui est un élément visuel responsable de la mise en page des éléments et fournit différentes options de personnalisation telles que la définition des couleurs et des bordures d'arrière-plan et contrôle de la distance entre les éléments.
this .radPictureBox1.TopPanel.CenterElementsStack.ElementSpacing = 3;
this .radPictureBox1.TopPanel.BackColor = Color.FromArg (100, Color.DarkBlue);
this .radPictureBox1.TopPanel.BorderColor = Color.FromArgb (100, Color.DarkBlue);
Démo
Après avoir discuté à travers le contrôle et ses panneaux, nous allons créer une démo ensemble en utilisant RadPictureBox. 😋 Le but est de créer une application qui parcourt les images dans un certain répertoire.
Commençons par créer un nouveau formulaire Windows. Faites glisser un contrôle RadPictureBox de la boîte à outils et ancrez-le pour le remplir. Nous n'utiliserons plus le concepteur, nous pouvons donc le fermer.
Pour naviguer dans les images du répertoire, nous ajouterons deux boutons à gauche et à droite. Et voici à quoi ressemble le constructeur de notre formulaire:
public RadForm1 ()
{
this [19659024] .InitializeComponent ();
RadButtonElement previousButton = nouveau RadButtonElement ();
previousButton.ToolTipText = "Image précédente" ;
previousButton.Text = [19659047] " ue016" ;
previousButton.CustomFont = "TelerikWebUI" ; [19659004] previousButton.CustomFontSize = 16;
previousButton.Click + = this .PreviousButton_Click; [19659004] this .radPictureBox1.LeftPanel.CenterItems.Add (previousButton);
RadButtonElement nextButton = nouveau RadButtonElement ();
nextButton.ToolTipText = "Image suivante" ;
nextButton.Text = " ue014" ;
nextButton.CustomFont = "TelerikWebUI" ;
nextButton.CustomFontSize = 16;
nextButton.Click + = this .NextButton_Click; [19659004] this .radPictureBox1.RightPanel.CenterItems.Add (nextButton);
}
Voici comment ressemble:
L'arrière-plan du panneau occupe tout le contrôle de haut en bas. Nous pouvons le supprimer en définissant DrawFill et DrawBorder des panneaux gauche et droit sur false.
this .radPictureBox1.LeftPanel.DrawFill = false ];
this .radPictureBox1.LeftPanel.DrawBorder = false ;
this . radPictureBox1.RightPanel.DrawFill = false ;
this .radPictureBox1.RightPanel.DrawBorder = false ;
Voici le résultat 👏:
Mais nous devons maintenant mettre en évidence ces boutons d'une manière ou d'une autre, afin qu'ils soient clairement visibles sur un fond gris. peut être obtenu en définissant le remplissage, l'arrière-plan et la bordure sur CenterElementsStack des panneaux gauche et droit.
this .radPictureBox1.LeftPanel.CenterEleme ntsStack.Padding = nouveau Padding (3);
this .radPictureBox1.LeftPanel.CenterElementsStack.DrawFill = true ;
ceci .radPictureBox1.LeftPanel.CenterElementsStack.DrawBorder = true ;
this .radPictureBox1 .LeftPanel.CenterElementsStack.BackColor = Color.FromArgb (175, Color.DarkSlateBlue);
this .radPictureBox1.LeftPanel.CenterElementsStack.BorderCrolor = Color.FromElementsStack.BorderColor = Color.FromElementsStack.BorderColor .DarkSlateBlue);
this .radPictureBox1.RightPanel.CenterElementsStack.Padding = nouveau Padding (3);
this .radPictureBox1.RightPanel.CenterElementsStack.DrawFill = true ;
this .radPict ureBox1.RightPanel.CenterElementsStack.DrawBorder = true ;
this .radPictureBox1.RightPanel.CenterElementsStack.BackColor = Color.FromArueBlate.Delate.BackColor = Color.FromAruegbate );
this .radPictureBox1.RightPanel.CenterElementsStack.BorderColor = Color.FromArgb (175, Color.DarkSlateBlue);
Les boutons sont désormais très clairement visibles. 😄
❗❗ Il est important de noter que si nous voulons avoir des boutons solides placés sur un panneau semi-transparent, nous devons utiliser transparence dans le dos et la couleur de la bordure. Si nous définissons la propriété Opacity du panneau, cela rendra nos boutons semi-transparents également.
Les panneaux sont affichés par défaut lorsque la souris passe au-dessus du contrôle . Ils sont affichés avec une animation, en animant la propriété Opacity (animation de fondu). Nous pouvons personnaliser l'animation et animer une autre propriété. Notre objectif est de transformer l'animation de fondu en diapositive. Pour ce faire, nous définit la DisplayProperty qui est modifiée lorsque le panneau est affiché ou masqué de Opacity à PositionOffset .
this .radPictureBox1.LeftPanel.DisplayProperty = RadElement.PositionOffsetProperty;
this [1 9659024] .radPictureBox1.RightPanel.DisplayProperty = RadElement.PositionOffsetProperty;
En plus de cela, chaque panneau fournit deux propriétés, VisibleValue et HiddenValue qui sont respectivement 1 . et 0 lorsque nous utilisons la propriété Opacity . Nous devons changer leurs valeurs en une valeur valide pour la propriété PositionOffset .
// Réinitialiser l'opacité à sa valeur visible
this . radPictureBox1.LeftPanel.Opacity = 1;
this .radPictureBox1.RightPanel.Opacity = 1;
// Chargez l'arborescence des éléments, afin que nous puissions avoir des limites valides des panneaux
this .radPictureBox1.LoadElementTree ();
this .radPictureBox1.LeftPanel.VisibleValue = nouveau SizeF (0, 0);
this .radPictureBox1.LeftPanel.HiddenValue = new SizeF (- this .radPictureBox1.LeftPanel.Bounds.Width, 0 );
this .radPictureBox1.RightPanel.VisibleValue = new SizeF (0, 0);
this .radPictureBox1.RightPanel.HiddenValue = new SizeF ( this .radPictureBox1.RightPanel.Bounds.Width, 0);
Belle animation de diapositives pour les boutons de navigation. 😇
Jusqu'à présent, nous avons ajouté quelques boutons à notre commande de boîte d'image et personnalisé les panneaux. Maintenant, ajoutons les chemins de toutes les images situées dans le dossier «Images» de notre projet, stockons-les dans une collection et affichons la première image dans le champ RadPictureBox:
// Enregistrer tous les chemins d'images dans une liste
private List < string > chemins;
// Stocke l'index de l'image sélectionnée, nous l'utiliserons lors de la navigation avec boutons
private int selectedImageIndex;
public RadForm1 ()
{
// ... code précédent
this .selectedImageIndex = 0;
this .paths = Directory.EnumerateFiles (@ ) ".. .. Images" ). ToList ();
this .radPictureBox1.Image = Image.FromFile ( this .paths [ this .selectedImageIndex] );
}
La dernière étape consiste à rendre les boutons précédent et suivant pleinement fonctionnels:
private void PreviousButton_Click ( ] objet expéditeur, EventArgs e)
{
this .selectedImageIndex -;
if ( this .selectedImageIndex <0)
{
this .selectedImageIndex = this .paths.Count - 1;
}
this .radPictureBox1.Image = Image.FromFile ( this .paths [ this .selectedImageIndex]);
}
private void NextButton_Click ( object expéditeur, EventArgs e)
{
this .selectedImageIndex ++;
if ( this .selectedImageIndex> = this .paths.Count)
{
this .selectedImageIndex = 0;
}
thi s .radPictureBox1.Image = Image.FromFile ( this .paths [ this .selectedImageIndex]);
}
Et le résultat 😍:
Partagez vos commentaires
N'hésitez pas à nous laisser un commentaire ci-dessous pour partager vos impressions. Nous aimerions savoir comment tout cela fonctionne pour vous. 😊 Vous pouvez visiter notre UI pour le portail de commentaires Winforms et nous faire savoir si vous avez des suggestions pour des fonctionnalités / contrôles particuliers.
Si vous n'avez pas essayé l'interface utilisateur Telerik pour WinForms, vous devriez consultez notre essai gratuit ou, mieux encore, parcourez toutes nos suites d'interface utilisateur dans le bundle DevCraft !
Source link