Drawing オブジェクトの概要
更新 : 2007 年 11 月
ここでは、Drawing オブジェクトについて、およびこのオブジェクトを使用して図形、ビットマップ、テキスト、およびメディアを効率的に描画する方法について説明します。クリップ アートを作成したり、DrawingBrush で塗りつぶしたり、Visual オブジェクトを使用したりする場合に、Drawing オブジェクトを使用します。
このトピックには次のセクションが含まれています。
- 描画オブジェクトとは
- 図形を描画する
- イメージを描画する
- メディアを再生する (コードのみ)
- テキストを描画する
- 複合描画
- 描画をイメージとして表示する
- 描画を使用してオブジェクトを塗りつぶす
- ビジュアルを使用した描画のレンダリング
- DrawingContext オブジェクト
- ビジュアルのコンテンツを列挙する
- 関連トピック
描画オブジェクトとは
Drawing オブジェクトは、図形、ビットマップ、ビデオ、またはテキスト行などの表示されるコンテンツを記述します。異なる種類の描画は、異なる種類のコンテンツを記述します。描画オブジェクトのさまざまな種類を次の一覧に示します。
GeometryDrawing – 図形を描画します。
ImageDrawing – イメージを描画します。
GlyphRunDrawing – テキストを描画します。
VideoDrawing – オーディオまたはビデオ ファイルを再生します。
DrawingGroup – その他の描画を描画します。他の描画を 1 つの複合描画に結合するには、描画グループを使用します。
Drawing は汎用的なオブジェクトです。Drawing オブジェクトにはさまざまな使用方法があります。
DrawingImage および Image コントロールを使用することにより、イメージとして表示できます。
DrawingBrush を使用して、Page の Background などのオブジェクトを塗りつぶすことができます。
DrawingVisual の外観を記述するために使用できます。
Visual のコンテンツを列挙するために使用できます。
WPF に用意されている他の種類のオブジェクトでも、図形、ビットマップ、テキスト、およびメディアを描画できます。たとえば、Shape オブジェクトを使用して図形を描画することもできます。また、MediaElement コントロールによってアプリケーションにビデオを追加する方法もあります。それでは、どのような場合に Drawing オブジェクトを使用したらよいのでしょうか。それは、パフォーマンス上の利点を得るためにフレームワーク レベルの機能を犠牲にしてもかまわない場合や、Freezable 機能が必要な場合です。Drawing オブジェクトは、レイアウト システム、入力、およびフォーカスをサポートしないため、背景やクリップ アートを表したり、Visual オブジェクトで低レベルの描画を行うのに適したパフォーマンスを実現できます。
Drawing オブジェクトは Freezable 型のオブジェクトであるため、リソースとしての宣言、複数のオブジェクトでの共有、読み取り専用に設定することによるパフォーマンスの向上、複製、スレッド セーフの設定など、特殊な機能を備えています。Freezable オブジェクトのさまざまな機能の詳細については、「Freezable オブジェクトの概要」を参照してください。
図形を描画する
図形を描画するには、GeometryDrawing を使用します。ジオメトリ描画の Geometry プロパティは描画する図形を記述し、Brush プロパティは図形の内部の塗りつぶし方法を記述し、Pen プロパティは図形のアウトラインの描き方を記述します。
次の例では、GeometryDrawing を使用して図形を描画します。図形は、1 つの GeometryGroup と 2 つの EllipseGeometry オブジェクトによって示されます。図形の内部は LinearGradientBrush で塗りつぶし、図形のアウトラインは Black Pen で描画します。
この例では次の GeometryDrawing を作成します。
GeometryDrawing
.jpg)
//
// 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 を作成する」を参照してください。
PathGeometry など、その他の Geometry クラスを使用すると、曲線や円弧を作成することによってさらに複雑な図形を作成できます。Geometry オブジェクトの詳細については、「ジオメトリの概要」を参照してください。
Drawing オブジェクトを使用しない図形を描画するための他の方法については、「WPF での図形と基本描画の概要」を参照してください。
イメージを描画する
イメージを描画するには、ImageDrawing を使用できます。ImageDrawing オブジェクトの ImageSource プロパティは描画するイメージを記述し、Rect プロパティはイメージが描画される領域を定義します。
次の例では、(75,75) にある 100 x 100 ピクセルの四角形の中に、イメージを描画します。この例で作成した ImageDrawing を次の図に示します。ImageDrawing の境界を表すために灰色の境界線を追加しています。
100 x 100 の ImageDrawing
.png)
// 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"/>
イメージの詳細については、「イメージングの概要」を参照してください。
メディアを再生する (コードのみ)
.gif "メモ") メモ : |
|---|
VideoDrawing を Extensible Application Markup Language (XAML) で宣言することはできますが、コードを使用した場合のみそのメディアを読み込んで再生することができます。Extensible Application Markup Language (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();VideoDrawing の Rect プロパティを設定して、メディアを描画するサイズと場所を指定します。
aVideoDrawing.Rect = new Rect(0, 0, 100, 100);作成した MediaPlayer で、VideoDrawing の Player プロパティを設定します。
aVideoDrawing.Player = player;MediaPlayer の Play メソッドを使用して、メディアの再生を開始します。
// 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();
メディアのタイミングをさらに細かく制御するには、MediaPlayer オブジェクトおよび VideoDrawing オブジェクトと共に MediaTimeline を使用します。MediaTimeline を使用すると、ビデオを繰り返すかどうかを指定できます。VideoDrawing と共に MediaTimeline を使用するには、次の手順を実行します。
MediaTimeline を宣言し、そのタイミング動作を設定します。
// Create a MediaTimeline. MediaTimeline mTimeline = new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative)); // Set the timeline to repeat. mTimeline.RepeatBehavior = RepeatBehavior.Forever;MediaTimeline から MediaClock を作成します。
// Create a clock from the MediaTimeline. MediaClock mClock = mTimeline.CreateClock();MediaPlayer を作成し、MediaClock を使用してその Clock プロパティを設定します。
MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer(); repeatingVideoDrawingPlayer.Clock = mClock;VideoDrawing を作成し、MediaPlayer を VideoDrawing の Player プロパティに割り当てます。
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 を使用するときは、MediaPlayer の対話型メソッドを使用するのではなく、MediaClock の Controller プロパティから返される対話型の ClockController を使用してメディアの再生を制御することに注意してください。
テキストを描画する
テキストを描画するには、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 オブジェクトと 1 つの ImageDrawing オブジェクトを結合する例を次に示します。この例を実行すると、次の出力が生成されます。
複合描画
.jpg)
//
// 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 操作の順序
.png)
DrawingGroup オブジェクトのコンテンツの操作に使用できるプロパティを次の表に示します。
プロパティ |
説明 |
図 |
|---|---|---|
DrawingGroup コンテンツの選択した部分の不透明度を変更します。例については、「方法 : 描画の不透明度を制御する」を参照してください。 |
|
|
DrawingGroup コンテンツの不透明度を一様に変更します。Drawing を透明または部分的に透明にするには、このプロパティを使用します。例については、「方法 : 不透明マスクを描画に適用する」を参照してください。 |
|
|
BitmapEffect を DrawingGroup コンテンツに適用します。例については、「方法 : BitmapEffect を描画に適用する」を参照してください。 |
|
|
DrawingGroup コンテンツを、Geometry で記述する領域に対してクリップします。例については、「方法 : 描画をクリップする」を参照してください。 |
|
|
デバイス非依存ピクセルを、指定したガイドラインに沿ったデバイス ピクセルにスナップします。このプロパティは、DPI の低いディスプレイ上で、精緻なグラフィックスをはっきりとレンダリングするために役立ちます。例については、「方法 : 描画に GuidelineSet を適用する」を参照してください。 |
|
|
DrawingGroup コンテンツを変換します。例については、「方法 : 描画に変換を適用する」を参照してください。 |
|
.png)
.png)
.png)
.png)
.png)
.png)
描画をイメージとして表示する
Image コントロールを使用して Drawing を表示するには、DrawingImage を Image コントロールの Source として使用し、DrawingImage オブジェクトの DrawingImage.Drawing プロパティを、表示する描画に設定します。
DrawingImage および Image コントロールを使用して、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="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>
描画を使用してオブジェクトを塗りつぶす
DrawingBrush は、描画オブジェクトで領域を塗りつぶすブラシです。これを使用すると、ほとんどすべてのグラフィカル オブジェクトを描画で塗りつぶすことができます。DrawingBrush の Drawing プロパティは、その Drawing を記述します。DrawingBrush で Drawing をレンダリングするには、ブラシの Drawing プロパティを使用してブラシに追加してから、ブラシを使用してコントロールやパネルなどのグラフィカル オブジェクトを塗りつぶします。
DrawingBrush を使用して、Rectangle の Fill を GeometryDrawing から作成したパターンで塗りつぶす例を次に示します。この例を実行すると、次の出力が生成されます。
DrawingBrush と共に使用された GeometryDrawing
.png)
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>
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;
}
}
}
DrawingBrush クラスには、コンテンツを伸縮したり並べて表示するさまざまなオプションが用意されています。DrawingBrush の詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」の概要を参照してください。
ビジュアルを使用した描画のレンダリング
DrawingVisual は、描画をレンダリングするよう設計されたビジュアル オブジェクトです。ビジュアル層で直接作業する方法は、高度にカスタマイズされたグラフィカル環境を構築する開発者向けのオプションであり、この概要では説明しません。詳細については、「DrawingVisual オブジェクトの使用」の概要を参照してください。
DrawingContext オブジェクト
DrawingContext クラスを使用すると、Visual または Drawing にビジュアル コンテンツを読み込むことができます。DrawingContext ではグラフィカル コンテンツが効率的に記述されるため、比較的低レベルのグラフィックス オブジェクトの多くで使用されます。
DrawingContext 描画メソッドは System.Drawing.Graphics 型の描画メソッドに似ていますが、実際はまったく異なります。DrawingContext は保持モードのグラフィックス システムで使用され、System.Drawing.Graphics 型は即時モードのグラフィックス システムで使用されます。DrawingContext オブジェクトの描画コマンドを使用すると、リアルタイムで画面に描画するのではなく、実際にはグラフィック システムで今後使用する一連の描画命令が格納されます (正確なストレージ機構は、DrawingContext を提供するオブジェクトの型によって異なります)。Windows Presentation Foundation (WPF) グラフィックス システムの動作原理の詳細については、「Windows Presentation Foundation のグラフィックス レンダリングの概要」を参照してください。
DrawingContext を直接インスタンス化することはできませんが、DrawingGroup.Open や DrawingVisual.RenderOpen などの一部のメソッドから描画コンテキストを取得できます。
ビジュアルのコンテンツを列挙する
Drawing オブジェクトは、他の用途に加えて、Visual のコンテンツを列挙するためのオブジェクト モデルも提供します。
GetDrawing メソッドを使用して、Visual の DrawingGroup 値を取得し列挙する例を次に示します。
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.
}
}
}
参照
概念
パフォーマンスの最適化 : 2D グラフィックスとイメージング
Windows Presentation Foundation のグラフィックス レンダリングの概要