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

Microsoft Silverlight 1.0 アプリケーションでボタンを作成するには、ボタンを構成する要素を描画し、それらを簡単にコピーできるようにレイアウト パネルにラップして、ボタン イベントの発生時 (ボタンをクリックしたときなど) にアクションを実行する JavaScript コードを作成します。

メモ :
複数のボタン イベントの詳細な使用例については、ButtonGallery サンプルを参照してください。このサンプルは、[ヘルプ] メニューの [ようこそ画面] をクリックしてから [サンプル] タブの [ButtonGallery] をクリックすることで表示できます。

ボタンの要素の描画

シェイプ、線、テキスト、イメージなどの要素を使用して、ボタンの外観を作成できます。次の手順は四角形とテキスト ブロックの描画方法を示していますが、「Silverlight プロジェクト内の XAML ドキュメントへの要素の追加」のトピックに示されているいずれかの手順を使用できます。

ボタンの要素を描画するには

1. Microsoft Expression Blend 2 で Silverlight 1.0 プロジェクトを開いた状態で、ツールボックスから [四角形] ツールを選択します。

   

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

   

2. ポインタをドラッグして、アートボードに四角形を描画します。描画すると、ポインタが十字 に変わります。

   

3. [オブジェクトとタイムライン] で新しい四角形要素を選択して、その外観を変更します。たとえば、[プロパティ] パネルの [ブラシ] で、[グラデーション ブラシ]  タブの [塗りつぶし] をクリックし、グラデーション境界の色を定義します。

   

   メモ :
   「外観」および「変換」の手順を使用して、四角形の外観をさらに変更できます。

4. ツールボックスから TextBlock コントロールを選択します。

   

5. 四角形の上部にテキスト ブロック要素を描画します。四角形またはテキスト ブロック要素をサイズ変更したり、ツールボックスの [選択内容] ツール  を選択し、アートボード上の要素の周囲に表示される青いガイドをドラッグして移動したりすることが必要な場合があります。

   

6. [オブジェクトとタイムライン] で新しいテキスト ブロック要素を選択して、F2 キーを押してテキスト編集モードに移行し、「ボタン」と入力して要素に表示されるテキストを変更します。テキスト ブロック要素の外部をクリックして、テキスト編集モードを終了します。

   メモ :
   テキスト ブロックの外観の変更方法の詳細については、「テキストと文字体裁」のトピックを参照してください。

7. ボタンの外観をしあげるには、「Silverlight プロジェクト内の XAML ドキュメントへの要素の追加」に示されている手順を使用して、アートボードに他の要素を描画します。

先頭に戻る

レイアウト パネルでのボタン要素のラップ

ボタン要素を単一のレイアウト パネル (Canvas 要素) にラップすることにより、ボタンの複製プロセスを簡略化します。これにより、ボタンを構成するすべての要素を選択して複製する代わりに、レイアウト パネルをコピーして貼り付けることができます。また、ボタン要素をキャンバス レイアウト パネルにラップすると、ボタンのイベント ハンドラの作成も簡略化されます。たとえば、ボタンの一部分にポインタを移動したときに応答するのではなく、レイアウト パネル全体にポインタを移動したときに応答するイベント ハンドラを作成できます。

レイアウト パネルに要素をラップするには

1. [オブジェクトとタイムライン] で、Ctrl キーを押したまま、ボタンを構成するすべての要素を選択します。

2. 選択した要素を右クリックし、[グループ化設定] をポイントして [Canvas] をクリックします。

   

3. [オブジェクトとタイムライン] で新しいキャンバス要素を右クリックしてから [名前変更] をクリックし、ボタンの新しい名前 (MyButton など) を入力して Enter キーを押します。

   これで、ボタンを複製する場合に、MyButton 要素をコピーして貼り付けることができます。

先頭に戻る

ボタンの外観を変更するためのアニメーション ストーリーボードの作成

通常は、ユーザーがアプリケーションでボタンをクリックすると、ボタンの外観が変わります。次の手順では、ボタン要素を展開するアニメーション ストーリーボードの作成方法を示します。

メモ :
ボタンに属する要素だけでなく、アプリケーションの任意の要素をアニメーション化できます。たとえば、クリックされたときにボタンの周囲を囲む小さなイメージを描画できます。

アニメーション ストーリーボードを作成するには

1. [オブジェクトとタイムライン] で、[新規作成] ボタン  をクリックします。

   

   [Storyboard の作成] ダイアログ ボックスが開きます。

   

2. 既定では、ストーリーボードの [名前] は "Storyboard1" です。次の手順のコードではこの名前を参照するため、名前は Storyboard1 のままにしてください。

3. また、既定では [リソースとして作成] チェック ボックスがオンになります。アプリケーションがブラウザ ウィンドウに読み込まれたときにアニメーションがすぐ実行されないようにするため、このチェック ボックスはオフにしないでください。代わりに、アニメーションをコードで完全に制御 (開始および停止) します。

4. [OK] をクリックします。

   Expression Blend によって、ストーリーボードが作成され、アニメーション モードに移行します。

   

   メモ :
   オプションで、F6 キーを押して [組み合わせ] パネルの場所を変更できます。[組み合わせ] パネルをアートボードの下に配置すると、タイムラインをより多く表示できます。

5. [オブジェクトとタイムライン] で、MyButton 要素を選択します。

