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.

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:

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.

Voici le résultat 👏:

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