Vue d'ensemble des objets Drawing

Article
08/10/2011

Cette rubrique présente les objets Drawing et décrit comment les utiliser pour dessiner efficacement des formes, des images, du texte et des médis. Utilisez les objets Drawing lorsque vous créez des images clipart, dessinez avec un DrawingBrush ou utilisez les objets Visual.

Cette rubrique comprend les sections suivantes.

Qu'est-ce qu'un objet Drawing ?
Dessiner une forme
Dessiner une image
Lire un média (code uniquement)
Dessiner un texte
Dessins composites
Afficher un dessin comme une image
Peindre un objet avec un objet Drawing
Rendu d'un dessin avec un Visual
Objets DrawingContext
Énumérer le contenu d'un Visual
Rubriques connexes

Qu'est-ce qu'un objet Drawing ?

Un objet Drawing décrit un contenu visible, tel qu'une forme, une image, une vidéo ou une ligne de texte. Il existe différents types d'objets Drawing pour les types différents de contenu. La liste qui suit répertorie les différents types d'objets Drawing.

GeometryDrawing – Dessine une forme.
ImageDrawing – Dessine une image.
GlyphRunDrawing – Dessine du texte.
VideoDrawing – Lit un fichier audio ou vidéo.
DrawingGroup – Dessine d'autres dessins. Utilisez un groupe de dessins pour combiner d'autres dessins en un seul dessin composite.

Les objets Drawing sont polyvalents. Il existe de nombreuses façons d'utiliser un objet Drawing.

Vous pouvez l'afficher comme une image à l'aide d'un contrôle DrawingImage et d'un contrôle Image.
Vous pouvez l'utiliser avec un DrawingBrush pour peindre un objet, tel que l'Background d'une Page.
Vous pouvez l'utiliser pour décrire l'apparence d'un DrawingVisual.
Vous pouvez l'utiliser pour énumérer le contenu d'un Visual.

WPF propose d'autres types d'objets permettant de dessiner des formes, des images, du texte et des médias. Par exemple, vous pouvez aussi utiliser des objets Shape pour dessiner des formes et le contrôle MediaElement fournit un autre moyen d'ajouter un contenu vidéo à votre application. Par conséquent, quand devez-vous utiliser des objets Drawing ? Lorsque vous pouvez sacrifier des fonctionnalités au niveau de l'infrastructure pour optimiser les performances ou lorsque vous avez besoin de fonctionnalités Freezable. Étant donné que les objets Drawing ne prennent pas en charge le Système de disposition, l'entrée et le focus, ils fournissent de meilleures performances, idéales pour la description des arrière-plans, les images clipart, et pour le dessin de bas niveau avec les objets Visual.

