Techniques Avancées de Rendu Graphique et Vectoriel dans WPF

Les Pinceaux de Rendu (Brushes)

Dans l'écosystème WPF, la peinture des surfaces graphiques est gérée par des classes dérivées de Brush. Le choix du pinceau détermine l'apparence visuelle finale des contrôles et des formes.

  • SolidColorBrush : Applique une teinte uniforme. Très utilisé pour les arrière-plans ou les bordures simples.
  • LinearGradientBrush : Génère une transition de couleurs le long d'un axe défini par des points de départ et d'arrivée.
  • RadialGradientBrush : Crée un dégradé circulaire ou elliptique qui rayonne depuis un point focal vers l'extérieur.
  • ImageBrush : Remplit une zone avec une image matricielle, offrant des options de pavage (TileMode) et de redimensionnement.
  • DrawingBrush & VisualBrush : Permettent de peindre une surface en utilisant respectivement un objet Drawing ou un élément visuel existant de l'interface utilisateur (idéal pour des effets de reflet).
  • BitmapCacheBrush : Similaire au VisualBrush, mais optimisé pour la performence lorsqu'un élément complexe doit être dupliqué à plusieurs reprises.

Voici une implémentation modifiée illustrant l'utilisation d'un dégradé radial et d'une bordure colorée :

<Border Width="220" Height="120" CornerRadius="15" BorderThickness="3">
    <Border.BorderBrush>
        <SolidColorBrush Color="#FF2C3E50"/>
    </Border.BorderBrush>
    <Border.Background>
        <RadialGradientBrush GradientOrigin="0.3,0.3" Center="0.5,0.5" RadiusX="0.6" RadiusY="0.6">
            <GradientStop Color="#FF3498DB" Offset="0"/>
            <GradientStop Color="#FF2980B9" Offset="0.7"/>
            <GradientStop Color="#FF1A5276" Offset="1"/>
        </RadialGradientBrush>
    </Border.Background>
</Border>

Mise à l'Échelle Adaptive avec le Contrôle Viewbox

Le contrôle Viewbox est un conteneur de disposition essentiel pour les interfaces réactives. Il étire ou réduit proportionnellement son contenu unique pour qu'il s'adapte parfaitement à l'espace alloué, à condition que les dimensions initiales de l'élément enfant soient définies.

<Grid>
    <Viewbox Stretch="Uniform" MaxWidth="400" HorizontalAlignment="Center">
        <StackPanel Orientation="Horizontal" Margin="10">
            <Polygon Points="0,60 60,0 120,60 60,120" Fill="#FFF1C40F" Stroke="#2C3E50" StrokeThickness="4"/>
            <Ellipse Width="100" Height="100" Fill="#FFE74C3C" Margin="30,0,0,0" Stroke="#2C3E50" StrokeThickness="4"/>
        </StackPanel>
    </Viewbox>
</Grid>

Formes Élémentaires et Alignement des Pixels

WPF fournit une hiérarchie de classes dérivées de Shape pour le dessin vectoriel de base :

Classe Caractéristiques
Rectangle Supporte les coins arrondis via RadiusX et RadiusY.
Ellipse Dessine des cercles ou des ovales. Nécessite Fill ou Stroke pour être visible.
Line Trace un segment entre deux points. Les tirets sont configurables avec StrokeDashArray.
Polyline Enchaîne plusieurs segments de droite ouverts.
Polygon Similaire à Polyline, mais ferme automatiquement la figure en reliant le dernier point au premier.

Optimisation du rendu : L'anti-aliasing par défaut de WPF peut rendre les lignes fines floues. L'activation de la propriété SnapsToDevicePixels="True" force l'alignement des contours sur la grille physique des pixels de l'écran.

<Canvas SnapsToDevicePixels="True" Width="300" Height="100">
    <!-- Rectangle aux coins arrondis avec bordure en pointillés -->
    <Rectangle Canvas.Left="20" Canvas.Top="20" Width="140" Height="60" 
               RadiusX="12" RadiusY="12" 
               Stroke="#27AE60" StrokeThickness="6" StrokeDashArray="2 4"/>
               
    <!-- Ligne diagonale précise -->
    <Line X1="180" Y1="20" X2="280" Y2="80" Stroke="#C0392B" StrokeThickness="4"/>
</Canvas>

Transformations Géométriques

Le système de coordonnées d'un élément peut être altéré sans modifier ses propriétés physiques grâce aux classes de transformation :

  • TranslateTransform : Déplacement sur les axes X et Y.
  • RotateTransform : Rotation autour d'un point d'ancrage.
  • ScaleTransform : Agrandissement ou réduction.
  • SkewTransform : Inclinaison (cisaillement) bidimensionnelle.
  • MatrixTransform : Application d'une matrice de transformation personnalisée.

Il est courant de combiner ces effets via un TransformGroup.

