描画オブジェクトの概要

2025-05-07

このトピックでは、 Drawing オブジェクトについて説明し、それらを使用して図形、ビットマップ、テキスト、メディアを効率的に描画する方法について説明します。クリップアートを作成したり、Drawingでペイントしたり、DrawingBrush オブジェクトを使用したりする場合は、Visual オブジェクトを使用します。

描画オブジェクトとは

Drawing オブジェクトは、図形、ビットマップ、ビデオ、テキスト行などの表示コンテンツを表します。異なる種類の図面は、さまざまな種類のコンテンツを記述します。さまざまな種類の描画オブジェクトの一覧を次に示します。

GeometryDrawing – 図形を描画します。
ImageDrawing – 画像を描画します。
GlyphRunDrawing – テキストを描画します。
VideoDrawing – オーディオまたはビデオファイルを再生します。
DrawingGroup – 他の描画を描画します。図面グループを使用して、他の図面を 1 つの複合図面に結合します。

Drawing オブジェクトは汎用性があります。 Drawing オブジェクトを使用する方法は多数あります。

DrawingImageとImage コントロールを使用して、イメージとして表示できます。
DrawingBrushと共に使用して、BackgroundのPageなどのオブジェクトを描画できます。
これを使用して、 DrawingVisualの外観を記述できます。
これを使用して、 Visualの内容を列挙できます。

WPF には、図形、ビットマップ、テキスト、メディアを描画できる他の種類のオブジェクトが用意されています。たとえば、 Shape オブジェクトを使用して図形を描画することもできます。また、 MediaElement コントロールは、アプリケーションにビデオを追加する別の方法を提供します。では、いつ Drawing オブジェクトを使用する必要がありますか? パフォーマンス上の利点を得るためにフレームワークレベルの機能を犠牲にできる場合、または Freezable 機能が必要な場合。 Drawingオブジェクトはレイアウト、入力、フォーカスをサポートしていないため、背景、クリップアートを記述したり、Visualオブジェクトを使用して低レベルの描画を行う場合に最適なパフォーマンス上の利点が得られます。

これらはオブジェクト Freezable 型であるため、 Drawing オブジェクトには、リソースとして宣言したり、複数のオブジェクト間で共有したり、読み取り専用にしてパフォーマンスを向上させ、複製したり、スレッドセーフにしたりできる、いくつかの特別な機能があります。 Freezable オブジェクトによって提供されるさまざまな機能の詳細については、「Freezable オブジェクトの概要」を参照してください。

図形を描画する

図形を描画するには、 GeometryDrawingを使用します。ジオメトリ描画の Geometry プロパティは、描画する図形を記述し、その Brush プロパティは、図形の内部を描画する方法を記述し、その Pen プロパティは、そのアウトラインを描画する方法を記述します。

次の例では、 GeometryDrawing を使用して図形を描画します。図形は、 GeometryGroup と 2 つの EllipseGeometry オブジェクトによって記述されます。図形の内部は LinearGradientBrush で塗られ、その輪郭は Black Penで描画されます。

この例では、次の GeometryDrawingを作成します。

2 つの楕円からなる GeometryDrawing
GeometryDrawing

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

完全な例については、「 GeometryDrawing を作成する」を参照してください。

Geometryなどの他のPathGeometry クラスを使用すると、曲線や円弧を作成して、より複雑な図形を作成できます。 Geometry オブジェクトの詳細については、「ジオメトリの概要」を参照してください。

Drawing オブジェクトを使用しない図形を描画するその他の方法の詳細については、「WPF の概要」の「図形と基本描画」を参照してください。

イメージを描画する

イメージを描画するには、 ImageDrawingを使用します。 ImageDrawing オブジェクトの ImageSource プロパティは描画するイメージを表し、そのRectプロパティはイメージを描画する領域を定義します。

次の例では、100 x 100 ピクセルの (75,75) にある四角形に画像を描画します。次の図は、例によって作成された ImageDrawing を示しています。 ImageDrawingの境界を示す灰色の境界線が追加されました。

(75,75) の位置に 100 x 100 サイズで描かれた ImageDrawing
100 x 100 画像描画

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

イメージの詳細については、「イメージングの概要」を参照してください。

メディアの再生 (コードのみ)

注

拡張アプリケーションマークアップ言語 (XAML) では VideoDrawing を宣言できますが、読み込んで再生できるのはコードを使用することだけです。拡張アプリケーションマークアップ言語 (XAML) でビデオを再生するには、代わりに MediaElement を使用します。

