WPF での図形と基本描画の概要Shapes and Basic Drawing in WPF Overview

このトピックを使用して描画する方法の概要を示しますShapeオブジェクト。This topic gives an overview of how to draw with Shape objects. AShapeの種類は、UIElement画面に図形を描画することができます。A Shape is a type of UIElement that enables you to draw a shape to the screen. UI 要素であるためShapeオブジェクトは内で使用できるPanel要素とほとんどのコントロール。Because they are UI elements, Shape objects can be used inside Panel elements and most controls.

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) には、グラフィックス サービスやレンダリング サービスへのアクセスのレイヤーがいくつか用意されています。 offers several layers of access to graphics and rendering services. 最上位のレイヤーShapeオブジェクトは、簡単に使用し、レイアウトへの参加など、多くの便利な機能を提供、Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF)イベント システム。At the top layer, Shape objects are easy to use and provide many useful features, such as layout and participation in the Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) event system.

図形オブジェクトShape Objects

WPFWPF すぐに使用できるさまざまなShapeオブジェクト。 provides a number of ready-to-use Shape objects. すべての図形オブジェクトの継承、Shapeクラス。All shape objects inherit from the Shape class. 使用可能な図形オブジェクトには、 EllipseLinePathPolygonPolyline、およびRectangleします。Available shape objects include Ellipse, Line, Path, Polygon, Polyline, and Rectangle. Shape オブジェクトは、次の一般的なプロパティを共有します。Shape objects share the following common properties.

  • Stroke: 図形のアウトラインを描画する方法について説明します。Stroke: Describes how the shape's outline is painted.

  • StrokeThickness: 図形のアウトラインの太さについて説明します。StrokeThickness: Describes the thickness of the shape's outline.

  • Fill: 図形の内部を描画する方法について説明します。Fill: Describes how the interior of the shape is painted.

  • デバイス非依存ピクセル単位で計測される座標と頂点を指定するデータ プロパティ。Data properties to specify coordinates and vertices, measured in device-independent pixels.

派生するためUIElement、図形オブジェクトは、パネルおよびほとんどのコントロール内で使用できます。Because they derive from UIElement, shape objects can be used inside panels and most controls. Canvasパネルはその子オブジェクトの絶対配置をサポートするため、複雑な描画の作成に特に適しています。The Canvas panel is a particularly good choice for creating complex drawings because it supports absolute positioning of its child objects.

Lineクラスでは、2 点を結ぶ線を描画することができます。The Line class enables you to draw a line between two points. 直線の座標およびストローク プロパティを指定するいくつかの方法を次の例に示します。The following example shows several ways to specify line coordinates and stroke properties.

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>

// Add a Line Element
myLine = gcnew Line();
myLine->Stroke = Brushes::LightSteelBlue;
myLine->X1 = 1;
myLine->X2 = 50;
myLine->Y1 = 1;
myLine->Y2 = 50;
myLine->HorizontalAlignment = HorizontalAlignment::Left;
myLine->VerticalAlignment = VerticalAlignment::Center;
myLine->StrokeThickness = 2;
myGrid->Children->Add(myLine);

// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);

' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = Brushes.LightSteelBlue
myLine.X1 = 1
myLine.X2 = 50
myLine.Y1 = 1
myLine.Y2 = 50
myLine.HorizontalAlignment = HorizontalAlignment.Left
myLine.VerticalAlignment = VerticalAlignment.Center
myLine.StrokeThickness = 2
myGrid.Children.Add(myLine)

次の図は、レンダリングされたLineします。The following image shows the rendered Line.

線の図Line illustration

ですが、Lineクラスは、提供、Fillプロパティを設定することも何も起こりませんため、Line領域がありません。Although the Line class does provide a Fill property, setting it has no effect because a Line has no area.

もう 1 つの一般的な図形は、Ellipseします。Another common shape is the Ellipse. 作成、Ellipse図形を定義することでWidthHeightプロパティ。Create an Ellipse by defining the shape's Width and Height properties. 円を描画するには指定、EllipseWidthHeight値が等しい。To draw a circle, specify an Ellipse whose Width and Height values are equal.

<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>

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

namespace SDKSample
{
    public partial class SetBackgroundColorOfShapeExample : Page
    {
        public SetBackgroundColorOfShapeExample()
        {
            // Create a StackPanel to contain the shape.
            StackPanel myStackPanel = new StackPanel();

            // Create a red Ellipse.
            Ellipse myEllipse = new Ellipse();

            // Create a SolidColorBrush with a red color to fill the 
            // Ellipse with.
            SolidColorBrush mySolidColorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values. 
            // Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
            myEllipse.Fill = mySolidColorBrush;
            myEllipse.StrokeThickness = 2;
            myEllipse.Stroke = Brushes.Black;

            // Set the width and height of the Ellipse.
            myEllipse.Width = 200;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }

    }
}

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes

Namespace SDKSample
	Partial Public Class SetBackgroundColorOfShapeExample
		Inherits Page
		Public Sub New()
			' Create a StackPanel to contain the shape.
			Dim myStackPanel As New StackPanel()

			' Create a red Ellipse.
			Dim myEllipse As New Ellipse()

			' Create a SolidColorBrush with a red color to fill the 
			' Ellipse with.
			Dim mySolidColorBrush As New SolidColorBrush()

			' Describes the brush's color using RGB values. 
			' Each value has a range of 0-255.
			mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0)
			myEllipse.Fill = mySolidColorBrush
			myEllipse.StrokeThickness = 2
			myEllipse.Stroke = Brushes.Black

			' Set the width and height of the Ellipse.
			myEllipse.Width = 200
			myEllipse.Height = 100

			' Add the Ellipse to the StackPanel.
			myStackPanel.Children.Add(myEllipse)

			Me.Content = myStackPanel
		End Sub

	End Class
End Namespace

次の図は、レンダリングの例を示しますEllipseします。The following image shows an example of a rendered Ellipse.

楕円の図Ellipse illustration

パスとジオメトリの使用Using Paths and Geometries

Pathクラスでは、曲線および複雑な図形を描画することができます。The Path class enables you to draw curves and complex shapes. これらの曲線および図形を使用して記述Geometryオブジェクト。These curves and shapes are described using Geometry objects. 使用する、 Path、作成する、Geometryに設定して、PathオブジェクトのDataプロパティ。To use a Path, you create a Geometry and use it to set the Path object's Data property.

さまざまなGeometryから選択するオブジェクト。There are a variety of Geometry objects to choose from. LineGeometryRectangleGeometry、およびEllipseGeometryクラスは、比較的単純な図形をについて説明します。The LineGeometry, RectangleGeometry, and EllipseGeometry classes describe relatively simple shapes. 複雑な図形を作成または曲線を作成、使用して、PathGeometryします。To create more complex shapes or create curves, use a PathGeometry.

PathGeometry と PathSegmentPathGeometry and PathSegments

PathGeometry オブジェクトは、1 つまたは複数の構成要素はPathFigureオブジェクト。 各PathFigure異なる"図"または図形を表します。PathGeometry objects are comprised of one or more PathFigure objects; each PathFigure represents a different "figure" or shape. PathFigure自体は 1 つ以上ので構成されますPathSegmentそれぞれ図や図形の接続されている部分を表すオブジェクトします。Each PathFigure is itself comprised of one or more PathSegment objects, each representing a connected portion of the figure or shape. セグメントの種類は、次を含める: LineSegmentBezierSegment、およびArcSegmentします。Segment types include the following: LineSegment, BezierSegment, and ArcSegment.

次の例では、 Path 2 次ベジエ曲線の描画に使用します。In the following example, a Path is used to draw a quadratic Bezier curve.

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

レンダリングされた図形を次の図に示します。The following image shows the rendered shape.

パスの図Path illustration

詳細についてはPathGeometryおよびその他、Geometryクラスを参照してください、ジオメトリの概要します。For more information about PathGeometry and the other Geometry classes, see the Geometry Overview.

省略された XAML 構文XAML Abbreviated Syntax

Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)、記述する特別な省略構文を使用することも、Pathします。In Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), you may also use a special abbreviated syntax to describe a Path. 次の例では、省略された構文を使用して複雑な図形を描画します。In the following example, abbreviated syntax is used to draw a complex shape.

      <Path Stroke="DarkGoldenRod" StrokeThickness="3"   
Data="M 100,200 C 100,25 400,350 400,175 H 280" />  

次の図は、レンダリングされたPathします。The following image shows a rendered Path.

パスの図Path illustration

Data属性文字列の先頭の座標システムで、パスの開始点を確立、M で示される"moveto"コマンドが、Canvasします。The Data attribute string begins with the "moveto" command, indicated by M, which establishes a start point for the path in the coordinate system of the Canvas. Path データのパラメーターは大文字小文字を区別します。Path data parameters are case-sensitive. 大文字の M では、現在の新しい点の絶対位置を示します。The capital M indicates an absolute location for the new current point. 小文字の m は、相対座標を示します。A lowercase m would indicate relative coordinates. 最初のセグメントは、2 つの制御点 (100,25) と (400,350) を使用して描画される、始点が (100,200) で終点が (400,175) の 3 次ベジエ曲線です。The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350). このセグメントは、C のコマンドで示される、Data属性の文字列。This segment is indicated by the C command in the Data attribute string. ここでも、大文字の C は絶対パスを示し、小文字の c は相対パスを示します。Again, the capital C indicates an absolute path; the lowercase c would indicate a relative path.