Comme ils constituent un objet Freezable type, les objets Drawing héritent de plusieurs fonctionnalités spéciales qui permettent notamment de les déclarer comme étant des ressources, partagés entre plusieurs objets, configurés en lecture seule (afin d'améliorer les performances), clonés ou rendus thread-safe. Pour plus d'informations sur les différentes fonctionnalités fournies par les objets Freezable, consultez Vue d'ensemble des objets Freezable.

Dessiner une forme

Pour dessiner une forme, utilisez un GeometryDrawing. La propriété Geometry d'un dessin géométrique décrit la forme à dessiner, la propriété Brush décrit comment peindre l'intérieur de la forme et la propriété Pen décrit comment dessiner son contour.

L'exemple suivant illustre l'utilisation d'un GeometryDrawing pour dessiner une forme. La forme est décrite par un GeometryGroup et deux objets EllipseGeometry. L'intérieur de la forme est peint avec un LinearGradientBrush et son contour est dessiné avec un Black Pen.

Cet exemple crée l'objet GeometryDrawing suivant.

GeometryDrawing

GeometryDrawing de deux ellipses

//
// Create the Geometry to draw.
//
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(
    new EllipseGeometry(new Point(50,50), 45, 20)
    );
ellipses.Children.Add(
    new EllipseGeometry(new Point(50, 50), 20, 45)
    );


//
// Create a GeometryDrawing.
//
GeometryDrawing aGeometryDrawing = new GeometryDrawing();
aGeometryDrawing.Geometry = ellipses;

// Paint the drawing with a gradient.
aGeometryDrawing.Brush = 
    new LinearGradientBrush(
        Colors.Blue, 
        Color.FromRgb(204,204,255), 
        new Point(0,0), 
        new Point(1,1));

// Outline the drawing with a solid color.
aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

<GeometryDrawing>
  <GeometryDrawing.Geometry>

    <!-- Create a composite shape. -->
    <GeometryGroup>
      <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
      <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
    </GeometryGroup>
  </GeometryDrawing.Geometry>
  <GeometryDrawing.Brush>

    <!-- Paint the drawing with a gradient. -->
    <LinearGradientBrush>
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="1.0" Color="#CCCCFF" />
    </LinearGradientBrush>
  </GeometryDrawing.Brush>
  <GeometryDrawing.Pen>

    <!-- Outline the drawing with a solid color. -->
    <Pen Thickness="10" Brush="Black" />
  </GeometryDrawing.Pen>
</GeometryDrawing>

Pour obtenir l'exemple complet, consultez Comment : créer un GeometryDrawing.

D'autres classes Geometry, telles que PathGeometry vous permettent de créer des formes plus complexes en créant des courbes et des arcs. Pour plus d'informations sur les objets Geometry, consultez Vue d'ensemble de Geometry.

Pour plus d'informations sur d'autres façons de dessiner des formes sans utiliser d'objets Drawing, consultez Vue d'ensemble des formes et dessins de base dans WPF.

Dessiner une image

Pour dessiner une image, utilisez un ImageDrawing. La propriété ImageSource d'un objet ImageDrawing décrit l'image à dessiner et la propriété Rect définit la région dans laquelle l'image est dessinée.

L'exemple suivant dessine une image dans un rectangle situé à (75,75), soit 100 sur 100 pixels. L'illustration suivante montre l'exemple du ImageDrawing créé. Une bordure grise a été ajoutée pour montrer les limites du ImageDrawing.

ImageDrawing 100 sur 100

ImageDrawing 100 par 100 dessiné à (75,75)

// Create a 100 by 100 image with an upper-left point of (75,75). 
ImageDrawing bigKiwi = new ImageDrawing();
bigKiwi.Rect = new Rect(75, 75, 100, 100);
bigKiwi.ImageSource = new BitmapImage(
    new Uri(@"sampleImages\kiwi.png", UriKind.Relative));

<!-- The Rect property specifies that the image only fill a 100 by 100
     rectangular area. -->
<ImageDrawing Rect="75,75,100,100" ImageSource="sampleImages\kiwi.png"/>

Pour plus d'informations sur les images, consultez Vue d'ensemble de la création d'images.

Lire un média (code uniquement)

Remarque
Bien que vous puissiez déclarer un VideoDrawing en Extensible Application Markup Language (XAML), vous pouvez uniquement charger et lire son média en utilisant le code.Pour lire une vidéo en Extensible Application Markup Language (XAML), utilisez plutôt MediaElement.

Pour lire un fichier audio ou vidéo, utilisez un VideoDrawing et un MediaPlayer. Il existe deux façons de charger et de lire un média. La première consiste à utiliser un MediaPlayer et un VideoDrawing, et la seconde consiste à créer votre propre MediaTimeline à utiliser avec MediaPlayer et VideoDrawing.

Remarque
Lorsque vous distribuez un média avec votre application, vous ne pouvez pas utiliser un fichier multimédia comme ressource de projet, comme vous le feriez avec une image.Dans votre fichier projet, vous devez plutôt affecter Content au type de média et PreserveNewest ou Always à CopyToOutputDirectory.

Pour lire un média sans créer votre propre MediaTimeline, vous devez effectuer la procédure suivante.

Créez un objet MediaPlayer.

MediaPlayer player = new MediaPlayer();

Utilisez la méthode Open pour charger le fichier multimédia.

player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

Créez un VideoDrawing.

VideoDrawing aVideoDrawing = new VideoDrawing();

Spécifiez la taille et l'emplacement où dessiner le média en définissant la propriété Rect du VideoDrawing.
```
aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
```
Définissez la propriété Player du VideoDrawing avec le MediaPlayer que vous avez créé.
```
aVideoDrawing.Player = player;
```
Utilisez la méthode Play du MediaPlayer pour commencer à lire le média.
```
// Play the video once.
player.Play();        
```

L'exemple suivant utilise un VideoDrawing et un MediaPlayer pour lire un fichier vidéo une seule fois.

//
// Create a VideoDrawing.
//      
MediaPlayer player = new MediaPlayer();

player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

VideoDrawing aVideoDrawing = new VideoDrawing();

aVideoDrawing.Rect = new Rect(0, 0, 100, 100);

aVideoDrawing.Player = player;

// Play the video once.
player.Play();

Pour optimiser le contrôle du minutage du média, utilisez un MediaTimeline avec le MediaPlayer et des objets VideoDrawing. MediaTimeline vous permet de spécifier si la vidéo doit se répéter. Pour utiliser un MediaTimeline avec un VideoDrawing, vous devez effectuer la procédure suivante :

Déclarez le MediaTimeline et définissez ses comportements de minutage.

// Create a MediaTimeline.
MediaTimeline mTimeline = 
    new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative)); 

