PR

TransitionEffectを使う、特殊効果を伴ったコントロールの表示(後編)

2011年4月21日(木)
PROJECT KySS

TransitionEffectElementButtonユーザーコントロールの作成。

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

表示された要素のWidthに800、Heightに600と指定します。次に、ツールボックスからButtonコントロールを3個ドラッグ&ドロップします。各Contentプロパティに左から「Image、DataGrid、RichTextBox」と指定します(図2)。

図2:TransitionEffectElementButtonユーザーコントロールにButtonコントロールを3個配置した(クリックで拡大)

次にlocalという名前空間を定義します。前編の図4、図5を参照してください。現在作成しているプロジェクト名を値とする名前空間を、以下のように定義します。

xmlns:local="clr-namespace:SL4_TransitionEffect_Element"

local名前空間を使って、TransitionEffectElementShowユーザーコントロールを取り込みます。要素内の一番先頭(

TransitionEffectElementShow(ElementShowArea)よりも、各Buttonコントロールのほうが前面に配置されていないと、ボタンを何回かクリックしている最中にボタンが押せなくなってしまいます。各要素は後に記述するほど前面に配置されることになります。TransitionEffectElementShowを3つのButtonよりも先に記述するということは、TransitionEffectElementShowがButtonコントロールより後ろに配置されるということです。

図3:TransitionEffectElementShowユーザーコントロールを取り込む(クリックで拡大)

図4:TransitionEffectElementButtonユーザーコントロール内にTransitionEffectElementShowが取り込まれた(クリックで拡大)

ここで、動作確認のために、MainPage.xaml内にTransitionEffectElementShowを取り込んでいたのを、TransitionEffectElementButtonと差し替えます。MainPage.xamlに3つのButtonコントロールの並んだ画面が表示されます。

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

Blend4でのTransitionEffectの設定

「状態(S)」パネルの「状態グループの追加」アイコンをクリックし(図5)、さらに「状態の追加」アイコンをクリックします(図6)。

「●VisualState状態 記録オン」に変わり、アートボード上の画面全体が赤の枠線で囲まれます。この状態でタイムラインの記録が可能になります。

「ImagePixelate」という名前を入力します (図7)。「タイムラインを表示する」アイコンをクリックして、タイムラインを表示します(図8)。

図5:「状態(S)」パネルの「状態グループの追加」アイコンをクリックする

図6:「状態の追加」アイコンをクリックする

図7:「ImagePixelate」という名前を入力する

図8:タイムラインを表示する

状態の作成

状態を作成します。「オブジェクトとタイムライン(B)」内のImage_ListBoxを選択します。

黄色の再生ヘッドが「0」の位置で、プロパティの[外観]内にあるOpacityの値に100を指定します。自動的に100%となりListBoxの透明化が解除されます(図9)。

図9:再生ヘッドが「0」の位置で、Opacityの値を100%とする(クリックで拡大)

次に、「切り替え効果の追加」をクリックします(図10)。

図10:「切り替え効果の追加」を選択する(クリックで拡大)

表示される項目から、「★→ImagePixelate」を選択します(図11)。

図11:「★→ImagePixelate」を選択する(クリックで拡大)

fxアイコンをクリックするとTransitionEffectの一覧が表示されますので、Pixelateを選択します。時間は1秒を指定します(図12)。

図12:TransitionEffectの一覧からPixelateを選択し、時間に1秒を指定する(クリックで拡大)

ここで、図12の「●ImagePixelate状態記録オン」の●をクリックして、記録オフにします。

図6~図12の手順で、DataGridPixelateとRichTextBoxPixelateという名前の「状態の追加」を行います。タイムラインを表示し、DataGrid_StackPanelやWilliamBlake_RichTextBoxを選択した状態で、黄色の再生ヘッドが「0」の位置で、プロパティの[外観]内にあるOpacityの値に100を指定します。自動的に100%となります。全て設定すると図13のようになります。

図13:DataGridPixelateとRichTextBoxPixelateという名前の「状態の追加」を行い、タイムラインを設定した(クリックで拡大)

TransitionEffectの設定は以上で終わりです。Blend4を終了しVS2010に戻ります。VS2010のソリューションエクスプローラー内から、今度はTransitionEffectElementButton.xamlを選択して再度Blend4を起動します。

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

TransitionEffectを使う、特殊効果を伴ったコントロールの表示(後編) | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。