WPF での図形と基本的な描画の概要

このトピックでは、 Shape オブジェクトを使用して描画する方法の概要について説明します。 Shapeは、画面に図形を描画できるUIElementの一種です。 これらは UI 要素であるため、 Shape オブジェクトは Panel 要素とほとんどのコントロール内で使用できます。

Windows Presentation Foundation (WPF) には、グラフィックス サービスとレンダリング サービスへのアクセスレイヤーがいくつか用意されています。 最上位レイヤーでは、 Shape オブジェクトは使いやすく、レイアウトや Windows Presentation Foundation (WPF) イベント システムへの参加など、多くの便利な機能を提供します。

図形関連の型は、 Windows.Shapes 名前空間にあります。 ジオメトリ関連の型は、 System.Windows.Media 名前空間にあります。

Shape オブジェクト

WPF には、すぐに使用できる Shape オブジェクトが多数用意されています。 すべての図形オブジェクトは、 Shape クラスから継承されます。 使用できる図形オブジェクトには、 Ellipse、 Line、 Path、 Polygon、 Polyline、および Rectangleがあります。 Shape オブジェクトは、次の共通プロパティを共有します。

• Stroke: 図形のアウトラインの描画方法について説明します。

• StrokeThickness: 図形の輪郭の太さを表します。

• Fill: 図形の内部の描画方法について説明します。

• デバイスに依存しないピクセル単位で測定された座標と頂点を指定するデータ プロパティ。

これらは UIElementから派生しているため、図形オブジェクトはパネルやほとんどのコントロール内で使用できます。 Canvas パネルは、子オブジェクトの絶対配置をサポートしているため、複雑な図面を作成する場合に特に適しています。

Line クラスを使用すると、2 つの点の間に線を描画できます。 次の例は、線の座標とストロークのプロパティを指定するいくつかの方法を示しています。

<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を示しています。

Line クラスはFillプロパティを提供しますが、Lineには領域がないため、設定しても効果はありません。

もう 1 つの一般的な図形は、 Ellipseです。 図形のEllipseプロパティとWidthプロパティを定義して、Heightを作成します。 円を描画するには、EllipseとWidthの値が等しいHeightを指定します。

<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の例を示しています。

パスとジオメトリの使用

Path クラスを使用すると、曲線や複雑な図形を描画できます。 これらの曲線と図形は、 Geometry オブジェクトを使用して記述されます。 Pathを使用するには、Geometryを作成し、それを使用してPath オブジェクトのData プロパティを設定します。

さまざまな Geometry オブジェクトから選択できます。 LineGeometry、RectangleGeometry、およびEllipseGeometryクラスは、比較的単純な図形を記述します。 より複雑な図形を作成したり、曲線を作成したりするには、 PathGeometryを使用します。

PathGeometry と PathSegments

PathGeometry オブジェクトは、1 つ以上の PathFigure オブジェクトで構成されます。各 PathFigure は、異なる "図" または図形を表します。 各 PathFigure は、それ自体が1つ以上の PathSegment オブジェクトで構成され、それぞれが図または形状の接続された部分を表す。 セグメントの種類には、 LineSegment、 BezierSegment、および ArcSegmentが含まれます。

次の例では、 Path を使用して 2 次ベジエ曲線を描画します。

<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>

次の図は、レンダリングされた図形を示しています。

PathGeometryおよびその他のGeometryクラスの詳細については、「ジオメトリの概要」を参照してください。

XAML の省略構文

拡張アプリケーション マークアップ言語 (XAML) では、特別な省略構文を使用して Pathを記述することもできます。 次の例では、省略構文を使用して複雑な図形を描画します。

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

次の図は、レンダリングされた Pathを示しています。

Data属性文字列は、M で示される "moveto" コマンドで始まり、Canvasの座標系内のパスの始点を確立します。 Path データ パラメーターでは大文字と小文字が区別されます。 大文字 M は、新しい現在のポイントの絶対位置を示します。 小文字の m は相対座標を示します。 最初のセグメントは、2 つの制御点 (100,25) と (400,350) を使用して描画される、(100,200) から始まり、(400,175) で終わる 3 次ベジエ曲線です。 このセグメントは、 Data 属性文字列の C コマンドによって示されます。 ここでも、大文字 C は絶対パスを示します。小文字の c は相対パスを示します。