// Set the timeline to repeat.
mTimeline.RepeatBehavior = RepeatBehavior.Forever;

Créez un MediaClock à partir d'un MediaTimeline.

// Create a clock from the MediaTimeline.
MediaClock mClock = mTimeline.CreateClock();

Créez un MediaPlayer et utilisez le MediaClock pour définir sa propriété Clock.

MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
repeatingVideoDrawingPlayer.Clock = mClock;

Créez un VideoDrawing et assignez le MediaPlayer à la propriété Player du VideoDrawing.

VideoDrawing repeatingVideoDrawing = new VideoDrawing();
repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;

L'exemple suivant utilise un MediaTimeline avec un MediaPlayer et un VideoDrawing pour lire un fichier vidéo à plusieurs reprises.

//
// Create a VideoDrawing that repeats.
//

// Create a MediaTimeline.
MediaTimeline mTimeline = 
    new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative)); 

// Set the timeline to repeat.
mTimeline.RepeatBehavior = RepeatBehavior.Forever;

// Create a clock from the MediaTimeline.
MediaClock mClock = mTimeline.CreateClock();

MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
repeatingVideoDrawingPlayer.Clock = mClock;

VideoDrawing repeatingVideoDrawing = new VideoDrawing();
repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;

Notez que lorsque vous utilisez un MediaTimeline, vous utilisez le ClockController interactif retourné à partir de la propriété Controller du MediaClock pour contrôler la lecture du média à la place des méthodes interactives du MediaPlayer.

Dessiner un texte

Pour dessiner un texte, utilisez un GlyphRunDrawing et un GlyphRun. L'exemple suivant utilise un GlyphRunDrawing pour dessiner le texte « Hello World ».

GlyphRun theGlyphRun = new GlyphRun(
    new GlyphTypeface(new Uri(@"C:\WINDOWS\Fonts\TIMES.TTF")),
    0,
    false,
    13.333333333333334,
    new ushort[]{43, 72, 79, 79, 82, 3, 58, 82, 85, 79, 71},
    new Point(0, 12.29),
    new double[]{
        9.62666666666667, 7.41333333333333, 2.96, 
        2.96, 7.41333333333333, 3.70666666666667, 
        12.5866666666667, 7.41333333333333, 
        4.44, 2.96, 7.41333333333333},
    null,
    null,
    null,
    null,
    null,
    null


    );

