だるろぐ

明日できることは、今日しない。

WinRT/XAML のお勉強 ―― データを視覚化したいなぁ

燃費記録用の Windows ストアアプリを作ってみた - だるろぐ を作っていてふと思った。

そうなんだ、それがあれば完璧になるんだ! すると、すかさずナイスな情報を教えてもらえた。

さすが左の翼!(WWD いってきたよ! - だるろぐ での内輪ネタです、ゴメンナサイ)

f:id:daruyanagi:20120920000508p:plain

で、実際にちょっと試したのだけれど、チャートはなんだかうまくいかなかった。チュートリアル通りにコードを書いたんだけど、なんでだろう。サンプルアプリもあるし、動くはずなんだけれど。もう少し頑張ってみるべきだろうけれど、正式版は有償となるとどうもモチベーションが上がらない。

f:id:daruyanagi:20120920000619p:plain

ただ、これに付属している DatePicker はイケてる。Windows Phone みたいだ。ただ、こういうのは標準で搭載していてほしい気もするんだ。WinRT には NumericUpDown すらない。まぁ、Silverlight Toolkit みたいなプロジェクトがすでにあるみたいだけれど。

http://jupitertoolkit.codeplex.com/

まだそこまで手が出せるほどの知識がないのが悲しい。

f:id:daruyanagi:20120920001434p:plain

ともあれ、自分で何とかできないかなぁ、と思って Line や Polyline を使ったサンプルを作って勉強している。XAML は比較的こういうのが得意みたいで、データをグラフ表現するのはそんなに難しくない。

たとえば、左のしょぼい棒グラフ付きの ListBox ならこんな感じだ。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var r = new Random();
    DataContext = Enumerable.Range(1, 10).Select(_ => r.Next(1, 100));
}

<ListView ItemsSource="{Binding}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding}" />
                <Line X1="0" Y1="0" X2="{Binding}" Y2="0" Stroke="RoyalBlue" StrokeThickness="5"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

けれど、入力データに対して柔軟に対応できて(拡大・縮小、任意のスケール)、それなりにカッコいいのを作ろうと思うとやっぱり大変そうだ。初心者に産毛が生えたような自分には少し難しい。でも、決してステマではないんだけれど、『「.NET開発者」のためのSilverlight入門』 - だるろぐ のおかげか、これぐらいのことはササッと書けるようになったのはちょっとうれしい。