状態の追加とTransitionEffectによる特殊効果（Silverlight4+Expression Blend4）第4回

TransitionEffectListBoxユーザーコントロールの動作確認

TransitionEffectListBoxユーザーコントロールに配置したListBoxに、画像とタイトルの一覧が表示されるかどうかを確認します。VS2010メニューの「デバッグ(D)／デバッグ開始(S)」では、MainPage.xamlの内容が実行され、TransitionEffectListBox.xamlは実行されません。そこで、動作確認のために、MainPage.xaml内にTransitionEffectListBox.xamlを取り込んでおきます。MainPage.xamlの、要素のWidthに900、Heightに600と指定しておきます。

まずlocalという名前空間を、MainPage.xaml内の要素内で定義します。xmlns:local=””と入力すると、名前空間の値の一覧が表示されますので、現在作成しているプロジェクト名を選択します（図4）。

図4：localという名前空間を定義する（クリックで拡大）

次に、要素内に

図5：要素内にTransitionEffectListBox を取り込む

<Grid x:Name="LayoutRoot" Background="White">
  <local:TransitionEffectListBox/>
</Grid>

のように記述します。するとデザイン画面内のListBoxコントロールに、先頭の1枚の画像とタイトルが取り込まれて表示されます。表示されない場合は、「ソリューションのビルド」を実行してみてください。それでも表示されない場合は、コードが間違っているということですので、確認します。

「デバッグ(D)／デバッグ開始(S)」で実行して動作を確認しておきましょう。

次に、ListBoxから選択された画像を実寸サイズで表示する、TransitionEffectImageShowユーザーコントロールを作成します。先のTransitionEffectListBoxユーザーコントロールを作成したのと同じ手順で作成してください。

Silverlightユーザーコントロール(TransitionEffectImageShow.xaml)の作成

VS2010のメニューから「プロジェクト(P)／新しい項目の追加(W)」と選択し、「Silverlightユーザーコントロール」を作成します。「名前(N)」には「TransitionEffectImageShow.xaml」と指定し、[追加(A)]ボタンをクリックします（図2参照）。

XAMLコード内の要素のWidthに700、Heightに500と指定します。ツールボックスからImageコントロールを1個配置します。プロパティの[レイアウト]を展開して表示されるWidthに640、Heightに480と指定します。Imageフォルダに取り込んだjpg画像の実寸サイズです。 [可視性]のOpacityプロパティに0を指定します。

次に、ソリューションエクスプローラー内の、TransitionEffectImageShow.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。