Meilleur endroit pour éditer vos images – Sur le rivage de Maui

Affichez, modifiez et enregistrez des images sans installer de logiciel tiers ni ouvrir d’application externe. L’éditeur d’images .NET MAUI est là et prêt à trouver sa place dans vos applications de bureau et mobiles.

Le Telerik Bureau & Mobile R1 2023 la sortie est un tout petit peu derrière notre dos, mais elle était si forte que je viens juste de créer une introduction appropriée à certaines des arrivées les plus chaudes du .NET FIXE littoral.

Pouvez-vous imaginer le monde moderne dans lequel nous vivons sans outils de retouche d’image ? Que feraient les influenceurs ?! 🙊 Je n’en suis sûrement pas un moi-même mais j’ai une chose en commun avec eux aujourd’hui : vous présenter les nouveautés du marché qui valent vraiment la peine d’être essayées.

Je parie que les plus perspicaces d’entre vous savent déjà ce que je vais vous présenter dans ce blog : le composant .NET MAUI ImageEditor. 🎉 Également connu comme le premier outil d’édition d’images .NET MAUI sur le marché. Alors, ne perdons pas une minute de plus et explorons ensemble ses puissantes capacités.

Obtenez un bref avertissement

J’ai pensé qu’une présentation rapide serait utile et créerait des attentes appropriées de l’interface utilisateur Telerik pour le composant .NET MAUI ImageEditor.

En bref, l’éditeur d’images vous donnera, à vous et à vos utilisateurs finaux, la possibilité de :

• Visualisez et modifiez des images dans différents formats de fichiers
• Interagissez avec les images grâce au zoom et au panoramique, retournez et faites pivoter, redimensionnez et recadrez
• Conservez l’historique de tout ce qui précède grâce à l’annulation et au rétablissement

Un rôle crucial dans cette facilité dont je parle joue le Barre d’outils de l’éditeur d’images qui va de pair avec le contrôle. Pas de soucis, cela sera examiné dans les sections suivantes.

Oh, et bien sûr, vous pouvez sauvegarder l’image à tout moment vous sentez que le résultat souhaité est atteint.

Réchauffer l’image

Pour que le composant ImageEditor apparaisse sous les projecteurs, nous n’avons besoin que d’une seule ligne de code XAML ou C# (à votre convenance). Considérant, bien sûr, que vous avez déjà déroulé le tapis rouge, ou si nous sommes sérieux, avoir mis en place une nouvelle application .NET MAUI avec l’ajout de Telerik.UI.for.Maui NuGet.

Prêt? Action:

<telerik:RadImageEditor Source="YOUR_SOURCE_HERE" />

RadImageEditor imageEditor = new RadImageEditor () { Source = ImageSource.FromUri(new Uri("URI_TO_YOUR_SOURCE_HERE")) };

N’oublie pas de enregistrer les gestionnaires requis dans votre classe MauiProgram avant d’appuyer sur F5. 😅

Sachez également qu’il s’agit simplement du moyen le plus simple (du moins à mon avis) d’afficher des images avec le composant .NET MAUI ImageEditor. Tu peux Chargement des images depuis File, Uri, Stream ou Resource. Et le format de vos images peut également varier (JPEG, PNG, GIF, BMP) lors de leur importation et de leur exportation.

Cela peut sembler un peu incomplet ou comme si je me moquais de vous et que j’avais placé une image normale sur un écran vide. Donc, je suggère que nous utilisions des outils supplémentaires pour rendre les choses plus complètes. Plus d’informations à ce sujet dans la section suivante.

Jetez un coup d’œil à l’intérieur de la boîte à outils

Il est grand temps que je joue ma meilleure carte en ce moment.

L’éditeur d’images propose une boîte d’outils, et cette boîte est tellement remplie ! Dans cette section, je ferai de mon mieux pour les trier pour vous.

Barre d’outils de l’éditeur d’images

L’ImageEditorToolbar est une barre d’outils prête à l’emploi préremplie avec tous les éléments nécessaires pour manipuler les images. Quel meilleur tri de la boîte à outils que celui-ci, hein ? 😎