2 番目のセグメントは、絶対水平 "lineto" コマンド H で始まります。このコマンドは、前のサブパスの終点 (400,175) から新しい終点 (280,175) まで描画される直線を指定します。The second segment begins with an absolute horizontal "lineto" command H, which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). 指定された値は、水平"lineto"コマンドであるため、 x-を調整します。Because it is a horizontal "lineto" command, the value specified is an x-coordinate.

完全なパスの構文を参照してください、Data参照とPathGeometry を使用して図形を作成です。For the complete path syntax, see the Data reference and Create a Shape by Using a PathGeometry.

図形の塗りつぶしPainting Shapes

Brush オブジェクトが図形の描画に使用されるStrokeFillします。Brush objects are used to paint a shape's Stroke and Fill. 次の例、ストロークおよび塗りつぶしのEllipseが指定されています。In the following example, the stroke and fill of an Ellipse are specified. ブラシ プロパティの有効な入力は、キーワードまたは 16 進数のカラー値のいずれかです。Note that valid input for brush properties can be either a keyword or hexadecimal color value. 使用可能なカラー キーワードの詳細については、のプロパティを参照してください、Colorsクラス、System.Windows.Media名前空間。For more information about available color keywords, see properties of the Colors class in the System.Windows.Media namespace.

<Canvas Background="LightGray">   
   <Ellipse  
      Canvas.Top="50"  
      Canvas.Left="50"  
      Fill="#FFFFFF00"  
      Height="75"  
      Width="75"  
      StrokeThickness="5"  
      Stroke="#FF0000FF"/>  
</Canvas>  

次の図は、レンダリングされたEllipseします。The following image shows the rendered Ellipse.

楕円An ellipse

または、プロパティ要素構文を使用して明示的に作成することができます、SolidColorBrush純色で図形を描画するオブジェクト。Alternatively, you can use property element syntax to explicitly create a SolidColorBrush object to paint the shape with a solid color.

<!-- This polygon shape uses pre-defined color values for its Stroke and  
     Fill properties.   
     The SolidColorBrush's Opacity property affects the fill color in   
     this case by making it slightly transparent (opacity of 0.4) so   
     that it blends with any underlying color. -->  

<Polygon  
    Points="300,200 400,125 400,275 300,200"  
    Stroke="Purple"   
    StrokeThickness="2">  
    <Polygon.Fill>  
       <SolidColorBrush Color="Blue" Opacity="0.4"/>  
    </Polygon.Fill>  
</Polygon>  

レンダリングされた図形を次の図に示します。The following illustration shows the rendered shape.

SolidColorBrush の図SolidColorBrush illustration

図形のストロークまたは塗りつぶしをグラデーション、イメージ、パターンなどで塗りつぶすこともできます。You can also paint a shape's stroke or fill with gradients, images, patterns, and more. 詳細については、次を参照してください。、純色およびグラデーション概要します。For more information, see the Painting with Solid Colors and Gradients Overview.

伸縮可能な図形Stretchable Shapes

LinePathPolygonPolyline、およびRectangleクラスがすべて、Stretchプロパティ。The Line, Path, Polygon, Polyline, and Rectangle classes all have a Stretch property. このプロパティを決定する方法、Shapeオブジェクトのコンテンツ (描画される図形) がいっぱいに拡大されます、Shapeオブジェクトのレイアウト空間。This property determines how a Shape object's contents (the shape to be drawn) is stretched to fill the Shape object's layout space. AShapeオブジェクトのレイアウト空間は、領域の量、Shapeが割り当てられる、レイアウト システムでは、いずれかが原因、明示的なWidthHeight設定のため、またはそのHorizontalAlignmentVerticalAlignment設定します。A Shape object's layout space is the amount of space the Shape is allocated by the layout system, because of either an explicit Width and Height setting or because of its HorizontalAlignment and VerticalAlignment settings. Windows Presentation Foundation でのレイアウトの詳細については、次を参照してください。レイアウトの概要。For additional information on layout in Windows Presentation Foundation, see Layout overview.

プロパティには、次のいずれかの値を指定します。The Stretch property takes one of the following values:

  • NoneShapeオブジェクトのコンテンツは引き伸ばされません。None: The Shape object's contents are not stretched.

  • FillShapeレイアウト空間を入力するオブジェクトのコンテンツは引き伸ばされます。Fill: The Shape object's contents are stretched to fill its layout space. 縦横比は維持されません。Aspect ratio is not preserved.

  • UniformShapeオブジェクトのコンテンツは元の縦横比を維持しながら、レイアウト空間を入力する可能な限り引き伸ばされます。Uniform: The Shape object's contents are stretched as much as possible to fill its layout space while preserving its original aspect ratio.

  • UniformToFillShapeオブジェクトの内容は、元の縦横比を維持しながら、レイアウト空間を完全に埋めるに引き伸ばされます。UniformToFill: The Shape object's contents are stretched to completely fill its layout space while preserving its original aspect ratio.

