UIデザインは、基本サンプルの応用から始めよう！ ～MSDN「コードレシピ」サンプル追加のお知らせ(1)～
Visual Studioで小さなサンプルを作ることから始めてみた、が、つまづいてしまった。
どのメソッドを使えばいいのだろう？どう書けばいいのだろう？構文は、MSDNライブラリのどこに載ってるの？
などと悩んだとき、「Code Recipe」 が助けになるでしょう。
すぐに使えるサンプルや、学習用サンプル、Tipsが満載です。活用しない手はありません。
「Code Recipe」逆引きサンプルコード・メニューページ
私も、コツコツ作っていますので、紹介します。
[XAML/VB] BitmapImageを使用して、複数のpng画像を表示する(Silverlight)
これは、Silverlight で画像ファイルを表示したい場合、実行時に新規 Image オブジェクトを生成するサンプルです。
このサンプルを応用すると、（筆者と相方のコラボレーション・ユニット）PROJECT KySSの、Silverlight 4 対応メニューページの、ニュース表示部分のようなUIを実装できます。
画像にマウスカーソルを乗せると、ぱたぱた回転アニメ―ションが開始します。
同時に、「お知らせ」のテキストが消えて、代わりにフキダシが表示されます。その中には、画像の説明と、リンクスイッチの画像ボタンと、閉じるボタンが表示されています。
リンクスイッチをクリックすると当該ページへジャンプし、閉じるボタンをクリックするとフキダシが閉じて、代わりに「お知らせ」のテキストが表示されます。
画像の説明と年月日とリンク先URIは、XML文書ファイルに記録しており、LINQ to XMLで処理しています。
XML文書の構造は、次のとおりです。アニメーション下の、作業一覧データベースに用いているXML文書の一部を抽出した構造になっています。
＜?xml version="1.0"?＞
＜KySSData＞
＜WebInfo ID="作業No" Category="TECHNIQUEカテゴリ名|WORKSカテゴリ名"＞
＜Head＞
＜ViewURI＞リンク先URI＜/ViewURI＞
＜Title＞タイトル＜/Title＞
＜Explain＞補足説明＜/Explain＞
＜Update＞2011/XX/XX＜/Update＞
＜/Head＞
＜Info＞
＜Image＞ぱたぱたアニメ画像のURI（hoge.png）＜/Image＞
＜/Info＞
＜/WebInfo＞
＜WebInfo＞～＜/WebInfo＞繰り返し
＜/KySSData＞
PROJECT KySSのメニューページは、ヴィジュアルやXMLデザインとの兼ね合いがあるので、プログラミングも私がメインで担当していますが、ぱたぱた回転アニメーションのコードについては、書籍「Silverlight実践プログラミング（Silverlight 3対応、4でも動作確認済み）」を執筆したときに、相方（VBプログラマ）の担当したサンプルが、「窓の向こうは海」というイメージに合っていたので利用しました。
フキダシは5個ありますが、5個を重ねて配置して、表示と非表示で切り替えているわけではありません。また、XAMLで描画しているわけでもありません。
私は、画像で解決した方が手っとり早い部分は、延々とコードを書くことにはこだわらず、また、プログラムで制御した方が融通が利く部分は、画像に頼らずプログラムで実装します。あくまで自前Webサイトなので、自分がメンテナンスする場合の効率を最優先しています。
ここでは、1個のフキダシを、フキダシ元と、フキダシの枠、それぞれ別のPNG形式画像として作成し、座標値をプログラムで変更して表示させています。
コードはブログに載せるには長いので、一部だけ。
「Code Recipe」のサンプルは、この処理をリライトしたものです。
'新着情報（News.xml）のイメージ画像の表示
NewsPanel.Children.Clear()
HukidashiText.Text = String.Empty
Dim i As Integer = 0
Dim myNewsData As String = e.Result
NewsDoc = XElement.Parse(myNewsData)
Dim NewsQuery = From c In NewsDoc.Elements("WebInfo") Select c
For Each result In NewsQuery
Dim MyNewsImageQuery = result.<Info>.<Image>.Value
Dim myNewsImage As New Image
With myNewsImage
.Width = 157
.Height = 157
.Source = New BitmapImage(New Uri(MyNewsImageQuery, UriKind.Absolute))
.Margin = New Thickness(11)
.Tag = i
End With
NewsPanel.Children.Add(myNewsImage)
Dim MyNewsTitleQuery = result.<Head>.<Title>.Value
'画像内へのマウスエンターでアニメーションを実行する。
If Len(MyNewsTitleQuery) > 0 Then
myNewsImage.Cursor = Cursors.Hand
AddHandler myNewsImage.MouseEnter, AddressOf Me.MyNewsImage_MouseEnter
End If
i = i + 1
Next
End Sub
なお、開発にはVisual Studio 2010、ラフデザインや、部品（ガラスの背景や、窓枠や、各種ボタン）の制作には、Expression Design（下図）を使っています。
データジャパン株式会社さんのバナーのアニメーションは、Expression Blend で作っています。Blendを使うと、手軽にアニメーションを作ることができます。
メニューページ全体の構造は、このページを参照してください。
Visual StudioとExpression Studioがあれば、いろいろなコンテンツが作れて面白いです。皆さんも、ぜひ、使ってみてください！
余談ですが、このように長々と書いてはいますが、突発性難聴まだ完治していません。聴力はほぼ元に戻りましたが安定せず、すこし疲れると反対側の耳鳴りがひどくなるのに閉口しています。音程（BとA）とリズムのある1小節がエンドレスで繰り返す耳鳴りです。考えてみれば、数年前に体験したMRIの（うるさくて途中でギブアップしそうになった）音もBとAだった記憶が．．．。