WinRT/XAML のお勉強 ―― 「分割アプリケーション」テンプレートを活かす

@xin9le @daruyanagi MSが提供している基本構造を理解したうえで無視るのはありだと思います！知らないで無視るのは、大変だと思います。個人的に。

2012-09-20 22:51:33 via Krile2 to @xin9le

昨日、@okazuki さんにいろいろ教えてもらったのだけど、ちょっとチンプンカンプンなところもあったので、今日は「標準テンプレート縛り」で燃費管理アプリを一から開発してみた。

使ったのは 「分割アプリケーション」。2階層のデータ表示が可能なのかな。List を表示する ItemsPage.xaml と、そこで Group を選択して List を表示する SplitPage.xaml が用意されている。

いろいろ考えてみたんだけれど、キモはこのテンプレートが要求する仕様に沿ったデータを用意することかな。

じゃぁ、仕様に沿ったデータ構造って？　DataModel/SampleDataSource.cs を読むと、データは

SampleDataSource
    List: SampleDataGroup (SampleDataCommon)
        List: SampleDataItem (SampleDataCommon)

になってる。こういう感じに作ればいい。うちのアプリの場合は、

DataSource
    List: Vehicle (乗り物)
        List: RefuelLog (給油ログ)

って感じになるかな。乗り物＝Group、給油ログ＝Itemというイメージ。

んで、Group も Item も SampleDataCommon を継承している。要は UniqueId、Title、Subtitle、Description、Image というプロパティを持ちなさいということだ。実装したら、テンプレートでバインドされますよ、と*1。

でも、だったらインターフェイスでもいいわけで、

namespace App5.Common
{
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
public interface ITemplateGridViewItem
{
Guid UniqueId { get; } // <- string は嫌だったので改造
string Title { get; }
string Subtitle { get; }
string Description { get; }
ImageSource Image { get; }
ITemplateGridViewItem Parent { get; } // <- なくてもいい
}
}

というのを作って、Group/Item はこれを実装するということにした。乗り物データと給油ログデータが一つのデータから継承されてるってなんかアレだけど、インターフェイスなら個人的にしっくりくる。

燃費管理アプリのデータには、タイトルやサブタイトルなどという概念はない。でも、そこは給油量（Amout）や日付（Date）といったふさわしいプロパティを別途もっておいて、

public string Title
{
get { return string.Format("{0:#,##0.00 L}", amount); }
}

public string Subtitle
{
get { return date.ToString("d"); }
}

という感じで、ビューに表示したいデータ（給油量をタイトルに、日付をサブタイトルに）を適当に返せばいい。なんか M-VM を分けたくなってきたね。まぁ、それは今度でいい。今回はこの汚い実装のまま先に進もう。DataSource（自分で書いたデータソース）も、SampleDataSource のコピペをベースにあまり構造を変えないように実装していく。

あとは SampleDataSource.cs を消すなりリネームして、ビルドエラーが出た個所をこちょこちょ DataSource に置き換えれば、こんな感じ！

さすが標準テンプレート、Snapped にもばっちり対応だぜ。

デザイン時バインディング

@xin9le d:DataContext="{d:DesignInstance Type=***, IsDesignTimeCreatable=True}"を適切なところに設定することで、デザイナの支援も受けれます

2012-09-20 22:53:06 via Krile2 to @xin9le

Page.Resource の CollectionViewSource で、d:Source って書いてある部分は、デザイン時のみ有効なデータバインディング。これをやっておけばサンプルデータがバインディングされて、デザインがやりやすくなる。

<Page.Resources>
<!– このページで表示されるアイテムのコレクション –>
<CollectionViewSource
        x:Name="itemsViewSource"
        Source="{Binding Items}"
        d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=local:DataSource, IsDesignTimeCreatable=True}}"/>
</Page.Resources>

標準では DataModel/SampleDataSource がバインディングされているけれど、これもちょちょいと local:DataSource *2に書き換えれば……

うおおー、デザイン時にもバインディングされてる。これは超便利だな！

ちょっとわかった気がするので、これでテンプレートから足を踏み外せるぜー。これで今日のお勉強は終わり！