1. Expression Blend 2 を起動します。
2. [プロジェクト] タブの [新しいプロジェクト] を選択します。
   → [新しいプロジェクト] ダイアログボックスが表示されます。

3. ［Silverlight 2 アプリケーション］を選択し、名前ボックスを "SilverlightMoviePlayer" と入力します。

4. [OK] ボタンをクリックします。
   → 新規プロジェクトが作成されます。

1. Silverlight の縦横サイズを変更します。
   [オブジェクトとタイムライン] タブの [UserControl] を選択し、[プロパティ] タブで以下のように設定します。

2. ビデオプレイヤーは固定サイズのため、レイアウトの行いやすい "Canvas" コントロールを使用してレイアウトしていきます。はじめに最上位のコントロールを [Grid] コントロールから [Canvas] コントロールに変更します。
   [オブジェクトとタイムライン] タブで [LayoutRoot] を選択し、右クリックし、[レイアウトの種類の変更] - [Canvas] をクリックします。

3. ビデオの背景色を削除します。[オブジェクトとタイムライン] タブの [LayoutRoot] を選択したまま、[プロパティ] タブで以下のように設定します。

4. ビデオプレイヤーの背景を配置します。[LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、[四角形] ツールをダブルクリックしてステージに配置します。さらに、配置した四角形を選択した状態のまま、[プロパティ] タブで以下のように設定します。

5. デザイン画像ファイルおよび再生するビデオファイル一式を Silverlight プロジェクトへ追加します。ダウンロードファイル内の [素材] フォルダ＞[Image] と [Movie] フォルダをエクスプローラ上でコピーし、Expression Blend 2 画面の [プロジェクト] タブの [SilverlightMoviePlayer] 上で右クリック － [貼り付け] を選択して、Image フォルダと Movie フォルダをプロジェクトに追加します。

6. 再生するビデオを配置します。[オブジェクトとタイムライン] タブで [LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、[プロジェクト] タブから [Movie] フォルダ － [ArcMouseMovie.wmv] をダブルクリックして、ビデオを配置します。さらに、配置したビデオを選択した状態のまま、[プロパティ] タブで以下のように設定します。

7. ビデオプレイヤーのフレーム部分を配置します。[オブジェクトとタイムライン] タブで [LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、[プロジェクト] タブから [Image] フォルダ － [Img_Player_Frame.png] をダブルクリックして配置します。

8. ビデオプレイヤーの再生ボタンとなる ToggleButton コントロールを配置します。[オブジェクトとタイムライン] タブで [LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、ツールボックスの [アセットライブラリ] － [すべて表示] チェックボックスにチェックした状態で、[ToggleButton] をクリックします。
   アセットライブラリのボタンの上にToggleButtonが表示されますので、ダブルクリックして配置します。さらに、配置した ToggleButton を選択した状態のまま、[プロパティ] タブで以下のように設定します。

9. 停止ボタンとなる Button コントロールを配置します。[オブジェクトとタイムライン] タブで [LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、[Button] ツールをダブルクリックしてステージに配置します。さらに、配置した Button コントロールを選択した状態のまま、[プロパティ] タブで以下のように設定します。

10. ボリュームスライダーとなる Slider コントロールを配置します。
    ツールボックスから [Button] を長押しし、 [Slider] を選択します。
    ツールボックスで [LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、[Slider] ツールをダブルクリックしてステージに配置します。さらに、配置した Slider コントロールを選択した状態のまま、[プロパティ] タブで以下のように設定します。

1. ステージ上の再生ボタン [PlayToggleButton] を右クリックし、[コントロールパーツ (テンプレート) の編集] － [コピーの編集] を選択します。
   → [Style リソースの作成] ダイアログボックスが表示されます。

2. 名前 (キー) ボックスに "PlayToggleButtonStyle" を入力して [OK] ボタンをクリックします。
   → 再生ボタンのスタイル編集画面となります。

3. 再生ボタンのデザインは 3 種類 (通常/マウスオーバー/マウスダウン) の画像で実現しますので、現在のボタンに配置されているオブジェクトは一旦削除します。[オブジェクトとタイムライン] タブで [ [Grid] ] 以下のオブジェクトを削除します。

4. 空の Grid に対し、再生ボタンのデザイン 3 種 (通常/マウスオーバー/マウスダウン)の画像を配置します。[プロジェクト] タブ＞ [Image] フォルダ内の以下の画像を順番にダブルクリックして配置します。

Img_Button_Normal.png (通常状態画像)

Img_Button_Down.png (マウスダウン状態画像)

Img_Button_Over.png (マウスオーバー状態画像)

Img_PauseButton_Mark.png (一時停止マーク画像)

Img_PlayButton_Mark.png (再生マーク画像)

5. 現状では、全ての状態の画像が表示されています。通常/マウスオーバー/マウスダウンのそれぞれの状態で画像が切り替わるように [ステート] パネルで設定します。
   [ステート] パネル－ [Normal] を選択し、赤い丸と [ステート 記録オン] と表示されていることを確認します。ここで行った変更が、状態変化時の動きとなります。

6. [ステート] パネル - [Normal] が選択された状態で、それぞれのオブジェクトの透明度 ([Opacity] プロパティ) の変更を行います。

[オブジェクトとタイムライン] パネルにおいて赤いマークがついたものが、状態として記録されています。この場合の NormalImage のように、規定値の透明度 100% を記録させる場合は、一度 99% などの違う値に変更し、赤いマークが付いたことを確認してから、100% としてください。

7. 上記ステップと同様の方法で、その他の状態を定義していきます。各状態と、透明度を変化させるオブジェクトの対応は以下のようになります。

[MouseOver] 状態

[Pressed] 状態

[Checked] 状態

[Unchecked] 状態

8. 状態間の変化の時間を0秒以上に設定することで、滑らかに変化させることができます。
   [CommonStates] および [CheckStates] の右側の値を 0.1 に変更します。

9. 以上で再生ボタンの設定は終了です。ステージ上部の [PlayToggleButton] をクリックすることで再生ボタンの編集モードを解除します。

再度編集する場合は、再生ボタンを右クリックし、[コントロールパーツ(テンプレート)の編集] - [テンプレートの編集] を選択します。

1. 使用する画像以下の 3 ファイルです。以下の順序で配置し、名前を設定します。

Img_StopButton_Normal.png (通常状態画像)

Img_StopButton_Down.png (マウスダウン状態画像)

Img_StopButton_Over.png (マウスオーバー状態画像)

2. 状態ごとの各オブジェクトの透明度を設定します。停止ボタンで設定するのは以下の 3 つの状態です。

[Normal] 状態

[MouseOver] 状態

[Pressed] 状態

1. 再生ボタンと同様の手順で Slider コントロールに対して Style リソースを作成します。Style リソース名は "VolumeSliderStyle" とします。

2. スタイル編集状態で [オブジェクトとタイムライン] パネルを確認すると、[HorizontalTemplate] と [VerticalTemplate] が確認できます。これは Slider コントロールの水平状態と垂直状態それぞれのデザインが定義されています。今回は水平状態を使用するため、 [HorizontalTemplate] に対して変更を加えます。

3. [HorizontalTemplate] が黄色い枠の付いたアクティブ状態となっていることを確認し、[プロジェクト] タブから [Image] フォルダ - [Img_VolumeSlider_Bar.png] をダブルクリックして配置します。さらに、配置した Image を選択した状態のまま、[プロパティ] タブで以下のように設定します。

4. オブジェクトとタイムライン] パネルにおいて上で配置した画像をドラッグして [TrackRectangle] の下まで移動します。そして、 [TrackRectangle] は削除します。

5. ステージ上でつまみ部分の Thumb コントロール (名前: HorizontalThumb) を選択し、デザイン適用後のサイズと合うよう [プロパティ] タブで以下のように設定します。

6. つまみ部分の Thumb コントロールに対し、再生ボタンなどと同様に Style リソースを作成します。Style リソース名は "VolumeThumbStyle" とします。

7. Thumb コントロールのデザイン適用は停止ボタンと同様です。使用する画像以下の 3 ファイルです。以下の順序で配置し、名前を設定します。

Img_VolumeThumb_Normal.png (通常状態画像)

Img_VolumeThumb_Down.png (マウスダウン状態画像)

Img_VolumeThumb_Over.png (マウスオーバー状態画像)

8. 状態ごとの各オブジェクトの透明度を設定します。停止ボタンで設定するのは以下の 3 つの状態です。

[Normal] 状態

[MouseOver] 状態

[Pressed] 状態

1. 再生ボタン (名前: PlayToggleButton) に Checked イベントを定義します。[オブジェクトとタイムライン] タブで [PlayToggleButton] を選択し、[プロパティ] タブ - [イベント] ボタンをクリックして、イベント表示状態にします。
   (もとのプロパティ表示状態にするには、その左側の [プロパティ] ボタンをクリックします。)

2. [プロパティ] タブ (イベント表示状態) の [Checked] の右側の空欄をダブルクリックします。
   → Visual Studio 2008 がインストールされている環境では、Visual Studio 2008 が起動し、Page.xaml.cs ファイルの編集画面となります。
   Visual Studio 2008 の環境をお持ちでない場合は、ダイアログが表示されますので、[OK] ボタンをクリックします。ダイアログに従い、Page.xaml.cs をメモ帳などで開き、ペーストしてください。

3. Page.xaml.cs にて、PlayToggleButton_Checked メソッドに、以下の 1 行を追記します。(青太字)

4. 同様の方法で、以下の箇所にイベントを定義します。全てのイベントと C# コードを記述すると以下のようになります。(青太字)

public partial class Page : UserControl
{
        public Page()
        {
                // 変数を初期化するときに必要となります
                InitializeComponent();
    }

        private void PlayToggleButton_Checked(object sender, System.Windows.RoutedEventArgs e)
        {
                this.ArcMouseMovie_wmv.Play();
        }

        private void PlayToggleButton_Unchecked(object sender, System.Windows.RoutedEventArgs e)
        {"
                this.ArcMouseMovie_wmv.Pause();
        }

        private void StopButton_Click(object sender, System.Windows.RoutedEventArgs e)
        {"
                this.ArcMouseMovie_wmv.Stop();
                this.PlayToggleButton.IsChecked = false;
        }

        private void VolumeSlider_ValueChanged(object sender, System.Windows.
                RoutedPropertyChangedEventArgs<double> e)
        {
                 if (this.ArcMouseMovie_wmv != null)
                {
                        this.ArcMouseMovie_wmv.Volume = this.VolumeSlider.Value;
                }
        }
}

1. Page.xaml.cs を保存し、Expression Blend 2 画面から実行します。[プロジェクト] メニュー - [ソリューションのテスト] をクリックします。
   → Web ブラウザが開き、ビデオプレイヤーが表示されます。