Daizen Ikehara

インフラジスティックス・ジャパン株式会社の元デベロッパー エバンジェリスト、現製品担当の Blog
[WP] Windows Phone アプリケーション に xamDataChart (CTP) を追加

NetAdvantage for Windows Phone CTP では 大量のデータを高速に表示させることを主目的とする、xamDataChart が含まれています。WP アプリケーションに追加した際に私の環境ではエラーが出てしまったので、少し調べてみました。

Windows Phone 7 アプリケーションを作成
*日本語 Visual Studio にテンプレートを追加する方法はこちらをご覧ください。

image 

ターゲットバージョン

image

*Mango (7.1) で試していますが現在 7.1 がベータ版のため製品版のサポートは 7.0 になる予定です。

 

次のアセンブリをプロジェクトに追加

  • InfragisticsWP7.Controls.Charts.XamDataChart.v11.1
  • InfragisticsWP7.DataVisualization.v11.1.dll
  • InfragisticsWP7.v11.1.dll

 image

xmlns を宣言

xmlns:ig="clr-namespace:Infragistics.Controls.Charts;assembly=InfragisticsWP7.Controls.Charts.XamDataChart.v11.1"

xamDataChart を追加し、起動しようとすると・・・

<phone:PhoneApplicationPage 
    ...
	xmlns:ig="clr-namespace:Infragistics.Controls.Charts;
	assembly=InfragisticsWP7.Controls.Charts.XamDataChart.v11.1"
    >

    <Grid x:Name="LayoutRoot" Background="Transparent">

		...
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ig:XamDataChart />
        </Grid>
    </Grid>
 
	...
    
</phone:PhoneApplicationPage>

CTP 版の不具合として、 GenericBackground というキーのリソースがアセンブリに存在していないにも関わらず呼び出すため、エラーが発生してしまいました。image

App.xaml の Resources にダミーキーを設定すると・・・

<Application.Resources>
    <SolidColorBrush x:Key="GenericBackground"/>
</Application.Resources>

image

エラーもなく起動しました。もちろん、製品版では修正されていますので、ご心配なく!

さて、この xamDataChart は NetAdvantage for Silverlight Data Visualization で提供されているものと同じコントロールです。Silverlight 版のオンラインヘルプを参考に簡単なデータ表示を行います。

オンラインヘルプ

XamDataChart の設定

<ig:XamDataChart >
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xmXAxis" 
				ItemsSource="{Binding}" Label="{}{Label}" >
            <ig:CategoryXAxis.LabelSettings >
                <ig:AxisLabelSettings 
                    Foreground="White"
                    Location="OutsideBottom" />
            </ig:CategoryXAxis.LabelSettings>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="xmYAxis" >
            <ig:NumericYAxis.LabelSettings >
                <ig:AxisLabelSettings 
                    Location="OutsideLeft"
                    Foreground="White"
                    />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:SplineAreaSeries ValueMemberPath="Value" 
				ItemsSource="{Binding}" 
                XAxis="{Binding ElementName=xmXAxis}" 
                YAxis="{Binding ElementName=xmYAxis}">
        </ig:SplineAreaSeries>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

MainPage.xaml.cs

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.DataContext = new SimpleDataCollection();
    }
}

SimpleDataCollection, SimpleData クラス

public class SimpleDataCollection : ObservableCollection<SimpleDataPoint>
{
    public SimpleDataCollection()
    {
        this.Add(new SimpleDataPoint() { Label = "1", Value = 3.0 });
        this.Add(new SimpleDataPoint() { Label = "2", Value = 2.0 });
        this.Add(new SimpleDataPoint() { Label = "3", Value = 3.0 });
        this.Add(new SimpleDataPoint() { Label = "4", Value = 4.0 });
        this.Add(new SimpleDataPoint() { Label = "5", Value = 5.0 });
        this.Add(new SimpleDataPoint() { Label = "6", Value = 6.0 });
        this.Add(new SimpleDataPoint() { Label = "7", Value = 5.0 });

    }
}
/// 
/// 文字列および double 値のペアに対するシンプルなストレージ クラス
/// 
public class SimpleDataPoint
{
    public double Value { get; set; }
    public string Label { get; set; }
}

実行するとデータが出力されました。

image

ジェスチャーを利用した拡大、縮小にも対応しています。

image

今回はダミーデータを使いましたが、次回はリアルなデータに接続してみたいと思います。

NetAdvantage for Windows Phone を試してみてください!

サンプル

Posted: 10 Jun 2011, 08:42

Comments

WPF と UX なBlog said:

NetAdvantage for Windows Phone CTP では 大量のデータを高速に表示させることを主目的とする、xamDataChart が含まれています。WP アプリケーションに追加した際に私の環境ではエラーが出てしまったので

# June 9, 2011 7:35 PM

Daizen Ikehara said:

以前のエントリ で xamInfoBox を利用した Windows Phone アプリケーションの情報表示を行いましたが、xamSlider のつまみに XAML で位置を指定するとずれてしまう場合があります。例えば、

# August 21, 2011 10:27 PM
Anonymous comments are disabled