オーディオまたはビデオファイルを再生するには、VideoDrawing と MediaPlayerを使用します。メディアを読み込んで再生するには、2 つの方法があります。 1 つ目は、MediaPlayer と VideoDrawing を単独で使用することです。2 つ目の方法は、MediaTimeline と MediaPlayerで使用する独自の VideoDrawing を作成することです。

注

アプリケーションでメディアを配布する場合、イメージのように、メディアファイルをプロジェクトリソースとして使用することはできません。プロジェクトファイルでは、代わりにメディアの種類を Content に設定し、CopyToOutputDirectory を PreserveNewest または Alwaysに設定する必要があります。

独自の MediaTimelineを作成せずにメディアを再生するには、次の手順を実行します。

MediaPlayer オブジェクトを作成します。
```
MediaPlayer player = new MediaPlayer();
```
メディアファイルを読み込むには、 Open メソッドを使用します。
```
player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
```

VideoDrawingを作成します。

VideoDrawing aVideoDrawing = new VideoDrawing();

RectのVideoDrawing プロパティを設定して、メディアを描画するサイズと場所を指定します。
```
aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
```
作成したPlayerを使用して、VideoDrawingの MediaPlayer プロパティを設定します。
```
aVideoDrawing.Player = player;
```
メディアの再生を開始するには、PlayのMediaPlayerメソッドを使用します。
```
// Play the video once.
player.Play();
```

次の例では、VideoDrawing と MediaPlayer を使用してビデオファイルを 1 回再生します。

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

メディアのタイミング制御を強化するには、MediaTimeline オブジェクトと MediaPlayer オブジェクトで VideoDrawing を使用します。 MediaTimeline を使用すると、ビデオを繰り返す必要があるかどうかを指定できます。 MediaTimelineをVideoDrawingで使用するには、次の手順を実行します。

MediaTimelineを宣言し、そのタイミング動作を設定します。

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

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

MediaClockからMediaTimelineを作成します。

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

MediaPlayerを作成し、MediaClockを使用してそのClockプロパティを設定します。

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

VideoDrawingを作成し、MediaPlayerのPlayer プロパティにVideoDrawingを割り当てます。

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

次の例では、MediaTimelineとMediaPlayerを含むVideoDrawingを使用してビデオを繰り返し再生します。

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

MediaTimelineを使用する場合は、ClockControllerの対話型メソッドではなく、Controller の MediaClock プロパティから返される対話型 MediaPlayer を使用してメディアの再生を制御します。

テキストの描画

テキストを描画するには、 GlyphRunDrawing と GlyphRunを使用します。次の例では、 GlyphRunDrawing を使用して "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>

GlyphRunは、固定形式のドキュメントプレゼンテーションおよび印刷シナリオで使用することを目的とした低レベルのオブジェクトです。画面にテキストを描画する簡単な方法は、 Label または TextBlockを使用することです。 GlyphRunの詳細については、「GlyphRun オブジェクトと Glyphs 要素の概要」を参照してください。

複合図面

DrawingGroupを使用すると、複数の図面を 1 つの複合図面に結合できます。 DrawingGroupを使用すると、図形、画像、テキストを 1 つのDrawing オブジェクトに結合できます。

次の例では、 DrawingGroup を使用して、2 つの GeometryDrawing オブジェクトと ImageDrawing オブジェクトを結合します。この例では、次の出力が生成されます。

複数の図面を含む DrawingGroup
複合図面

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

DrawingGroupでは、不透明度マスク、変換、ビットマップ効果、およびその他の操作をコンテンツに適用することもできます。 DrawingGroup 操作は、 OpacityMask、 Opacity、 BitmapEffect、 ClipGeometry、 GuidelineSet、 Transformの順に適用されます。

次の図は、 DrawingGroup 操作が適用される順序を示しています。

DrawingGroup の操作の順序に設定する
DrawingGroup 操作の順序

次の表では、 DrawingGroup オブジェクトの内容を操作するために使用できるプロパティについて説明します。

