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.

別の一般的な図形は、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, 0) から (0, 1) には非常に小さな三角形の描画に使用します。In the following example, a Polygon is used to draw a very small triangle from (0,0) to (0,1) to (1,1). PolygonオブジェクトのWidthHeight100 に設定され、拡張プロパティは 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ゼロの既定値があります。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