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

このトピックでは、Shapeオブジェクトを使用して描画する方法の概要を説明します。This topic gives an overview of how to draw with Shape objects. AShapeは、画面UIElementに図形を描画できるタイプの 1 です。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. 使用可能な図形オブジェクトEllipseにはLinePath PolygonPolylineRectangle、 、 、 などがあります。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提供しますが、a には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. 図形EllipseWidthHeightプロパティを定義して を作成します。Create an Ellipse by defining the shape's Width and Height properties. 円を描画するには、値がEllipseWidthしいHeight値を持つ値を指定します。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 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作成し、それを使用してオブジェクトPathDataプロパティを設定します。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. クラスLineGeometry RectangleGeometryEllipseGeometry 、および クラスは比較的単純なシェイプを記述します。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. セグメントの種類にはLineSegment、 、 BezierSegmentArcSegmentおよび が含まれます。Segment types include the following: LineSegment, BezierSegment, and ArcSegment.

次の例では、aPathを使用して 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

その他GeometryのクラスPathGeometryの詳細については、「ジオメトリの概要」を参照してください。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). このセグメントは、Data属性ストリングの C コマンドによって示されます。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. 使用可能な色キーワードの詳細については、名前空間のクラスのプロパティColorsSystem.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

LinePathPolygon Polyline、、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. Shapeオブジェクトのレイアウト空間は、Shape明示的Widthな設定とHeight設定、またはレイアウトシステムと設定により、レイアウト システムによって割り当てられるスペースの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 プレゼンテーションの基礎のレイアウトの詳細については、「レイアウトの概要」を参照してください。For additional information on layout in Windows Presentation Foundation, see Layout overview.

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

  • None:Shapeオブジェクトの内容は引き伸ばされていません。None: The Shape object's contents are not stretched.

  • Fill:Shapeオブジェクトの内容は、レイアウト空間に収めるために引き伸ばされます。Fill: The Shape object's contents are stretched to fill its layout space. 縦横比は維持されません。Aspect ratio is not preserved.

  • Uniform:Shapeオブジェクトの内容は、元の縦横比を維持したまま、レイアウト空間を埋めるために可能な限り伸長されます。Uniform: The Shape object's contents are stretched as much as possible to fill its layout space while preserving its original aspect ratio.

  • UniformToFill:Shapeオブジェクトの内容は、元の縦横比を維持したまま、レイアウト空間全体に完全に広がっています。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.

次の例では、aPolygonを使用して、(0,0) から (0,1) から (1,1) までの非常に小さな三角形を描画します。In the following example, a Polygon is used to draw a very small triangle from (0,0) to (0,1) to (1,1). オブジェクトPolygonWidthHeightが 100 に設定され、そのストレッチ プロパティが 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. 45 の A はAngle、要素を時計回りに 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. 要素をCenterX回転CenterYするポイントをコントロールする場合は、 と プロパティを設定します。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.

次の例では、aRotateTransformを使用して図形の左上隅 (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