プロパティ	説明	図
OpacityMask	DrawingGroupコンテンツの選択した部分の不透明度を変更します。例については、「方法: 図面の不透明度を制御する」を参照してください。
Opacity	DrawingGroupコンテンツの不透明度を均一に変更します。 Drawingを透明または部分的に透明にするには、このプロパティを使用します。例については、「方法: 不透明度マスクを図面に適用する」を参照してください。
BitmapEffect	BitmapEffectコンテンツにDrawingGroupを適用します。例については、「方法: BitmapEffect を図面に適用する」を参照してください。
ClipGeometry	DrawingGroupの内容を、Geometryを使用して記述した領域にクリップします。例については、「方法: 図面をクリップする」を参照してください。
GuidelineSet	指定したガイドラインに従って、デバイスに依存しないピクセルをデバイスのピクセルにスナップします。このプロパティは、細かく詳細なグラフィックスが低 DPI ディスプレイで鮮明にレンダリングされるようにするのに役立ちます。例については、「ガイドラインセットを図面に適用する」を参照してください。	GuidelineSetgraphicsmm_drawinggroup_guidelineset の有無にかかわらず DrawingGroup をする
Transform	DrawingGroupの内容を変換します。例については、「方法: 変換を図面に適用する」を参照してください。

図面をイメージとして表示する

Drawing コントロールで Image を表示するには、DrawingImage コントロールの Image として Source を使用し、DrawingImage オブジェクトの DrawingImage.Drawing プロパティを表示する図面に設定します。

次の例では、DrawingImage と Image コントロールを使用して、GeometryDrawingを表示します。この例では、次の出力が生成されます。

2 つの楕円からなる GeometryDrawing
DrawingImage

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>

描画を使用してオブジェクトを描画する

DrawingBrushとは、描画オブジェクトで領域を塗りつぶすためのブラシの一種です。これを使用すると、描画を使用して任意のグラフィカルオブジェクトを描画できます。 Drawingの DrawingBrush プロパティは、そのDrawingを記述します。 Drawingを使用してDrawingBrushをレンダリングするには、ブラシの Drawing プロパティを使用してブラシに追加し、ブラシを使用してコントロールやパネルなどのグラフィカルオブジェクトを描画します。

次の例では、DrawingBrushを使用して、Fillから作成されたパターンを使用してRectangleのGeometryDrawingを描画します。この例では、次の出力が生成されます。

タイル状の DrawingBrush
DrawingBrush で使用される GeometryDrawing

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>

DrawingBrush クラスには、コンテンツを拡大およびタイリングするためのさまざまなオプションが用意されています。 DrawingBrushの詳細については、「イメージ、描画、およびビジュアルを使用した描画」の概要を参照してください。

ビジュアルを使用して描画をレンダリングする

DrawingVisualは、描画をレンダリングするように設計されたビジュアルオブジェクトの一種です。ビジュアルレイヤーで直接作業することは、高度にカスタマイズされたグラフィカル環境を構築する開発者向けのオプションであり、この概要では説明しません。詳細については、「 DrawingVisual オブジェクトの使用」の概要を参照してください。

DrawingContext オブジェクト

DrawingContext クラスを使用すると、VisualまたはDrawingにビジュアルコンテンツを設定できます。このような下位レベルのグラフィックスオブジェクトの多くは、グラフィカルコンテンツを非常に効率的に記述するため、 DrawingContext を使用します。

DrawingContext描画メソッドは、System.Drawing.Graphics型の描画メソッドに似ていますが、実際には大きく異なります。 DrawingContext は保持モードのグラフィックスシステムで使用され、 System.Drawing.Graphics の種類はイミディエイトモードのグラフィックスシステムで使用されます。 DrawingContext オブジェクトの描画コマンドを使用する場合、実際にはグラフィックスシステムで使用されるレンダリング命令のセットを格納します (ただし、正確なストレージメカニズムは、DrawingContextを提供するオブジェクトの種類によって異なります)。リアルタイムで画面に描画されることはありません。 Windows Presentation Foundation (WPF) グラフィックスシステムの動作の詳細については、「 WPF グラフィックスレンダリングの概要」を参照してください。

DrawingContextを直接インスタンス化することはありません。ただし、DrawingGroup.Open や DrawingVisual.RenderOpenなど、特定のメソッドから描画コンテキストを取得できます。

ビジュアルの内容を列挙する

その他の用途に加えて、Drawing オブジェクトには、Visualの内容を列挙するためのオブジェクトモデルも用意されています。

次の例では、GetDrawing メソッドを使用して、DrawingGroup の Visual 値を取得して列挙します。

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.
        }
    }
}