GlyphRunDrawing gDrawing = new GlyphRunDrawing(Brushes.Black, theGlyphRun);

<GlyphRunDrawing ForegroundBrush="Black">
  <GlyphRunDrawing.GlyphRun>
    <GlyphRun 
      CaretStops="{x:Null}" 
      ClusterMap="{x:Null}" 
      IsSideways="False" 
      GlyphOffsets="{x:Null}" 
      GlyphIndices="43 72 79 79 82 3 58 82 85 79 71" 
      BaselineOrigin="0,12.29"  
      FontRenderingEmSize="13.333333333333334" 
      DeviceFontName="{x:Null}" 
      AdvanceWidths="9.62666666666667 7.41333333333333 2.96 2.96 7.41333333333333 3.70666666666667 12.5866666666667 7.41333333333333 4.44 2.96 7.41333333333333" 
      BidiLevel="0">
      <GlyphRun.GlyphTypeface>
        <GlyphTypeface FontUri="C:\WINDOWS\Fonts\TIMES.TTF" />
      </GlyphRun.GlyphTypeface>
    </GlyphRun>
  </GlyphRunDrawing.GlyphRun>
</GlyphRunDrawing>

Un GlyphRun est un objet de bas niveau prévu pour la présentation et l'impression de documents de format fixe. Une méthode plus simple pour dessiner du texte à l'écran consiste à utiliser un Label ou un TextBlock. Pour plus d'informations sur GlyphRun, consultez la vue d'ensemble Introduction à l'objet GlyphRun et à l'élément Glyphs.

Dessins composites

Un DrawingGroup vous permet de combiner plusieurs dessins en un seul dessin composite. À l'aide d'un DrawingGroup, vous pouvez combiner des formes, des images et du texte en un seul objet Drawing.

L'exemple suivant utilise un DrawingGroup pour combiner deux objets GeometryDrawing et un ImageDrawing. Cet exemple génère la sortie suivante.

Dessin composite

DrawingGroup avec plusieurs dessins

            //
            // Create three drawings.
            //
            GeometryDrawing ellipseDrawing =
                new GeometryDrawing(
                    new SolidColorBrush(Color.FromArgb(102, 181, 243, 20)),
                    new Pen(Brushes.Black, 4),
                    new EllipseGeometry(new Point(50,50), 50, 50)
                );

            ImageDrawing kiwiPictureDrawing = 
                new ImageDrawing(
                    new BitmapImage(new Uri(@"sampleImages\kiwi.png", UriKind.Relative)), 
                    new Rect(50,50,100,100));

            GeometryDrawing ellipseDrawing2 =
                new GeometryDrawing(
                    new SolidColorBrush(Color.FromArgb(102,181,243,20)),
                    new Pen(Brushes.Black, 4),
                    new EllipseGeometry(new Point(150, 150), 50, 50)
                );

            // Create a DrawingGroup to contain the drawings.
            DrawingGroup aDrawingGroup = new DrawingGroup();
            aDrawingGroup.Children.Add(ellipseDrawing);
            aDrawingGroup.Children.Add(kiwiPictureDrawing);
            aDrawingGroup.Children.Add(ellipseDrawing2);

<DrawingGroup>

  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="50,50" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
  <ImageDrawing ImageSource="sampleImages\kiwi.png" Rect="50,50,100,100"/>
  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="150,150" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
</DrawingGroup>

Un DrawingGroup vous permet également d'appliquer des masques d'opacité, des transformations, des effets bitmap et d'autres opérations à son contenu. Les opérations DrawingGroup sont appliquées dans l'ordre suivant : OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet, puis Transform.

L'illustration suivante montre l'ordre dans lequel les opérations du DrawingGroup sont appliquées.

Ordre des opérations du DrawingGroup

ordre des opérations DrawingGroup

Le tableau suivant décrit les propriétés que vous pouvez utiliser pour manipuler le contenu d'un objet DrawingGroup.

