Silverlight 2 プロジェクトでのシェイプまたはパスの描画

  • [アーティクル]

このページは Silverlight 2 プロジェクトにのみ適用されます

Service Pack 1 がインストールされている Microsoft Expression Blend 2 では、すべての Windows Presentation Foundation 描画ツールおよび機能を Silverlight 2 プロジェクトで利用できます。このツールや機能を使用して、シェイプ、パス、および コントロール を描画し、Silverlight 2 アプリケーションのユーザー インターフェイスをデザインできます。描画した項目はアプリケーションのオブジェクトになります。

シェイプを描画するには

  1. ツールボックス で、[四角形] Dd185502.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(ja-jp,Expression.10).png または [楕円] Dd185502.8938cfdf-9b75-4a33-bc88-b0636e114a0d(ja-jp,Expression.10).png のいずれかのシェイプ ツールを選択します。

    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    すべての描画ツールを表示するには、ツールボックスに表示されているツールを右クリックします。[線] ツールではパス オブジェクトが作成されます。このオブジェクトについてはこのトピックで後述します。

    Dd185502.8fbbbb21-be83-4cf6-903b-3a49f00c9860(ja-jp,Expression.10).png

  2. アートボードで、マウスをドラッグしながらシェイプを描画します。

    シェイプを描画すると、幅と高さは次のように表示されます。

    Dd185502.b9dabf44-71aa-43cb-b4eb-f020a21b8756(ja-jp,Expression.10).png

    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    Shift キーを押しながらドラッグすると、高さと幅が同じ長さに保持されます。この方法で四角形を描画すると、正方形が作成されます。また、楕円を描画すると、真円が作成されます。
    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    Alt キーを押しながらドラッグすると、クリックした最初の点が中心点となります。つまり、シェイプの描画は左上角ではなく中心点から始まります。

    マウス ボタンを放すと、シェイプ オブジェクトに対して拡大縮小、回転、移動、傾斜などの操作を行うための移動ハンドルが表示されます。マウス ポインタは次のように変化し、行うことができる操作を表します。

    Dd185502.84261e83-3091-4490-ab58-4218b188439e(ja-jp,Expression.10).png

  3. 変更を保存します (Ctrl + S キー)。

次の手順

パスを描画するには

  1. ツールボックス で、[ペン] Dd185502.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.10).png または [鉛筆] Dd185502.509dc167-734f-46c9-b012-987ee63450cd(ja-jp,Expression.10).png のいずれかのパス ツールを選択します。

    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    すべてのパス ツールを表示するには、ツールボックスに表示されているツールを右クリックします。

    Dd185502.717956a8-b6a5-4e37-8af3-70bcfc78c82a(ja-jp,Expression.10).png

  2. アートボード上で、次のいずれかの方法でパスを描画します。

    • [鉛筆] ツールを使用してアートボード上をドラッグし、マウス ポインタが通過するすべての位置にピクセルを生成します。

    • [ペン] ツールを使用してアートボードをクリックし、パス オブジェクトを構成する点 (頂点) を生成します。必要に応じて、それぞれの点で曲線を生成するようドラッグします。パスを閉じるには、最初の点をクリックします。パスを閉じずに [ペン] ツールを終了するには、他のツールを選択するか、[オブジェクトとタイムライン] でオブジェクトを選択します。

    パスの描画が完了すると、パス オブジェクトに対して拡大縮小、回転、移動、傾斜などの操作を行うための移動ハンドルが表示されます。マウス ポインタは、[選択] Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png ツールで行うことができる操作を表すように変化します。

    Dd185502.69c37d95-ec79-4885-9a63-9d26a596d31c(ja-jp,Expression.10).png

    パス上の個別の点を変更するには、[個別選択] Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.10).png ツールをクリックします。パス オブジェクトに、クリックして移動できる個別の点および線分が表示されます。パスの変更方法の一覧については、「ペンと個別選択の使用方法 [Blend]」を参照してください。

    Dd185502.1cb49b7a-7490-49af-b966-a719e48d8815(ja-jp,Expression.10).png

  3. 変更を保存します (Ctrl + S キー)。

次の手順

線を描画するには

  1. ツールボックス で、[線] Dd185502.eb618397-5283-48be-8396-3449be7b6fbf(ja-jp,Expression.10).png ツールを選択します。

    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    [線] ツールが表示されていない場合は、ツールボックスでツール コンテナを右クリックし、[線] ツールを選択します。

    Dd185502.7431f56c-f3fe-4825-b6fb-6dac229422fd(ja-jp,Expression.10).png

  2. アートボードで、マウスをドラッグしながら線を描画します。

    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    Shift キーを押しながらドラッグすると、直線の角度が 15°の倍数になります。
    Dd185502.alert_tip(ja-jp,Expression.10).gifヒント :

    Alt キーを押しながらドラッグすると、最初にクリックした点は線の開始点ではなく中心点となります。

    マウス ボタンを放すと、拡大縮小、回転、移動、傾斜などの操作を行うための移動ハンドルが表示されます。マウス ポインタは、[選択] Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png ツールで行うことができる操作を表すように変化します。

    線の開始点または終了点を変更するには、[個別選択] Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.10).png ツールをクリックします。パス オブジェクトである線に、クリックして移動できる個別の点が表示されます。パスの変更方法の一覧については、「ペンと個別選択の使用方法 [Blend]」を参照してください。

  3. 変更を保存します (Ctrl + S キー)。

次の手順

関連項目

概念

Silverlight 2 プロジェクトにおけるコントロールの描画