2 番目のセグメントは、絶対水平 "lineto" コマンド H で始まります。これは、前のサブパスのエンドポイント (400,175) から新しいエンドポイント (280,175) に描画される線を指定します。 これは水平の "lineto" コマンドであるため、指定された値は x 座標です。

完全なパス構文については、「 Data リファレンス」および 「PathGeometry を使用して図形を作成する」を参照してください。

図形の描画

Brush オブジェクトは、図形の Stroke と Fillを描画するために使用されます。 次の例では、 Ellipse のストロークと塗りつぶしを指定します。 ブラシ プロパティの有効な入力には、キーワードまたは 16 進数の色値を指定できます。 使用可能なカラー キーワードの詳細については、Colors名前空間のSystem.Windows.Media クラスのプロパティを参照してください。

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

次の図は、レンダリングされた Ellipseを示しています。

または、プロパティ要素の構文を使用して、 SolidColorBrush オブジェクトを明示的に作成して、純色で図形を塗りつぶすことができます。

<!-- 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>

次の図は、レンダリングされた図形を示しています。

図形のストロークを塗りつぶしたり、グラデーション、画像、パターンなどを塗りつぶすこともできます。 詳細については、「 純色とグラデーションによる塗りつぶしの概要」を参照してください。

ストレッチ可能な図形

Line、Path、Polygon、Polyline、およびRectangleのクラスはすべて、Stretch プロパティを持ちます。 このプロパティは、 Shape オブジェクトのコンテンツ (描画する図形) を引き伸ばして、 Shape オブジェクトのレイアウト空間を塗りつぶす方法を決定します。 Shape オブジェクトのレイアウト領域は、明示的なShapeとWidthの設定、またはそのHeightとHorizontalAlignmentの設定により、VerticalAlignmentがレイアウト システムによって割り当てられる領域の量です。 Windows Presentation Foundation のレイアウトの詳細については、「レイアウトの概要 」 を参照してください。

Stretch プロパティは、次のいずれかの値を受け取ります。

• None: Shape オブジェクトの内容はストレッチされません。

• Fill: Shape オブジェクトのコンテンツは、レイアウト空間を埋めるために引き伸ばされます。 縦横比は保持されません。

• Uniform: Shape オブジェクトのコンテンツは、元の縦横比を維持しながら、レイアウト領域を埋めるためにできるだけ拡大されます。

• UniformToFill: Shape オブジェクトのコンテンツは、元の縦横比を維持しながら、レイアウト空間を完全に埋めるように引き伸ばされます。

Shape オブジェクトのコンテンツが引き伸ばされると、Shape オブジェクトのアウトラインはストレッチの後に描画されることに注意してください。

次の例では、(0,0) から (0,1) から (1,1) までの非常に小さな三角形を描画するために、 Polygon を使用します。 Polygon オブジェクトのWidthとHeightは 100 に設定され、そのストレッチ プロパティは Fill に設定されます。 その結果、 Polygon オブジェクトのコンテンツ (三角形) は、大きなスペースを埋めるために引き伸ばされます。

<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;

図形の変換

Transform クラスは、2 次元平面内の図形を変換する手段を提供します。 変換の種類には、回転 (RotateTransform)、スケール (ScaleTransform)、傾斜 (SkewTransform)、平行移動 (TranslateTransform) があります。

図形に適用する一般的な変換は回転です。 図形を回転するには、 RotateTransform を作成し、その Angleを指定します。 Angleが 45 の場合、要素は時計回りに 45 度回転し、90 の角度は要素を時計回りに 90 度回転します。 要素が回転する点を制御する場合は、 CenterX プロパティと CenterY プロパティを設定します。 これらのプロパティ値は、変換される要素の座標空間で表されます。 CenterX と CenterY の既定値は 0 です。 最後に、要素に RotateTransform を適用します。 変換がレイアウトに影響しない場合は、図形の RenderTransform プロパティを設定します。

次の例では、 RotateTransform を使用して、図形の左上隅 (0,0) を 45 度回転します。

<!-- 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) を中心に回転します。

<!-- 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 つの変換を適用した結果を示しています。

前の例では、各図形オブジェクトに 1 つの変換が適用されました。 図形 (またはその他の UI 要素) に複数の変換を適用するには、 TransformGroupを使用します。

こちらも参照ください

• 2D グラフィックスおよびイメージング
• 単色とグラデーションを用いた描画の概要
• ジオメトリの概要
• ウォークスルー: 私の初めての WPF デスクトップ アプリケーション
• アニメーションの概要