Propriété	Description	Illustration
OpacityMask	Modifie l'opacité de certaines parties du contenu d'un DrawingGroup. Pour obtenir un exemple, consultez Comment : contrôler l'opacité d'un dessin.
Opacity	Modifie uniformément l'opacité du contenu d'un DrawingGroup. Utilisez cette propriété pour rendre un Drawing entièrement ou partiellement transparent. Pour obtenir un exemple, consultez Comment : appliquer un masque d'opacité à un dessin.
BitmapEffect	Applique un BitmapEffect au contenu du DrawingGroup. Pour obtenir un exemple, consultez Comment : appliquer un BitmapEffect à un dessin.
ClipGeometry	Découpe le contenu d'un DrawingGroup dans une zone décrite à l'aide d'un Geometry. Pour obtenir un exemple, consultez Comment : capturer un dessin.
GuidelineSet	Aligne les pixels indépendants du périphérique sur les pixels du périphérique selon les directives spécifiées. Cette propriété est utile pour vérifier que la restitution des graphiques très détaillés est nette sur les écrans basse résolution. Pour obtenir un exemple, consultez Comment : appliquer un GuidelineSet à un dessin.
Transform	Transforme le contenu du DrawingGroup. Pour obtenir un exemple, consultez Comment : appliquer une transformation à un dessin.

Afficher un dessin comme une image

Pour afficher un Drawing avec un contrôle Image, utilisez un DrawingImage comme contrôle du Image Source et affectez à la propriété DrawingImage.Drawing de l'objet DrawingImage le dessin que vous souhaitez afficher.

L'exemple suivant utilise un DrawingImage et un contrôle Image pour afficher un GeometryDrawing. Cet exemple génère la sortie suivante.

DrawingImage

GeometryDrawing de deux ellipses

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SDKSample
{
    public class DrawingImageExample : Page
    {

        public DrawingImageExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush = 
                new LinearGradientBrush(
                    Colors.Blue, 
                    Color.FromRgb(204,204,255), 
                    new Point(0,0), 
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            //
            // Use a DrawingImage and an Image control
            // to display the drawing.
            //
            DrawingImage geometryImage = new DrawingImage(aGeometryDrawing);

            // Freeze the DrawingImage for performance benefits.
            geometryImage.Freeze();

            Image anImage = new Image();
            anImage.Source = geometryImage;
            anImage.HorizontalAlignment = HorizontalAlignment.Left;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = anImage;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }

    }
}

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Background="White" Margin="20">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">

    <!-- This image uses a Drawing object for its source. -->
    <Image>
      <Image.Source>
        <DrawingImage PresentationOptions:Freeze="True">
          <DrawingImage.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>
  </Border>

</Page>

Peindre un objet avec un objet Drawing

Un DrawingBrush est un type de pinceau qui peint une zone avec un objet Drawing. Vous pouvez l'utiliser pour peindre un objet graphique avec un objet Drawing. La propriété Drawing d'un DrawingBrush décrit son Drawing. Pour restituer un Drawing avec un DrawingBrush, ajoutez-le au pinceau à l'aide de la propriété Drawing du pinceau et utilisez le pinceau pour peindre un objet graphique, tel qu'un contrôle ou panneau.

L'exemple suivant utilise un DrawingBrush pour peindre le Fill d'un Rectangle avec un modèle créé à partir d'un GeometryDrawing. Cet exemple génère la sortie suivante.

GeometryDrawing utilisé avec un DrawingBrush

DrawingBrush en mosaïque

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SDKSample
{
    public class DrawingBrushExample : Page
    {

        public DrawingBrushExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush = 
                new LinearGradientBrush(
                    Colors.Blue, 
                    Color.FromRgb(204,204,255), 
                    new Point(0,0), 
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            DrawingBrush patternBrush = new DrawingBrush(aGeometryDrawing);
            patternBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
            patternBrush.TileMode = TileMode.Tile;
            patternBrush.Freeze();

            //
            // Create an object to paint.
            //
            Rectangle paintedRectangle = new Rectangle();
            paintedRectangle.Width = 100;
            paintedRectangle.Height = 100;
            paintedRectangle.Fill = patternBrush;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = paintedRectangle;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }
    }
}

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Margin="20" Background="White">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <DrawingBrush PresentationOptions:Freeze="True"
                      Viewport="0,0,0.25,0.25" TileMode="Tile">
          <DrawingBrush.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </Rectangle.Fill>

    </Rectangle>
  </Border>


