表現力の高いチャートを使用した
WPF/XBAPアプリケーションの作成

キャッシング返済シミュレーターを作ろう

2009/04/08 14:00

ダウンロードサンプル（コード） (11.5 KB)
ダウンロードサンプル（実行ファイル） (723.2 KB)
ダウンロードサンプル（XBAP／コード） (15.7 KB)
ダウンロードサンプル（XBAP／デプロイ用） (503.0 KB)

　NetAdvantage for WPFのxamChartコントロールは、WPFフレームワークの機能を活かした表現力の高いチャートコンポートネントです。今回はこのxamChartを用いてキャッシングの返済額をチャートで表示させるアプリケーションを開発します。

はじめに

対象読者

　Visual Basic 2008、Visual C# 2008、XAMLを使ってプログラミングをしたことのある人。

必要環境

　Visual Basic 2008あるいはVisual C# 2008でプログラムが作れる環境。サンプルはVisual Studio 2008 SP1、.NET Framework 3.5 SP1で作成し、Windows Vista SP1にて動作を検証しています。

プログラム実行時の注意環境

　あらかじめ、.NET Framework 3.5 SP1がインストールされていることを確認してください。

1. WPFアプリケーションの場合

　「CashingSimulation_BIN.zip」を解凍し、「CashingSimulation.exe」を実行します。

2. XBAPアプリケーションの場合

　「CashingSimulationXBAP_Deploy.zip」を解凍し、「CashingSimulationXBAP.xbap」をダブルクリックします。

コンポーネントのインストール

　はじめてNetAdvantage for WPFを使用する方は、事前にソフトウェアをインストールする必要があります。

　インフラジスティックス社のWebページからインストーラーをダウンロードしてください。［NetAdvantage for WPF 2008.1 Full］をクリックするとダウンロードが開始されます（サイトへの登録が必要になります）。この製品は有償ですが、20日間すべての機能を使用なトライアル版としてインストール可能です。

NetAdvantage for WPFについて

　NetAdvantage for WPFは、2007年に世界初のWPFコントロールスイートとして発売が開始され、原稿執筆時点での日本語版最新バージョンは2008 Volume1となります。

　収録されているコントロールはグリッド、カルーセル、チャート、リボン、ドックマネージャーと各種エディタを取りそろえ、商用のWPF業務用アプリケーション開発を促進します。このスイートを使用したサンプルについてはこちらで確認することができます。

xamChartコントロールについて

1. 豊富なチャート

　WPFが持つ強力な2D/3D、アニメーション機能を用いて表現力のある平面、立体チャートを作成可能にするコンポーネントです。折れ線や棒、円チャートなど主要なチャートを始めとして平面、立体を合計すると約50種類が提供されています。

作成できる表の種類

エリア	棒	バブル	ローソク足	柱状
円柱棒	円柱	ドーナツ型	折れ線	円
ポイント	散布図	散布図 - 折れ線	スプライン	積層型 100 エリア
積層型 100 棒	積層型 100 柱状	積層型 100 円柱棒	積層型 100 円柱	積層型エリア
積層型棒	積層型柱状	積層型円柱棒	積層型円柱	ストック

　上記チャートは複数チャートを組み合わせることも可能です。（組み合わせには種類によって制限があります）。

　いくつかのスクリーンショットはこちらで参照することができます。

2. カスタマイズ

　xamChartはさまざまなカスタマイズが可能ですが、今回のサンプルにて設定するオブジェクトは次のとおりです。

アニメーション効果
テーマの適用

対象とするキャッシング返済方法の種類

　本稿では返済方法として「元金定額返済方式」を採用します。これは月ごとに一定額の元金＋その月ごとの借入残高の利息を合計した額を返済する方式です。

例: 10万円を年率 20% で 10回払い（10ヶ月）で返済する場合

月々の元金返済額（定額）:
    10万円 ÷ 10回 ＝ 1万円

初回支払額:
    1万円（定額） 
    ＋ 10万円（元金残高） × 20%（利息） × 30日 ÷ 365
    ＝ 1万1644円

2回目支払額:
    1万円
    ＋ 9万円（元金残高） × 20%（利息） × 30日 ÷ 365
    ＝ 1万1479円

　なお、今回は1か月＝30日で固定しています。

支払明細の一部

月	返済元金	支払利息	支払金額	返済元金累積額	支払利息累積額	借入残高
1月目	10000	1644	11644	10000	1644	90000
2月目	10000	1479	11479	20000	3123	80000

注

　このサンプルはあくまでもチャートコンポーネントを使用するために作成されたものであり、計算された結果については保証しません。ご利用は計画的に。

画面インターフェイスを作成

　まず、Visual Studioを起動し、新しいプロジェクトを作成します。

