情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

クイックスタート: Windows Phone の図形

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone では、図形を作成して画面に描画するためのオプションがいくつかあります。このクイックスタートでは、楕円、四角形、多角形、パスなどの図形について説明します。ここでは、XAML を使用した図形の作成を中心に説明します。

ヒントヒント:

図形に関する多くの作業を行う場合は、Windows Phone 用のアプリの開発に使用できる Blend for Visual Studio などの WYSIWYG ツールを使用したいことがあります。WYSIWYG ツールは XAML を生成するだけなので、XAML そのものを理解することが重要です。

このトピックは、次のセクションで構成されています。

図形の領域を定義する 2 つのクラスのセット ShapeGeometry があります。これらのクラスの主な相違点は、Shape は、ブラシが関連付けられていて、画面上にレンダリングできますが、Geometry は、スペースの領域を定義するだけでレンダリングされないということです。Shape は、その境界線が Geometry によって定義される UIElement と考えることができます。このクイックスタートでは、Shape クラスについてのみ説明します。

Shapeには、LineEllipseRectanglePolygonPolylinePath の各種クラスがあります。Path で注目すべきは、任意のジオメトリを境界線として定義できるという点です。

Shape を画面にレンダリングするには、Brush を関連付ける必要があります。ShapeFill プロパティは目的の Brush に設定されます。Windows Phone には、SolidColorBrushLinearGradientBrushRadialGradientBrushImageBrush の各種ブラシがあります。ブラシの詳細については、「クイックスタート: Windows Phone のブラシ」を参照してください。

基本的な Ellipse を作成するには、単純に FillWidthHeight、および Brush を指定します。

次の例では、Width300Height300Ellipse を作成し、Fill として SBlue SolidColorBrush を使用します。

<Ellipse Fill="Blue" 
    Height="300" 
    Width="300"/>
Shapes - Ellipse

Rectangle は、対辺が等しい四辺形です。基本的な Rectangle を作成するには、単純に WidthHeight、および Fill を指定します。

Windows Phone では、Rectangle の角を丸めることができます。角丸を作成するには、RadiusX および RadiusY プロパティの値を指定します。これらのプロパティは、角の曲線を定義する楕円の X 軸と Y 軸を指定します。RadiusX の最大値は Width の 2 分の 1 であり、RadiusY の最大値は Height の 2 分の 1 です。

すべての Shape クラスには Stroke および StrokeThickness プロパティがあります。Stroke は、Shape の境界線を描画するために使用される Brush を指定します。StrokeBrush が指定されていない場合、図形の周囲の境界線は描画されません。StrokeThickness は境界線の幅を指定します。

メモメモ:

Line は、内部間隔がないので、Stroke のみをレンダリングし、Fill をレンダリングしません。Line をレンダリングするには、Stroke および StrokeThickness プロパティが指定されていることを確認してください。

Width100Height50Rectangle を作成する例を次に示します。スチールブルーの SolidColorBrushFill に使用し、黒の SolidColorBrushStroke に使用します。StrokeThickness3 に設定され、RadiusX および RadiusY プロパティは 10 に設定されます。これにより、Rectangle の角が丸められます。この例のスライダーを使用して、さまざまなプロパティの値を試してください。

<Rectangle Fill="SteelBlue" 
    Height="275" 
    Width="350" 
    Stroke="AliceBlue" 
    StrokeThickness="15" 
    RadiusX="40" 
    RadiusY="30"/>

Windows Phone に表示した角が丸められた Rectangle を次の図に示します。

Shapes - Rectangle

Polygon は、任意の数のポイントで定義された境界線を持つ図形です。境界線は各ポイントを順番に接続し、最後のポイントを最初のポイントに接続することによって作成されます。Points プロパティは、境界線を構成するポイントのコレクションを定義します。XAML では、コンマ区切りリストを使用してポイントを定義します。コード内では、PointCollection を使用して、ポイントを定義し、個別のポイントを Points 構造体としてコレクションに追加します。

4 つのポイントが (10,200)、(60,140)、(130,140)、(180,200) に設定された Polygon を作成する例を次に示します。青の SolidColorBrushFill に使用します。Stroke は定義されていないので、何もレンダリングされないようにポイントを配置することができます。Stroke が定義されている場合、少なくとも Stroke と同じ太さの線またはポイントが描画されます。この例のスライダーを使用して、さまざまなポイントの座標を試すことができます。Stroke チェック ボックスをオンにした場合、最後のポイントが最初のポイントに接続されます。

Polyline は、図形の境界線が一連のポイントによって定義される点で Polygon に似ています。PolylinePolygon の主な違いは、Polyline の最後のポイントが最初のポイントに接続されないことです。PolylineFill は、境界の終わり (または Stroke) が一致しない場合でも図形の内部間隔を描画します。

Polygon の場合と同じように、Points プロパティは境界線を構成するポイントのコレクションを定義します。XAML では、コンマ区切りリストを使用してポイントを定義します。コード内では、PointCollection を使用して、ポイントを定義し、個別のポイントを Points 構造体としてコレクションに追加します。

4 つのポイントが (10,200)、(60,140)、(130,140)、(180,200) に設定された Polyline を作成する例を次に示します。Fill は定義されませんが、Stroke が定義されます。Polygon とは異なり、最後のポイントと最初のポイントは接続されません。この例のスライダーを使用して、さまざまなポイントの座標を試すことができます。Fill および Stroke チェック ボックスが変更されるときの PolylinePolygon の違いを比較してください。

Path は、任意のジオメトリを定義できるので、最も用途が広い Shape です。ただし、この多用性のために複雑になります。このセクションでは、XAML で基本的な Path を作成する方法を示します。

パスのジオメトリは、Data プロパティを使用して定義します。Data プロパティは Geometry オブジェクトに設定するか XAML で設定できます。XAML でパスを定義するには、パス マークアップ構文を使用します。

次の例は、ベジエ曲線セグメントおよび線分セグメントで構成される Path を作成します。Data 属性文字列は、M で示される移動コマンドで始まり、パスの開始点を確立します。大文字の M は、現在の新しい点の絶対位置を示します。小文字の m は相対位置を示します。最初のセグメントは、2 つの制御点 (100,25) と (400,350) を使用して描画される、始点が (100,200) で終点が (400,175) の 3 次ベジエ曲線です。このセグメントは、Data 属性文字列の C コマンドで示されます。ここでも、大文字の C は絶対パスを示し、小文字の c は相対パスを示します。

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

メモメモ:

パスのデータ パラメーターでは、大文字と小文字が区別されます。

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

Windows Phone に表示された Path のイメージを次に示します。

Shapes - Path

Windows Phone グラフィックス (および一部のアニメーション) は個別のスレッドで実行されます。ほとんどのシナリオでは、システムによってこの処理のすべてが管理されるので、これを心配する必要はありません。しかし、アプリに数多くのグラフィックスやアニメーションがある場合、パフォーマンスおよびデザインに関する考慮事項があります。

パフォーマンスの詳細については、「Windows Phone 8 用アプリのパフォーマンス上の考慮事項」を参照してください。

表示: