4からサポートされたPathListBoxコントロールを使って、画像が移動するアニメーションを作ってみましょう。ここでは、楕円(だえん)に沿って小さな複数の画像を移動させます。小さな画像をクリックした時、子ウインドウを開いて、実寸大の画像を表示します(図1)。サンプル・ファイルは、こちらからダウンロードできます。楕円の弧の上を複数の画像が移動している。4プロジェクト(プロジェクト名は「SL4_PathListBox」)を作成して、プロジェクト依存関係を設定してください。次に、移動させる画像のファイル名を記録したXML文書ファイル(リスト1)を追加します。Reference」からSystem.Xml.Linqを追加しておきます。Explorer内にImageというフォルダを作成して、画像も追加しておきます。ダウンロード・ファイルには、XML文書ファイル、画像ファイルとも追加済みです。version="1.0"??>銀杏.jpg画像名>枯れ木.jpg画像名>~画像名>繰り返し~情報>画像>PathListBoxコントロールのレイアウトUserControlのPropertiesペインの[Layout]を展開して、Widthに800、Heightに600を指定します。Toolboxから、タイトルを表示するためのTextBlockと、画像の移動する軌跡となるEllipseコントロールをドラッグ&ドロップしてレイアウトします。これらのコントロールのサイズは適当でかまいません。次に、Ellispeの上にPathListBoxコントロールをレイアウトします。Items」から登録してください(本連載の第2回を参照)。PathListBoxのサイズは、Widthを120、Heightを80とします。これは画像サイズの640×480の天地左右の比率を維持した数値です。楕円の上に中心点が重なるようにレイアウトします(図2)。Blend」をクリックしてBlendを起動します。Blendでのアニメーションの設定アニメーションを作成していく前に、いまレイアウトしたPathListBoxとEllipseコントロールを関連付けます。LayoutPath)を、Ellipseコントロール内にドラッグ&ドロップします(図3)。図4のように、LayoutPathsの下にあるボックス内にEllipse1が追加されます。これで、PathListBoxとEllipseが関連付けられました。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。IT会員サービスの概要とメリットをチェック他にもこの記事が読まれています開発ツールイベントGitHub、エンタープライズ向けのイベントを国内で開催。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。IT(シンクイット)エラーサイトに予期せぬエラーが起こりました。たってから再度お試しください。