Modifiez facilement les images avec l'interface utilisateur Telerik pour Xamarin ImageEditor

RadImageEditor de Telerik UI pour Xamarin vous permet, ainsi qu’aux utilisateurs finaux de votre application mobile, de visualiser et d’éditer facilement des images dans différents formats de fichier.

Si vous utilisez notre suite Telerik UI pour Xamarin vous pouvez avoir tous les outils d'édition au même endroit avec le contrôle RadImageEditorToolbar . Le contrôle Barre d'outils est conçu pour améliorer encore les capacités de l'éditeur en introduisant un ensemble d'outils pour l'édition d'images. Il offre également la possibilité d'être personnalisé avec les outils adaptés à vos besoins.

Dans cet article de blog, je vais attirer votre attention sur deux éléments: RadImageEditor et RadImageEditorToolbar . Vous vous familiariserez avec les fonctionnalités qu’ils fournissent et comment les utiliser. Nous en apprendrons davantage sur le processus de personnalisation de la barre d’outils et sur la manière d’y appliquer des styles.

Fonctionnalités de l’éditeur d’images Xamarin.Forms

• Importation et exportation d’images dans différents formats tels que JPEG et PNG – GIF et BMP peuvent être importés uniquement aux fins de visualisation pour l'instant
• Diverses options de source d'image: Les images peuvent être chargées à partir d'un flux, d'un fichier (ressource intégrée ou d'une image située sur le périphérique) et d'un URI
• Ensemble de fonctionnalités d'édition d'image – y compris les transformations . et effets
• Undo / Redo support
• Panoramique et support support
• du support personnalisé
• ]
• Barre d'outils dotée de fonctions de personnalisation

Barre d'outils Editeur d'images

The RadImageEdi tor control est livré avec différentes capacités d’édition et, avec l’aide de ImageEditorToolbar vous pouvez fournir à vos utilisateurs un moyen simple et rapide d’éditer leurs images. Que ce soit pour la création d'une galerie d'images à part entière, ou simplement pour ajouter un avatar à son profil, le composant Editeur d'images de Xamarin Forms est là pour vous.

La barre d'outils par défaut comprend des éléments pour toutes les options d'édition d'image disponibles. Vous pouvez également personnaliser les options d'édition affichées en fonction de vos besoins.

Les fonctionnalités d'édition peuvent être divisées en trois catégories principales:

