Améliorez votre interface utilisateur avec le nouveau contrôle Telerik WPF RadSvgImage

Le composant RadSvgImage de Telerik UI pour WPF permet aux développeurs d’intégrer de manière transparente des graphiques vectoriels dans leurs applications. Regarde de plus près!

Dans le très attendu Version R3 2023Progress Telerik a présenté le système révolutionnaire RadSvgImage contrôle dans Interface utilisateur pour WPF. Cet ajout innovant permet aux développeurs d’intégrer des graphiques vectoriels dans leurs applications, élevant ainsi l’expérience utilisateur à un tout autre niveau.

Avec la possibilité de redimensionner les images sans sacrifier la qualité, le contrôle RadSvgImage révolutionne le développement de l’interface utilisateur dans WPF. Il est particulièrement précieux pour créer des applications à haute résolution, en donnant la priorité à la satisfaction des utilisateurs. La pierre angulaire de cette avancée réside dans Scalable Vector Graphics (SVG), un format basé sur XML qui permet aux graphiques de s’adapter de manière transparente à tous les paramètres DPI.

Premiers pas avec RadSvgImage

Ajouter RadSvgImage à votre projet est un jeu d’enfant ! Incluez simplement une référence au Telerik.Windows.Controls assemblage, et vous êtes prêt. C’est si simple! Afficher une image SVG en tant que composant autonome est un jeu d’enfant, car vous pouvez définir la propriété UriSource comme ceci :

<telerik:RadSvgImage UriSource="SVGIcon.svg" Width="128" Height="128"/>

Gardez à l’esprit que RadSvgImage n’a pas de taille par défaut. S’il est placé dans un panneau qui le mesure avec Infinity (par exemple, dans un StackPanel), vous devrez spécifier une taille pour que l’image SVG s’affiche correctement. 🛠️

Envie de pimenter les choses ? Vous pouvez également utiliser RadSvgImage en tant qu’extension de balisage, au lieu de le configurer en tant que composant distinct :

<Image Source="{telerik:RadSvgImageSource Source="SVGImage.svg"}" 
       Width="128" 
       Height="128"/>

Personnalisation des couleurs de remplissage

Vérifiez-le! Vous pouvez totalement échanger la couleur de remplissage de votre image SVG en modifiant le OverrideColor propriété:

Des animations simplifiées

Le contrôle RadSvgImage prend en charge l’animation intégrée, vous permettant de donner vie à vos images SVG. Pour appliquer une animation, utilisez le animate, animateMotion et animateTransform éléments à l’intérieur du XML du SVG.

<g>
   <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="12s" />
   <use xlink:href="#minuteHand" />
</g>

Application de pinceaux aux éléments

Si vous avez toujours voulu remplir vos images SVG d’une touche de couleur, vous avez de la chance. Il ne vous reste plus qu’à plonger dans CustomBrushes propriété. Ce petit bijou vous permet d’appliquer facilement différentes teintes aux éléments de vos SVG. C’est comme donner une touche personnelle à vos graphiques ! Juste pour information, la propriété CustomBrushes est un Dictionary<string, Brush>ce qui signifie essentiellement que c’est un outil astucieux pour gérer les variations de couleurs.

Prenons un exemple, d’accord ?

Supposons que votre fichier SVG soit prêt. Vous pouvez le considérer comme votre toile, attendant de prendre vie. Voici un extrait :

<svg width="200" height="200" viewBox="130 130 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     enable-background="new 0 0 512 512" xml:space="preserve">
    <defs>
        <solidColor id="calendar-lines"/>
        <solidColor id="calendar-datebgr"/>
        <solidColor id="calendar-date"/>
    </defs>
    <path d="M14.5,39.8 L112.2,39.8 M14.5,55.8 L112.2,55.8 M14.5,71.8 L112.2,71.8 M14.5,87.8 L112.2,87.8 M14.5,103.8 L112.2,103.8 M22.8,31.9 L22.8,109.1 M39.0,31.9 L39.0,109.1 M55.2,31.9 L55.2,109.1 M71.5,31.9 L71.5,109.1 M87.7,31.9 L87.7,109.1 M103.9,31.9 L103.9,109.1 M116.6,1 L11.1,1 C5.8,1 1.5,5.2 1.5,10.5 L1.5,114.5 C1.5,119.7 5.8,124 11.1,124 L116.6,124 C121.9,124 126.3,119.7 126.3,114.5 L126.3,10.5 C126.3,5.2 121.9,1 116.6,1 z M1.0,21 L125.7,21"
          fill="transparent"
          transform="translate(170,166)"
          stroke="url(#calendar-lines)" stroke-width="2" width="130" height="125" />
    <rect x="224.977" y="222" width="32.4675" height="32" fill="url(#calendar-datebgr)"/>
   <path d="M246.145 230.268C245.383 231.664 244.664 233.048 243.987 234.419C243.31 235.782 242.696 237.153 242.146 238.532C241.596 239.912 241.118 241.304 240.711 242.709C240.305 244.105 239.992 245.536 239.772 247H236.687C236.89 245.697 237.178 244.397 237.55 243.103C237.931 241.799 238.375 240.5 238.883 239.205C239.391 237.902 239.958 236.594 240.584 235.282C241.219 233.97 241.892 232.646 242.603 231.309H233.983V228.795H246.145V230.268Z" 
         fill="url(#calendar-date)" stroke="transparent" stroke-width="0"/>