　ソリューションエクスプローラでプロジェクトを選択し、右クリックでコンテキストメニューから［参照の追加］を選択します。

　参照の追加ダイアログボックスで［.NET］タブを選択し、以下のアセンブリ参照をプロジェクトに追加します

Infragistics3.Wpf.Chart.v8.1.dll
Infragistics3.Wpf.Editors.v8.1.dll
Infragistics3.Wpf.v8.1.dll

注

　xamChartのみをプロジェクトで使用する場合は、Infragistics3.Wpf.Editors.v8.1.dll、Infragistics3.Wpf.v8.1.dllは必要ありません。今回はxamEditorsを使用した入力インターフェイスを構築するため、「xmlns:igCA=http://Infragistics.com/Chart」を始めとして3つのXml名前空間を宣言します。

<Window x:Class="CashingSimulation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igCA="http://infragistics.com/Chart"
    xmlns:igEditors="http://infragistics.com/Editors"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="キャッシング返済シミュレーション" Height="600" Width="800">

　次に、Visual StudioあるいはExpression Blendを用いて借入金額、利息率、返済回数を入力するxamEditorコントロールや、計算、クリアボタンを配置します。なお、本稿ではxamEditorについての解説は行いません。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="90"/>
        <ColumnDefinition Width="55"/>
        <ColumnDefinition Width="55"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock HorizontalAlignment="Right" Margin="0,0,5,0" VerticalAlignment="Center" 
               Grid.Row="1" Text="借入金額" />
    <TextBlock HorizontalAlignment="Right" Margin="0,0,5,0" VerticalAlignment="Center" 
               Grid.Row="2" Text="利息(年率)" />
    <TextBlock HorizontalAlignment="Right" Margin="0,0,5,0" VerticalAlignment="Center"
               Grid.Row="3" Text="返済回数(月)"/>
    <igEditors:XamNumericEditor HorizontalAlignment="Stretch" VerticalAlignment="Center" 
                                Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" 
                                x:Name="loanBox" ValueType="{x:Type sys:Int32}" 
                                Language="ja-jp" DataMode="Raw" 
                                Mask="{}{currency:10}" Value="0">
        <igEditors:XamNumericEditor.ValueConstraint>
            <igEditors:ValueConstraint MinInclusive="0" Nullable="False" />
        </igEditors:XamNumericEditor.ValueConstraint>
    </igEditors:XamNumericEditor>
    <igEditors:XamNumericEditor HorizontalAlignment="Stretch" VerticalAlignment="Center" 
                                Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" 
                                x:Name="interestBox" Value="0">
        <igEditors:XamNumericEditor.ValueConstraint>
            <igEditors:ValueConstraint MinInclusive="0" Nullable="False" />
        </igEditors:XamNumericEditor.ValueConstraint>
    </igEditors:XamNumericEditor>
    <igEditors:XamNumericEditor HorizontalAlignment="Stretch" VerticalAlignment="Center" 
                                Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" 
                                x:Name="repPeriodBox" ValueType="{x:Type sys:Int32}" 
                                Value="1">
        <igEditors:XamNumericEditor.ValueConstraint>
            <igEditors:ValueConstraint MinExclusive="0" MaxInclusive="120" Nullable="False" />
        </igEditors:XamNumericEditor.ValueConstraint>
    </igEditors:XamNumericEditor>
    <Button x:Name="calcBtn" HorizontalAlignment="Stretch" Margin="5,0,0,0" 
            VerticalAlignment="Center" Content="計算" Grid.Column="1" Grid.Row="4" 
            Click="calBtn_Click" />
    <Button x:Name="clearBtn" HorizontalAlignment="Stretch" Margin="5,0,0,0" 
            VerticalAlignment="Center" Content="クリア" Grid.Column="2" Grid.Row="4" 
            Click="clrBtn_Click" />
</Grid>

　実行すると次のような画面が出力されます。

xamChartをウィンドウに追加

　xamChartをGridの4列目に設置します。データソースを設定しない場合は、デフォルトのサンプルデータが表示されます。また、ロード時はVisibilityをCollapsedと設定し、表示させません。

<!--XamChartを追加します-->
<igCA:XamChart Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" 
               x:Name="XC1" Grid.Column="3" Grid.RowSpan="6" Visibility="Collapsed">
</igCA:XamChart>

　チャートにデータを表示させるためには、Seriesと呼ばれる各データ点を格納するコレクションをxamChartに追加する必要があります。xamChart.SeriesはSeriesを格納するコレクションですので、こちらに毎月の元金返済額を格納するpSeriesと利息返済額を格納するiSeriesを追加します。

<igCA:XamChart.Series>
    <!--元金返済額を格納します-->
    <igCA:Series Name="pSeries" >
    </igCA:Series>
    <!--利息支払額を格納します。-->
    <igCA:Series Name="iSeries" >
    </igCA:Series>