• Transformations d'image
  • . 19659019] qui comprend des opérations telles que Crop Rotate Redimensionner etc.
  • Effets appliqués tels comme Hue, Saturation, Luminosité, Contraste et beaucoup plus .
  • Réversion et réapplication actions telles que Annuler, rétablir, réinitialiser .

  Mise en route de l'éditeur d'images

  Créons maintenant un exemple d'application de démonstration utilisant les fonctionnalités d'édition du contrôle ImageEditor.

  Ajouter les ImageEditor et ImageEditor Toolbar sur votre page. Notez que nous devons associer le contrôle ImageEditor au contrôle Toolbar. Cela peut être réalisé à l'aide de la propriété ImageEditor de la barre d'outils. Nous avons besoin de cela car tous les éléments de la barre d'outils exécutent leurs actions contre l'éditeur d'images spécifié.

   < Grid >  
     < Grid.RowDefinitions  >  
     < RowDefinition   />  
     < RowDefinition   Hauteur  =  ] "Auto"   />  
     </  Grid.RowDefinitions    </  </  </  <19659029]  <19659029]  <19659029] : RadImageEditor   x: Name  =  "imageEditor" >  
   
    < telerikImageEditor: RadImageEditor.Source (19659029)> 
  
     < OnPlatform   x: TypeArguments  =  "ImageSource"   Défaut  =  "image.jp eg ">  
     < Le   Platform  = " UWP "> Les actifs  image.jpeg </ [19659029] On >  
     </  OnPlatform >  
   
   </  </  telerikImageEditor: RadImageEditor.Source >  
  
     </  telerikImageEditor: RadImageEditor > 
   </  telerikImageEditor: RadImageEditor  Grid.Row  =  "1"   ImageEditor  =  "{x: Reference imageEditor}"   />  
  
    </  ] Grid > 
  

  et ajoutez l’espace de noms suivant:

   xmlns: telerikImageEditor = "espace de noms clr: Telerik.XamarinForms.ImageEditor; assembly = Telerik.XamarinForms.ImageEditor" 
  

  Notez que pour la démonstration, le Le fichier .jpeg est chargé à partir des ressources de la plate-forme.
  Voici à quoi ressemble la barre d'outils par défaut:

  Sur Android

  

  sur iOS

  

  Personnalisation de la barre d'outils Editeur d'image

  La barre d'outils RadImageEditor peut être facilement personnalisé. Par défaut, tous les éléments ImageEditorToolbar sont automatiquement remplis . Cela peut être modifié en définissant la propriété RadImageEditorToolbar AutoGenerateItems sur False .

  Intégrons dans notre application de démonstration les outils d'édition suivants: Crop, Undo, Redo et Luminosité . Lorsque AutoGenerateItems est false nous devrons ajouter manuellement les éléments Rogner, Annuler, Rétablir et Luminosité de la barre d'outils:

   < Grille >  
  . 19659017]   < Grid.RowDefinitions >  
  
     < Définition de la ligne   />  
       < RowDefinition   Hauteur  =  "Auto"   />  
   
   =  </  Grid.RowDefinitions . >  
  
     < telerikImageEditor: RadImageEditor   x: Nom  =  "imageEditor" > > 
    . 19659029] < telerikImageEditor: RadImageEditor.Source >  
  
    [ OnPlatform   x: TypeArguments  =  "I mageSource "  Default  = " image.jpeg ">  
     < Le   Plate-forme  =  "UWP" > Actifs  image.jpeg </  sur >  
     </  OnPlatform >  
     </  telerikImageEditor: RadImageEditor.Source >  
     </  telerikImageEditor: RadImageEditor > 
     < telerikImageEditor: RadImageEditorToolbar   Grid.Row  =  = 1   ImageEditor  =  =  =  =  " ] AutoGenerateItems  =  "False" >  
  
  
  
  
    
  
  
                 
  
  
  
  
     < telerikImageEditor: BrightnessToolbarItem   /> 19659029].  < telerikImageEditor: CropToolbarItem  />  
     telerikImageEditor: UndoToolbarItem:  /> 
  
  
   ] < telerikImageEditor: RedoToolbarItem  />  
     </  telerikImageEditor: RadImageEditorToolbar > /  ] Grille > 
  

  Nous pouvons étendre l’extrait de code ci-dessus en personnalisant l’élément de la barre d’outils (Luminosité). Chaque élément de la barre d'outils de Effets et ImageTransformations peut être personnalisé à l'aide des propriétés ApplyToolbarItem CancelToolbarItem et TemplateToolbarItem :

   < Grille >  
     < Grid.RowDefinitions >  
      < <. ] RowDefinition   />  
     < RowDefinition   Height  =  "Auto"   />  
   
     </  Grid.RowDefinitions >  
     < telerikImageEditor: RadImageEditor   x: Nom  imageEditor ">  
     < telerikImageEditor: RadImageEditor.Source >  
   [1949017]   < OnPlatform   x: TypeArguments  =  "ImageSource"   Par défaut  =  "image.jpeg" >  . 19659017]   < Le   Plate-forme  =  "UWP" > Actifs  image.jpeg </  Le >  . 19659017]   </  OnPlatform >  
  
     </  telerikImageEditor: RadImageEditor.Source >   </  telerikImageEditor: RadImageEditor >  
  
     < telerikImageEditor: RadImageEditorToolbar   Grid.Renoir [299029] "1"   ImageEditor  =  "{x: Reference imageEditor}"   AutoGenerateItems  =  "Faux" >  
     < telerikImageEditor: BrightnessToolbarItem   AutoGenerateItems  =  "Faux" >  
     < telerik HorizontalOptions  =  "Début"   />  
     < telerikImageEditor: TemplateToolbarItem >   
  
   
    ] < telerikImageEditor: TemplateToolbarItem.Template >  
     [ Donnée >  
       ] Curseur   Maximum  =  "2"   Minimum  =  "- 1"   Valeur  =  "{Valeur obligatoire}" [19659038] />  
     </  DataTemplate >  
     </  telerikImageEditor: TemplateToolbarItem.Template >  
  
   
    . ] </  telerikImageEditor: TemplateToolbarItem >  
  
     < telerikImageEditor: ApplyToolbarItem   >  
     </  telerikImageEditor: BrightnessToolbarItem >  
     < telerikImageEditor: CropToolbarItem  
     < telerikImageEditor: UndoToolbarItem  />  
   
    < telerikImageEditor: Redooolbaremem15 
  
    [19659029] </  telerikImageEditor: RadImageEditorToolbar >  
    </  Grille > 
  

  du serveur ici pour plus de détails sur la personnalisation de la barre d'outils.

  Mise en forme du contrôle de l'éditeur d'images

  L'outil par défaut ImageEditorToolbar peut être mis en forme à l'aide de la propriété Style Style . Vous devrez déclarer le style dans le ResourceDictionary de la page et définir sa propriété TargetType de type telerikImageEditor: ImageEditorToolbarItem . Pour en savoir plus sur la procédure à suivre, consultez cet article Styling Toolbar

  Si vous utilisez une barre d’outils personnalisée, vous pouvez facilement appliquer un style à chaque élément de la barre d’outils. Pour plus d'informations à ce sujet, consultez ici .

  Dites-nous ce que vous pensez

  Avons-nous suscité votre intérêt avec le RadImageEditor et ses fonctions? Nous aimerions entendre ce que vous en pensez. Si vous avez des idées concernant les fonctionnalités à ajouter, n'hésitez pas à partager ces informations avec nous sur notre interface utilisateur Telerik pour Xamarin Feedback .

  N'oubliez pas de consulter les différentes démonstrations des commandes. dans notre SDK Sample Browser et l'application Telerik UI pour Xamarin Demos .

  Si vous n'avez pas encore testé l'interface utilisateur Telerik pour la suite Xamarin, essayez-la avec un Essai gratuit de 30 jours offrant toutes les fonctionnalités et les commandes à votre disposition, sans frais.

  Joyeux code avec nos contrôles!

  ---