Delen via


Overzicht van tekenobjecten

In dit onderwerp worden Drawing objecten geïntroduceerd en wordt beschreven hoe u deze kunt gebruiken om vormen, bitmaps, tekst en media efficiënt te tekenen. Gebruik Drawing objecten bij het maken van illustraties, schilderen met een DrawingBrush, of bij het gebruiken van Visual objecten.

Wat is een tekenobject?

Een Drawing-object beschrijft zichtbare inhoud, zoals een vorm, bitmap, video of een tekstregel. Verschillende typen tekeningen beschrijven verschillende soorten inhoud. Hier volgt een lijst met de verschillende typen tekenobjecten.

Drawing objecten zijn veelzijdig; er zijn veel manieren waarop u een Drawing-object kunt gebruiken.

  • U kunt deze weergeven als een afbeelding met behulp van een DrawingImage en een Image besturingselement.

  • U kunt het gebruiken met een DrawingBrush om een object te schilderen, zoals de Background van een Page.

  • U kunt deze gebruiken om het uiterlijk van een DrawingVisualte beschrijven.

  • U kunt deze gebruiken om de inhoud van een Visualte inventariseren.

WPF biedt andere soorten objecten die in staat zijn om vormen, bitmaps, tekst en media te tekenen. U kunt bijvoorbeeld ook Shape objecten gebruiken om vormen te tekenen en het besturingselement MediaElement biedt een andere manier om video toe te voegen aan uw toepassing. Wanneer moet u Drawing objecten gebruiken? Wanneer u functies op frameworkniveau kunt opofferen om prestatievoordelen te krijgen of wanneer u Freezable functies nodig hebt. Omdat Drawing objecten geen ondersteuning bieden voor indeling, invoer en focus, bieden ze prestatievoordelen die ze ideaal maken voor het beschrijven van achtergronden, illustraties en voor tekenen op laag niveau met Visual objecten.

Omdat ze een type Freezable object zijn, krijgen Drawing objecten verschillende speciale kenmerken, waaronder het volgende: ze kunnen worden gedeclareerd als resources, gedeeld tussen meerdere objecten, op alleen-lezen gezet om de prestaties te verbeteren, gekloond, en thread-veilig gemaakt. Zie voor meer informatie over de verschillende functies van Freezable objecten het Freezable Objects Overview.

Een vorm tekenen

Als u een vorm wilt tekenen, gebruikt u een GeometryDrawing. De eigenschap Geometry van een geometrietekening beschrijft de vorm die moet worden getekend, de Brush eigenschap beschrijft hoe het interieur van de vorm moet worden geschilderd en de eigenschap Pen beschrijft hoe de omtrek moet worden getekend.

In het volgende voorbeeld wordt een GeometryDrawing gebruikt om een vorm te tekenen. De vorm wordt beschreven door een GeometryGroup en twee EllipseGeometry-objecten. Het interieur van de vorm is geschilderd met een LinearGradientBrush en de omtrek wordt getekend met een BlackPen.

In dit voorbeeld wordt de volgende GeometryDrawinggemaakt.

A GeometryDrawing van twee ellipsen
Een Geometrietekening

//
// 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>

Zie Een GeometryDrawing-maken voor het volledige voorbeeld.

Met andere Geometry klassen, zoals PathGeometry kunt u complexere vormen maken door curven en bogen te maken. Zie het Geometrieoverzichtvoor meer informatie over Geometry objecten.

Zie Shapes en Eenvoudige tekening in WPF Overviewvoor meer informatie over andere manieren om vormen te tekenen die geen Drawing objecten gebruiken.

Een afbeelding tekenen

Als u een afbeelding wilt tekenen, gebruikt u een ImageDrawing. De eigenschap ImageSource van een ImageDrawing object beschrijft de te tekenen afbeelding en de eigenschap Rect definieert de regio waar de afbeelding wordt getekend.

In het volgende voorbeeld wordt een afbeelding in een rechthoek geplaatst op (75,75) die 100 x 100 pixels is. In de volgende afbeelding ziet u de ImageDrawing die in het voorbeeld is gemaakt. Er is een grijze rand toegevoegd om de grenzen van de ImageDrawingweer te geven.

Een 100 bij 100 ImageDrawing getekend op (75,75)
Een 100 bij 100 afbeeldingsschema

// 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"/>

Zie het Imaging Overviewvoor meer informatie over afbeeldingen.

Media afspelen (uitsluitend met code)

Notitie

Hoewel u een VideoDrawing kunt declareren in Extensible Application Markup Language (XAML), kunt u de media alleen laden en afspelen met behulp van code. Als u video wilt afspelen in Extensible Application Markup Language (XAML), gebruikt u in plaats daarvan een MediaElement.

Als u een audio- of videobestand wilt afspelen, gebruikt u een VideoDrawing en een MediaPlayer. Er zijn twee manieren om media te laden en af te spelen. Het eerste is om zelf een MediaPlayer en een VideoDrawing te gebruiken, en de tweede manier is om uw eigen MediaTimeline te maken voor gebruik met de MediaPlayer en VideoDrawing.

Notitie