Pourquoi est-ce que je révèle simplement la barre d’outils de l’éditeur d’images .NET MAUI pour le bureau ? Parce que je veux le placer sous l’éditeur d’images pour mobile car c’est l’interface utilisateur avec laquelle je suis le plus familier et à l’aise. Oh, et je voulais aussi remplir davantage cet espace vide que nous avons vu lorsque nous avons rencontré l’éditeur d’images pour la première fois en chargeant cette fois une image orientée portrait. 😊

Quel est l’extrait de code prêt à copier pour les beautés ci-dessus ? Voilà :

<Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto, *, Auto">
    <telerik:RadImageEditorToolbar x:Name="imageEditorToolbar" Grid.Row="{OnIdiom Default=0, Phone=2}" HorizontalOptions="Fill" ImageEditor="{x:Reference imageEditor}" OptionsPanel="{x:Reference optionsPanel}" />
    <Grid ColumnDefinitions="*, Auto" Grid.ColumnSpan="2" Grid.Row="1">
        <telerik:RadImageEditor x:Name="imageEditor" Source="{OnIdiom Default=landscape.jpg, Phone=portrait.jpg}" />
        <telerik:RadToolbarOptionsPanel x:Name="optionsPanel" Grid.Column="1"/>
    </Grid>
</Grid>

Si je devais lister toutes les capacités de configuration de la barre d’outils de l’éditeur d’images et que ce blog était sur un vrai morceau de papier, écrit avec de la vraie encre, j’aurais manqué des deux. C’est pourquoi il serait préférable de les examiner dans le
Barre d’outils de l’éditeur d’images .NET MAUI section de la documentation en ligne.

Comme vous le verrez ici, la RadImageEditorToolbar hérite de la Barre d’outils Radce qui signifie que toutes les propriétés de configuration et de style disponibles pour la RadToolbar sont applicables à la RadImageEditorToolbar.

Trois choses importantes que vous devez savoir sur la barre d’outils de l’éditeur d’images :

• Ses éléments sont générés automatiquement (peuvent être modifiés via le Générer automatiquement des éléments bool propriété).
• L’interface utilisateur générée automatiquement pour mobile est adaptée pour optimiser à la fois l’espace d’écran utilisé et la facilité d’utilisation des outils respectifs.
• C’est pleinement personnalisable.

Pour continuer sur une dernière chose concernant l’interface utilisateur adaptée à la plate-forme que j’ai mentionnée. Certains des instruments pour ordinateur de bureau utilisent des panneaux dédiés affichés par défaut sur le côté droit de l’éditeur d’images. Je les montrerai sûrement dans les prochaines sous-sections dans lesquelles nous ne profiterons que de la barre d’outils minuscule mais si pratique pour explorer chaque outil rapidement et facilement.

Redimensionner, recadrer et zoomer — indispensables

Eh bien, si ce n’est pas un trio incontournable pour un éditeur d’images, je ne sais pas ce que c’est. Je crois qu’ils sont explicites, donc je vais juste les montrer tous en action.

Avez-vous remarqué les panneaux que j’ai mentionnés à la fin de la section précédente ? 👀

Retournez et faites pivoter pour rendre les choses superbes

La partie suivante des outils inclut la possibilité de retourner l’image à la fois horizontalement et verticalement ou de la faire pivoter dans le sens des aiguilles d’une montre et dans le sens inverse des aiguilles d’une montre. Vérifie-les:

Maintenant que nous avons couvert les capacités de transformation d’image de .NET MAUI ImageEditor à l’aide de sa barre d’outils, je pense qu’il convient également de mentionner ses filtres intégrés. Ils incluent la teinte, la luminosité de la saturation, le contraste, le flou et la netteté. Voici un aperçu rapide :

Ce n’est pas parce que je suis fan des choses qui rendent la vie plus facile et plus agréable comme la barre d’outils de l’éditeur d’images que vous devez l’être aussi. 🤓 L’éditeur d’images .NET MAUI fournit commandes pour modifier l’image par programme sans utiliser la barre d’outils ImageEditor. Je l’ai vérifié aussi, et j’ai été frappé par le fait que je n’avais pas mentionné la possibilité d’annuler, de refaire et de réinitialiser l’image à tout moment.