</svg>

Maintenant, vous souhaiterez créer une collection de dictionnaires personnalisée pour définir vos couleurs.

public class CustomDictionary : Dictionary<string, Brush> { } 

Il est temps de charger votre dictionnaire personnalisé avec des choix dynamiques. Regarde ça:

<Grid.Resources>
    <local:CustomDictionary x:Key="CustomBrushesDictionary">
        <SolidColorBrush x:Key="calendar-lines" Color="#08BAB7"/>
        <SolidColorBrush x:Key="calendar-datebgr" Color="#b708ba"/>
        <SolidColorBrush x:Key="calendar-date" Color="Black"/>
    </local:CustomDictionary>
</Grid.Resources>

Et enfin, rassemblons tout cela. Attachez votre RadSvgImage au dictionnaire personnalisé à l’aide du CustomBrushes propriété. Regardez votre image SVG ressortir avec personnalité !

 <Grid>
     <Grid.Resources>
         <local:CustomDictionary x:Key="CustomBrushesDictionary">
             <SolidColorBrush x:Key="calendar-lines" Color="#08BAB7"/>
             <SolidColorBrush x:Key="calendar-datebgr" Color="#B708BA"/>
             <SolidColorBrush x:Key="calendar-date" Color="#FBFF00"/>
         </local:CustomDictionary>
     </Grid.Resources>
     <telerik:RadSvgImage UriSource="/Images/SvgImage.svg" CustomBrushes="{StaticResource CustomBrushesDictionary}" Width="128" Height="128"/>
 </Grid>

Voilà ! Votre RadSvgImage arbore désormais des couleurs personnalisées et est prête à briller. 🎨✨

Une comparaison visuelle : SVG et PNG

L’exemple ci-dessous avec RadGridView comporte deux GridViewImageColumns, l’un utilisant une image SVG et l’autre une image PNG. La différence est frappante. Bien que les images PNG soient un peu floues, la colonne SVG conserve sa clarté.

Conclusion

En résumé, le contrôle RadSvgImage offre une solution polyvalente et puissante pour intégrer de manière transparente des graphiques vectoriels de haute qualité dans vos applications. Sa flexibilité, associée à des fonctionnalités telles que des couleurs personnalisables et la prise en charge d’animation intégrée, ouvre un monde de possibilités pour créer des interfaces utilisateur époustouflantes. Si vous avez besoin de plus d’informations à ce sujet, assurez-vous de vérifier le Documentationaussi.

N’oubliez pas de visiter nos démos WPF récemment renommées pour une plongée plus approfondie dans les capacités de RadControls, y compris de nombreux exemples illustrant le potentiel de SVG et d’autres contrôles. Explorez un large éventail de scénarios et découvrez comment RadControls peut révolutionner le développement de vos applications. De l’intégration SVG à une multitude d’autres fonctionnalités puissantes, ces démos constituent une ressource inestimable pour libérer tout le potentiel de vos projets. Rendez-vous dès maintenant et découvrez l’avenir du développement d’interface utilisateur !

Découvrez les démos

Ne manquez pas non plus le Générateur de thèmes de couleurs. C’est un outil fantastique qui vous permet de prévisualiser tous les contrôles avec différents thèmes et couleurs, vous offrant ainsi un moyen rapide et facile de trouver le look parfait pour votre application.

Essayez-le aujourd’hui et améliorez l’expérience visuelle de votre application !