6. タイムラインの上にある [キーフレームの記録] ボタン  をクリックします。

   新しいキーフレームが、ボタン要素の現在の外観を記録するように設定されます。

7. タイムライン再生ヘッド  を 1/2 秒のマーク (アニメーションの終了時刻) に移動し、[キーフレームの記録] ボタン  をもう一度クリックします。

   新しいキーフレームが、ボタン要素の現在の外観を記録するように設定されます。アニメーションの終了時、ボタンは次のようになります。

   

8. タイムライン再生ヘッド  を 1/4 秒のマークに移動します。この位置で、ボタンの外観を変更します。

   メモ :
   タイムラインを 1/4 秒のマーク (0:00.250) に正確に移動できない場合は、スナップ精度が低すぎることが原因です。スナップ精度を上げるには、[スナップ オプション] ボタン  をクリックして、[秒あたりのスナップ精度] を 20 に設定して、[OK] をクリックします。

9. タイムライン再生ヘッドを 1/4 秒のマークに配置し、MyButton 要素を選択して、アートボードでボタンのサイズを変更します。この操作は、Alt キーを押して中心点を維持したまま、右下のサイズ変更ハンドルをドラッグして行うことができます。

   

   新しいキーフレームがタイムラインの 1/4 秒マークに自動的に追加され、ボタンの新しいサイズと位置が記録されます。RenderTransform 要素が [オブジェクトとタイムライン] に追加されてボタンの新しいサイズ ([表示比率]) と新しい位置 ([移動]) が指定され、これらの要素のキーフレームが、以前に MyButton のキーフレームを設定した場所に追加されています。Expression Blend では、MyButton で設定された開始および終了キーフレームを基にしてアニメーションを開発することが想定されています。したがって、RenderTransform 要素の開始および終了キーフレームは自動的に設定されます。

10. [再生] ボタン  をクリックしてアニメーションをテストします。

11. [ストーリーボードを閉じる] ボタン  をクリックしてアニメーション モードを終了します。これにより、要素に対して行ったすべての変更が、確実にアニメーション ストーリーボードから削除されます。

12. すべてのファイルを保存します。

先頭に戻る

ボタンがクリックされたときにアニメーション ストーリーボードをトリガするイベント ハンドラの作成

イベント ハンドラを登録し、イベント ハンドラのコードを作成する作業は、すべてコードビハインド ファイルで行うことができます。これにより、プログラマとデザイナが別々に作業でき、アプリケーションのプレゼンテーションとコードの両方が完成したときに、これらを簡単に結合できます。また、プログラマは、イベント ハンドラにコードを追加することで、ボタンがクリックされたときに、Web ページへの移動などの他のアクションが実行されるようにすることができます。例については、「Silverlight アプリケーションでのハイパーリンクの作成」を参照してください。

イベント ハンドラを作成するには

1. [プロジェクト] タブで、コードビハインド ファイル Page.xaml.js をダブルクリックして編集用に開きます。

   Page.xaml.js ファイルには、次の JavaScript コードが既に含まれています。

   • Page オブジェクトの定義。

   • MouseLeftButtonDown イベントの登録。

   • MouseLeftButtonDown イベントのイベント ハンドラの定義。

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   メモ :
   Microsoft Silverlight の JavaScript およびオブジェクトの構造の詳細については、スクリプトの作成とマウス イベントの説明 (英語の可能性あり) を参照してください。

2. マウスの左ボタンがクリックされたときにストーリーボードを呼び出すコードは既に存在しますが、二重スラッシュ (//) でコメント化されています。

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

   二重スラッシュを削除してコードを非コメント化します。

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

3. すべてのファイルを保存します。

4. [プロジェクト] メニューの [プロジェクトのテスト] をクリックするか、または F5 キーを押して、プロジェクトをテストします。

   テスト ビルドに成功した場合は、Microsoft Expression Studio に含まれているローカル開発サーバーを使用して、既定の Web ブラウザでプロジェクトが自動的に開きます。Silverlight プロジェクトのテスト方法の詳細については、「Expression Blend からの Silverlight プロジェクトのテスト」を参照してください。

   ボタンをクリックして、ストーリーボードがトリガされるかどうかを確認します。ブラウザの内部の任意の位置をクリックしても、ストーリーボードがトリガされることに注意してください。これは、イベント ハンドラがルート要素 (Page) のスコープに登録されているためです。

5. 次のように行の先頭に二重スラッシュを追加することで、イベント ハンドラが登録されているコード行をコメント化します。

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. コメント化した行の後に、次のコード行を追加します。

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   これらの 2 行のコードの違いは、イベント ハンドラが登録されている要素だけであることに注意してください。コメント化した行では、イベント ハンドラが rootElement に登録されています。貼り付けた行では、findName メソッドを使用して要素を特定することにより、イベント ハンドラが MyButton 要素に登録されています。

7. すべてのファイルをもう一度保存します。

8. [プロジェクト] メニューの [プロジェクトのテスト] をクリックするか、または F5 キーを押して、プロジェクトをテストします。

   ボタンをクリックし、ボタン以外の場所をクリックして、ボタンをクリックしたときにのみアニメーション ストーリーボードがトリガされることを確認します。

先頭に戻る

関連項目

概念

Expression Blend からの Silverlight プロジェクトのテスト