Wanneer u media distribueert met uw toepassing, kunt u een mediabestand niet gebruiken als projectresource, net als bij een afbeelding. In het projectbestand moet u in plaats daarvan het mediatype instellen op Content en CopyToOutputDirectory instellen op PreserveNewest of Always.

Als u media wilt afspelen zonder uw eigen MediaTimelinete maken, voert u de volgende stappen uit.

  1. Maak een MediaPlayer-object.

    MediaPlayer player = new MediaPlayer();
    
  2. Gebruik de methode Open om het mediabestand te laden.

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

    VideoDrawing aVideoDrawing = new VideoDrawing();
    
  4. Geef de grootte en locatie op om de media weer te geven door de eigenschap Rect van het VideoDrawingin te stellen.

    aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
    
  5. Stel de eigenschap Player van de VideoDrawing in met de MediaPlayer die u hebt gemaakt.

    aVideoDrawing.Player = player;
    
  6. Gebruik de Play methode van de MediaPlayer om te beginnen met het afspelen van de media.

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

In het volgende voorbeeld worden een VideoDrawing en een MediaPlayer gebruikt om een videobestand eenmaal af te spelen.

//
// 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();

Gebruik een MediaTimeline samen met de MediaPlayer- en VideoDrawing-objecten om meer controle over de timing van de media te krijgen. Met de MediaTimeline kunt u opgeven of de video moet worden herhaald. Als u een MediaTimeline wilt gebruiken met een VideoDrawing, voert u de volgende stappen uit:

  1. Declareer de MediaTimeline en stel het timinggedrag ervan in.

    // Create a MediaTimeline.
    MediaTimeline mTimeline =
        new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
    
    // Set the timeline to repeat.
    mTimeline.RepeatBehavior = RepeatBehavior.Forever;
    
  2. Maak een MediaClock op basis van de MediaTimeline.

    // Create a clock from the MediaTimeline.
    MediaClock mClock = mTimeline.CreateClock();
    
  3. Maak een MediaPlayer en gebruik de MediaClock om de eigenschap Clock in te stellen.

    MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
    repeatingVideoDrawingPlayer.Clock = mClock;
    
  4. Maak een VideoDrawing en wijs de MediaPlayer toe aan de eigenschap Player van de VideoDrawing.

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

In het volgende voorbeeld wordt een MediaTimeline met een MediaPlayer en een VideoDrawing gebruikt om herhaaldelijk een video af te spelen.

//
// 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;

Wanneer u een MediaTimelinegebruikt, gebruikt u de interactieve ClockController die wordt geretourneerd vanuit de eigenschap Controller van de MediaClock om het afspelen van media te beheren in plaats van de interactieve methoden van MediaPlayer.

Tekst tekenen

Als u tekst wilt tekenen, gebruikt u een GlyphRunDrawing en een GlyphRun. In het volgende voorbeeld wordt een GlyphRunDrawing gebruikt om de tekst 'Hallo wereld' te tekenen.

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>

Een GlyphRun is een object op laag niveau dat is bedoeld voor gebruik met documentpresentaties met vaste opmaak en afdrukscenario's. Een eenvoudigere manier om tekst naar het scherm te tekenen, is door een Label of een TextBlockte gebruiken. Voor meer informatie over GlyphRun, zie de inleiding tot het GlyphRun-object en het overzicht van het Glyphs-element.

Samengestelde tekeningen

Met een DrawingGroup kunt u meerdere tekeningen combineren tot één samengestelde tekening. Met behulp van een DrawingGroupkunt u vormen, afbeeldingen en tekst combineren tot één Drawing-object.

In het volgende voorbeeld wordt een DrawingGroup gebruikt om twee GeometryDrawing objecten en een ImageDrawing-object te combineren. In dit voorbeeld wordt de volgende uitvoer geproduceerd.

Een TekenGroep met meerdere tekeningen
Een samengestelde tekening

//
// 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>

Met een DrawingGroup kunt u ook ondoorzichtigheidsmaskers, transformaties, bitmapeffecten en andere bewerkingen toepassen op de inhoud ervan. DrawingGroup bewerkingen worden in de volgende volgorde toegepast: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSeten Transform.

In de volgende afbeelding ziet u de volgorde waarin DrawingGroup bewerkingen worden toegepast.

DrawingGroup-volgorde van bewerkingen
Volgorde van DrawingGroup-bewerkingen

In de volgende tabel worden de eigenschappen beschreven die u kunt gebruiken om de inhoud van een DrawingGroup object te bewerken.