<Ellipse Width="120" Height="60" Fill="#8E44AD" RenderTransformOrigin="0.5,0.5">
    <Ellipse.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1.3" ScaleY="0.7"/>
            <SkewTransform AngleX="15" AngleY="-10"/>
            <RotateTransform Angle="45"/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>

Transparence et Masques d'Opacité

Au-delà de la propriété globale Opacity (qui affecte uniformément l'élément), WPF permet d'utiliser un OpacityMask. Ce masque applique un dégradé de transparence en fonction de la luminance ou du canal alpha du pinceau fourni.

Exemple de création d'un effet de reflet pour un bouton :

<StackPanel VerticalAlignment="Center">
    <Button x:Name="actionButton" Content="Valider l'Action" FontSize="22" Padding="15,8" Background="#2980B9" Foreground="White"/>
    
    <!-- Reflet du bouton -->
    <Rectangle Height="45" RenderTransformOrigin="0.5,0">
        <Rectangle.Fill>
            <VisualBrush Visual="{Binding ElementName=actionButton}"/>
        </Rectangle.Fill>
        <Rectangle.OpacityMask>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#66FFFFFF" Offset="0"/>
                <GradientStop Color="Transparent" Offset="0.8"/>
            </LinearGradientBrush>
        </Rectangle.OpacityMask>
        <Rectangle.RenderTransform>
            <ScaleTransform ScaleY="-1"/>
        </Rectangle.RenderTransform>
    </Rectangle>
</StackPanel>

Graphiques Vectoriels Avancés avec la Classe Path

L'élément Path est l'outil le plus flexible de WPF. Il s'appuie sur la propriété Data, qui accepte des objets abstraits dérivés de Geometry.

Types de Géométries

  • Géométries primiitves : LineGeometry, RectangleGeometry, EllipseGeometry.
  • GeometryGroup : Agrège plusieurs formes sans interaction logique.
  • CombinedGeometry : Fusionne deux géométries selon des modes booléens (Union, Intersect, Xor, Exclude).
  • PathGeometry : Décrit des figures complexes composées de PathFigure contenant divers segments (LineSegment, ArcSegment, BezierSegment, etc.).
  • StreamGeometry : Alternative allégée et immuable à PathGeometry, idéale pour les ressources statiques afin d'économiser la mémoire.

Création d'une forme abstraite par exclusion géométrique :

<Path Fill="#E67E22" Stroke="#D35400" StrokeThickness="3">
    <Path.Data>
        <CombinedGeometry GeometryCombineMode="Exclude">
            <CombinedGeometry.Geometry1>
                <RectangleGeometry Rect="0,0 120,120" RadiusX="20" RadiusY="20"/>
            </CombinedGeometry.Geometry1>
            <CombinedGeometry.Geometry2>
                <EllipseGeometry Center="60,60" RadiusX="45" RadiusY="45"/>
            </CombinedGeometry.Geometry2>
        </CombinedGeometry>
    </Path.Data>
</Path>

Le Mini-Langage Path

Pour une syntaxe plus concise, WPF intègre un convertisseur de type pemrettant de définir des géométries via des chaînes de caractères (M pour Move, L pour Line, Z pour Close) :

<Path Stroke="#16A085" StrokeThickness="4" Fill="#1ABC9C" 
      Data="M 20,80 L 60,20 L 100,80 Z"/>

Découpage d'Éléments (Clipping)

Tout contrôle WPF possède une propriété Clip acceptant une géométrie. Cela permet de masquer des portions d'une interface ou d'une image.

<Image Source="/Assets/landscape.png" Stretch="UniformToFill" Width="300" Height="300">
    <Image.Clip>
        <EllipseGeometry Center="150,150" RadiusX="150" RadiusY="150"/>
    </Image.Clip>
</Image>

Intégration de Ressources SVG

WPF ne lit pas nativement les fichiers .svg. La pratique standard consiste à convertir les chemins SVG en objets XAML natifs (DrawingImage ou Path) à l'aide d'outils externes tels que SvgToXaml ou SharpVectors. Une fois convertis, ces vecteurs s'intègrent parfaitement dans le dictionnaire de ressources.

<Window x:Class="VectorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Rendu Vectoriel SVG" Height="350" Width="400">
    <Window.Resources>
        <!-- Ressource générée à partir d'un fichier SVG -->
        <DrawingImage x:Key="AppLogoIcon">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="#34495E" Geometry="M 10,10 L 90,10 L 50,90 Z"/>
                    <GeometryDrawing Brush="#E74C3C" Geometry="M 110,50 A 40,40 0 1,1 110,51 Z"/>
                    <GeometryDrawing Brush="#F1C40F" Geometry="M 200,10 H 280 V 90 H 200 Z"/>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Resources>
    
    <Grid Background="#ECF0F1">
        <Image Source="{StaticResource AppLogoIcon}" Width="250" Height="250" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

Étiquettes: WPF XAML C# Vector-Graphics UI-Rendering

Publié le 10 août à 05h48

Étiquettes Populaires

©2026 L'Atelier Monstre