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

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

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

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

例: 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>

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