</igCA:XamChart.Series>

　それぞれのSeriesではチャートの種類の設定や判例のラベル、バインドするデータのマッピングを行うDataMappingプロパティを設定する必要があります。DataMappingプロパティではセミコロン（;）で指定するプロパティを区切ります。今回は積層型円柱、またpSeriesにはラベルを「月」、値を「返済元金」とし、iSeriesにはラベルを「月」、値を「支払利息」としてマッピングします。

<!--元金返済額を格納します-->
<igCA:Series Name="pSeries" Label="元金返済額" ChartType="StackedCylinder" 
             DataMapping="Label=月;Value=返済元金">
</igCA:Series>
<!--利息支払額を格納します。-->
<igCA:Series Name="iSeries" Label="利息支払額" ChartType="StackedCylinder" 
             DataMapping="Label=月;Value=支払利息">
</igCA:Series>

返済金額を計算し、チャートにバインド

　［計算］ボタンが押下された場合は、calBtn_Clickイベントにおいて借入金額、利率、支払い回数に応じて月ごとの支払状況を表すDataTableを「Window1.xaml.cs」内で作成します。

計算ボタンクリックイベント

private void calBtn_Click(object sender, RoutedEventArgs e)
{
    int loanAmount = (Int32)this.loanBox.Value;
    double iRate = (Double)this.interestBox.Value;
    int months = (Int32)this.repPeriodBox.Value;

    // 入力された値からデータのリストを作成します。
    DataTable dt = this.generateList(loanAmount, iRate, months);
}

返済テーブル作成メソッド

private DataTable generateList(int loanAmount, double iRate, int months)
{
    DataTable dt = new DataTable("返済テーブル");
    dt.Columns.Add("月", typeof(DateTime));
    dt.Columns.Add("返済元金", typeof(Int32));
    dt.Columns.Add("支払利息", typeof(Int32));
    dt.Columns.Add("支払金額", typeof(Int32));
    dt.Columns.Add("返済元金累積額", typeof(Int32));
    dt.Columns.Add("支払利息累積額", typeof(Int32));
    dt.Columns.Add("借入残高", typeof(Int32));
    
    DataRow dr;
    int paidLoan = 0;
    int paidInterest = 0;
    int payMonth = Convert.ToInt32(
        Math.Round((double)loanAmount / months, MidpointRounding.AwayFromZero));
    int irMonth = 0;

    for (int i = 0; i < months; i++)
    {
        dr = dt.NewRow();
        // 利息計算
        irMonth = Convert.ToInt32(
            Math.Round(loanAmount * (iRate / 100) * 30 / 365, MidpointRounding.AwayFromZero));
        // 元本支払い総額
        paidLoan += payMonth;
        // 利息支払い総額
        paidInterest += irMonth;
        // 元本残金
        loanAmount -= payMonth;
        dr["月"] = DateTime.Today.AddMonths(i + 1);
        dr["返済元金"] = payMonth;
        dr["支払利息"] = irMonth;
        dr["支払金額"] = irMonth + payMonth;
        dr["返済元金累積額"] = paidLoan;
        dr["支払利息累積額"] = paidInterest;
        dr["借入残高"] = loanAmount;
        dt.Rows.Add(dr);                
    }
    return dt;
}

　Seriesではデータ値を格納するDataPointsコレクションがあり、データをバインドしたり、XAML、あるいはコードで個別にデータ点を設定したりすることが可能です。先ほどのcalBtn_Clickイベントハンドラ―にて、DataTableを作成した後に各Seriesにバインドする処理を追加します。また、初期状態ではチャートが非表示となっているので、表示させます。

// それぞれのシリーズに DataTable をバインドします。
this.pSeries.DataSource = dt;
this.iSeries.DataSource = dt;

// チャートを表示します。
this.XC1.Visibility = Visibility.Visible;

　実行すると次のような表示となります。

アニメーション効果を追加

　XamChartではチャート要素を表示する際にアニメーション効果を追加できます。アニメーション効果を設定するためには各シリーズのAnimationプロパティを設定します。今回はすべてのチャート要素が一斉に2秒間でアニメーションするように設定します。

<igCA:Series.Animation>
    <igCA:Animation Duration="00:00:02" Sequential="False" />
</igCA:Series.Animation>

テーマを設定

　XamChartでは、あらかじめいくつかのテーマが準備されており、そちらを用いることによりスタイリングの手間を省くことができます。例として「RoyalVelvet」を適用します。

<igCA:XamChart Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" 
               x:Name="XC1" Grid.Column="3" Grid.RowSpan="6" Visibility="Collapsed" 
               Theme="RoyaleVelvet" >

　実行すると次のようになります。