Windows 8 Code Samples and Examples in C#, VB.NET, C++, JavaScript
とりあえずインストールした Visual Studio 2012 RC で Metro Style App のプロジェクトを作ると
// The Split App template is documented at http://go.microsoft.com/fwlink/?LinkId=234228
って感じでリンクされている LinkId 234228 でたどり着くサンプルギャラリー。
質はわからないけど量は十分と言っていい気がするし、一覧を眺めてみた限りでは内容も多岐にわたっている気がする。このあたりは Microsoft本気だなと思わないでもない。
日本語での情報提供は翻訳の都合で遅れるのが常なので世界についていく気なら英語だろうがコードだろうが気合で読むのみで色々見るのをおすすめ。龍に乗るなら首根っこ、尻尾掴んでも振り落とされるのが落ちだ。
というわけで、もっとも基本っぽい XAML Data Binding sample をチェックしてみるなど。コンパイル＆実行は全く問題なく完了、普通に実行しながらソースを確認することをお勧めです。
チェックの目的は WPF や Silverlight との相違点等を確認しておきたいということなので、 WPF / Silverlight のソースをあまり見たことが無い人はもっとチュートリアル的な物から見たほうが良いかも。
Scenario1 ～ Scenario7 までの xaml と xaml.cs が本体と言っていい感じ。
Scenario1.xaml XAMLのデータバインディングの { Binding … Mode=[バインディングモード] } のバインディングモードの TwoWay, OneWay, OneTime の違いを見せようというもの。 WPF / Silverlight との違いは特に見えず。
簡単にさっくり解説すると以下の通り。
TwoWay の場合、テキストボックスに入力した内容はスライダーに反映され、スライダーの内容はテキストボックスに反映される。このような双方向のバインディングを行う場合には TwoWay を使う。もっともよく使うモードだと思う。
OneWay の場合、スライダーの操作はテキストボックスに反映されるけど、テキストボックスの修正はスライダーに反映されない。このような一方向のバインディングを行う場合には OneWay を使う。テキストボックスのような入力を受けるコントロールと結びつけると変に感じるが表示専用の物につなぎ合わせるにはこっちの方がお得というもの。
OneTime の場合、コントロールの初期化時に一発反映したら後はやらないよという物。変更前の値を表示しておきたいという用途には便利だけどそれ以外での局面では全く役に立たない系。
Scenario2 は IValueConverter によってスライダー値を F から SUPER STAR! の段階を示す文字列に変換してテキストボックスに変換するもの。 E への変換が無いねとか余計。
この変換は S2Formatter.cs にて宣言されている Windows.UI.Xaml.Data.IValueConverter の実装によって変換されている。
<StackPanel.Resources>
<local:S2Formatter x:Key=”GradeConverter”/>
</StackPanel.Resources>
で S2Formatter を GradeConverter で宣言、
Text=”{Binding ElementName=sliderValueConverter, Path=Value, Mode=OneWay,
Converter={StaticResource GradeConverter}}”
で GradeConverter を利用している。 Mode が OneWay なので S2Formatter での変換も一方向しか実装されていない。
S2Formatter.cs の実装内容はあまりマネしてほしくないところ、メソッド内のローカル変数に _ でプリフィックスをつけるとか基本として見たことのないネーミングスタイルなので注意。
Scenario3 は Emploee というクラスにデータバインディングするというもの。 Emploee は Scenario3.xaml.cs からMainPageのDataContextとして渡されています。
単純には DataContext に渡したオブジェクトとデータバインディングされますよという内容とみればいいでしょう。
Scenario4 は Team.cs で定義された Teams リストの3番目の要素にデータバインディングを行うという物。
Binding のPathシンタックスでの ‘[‘ + インデックス + ‘]’がインデックスが整数（配列ないしはリスト）、その他（コレクション）でバインディングができるという事を示しています。
Scenario5 は同じく Team.cs で定義された Teams リストにバインディングしますが、 Border の Background を Team のColor にバインディングすることで背景色を変えるというもの。 Text や Value 以外でもバインディングできるので、見た目をバインディングで変えられるということを示しているだけですね。
Scenario6 は同じく Teams にバインディングしますが、ListItem のGroupStyleを介してHeaderTemplate を与えることで、Key 要素ごとにヘッダーを表示するというもの。
var result = from t in teams
group t by t.City into g
orderby g.Key
select new { Key = g.Key, Items = g };
のLINQクエリによってグループ化された物のKeyをグループヘッダーとして表示しています。LINQクエリとグループヘッダテンプレートの合わせ技でそこそこ簡単にできますよってところです。
Scenario7は同じくTeams にバインディングしますが、選択要素の削除を実装しています。ハンドラの実装は以下のもの。
void BtnRemoveTeam_Click(object sender, RoutedEventArgs e)
{
if (ocTeams.Count > 0)
{
int index=0;
if (lbTeams.SelectedItem != null)
index = lbTeams.SelectedIndex;
ocTeams.RemoveAt(index);
}
}
データバインディングですべてが行われていますので単純にコレクションから要素を削除すれば要素が消えますってもの。
選択されてなかったら最初の要素を消すという乱暴な実装に見えますが良いんでしょうか？コピペしないでね？なサンプルは勘弁してほしいですね。
気になるところとしては
<Button x:Name=”btnRemoveTeam” Content=”Remove team”/>
と Click ハンドラの結び付け、コンストラクタで以下を書いてますが、Commandパターンとかは入ってない感じですかね？コードビハインドにコードを書きたくないタイプの人なのでこういうのがずらずらしちゃうのはちょっといやんな感じです。
btnRemoveTeam.Click += BtnRemoveTeam_Click;
まとめ
そんなに大きく WPF / Silverlight と異なる印象はありません。名前空間の配置など実装は当然に変わっていますが大きくは変わっていないということが解っただけでした。
テクノロジの特性なのかもしれませんが、周辺がいろいろと冗長です。XAMLなどは説明したい部分が埋没していると思われるぐらいです。何を説明しようとしているのか、それを読み取って見ないと迷子になりますのでポイントをかいつまんで読みましょう。かいつまんで読むことができる人（ポイントのわかってる人）はこのレベルのサンプルは見ないというか必要ないかもな気もしないでもないですけど。
Scenario2 で現れる IValueConverter はお察しの通り大量に書くことになるでしょう。データ値と見た目のフォーマットの変換処理はほとんどの場合 IValueConverter で実装することになります。これの実装の為の項目テンプレートが標準のプロジェクトテンプレートにはありませんので、項目テンプレートを切り出ししておく事をお勧めです。ただしこのサンプルに含まれる IValueConverter の実装は変数名のネーミングがいまいちで普通のコーディング規約にはマッチしないはずなのでもう少し良い物をベースに選ぶか納得いく形に書き換えてから、コーディングのヒントをコメントにふんだんに盛り込んだ項目テンプレートを作るのが良いでしょう。
Visual Studio 2012 にはネーミングルールによる変数名の警告や補正の仕組みは入らなかった模様、必要な人は ReSharper を入れるとルールに沿ってない場合には警告してもらえるし QuickFix で大抵はいい名前に直してもらえますのでこの機会に投資する気ならした方がいいかもしれません。（ちょっとReSharper以外に浮気しようかと思ってVSギャラリー見回してみたのですがグッとくる物は見当たらなかったです）
良いサンプルだとは思いますが、コレクションからの削除の実装が選択されていなければ先頭を消すとか鵜呑みにしてはいけない内容を多分に含んでいますのでご注意を。
