インタラクティブ機能を持つ Silverlight 1.0 サイトの作成

  • [アーティクル]

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

Microsoft Silverlight 1.0 アプリケーションのインタラクティブ機能は、XAML ドキュメントの JavaScript コードビハインド ファイルに含まれるイベント ハンドラを使用して作成されます。この XAML ドキュメントでは、ユーザー インターフェイスをデザインします。次の手順は、マウスのクリックに応じて、アプリケーションでアニメーション ストーリーボードを再生する方法を示しています。

インタラクティブ機能を持つ Silverlight 1 サイトを作成するには

  1. Microsoft Expression Blend で、[ファイル] メニューの [新しいプロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

    Cc296370.ef6e983a-52a3-4258-a42d-a76beb1e48f1(ja-jp,Expression.10).png

  2. [プロジェクトの種類を選択してください] で、[Silverlight 1 サイト] をクリックします。他のフィールドには、プロジェクト名と場所の既定値が表示されます。これらのフィールドはそのままにして、[OK] をクリックします。

    新しい Silverlight プロジェクトが作成され、編集のためにスタートアップ ページ Page.xaml が表示されます。

  3. ツールボックスから、ペン Cc296370.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.10).png ツールを選択します。クリックして点を作成してからドラッグして曲線を作成することで、曲線のシェイプを描画します。最初の点をクリックしてシェイプを閉じます。

    Cc296370.25239939-a612-49fd-9b4a-743971738d5e(ja-jp,Expression.10).png

    マウスでパスを変更する方法の一覧については、「ペンと個別選択の使用方法 [Blend]」を参照してください。

  4. [オブジェクトとタイムライン] で新しいパス オブジェクトを右クリックし、[名前変更] をクリックして、名前「MyPath」を入力します。

    Cc296370.93b269b5-d07e-4b73-9543-644f6e50e0fd(ja-jp,Expression.10).png

    コードビハインド ファイルからオブジェクトを参照する場合、名前が必要になります。Click イベント ハンドラをフックするには、コードからこのオブジェクトを参照する必要があります。

  5. [オブジェクトとタイムライン] で、[新規作成] Cc296370.86937695-03dd-44ea-aa30-28d4029b3ad0(ja-jp,Expression.10).png ボタンをクリックします。[Storyboard リソースの作成] ダイアログ ボックスが表示されます。[名前] フィールドは「Storyboard1」のままにし、[リソースとして作成] チェック ボックスをオンにして、[OK] をクリックします。

    Cc296370.68230d0a-c687-4ca3-af6a-63e7f2e7a9a7(ja-jp,Expression.10).png

    新しいストーリーボードが作成され、タイムライン記録がオンになります。

  6. タイムライン再生ヘッド Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.10).png を 0 秒のマークに配置し、[キーフレームの記録] ボタンをクリックして、MyPath オブジェクトの現在位置を記録します。

    Cc296370.a9d19126-f7dd-43b9-9663-6a39e02af8e6(ja-jp,Expression.10).png

  7. タイムライン再生ヘッド Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(ja-jp,Expression.10).png を 1 秒のマークに移動し、選択内容ツールを使用して、MyPath オブジェクトを移動します。キーフレームが 1 秒のマークに設定されて、MyPath オブジェクトの新しい位置が記録されます。

    Cc296370.8a2c43ac-1a9f-497d-8aab-5e94c74d1560(ja-jp,Expression.10).png

  8. [プロジェクト] パネルで、Page.xaml.js ファイルをダブルクリックして編集用に開きます。

  9. 次のコード行から // 文字を削除して、コメントを解除します。

                    // this.control.content.findName("Storyboard1").Begin();

    Cc296370.76e80641-82b4-4cb5-bb0d-447c70a01f8a(ja-jp,Expression.10).png

    ルート要素上でのマウス ボタン クリックに対してイベント ハンドラをフックする方法を示す初期状態の JavaScript コードが Expression Blend 2 で生成されます。イベント ハンドラは、Storyboard1 に対して Begin メソッドを呼び出します。ストーリーボードを作成するときに [名前] フィールドを変更しなかったのはこのためです。Silverlight 1.0 のスクリプト作成の詳細については、Silverlight でのスクリプト作成とマウス イベントの説明 (英語の可能性あり) を参照してください。

  10. F5 キーを押し、ブラウザ ウィンドウ内をクリックしてアニメーション ストーリーボードをトリガし、Silverlight 1.0 のサイトをテストします。

関連項目

概念

Silverlight アプリケーションのストーリーボードを制御するボタンの作成

ストーリーボードの作成、変更、または削除

サイクルの最後で繰り返しまたは反転させるためのストーリーボードの変更