</Page>

La classe DrawingBrush fournit plusieurs options pour étier et afficher en mosaïques son contenu. Pour plus d'informations sur DrawingBrush, consultez la vue d'ensemble Peinture avec des objets d'image, de dessin et visuels.

Rendu d'un dessin avec un Visual

Un DrawingVisual est un type d'objet visuel conçu pour restituer un dessin. Travailler directement sur la superposition visuelle est une option pour les développeurs qui souhaitent générer un environnement hautement graphique personnalisé, mais cette procédure n'est pas décrite dans cette vue d'ensemble. Pour plus d'informations, consultez la vue d'ensemble Utilisation d'objets DrawingVisual.

Objets DrawingContext

La classe DrawingContext vous permet de remplir un Visual ou un Drawing avec un contenu visuel. Nombre d'objets graphiques de niveau inférieur utilisent un DrawingContext car il décrit le contenu graphique très efficacement.

Bien que les méthodes de dessin DrawingContext semblent être similaires aux méthodes de dessin du type System.Drawing.Graphics, elles sont en réalité très différentes. DrawingContext est utilisé avec un système graphique à mode conservé, tandis que le type System.Drawing.Graphics est utilisé avec un système graphique à mode direct. Lorsque vous utilisez les commandes de dessin d'un objet DrawingContext, vous stockez réellement un jeu d'instructions de rendu (bien que le mécanisme de stockage exact dépende du type d'objet qui fournit le DrawingContext) qui seront utilisées ultérieurement par le système graphique ; vous ne dessinez pas à l'écran en temps réel. Pour plus d'informations sur le fonctionnement du système graphique de Windows Presentation Foundation (WPF), consultez Vue d'ensemble du rendu graphique de WPF.

Vous n'instanciez jamais un DrawingContext directement ; vous pouvez toutefois acquérir un contexte de dessin de certaines méthodes, telles que DrawingGroup.Open et DrawingVisual.RenderOpen.

Énumérer le contenu d'un Visual

Outre leurs autres utilisations, les objets Drawing fournissent aussi un modèle d'objet pour énumérer le contenu d'un Visual.

L'exemple suivant utilise la méthode GetDrawing pour récupérer la valeur DrawingGroup d'un Visual et l'énumérer.

public void RetrieveDrawing(Visual v)
{
    DrawingGroup dGroup = VisualTreeHelper.GetDrawing(v);
    EnumDrawingGroup(dGroup);

}

 // Enumerate the drawings in the DrawingGroup.
 public void EnumDrawingGroup(DrawingGroup drawingGroup)
 {
     DrawingCollection dc = drawingGroup.Children;

     // Enumerate the drawings in the DrawingCollection.
     foreach (Drawing drawing in dc)
     {
         // If the drawing is a DrawingGroup, call the function recursively.
         if (drawing.GetType() == typeof(DrawingGroup))
         {
             EnumDrawingGroup((DrawingGroup)drawing);
         }
         else if (drawing.GetType() == typeof(GeometryDrawing))
         {
             // Perform action based on drawing type.  
         }
         else if (drawing.GetType() == typeof(ImageDrawing))
         {
             // Perform action based on drawing type.
         }
         else if (drawing.GetType() == typeof(GlyphRunDrawing))
         {
             // Perform action based on drawing type.
         }
         else if (drawing.GetType() == typeof(VideoDrawing))
         {
             // Perform action based on drawing type.
         }
     }
 }

Voir aussi

Partager via