Eigenschap Beschrijving Illustratie
OpacityMask Hiermee wijzigt u de dekking van geselecteerde delen van de inhoud van DrawingGroup. Zie Hoe u de ondoorzichtigheid van een tekening kunt beherenvoor een voorbeeld. Een DrawingGroup met een dekkingsmasker
Opacity Hiermee wordt de ondoorzichtigheid van de DrawingGroup-content uniform gewijzigd. Gebruik deze eigenschap om een Drawing transparant of gedeeltelijk transparant te maken. Zie voor een voorbeeld Procedure: Een dekkingsmasker toepassen op een tekening. Tekengroepen met verschillende dekkingsinstellingen
BitmapEffect Past een BitmapEffect toe op de inhoud van DrawingGroup. Zie voor een voorbeeld Procedure: Een BitmapEffect toepassen op een tekening. DrawingGroup met een BlurBitmapEffect
ClipGeometry Knipt de inhoud van de DrawingGroup vast in een regio die u beschrijft met behulp van een Geometry. Een voorbeeld is te vinden in Hoe te: Een tekening knippen. DrawingGroup met een gedefinieerd clipgebied
GuidelineSet Maakt apparaatonafhankelijke pixels vast aan apparaat pixels volgens de opgegeven richtlijnen. Deze eigenschap is handig om ervoor te zorgen dat gedetailleerde afbeeldingen scherp worden weergegeven op beeldschermen met lage DPI. Zie voor een voorbeeld Een Richtlijnset toepassen op een tekening. Een DrawingGroup met en zonder RichtlijnSet
Transform Transformeert de inhoud van de DrawingGroup. Zie bijvoorbeeld Procedure: Een transformatie toepassen op een tekening. Een gedraaide DrawingGroup-

Een tekening weergeven als een afbeelding

Als u een Drawing met een besturingselement Image wilt weergeven, gebruikt u een DrawingImage als de Source van het Image besturingselement en stelt u de eigenschap DrawingImage.Drawing van het DrawingImage object in op de tekening die u wilt weergeven.

In het volgende voorbeeld wordt een DrawingImage en een Image besturingselement gebruikt om een GeometryDrawingweer te geven. In dit voorbeeld wordt de volgende uitvoer geproduceerd.

A GeometryDrawing van twee ellipsen
Een tekeningafbeelding

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://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>

Een object tekenen met een tekening

Een DrawingBrush is een type penseel waarmee een gebied met een tekenobject wordt geschilderd. U kunt het gebruiken om ongeveer elk grafisch object met een tekening te schilderen. De eigenschap Drawing van een DrawingBrush beschrijft de Drawing. Als u een Drawing met een DrawingBrushwilt weergeven, voegt u deze toe aan het penseel met behulp van de eigenschap Drawing van de kwast en gebruikt u de kwast om een grafisch object te schilderen, zoals een besturingselement of paneel.

In de volgende voorbeelden wordt een DrawingBrush gebruikt om de Fill van een Rectangle te schilderen met een patroon dat is gemaakt op basis van een GeometryDrawing. In dit voorbeeld wordt de volgende uitvoer geproduceerd.

Een tegeltekeningsborstel
Een GeometryDrawing die wordt gebruikt met een DrawingBrush

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://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>

De DrawingBrush-klasse biedt diverse opties voor het uitrekken en tegelen van de inhoud. Voor meer informatie over DrawingBrush, zie het overzicht Schilderen met afbeeldingen, tekeningen en visuals.

Een tekening weergeven met een visual

Een DrawingVisual is een type visueel object dat is ontworpen om een tekening weer te geven. Rechtstreeks op de visuallaag werken is een optie voor ontwikkelaars die een zeer aangepaste grafische omgeving willen bouwen en die niet in dit overzicht worden beschreven. Voor meer informatie, zie het Using DrawingVisual Objects overzicht.

DrawingContext-objecten

Met de DrawingContext-klasse kunt u een Visual of een Drawing vullen met visuele inhoud. Veel dergelijke grafische objecten op lager niveau maken gebruik van een DrawingContext omdat hiermee grafische inhoud zeer efficiënt wordt beschreven.

Hoewel de DrawingContext tekenmethoden lijken op de tekenmethoden van het type System.Drawing.Graphics, zijn ze eigenlijk heel anders. DrawingContext wordt gebruikt met een retentiemodusgrafisch systeem, terwijl het type System.Drawing.Graphics wordt gebruikt met een directemodusgrafisch systeem. Wanneer u de tekenopdrachten van een DrawingContext object gebruikt, slaat u in feite een set renderinginstructies op (hoewel het exacte opslagmechanisme afhankelijk is van het type object dat de DrawingContextlevert) die later door het grafische systeem wordt gebruikt; U tekent niet in realtime naar het scherm. Zie het WPF Graphics Rendering Overviewvoor meer informatie over hoe het WPF-grafische systeem (Windows Presentation Foundation) werkt.

Je instantieert nooit rechtstreeks een DrawingContext; je kunt echter een tekencontext verkrijgen van bepaalde methoden zoals DrawingGroup.Open en DrawingVisual.RenderOpen.

De inhoud van een visual opsommen

Naast andere toepassingen bieden Drawing objecten ook een objectmodel voor het inventariseren van de inhoud van een Visual.

In het volgende voorbeeld wordt de methode GetDrawing gebruikt om de DrawingGroup waarde van een Visual op te halen en op te sommen.

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

// 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 is DrawingGroup group)
        {
            EnumDrawingGroup(group);
        }
        else if (drawing is GeometryDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is ImageDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is GlyphRunDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is VideoDrawing)
        {
            // Perform action based on drawing type.
        }
    }
}

Zie ook