手の位置をチャートで可視化しよう

サンプルデータを表示

　ここでいきなりLeap Motionから値をとってきて、データ設定方法を確認しながらデータ連携方法を確認していくのでは非効率的なので、サンプルデータを生成するクラスを用意しましょう。

　XAMLなのできちんとしたコントロールであればBindingによりデータ表示できるはずだと予想して、次のようなサンプルデータクラスを定義します。

表示データ形式の定義

　3種類のデータを表示するのでグラフとある時点（X軸のある時点）での値はX,Y,Zの3つの値を持ちます。そこで表示用データクラスとして次のような定義を行います。

リスト6　データクラス

Public Class TValue
    Public Property ValueX As Integer
    Public Property ValueY As Integer
    Public Property ValueZ As Integer
End Class

データ連携用ViewModelクラスの用意

　このデータについて折れ線グラフのX軸方向に配列のようにデータが時系列で並べればよいので、ObservableCollectionを使って「ObservableCollection(Of Models.TValue)」を公開するViewModelクラスを用意します。

リスト7　ViewModelクラス

Public Class MainViewModel
    Implements INotifyPropertyChanged

    Public Property HandData As ObservableCollection(Of Models.TValue)

    Public Event PropertyChanged(sender As Object,
                                 e As PropertyChangedEventArgs) _
                             Implements INotifyPropertyChanged.PropertyChanged
    Protected Sub OnPropertyChanged(<CallerMemberName> Optional propertyName As String = Nothing)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub
End Class

　もちろんBindingできるようにINotifyProperyChangedインターフェースを実装します。

サンプルデータクラスの用意

　データ連携用ViewModelクラスを継承してサンプルデータクラスを作り、サンプルデータを設定します。

リスト8　サンプルデータ投入クラス

Public Class MainSample
    Inherits ViewModels.MainViewModel

    Public Sub New()
        Me.HandData.Add(New Models.TValue With {.ValueX = 80, .ValueY = 400, .ValueZ = 20})
        Me.HandData.Add(New Models.TValue With {.ValueX = 400, .ValueY = 20, .ValueZ = 60})
        Me.HandData.Add(New Models.TValue With {.ValueX = 20, .ValueY = 60, .ValueZ = 150})
        Me.HandData.Add(New Models.TValue With {.ValueX = 60, .ValueY = 150, .ValueZ = 300})
        Me.HandData.Add(New Models.TValue With {.ValueX = 150, .ValueY = 300, .ValueZ = 130})
        Me.HandData.Add(New Models.TValue With {.ValueX = 300, .ValueY = 130, .ValueZ = 500})
        Me.HandData.Add(New Models.TValue With {.ValueX = 130, .ValueY = 500, .ValueZ = 80})
        Me.HandData.Add(New Models.TValue With {.ValueX = 500, .ValueY = 80, .ValueZ = 400})
    End Sub
End Class

サンプルデータ表示

　サンプルデータクラスが用意できたのでMainPage.xamlでサンプルデータクラスを参照してグラフの3つのDataSeriesにデータをBindingしてみましょう。

リスト9　MainPage.xaml

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CZ1404IoT"
    xmlns:common="using:CZ1404IoT.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart"
    xmlns:data="using:CZ1404IoT.Data"
    x:Name="pageRoot"
    x:Class="CZ1404IoT.Views.MainPage"
    d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True,Type=data:MainSample}"
    mc:Ignorable="d">

        ：
     （中略）
        ：

        <Chart:C1Chart x:Name="Chart" ChartType="Line" Grid.Row="1" Theme="Office2007Blue" Palette="Metro">
            <Chart:C1Chart.Data>
                <Chart:ChartData ItemsSource="{Binding HandData}">
                    <Chart:ChartData.Children>
                        <Chart:DataSeries Label="X" ValueBinding="{Binding ValueX}"/>
                        <Chart:DataSeries Label="Y" ValueBinding="{Binding ValueY}"/>
                        <Chart:DataSeries Label="Z" ValueBinding="{Binding ValueZ}"/>
                    </Chart:ChartData.Children>
                </Chart:ChartData>
            </Chart:C1Chart.Data>
            <Chart:C1ChartLegend Position="Right" VerticalContentAlignment="Center"/>
        </Chart:C1Chart>
    </Grid>
</Page>

（1）デザイン時インスタンスの指定

　「d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True,Type=data:MainSample}"」とPageタグに定義することで、XAMLデザイナで開いたときにMainSampleクラスが生成されてDataContextに割り当たります。これはあくまでもデザイナで開いた時だけで実行時には無視されます。

（2）グラフ化プロパティの指定

　「<Chart:ChartData ItemsSource="{Binding HandData}">」で、グラフにはHandDataコレクションに設定されている値を使うことを定義します。

（3）個々の要素の指定

　「<Chart:DataSeries Label="X" ValueBinding="{Binding ValueX}"/>」で、グラフの1要素にはHandDataコレクションのValueXプロパティの値を割り当てることを定義します。

　これでXAMLエディタでサンプルデータがグラフ表示できます。

図4　画面デザイン