Fait sur mesure

Pour cette section, je voulais créer quelque chose de personnalisé, quelque chose de léger et mignon. Je ne voulais pas vous (et moi) faire peur avec une personnalisation trop poussée. Je me suis inspiré de l’une des démos de l’éditeur d’images dans le Application de démonstration SDKBrowser– assurez-vous de vérifier cette application pour de nombreuses autres démos impressionnantes pour tous nos composants .NET MAUI. Maintenant, passons directement au code :

<Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto, *, Auto"
    <telerik:RadImageEditorToolbar x:Name="imageEditorToolbar" Grid.Row="{OnIdiom Default=0, Phone=2}" HorizontalOptions="Fill" ImageEditor="{x:Reference imageEditor}" OptionsPanel="{x:Reference optionsPanel}" AutoGenerateItems="False">
        <telerik:ImageEditorCropToolbarItem>
            <telerik:ImageEditorCropToolbarItem.CropOperations>
                <telerik:CropOperation AspectRatio="Free" Text="Free"/>
                <telerik:CropOperation AspectRatio="Original" Text="Original"/>
                <telerik:CropOperation Text="Heart" Geometry="{x:Static telerik:Geometries.Heart}" />
            </telerik:ImageEditorCropToolbarItem.CropOperations>
        </telerik:ImageEditorCropToolbarItem>
    </telerik:RadImageEditorToolbar>
    <Grid ColumnDefinitions="*, Auto" Grid.ColumnSpan="2" Grid.Row="1">
        <telerik:RadImageEditor x:Name="imageEditor" Source="{OnIdiom Default=landscape.JPG, Phone=portrait.JPG}" />
        <telerik:RadToolbarOptionsPanel x:Name="optionsPanel" Grid.Column="1"/>
    </Grid>
</Grid>

En bref, j’ai désactivé la génération automatique des éléments de la barre d’outils et n’en ai ajouté que trois pour les besoins de mon exemple – un pour annuler, un pour rétablir et le plus intéressant – le ImageEditorCropToolbarItem.

J’y ai branché trois opérations de recadrage – Free, Original et Heart – encore une fois, la dernière est ma plus recherchée mais je ne voulais pas la laisser seule. Je suis tellement content de ne pas avoir à composer moi-même la géométrie souhaitée, mais de bénéficier de la classe Telerik’s Geometries et de son cœur !

Vous voulez voir comment le résultat s’est avéré? Prêt ou pas, c’est parti :

De quoi suis-je reconnaissant ? Beaucoup de choses, mais en ce moment – pour votre intérêt pour Telerik UI pour .NET MAUI et ce blog, mais surtout – pour votre temps. Et toi?

Inscrivez-vous pour un essai

Intéressé à essayer .NET MAUI ? Je sais que vous êtes. Ou vous travaillez déjà activement avec lui. 🤔 La dernière version de Telerik UI pour .NET MAUI est disponible en téléchargement dans Votre compte. Si vous êtes par hasard un débutant dans la famille, il vous suffit de vous inscrire à notre essai gratuit de 30 jours, qui vous donne accès aux composants ainsi qu’à notre support technique légendaire sans frais.

Essayez l’interface utilisateur Telerik pour .NET MAUI

Une fois que vous aurez obtenu les derniers éléments, vous serez en mesure de créer vos prochains chefs-d’œuvre mobiles et de bureau avec le composant .NET MAUI ImageEditor. 🎨 Et quand vous le faites, n’oubliez pas de partager vos pensées dans les commentaires ou les MAUI .NET Portail de commentaires.

Je vous ai dit que je ne suis pas un influenceur au début et que je ne vous forcerai pas à appuyer sur des boutons d’abonnement, mais merci d’avoir pris le temps de lire mon blog. Restez à l’écoute pour d’autres composants Telerik MAUI géniaux, cependant. ✨