なお、ときに、Shapeオブジェクトのコンテンツを引き伸ばす、Shape拡大した後はオブジェクトのアウトラインを描画します。Note that, when a Shape object's contents are stretched, the Shape object's outline is painted after the stretching.

次の例では、 Polygon (1, 1) に (0, 1) に (0, 0) から非常に小さな三角形の描画に使用します。In the following example, a Polygon is used to draw a very small triangle from (0,0) to (0,1) to (1,1). PolygonオブジェクトのWidthHeightが 100 に設定し、その stretch プロパティを Fill に設定されます。The Polygon object's Width and Height are set to 100, and its stretch property is set to Fill. 結果として、Polygonオブジェクトのコンテンツ (三角形) は拡大のスペースを埋めるに引き伸ばされます。As a result, the Polygon object's contents (the triangle) are stretched to fill the larger space.

<Polygon  
  Points="0,0 0,1 1,1"  
  Fill="Blue"  
  Width="100"  
  Height="100"  
  Stretch="Fill"  
  Stroke="Black"  
  StrokeThickness="2" />  
PointCollection myPointCollection = new PointCollection();  
myPointCollection.Add(new Point(0,0));  
myPointCollection.Add(new Point(0,1));  
myPointCollection.Add(new Point(1,1));  

Polygon myPolygon = new Polygon();  
myPolygon.Points = myPointCollection;  
myPolygon.Fill = Brushes.Blue;  
myPolygon.Width = 100;  
myPolygon.Height = 100;  
myPolygon.Stretch = Stretch.Fill;  
myPolygon.Stroke = Brushes.Black;  
myPolygon.StrokeThickness = 2;  

図形の変換Transforming Shapes

Transformクラスには、2 次元平面内の図形を変換するための手段が用意されています。The Transform class provides the means to transform shapes in a two-dimensional plane. 変換のさまざまな種類は、回転 (RotateTransform)、スケール (ScaleTransform)、傾斜 (SkewTransform)、および翻訳 (TranslateTransform)。The different types of transformation include rotation (RotateTransform), scale (ScaleTransform), skew (SkewTransform), and translation (TranslateTransform).

図形に適用される一般的な変換は回転です。A common transform to apply to a shape is a rotation. 図形を回転するには、作成、RotateTransform指定とそのAngleします。To rotate a shape, create a RotateTransform and specify its Angle. Angle 45 の要素を 45 度回転角度が 90 の要素を 90 度回転; まで、時計回り時計回りします。An Angle of 45 rotates the element 45 degrees clockwise; an angle of 90 rotates the element 90 degrees clockwise; and so on. 設定、CenterXCenterYプロパティ要素を回転、位置を制御する場合。Set the CenterX and CenterY properties if you want to control the point about which the element is rotated. これらのプロパティ値は、変換する要素の座標空間で表します。These property values are expressed in the coordinate space of the element being transformed. CenterX CenterY 0 の既定値を指定します。CenterX and CenterY have default values of zero. 最後に、適用、RotateTransform要素にします。Finally, apply the RotateTransform to the element. レイアウトに影響する変換しない場合は、設定、図形のRenderTransformプロパティ。If you don't want the transform to affect layout, set the shape's RenderTransform property.

次の例では、RotateTransform図形の左上隅 (0, 0) の図形を 45 度回転するために使用します。In the following example, a RotateTransform is used to rotate a shape 45 degrees about the shape's top left corner (0,0).

<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50">
  <Polyline.RenderTransform>
    <RotateTransform CenterX="0" CenterY="0" Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

次の例では、別の図形を 45 度回転していますが、この場合は (25,50) が回転の中心です。In the next example, another shape is rotated 45 degrees, but this time it's rotated about the point (25,50).

<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline 
  Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5">
  <Polyline.RenderTransform>
    <RotateTransform Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

上記 2 つの変換を適用すると、結果は次の図のようになります。The following illustration shows the results of applying the two transforms.

中心点が異なる 45 度の回転45 degree rotations with different center points

前の例では、単一の変換を各図形オブジェクトに適用しました。In the previous examples, a single transform was applied to each shape object. 図形 (またはその他の UI 要素) には、複数の変換を適用するには、使用、TransformGroupします。To apply multiple transforms to a shape (or any other UI element), use a TransformGroup.

関連項目See Also

2D グラフィックスとイメージング2D Graphics and Imaging
純色およびグラデーションによる塗りつぶしの概要Painting with Solid Colors and Gradients Overview
ジオメトリの概要Geometry Overview
チュートリアル: 初めての WPF デスクトップ アプリケーションWalkthrough: My first WPF desktop application
アニメーションの概要Animation Overview