繪圖物件概觀
更新:2007 年 11 月
本主題將介紹 Drawing 物件,並描述如何使用這些物件有效地繪製圖案、點陣圖、文字和媒體。當您建立美工圖案、用 DrawingBrush 繪圖,或使用 Visual 物件時,請使用 Drawing 物件。
這個主題包含下列章節。
- 什麼是繪圖物件?
- 繪製圖案
- 繪製影像
- 播放媒體 (僅限程式碼)
- 繪製文字
- 複合繪圖
- 將繪圖顯示為影像
- 繪製含有繪圖的物件
- 使用視覺項目來呈現繪圖
- DrawingContext 物件
- 列舉視覺項目的內容
- 相關主題
什麼是繪圖物件?
Drawing 物件可描繪可見內容,例如圖案、點陣圖、視訊或文字行。不同類型的繪圖可描繪不同類型的內容。以下列出不同類型的繪圖物件。
GeometryDrawing – 繪製圖案。
ImageDrawing – 繪製影像。
GlyphRunDrawing – 繪製文字。
VideoDrawing – 播放音訊檔或視訊檔。
DrawingGroup – 繪製其他繪圖。您可以使用繪圖群組,將其他繪圖結合為單一複合繪圖。
Drawing 物件的用途很多,您有許多方法可以使用 Drawing 物件。
您可以使用 DrawingImage 和 Image 控制項,將它顯示為影像。
您可以將它與 DrawingBrush 搭配使用以繪製物件,例如 Page 的 Background。
您可以使用它來描繪 DrawingVisual 的外觀。
您可以使用它來列舉 Visual 的內容。
WPF 會提供其他型別的物件,這些物件也能夠繪製圖案、點陣圖、文字和媒體。例如,您也可以使用 Shape 物件來繪製圖案,而 MediaElement 控制項會提供另一種將視訊加入至應用程式的方法。因此,何時應該使用 Drawing 物件呢?就是當您可以犧牲架構層級功能以取得效能優點時,或當您需要 Freezable 功能時。因為 Drawing 物件不支援配置系統、輸入和焦點,所以這類物件所提供的效能優點很適合於描繪背景、美工圖案,以及使用 Visual 物件的低階繪圖。
因為這類物件屬於 Freezable 型別物件,所以 Drawing 物件會取得幾項特殊功能,包括:這類物件可以宣告為資源、供多個物件共用、設成唯讀以提升效能、複製以及設成安全執行緒 (Thread-Safe)。如需 Freezable 物件提供之不同功能的詳細資訊,請參閱 Freezable 物件概觀。
繪製圖案
若要繪製圖案,您可使用 GeometryDrawing。幾何繪圖的 Geometry 屬性描述要繪製的圖案,其 Brush 屬性描述應如何繪製圖案的內部,而其 Pen 屬性則描述應如何繪製其外框。
下列範例使用 GeometryDrawing 來繪製圖案。此圖案是由一個 GeometryGroup 和兩個 EllipseGeometry 物件描述。此圖案的內部是用 LinearGradientBrush 繪製,而其外框則是用 BlackPen 繪製。
這個範例會建立下列 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>
如需完整的範例,請參閱 HOW TO:建立 GeometryDrawing。
PathGeometry 之類的其他 Geometry 類別可讓您建立曲線和弧線,進而建立更複雜的圖案。如需 Geometry 物件的詳細資訊,請參閱幾何概觀。
如需其他不用 Drawing 物件繪製圖案之方法的詳細資訊,請參閱 WPF 中圖案和基本繪圖概觀。
繪製影像
若要繪製影像,您可使用 ImageDrawing。ImageDrawing 物件的 ImageSource 屬性描述要繪製的影像,而其 Rect 屬性則定義繪製影像的區域。
下列範例會將影像繪製到位於 (75,75) 且為 100 x 100 像素的矩形中。下圖顯示此範例所建立的 ImageDrawing。圖中會加入灰色框線以顯示 ImageDrawing 的界限。
100 x 100 ImageDrawing
// 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。載入及播放媒體的方法有兩種。第一種方法是使用 MediaPlayer 和 VideoDrawing 本身的功能,第二種方法是建立您自己的 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);
將 VideoDrawing 的 Player 屬性設定為您建立的 MediaPlayer。
aVideoDrawing.Player = player;
使用 MediaPlayer 的 Play 方法,開始播放媒體。
// Play the video once. player.Play();
下列範例使用 VideoDrawing 和 MediaPlayer 播放一次視訊檔。
//
// 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;
從 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 時,您是使用 MediaClock 的 Controller 屬性所傳回的互動式 ClockController 來控制媒體播放,而非使用 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 可讓您將多個繪圖組合成單一複合繪圖。您可以使用 DrawingGroup,將圖案、影像和文字組合成單一 Drawing 物件。
下列範例使用 DrawingGroup 來組合兩個 GeometryDrawing 物件和一個 ImageDrawing 物件。這個範例產生下列輸出。
複合繪圖
//
// 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 內容之選定部分的不透明度。如需範例,請參閱 HOW TO:控制繪圖的不透明度。 |
||
統一變更 DrawingGroup 內容的不透明度。使用這個屬性,可讓 Drawing 變成透明或部分透明。如需範例,請參閱 HOW TO:對圖形套用不透明遮罩。 |
||
將 BitmapEffect 套用到 DrawingGroup 內容。如需範例,請參閱 HOW TO:對圖形套用 BitmapEffect。 |
||
使用 Geometry,將 DrawingGroup 內容裁剪成您描述的區域。如需範例,請參閱 HOW TO:裁剪圖形。 |
||
沿著指定的導線,讓與裝置無關的像素貼齊裝置像素。這個屬性可確保在低 DPI 的顯示器上清晰呈現細緻的圖形。如需範例,請參閱 HOW TO:對圖形套用 GuidelineSet。 |
||
轉換 DrawingGroup 內容。如需範例,請參閱 HOW TO:對圖形套用轉換。 |
將繪圖顯示為影像
若要使用 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,採用從 GeometryDrawing 建立的圖樣來繪製 Rectangle 的 Fill。這個範例產生下列輸出。
搭配 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="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 類別可讓您用視覺內容填入 (Populate) Visual 或 Drawing。許多此種低階圖形物件會使用 DrawingContext,因為它可有效地描繪圖形內容。
雖然 DrawingContext 繪圖方法與 System.Drawing.Graphics 型別的繪圖方法類似,但實際上卻非常不同。DrawingContext 用於保留模式的圖形系統,而 System.Drawing.Graphics 型別則用於即時模式的圖形系統。當您使用 DrawingContext 物件的繪圖命令時,實際上是儲存一組呈現指令 (雖然實際儲存機制取決於提供 DrawingContext 的物件型別) 以在稍後供圖形系統使用,而不是即時繪製到螢幕上。如需 Windows Presentation Foundation (WPF) 圖形系統運作方式的詳細資訊,請參閱 Windows Presentation Foundation 圖形轉譯概觀。
您不能直接具現化 (Instantiate) 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.
}
}
}
請參閱
概念
Windows Presentation Foundation 圖形轉譯概觀