WPFでソフトを作る日記 (9) Gridで仕訳入力の表を作成する

このソフトの肝になる仕訳伝票入力画面が様になってきましたので、今日はその部分のコードを紹介します。
画面はこんな感じにしました。

(クリックして拡大)


仕訳の明細は「明細番号」、「借方勘定科目コード」、「借方勘定科目名」、「借方金額」、
「貸方勘定科目コード」、「貸方勘定科目名」、「貸方金額」、「摘要」で構成しています。

そのうち、ユーザが入力をするのは「借方勘定科目コード」、「借方金額」、「貸方勘定科目コード」、
「貸方金額」、「摘要」になります。
本来、会計システムは大量のトランザクションが入力されるシステムになるので、
入力がし易いことがとても重要な要件になります。

特に勘定科目に関しては、検索のしやすさが重要です。そこでパエリアでは、
勘定科目コードに1桁入力される度に、科目コードがその数字から始まる勘定科目の一覧を
同一のGrid内に表示するようにしました。

(クリックして拡大)


さて、少しずつコードを説明していきます。
仕訳伝票入力画面は「JournalEntry」というUserControlとして作成しています。
そして、その「JournalEntry」は以下のような要素で構成しています。

  <ScrollViewer>
    <Grid>
      <StackPanel>←年月日を表示するヘッダ部分
      <JournalGrid>←仕訳を入力する表の部分
      <StackPanel>←保存ボタンを表示するフッタ部分
    </Grid>
  </ScrollViewer>

3行1列のグリッドを作ってその各セルに、ヘッダ、表部分、フッタを構成するコントロールを
配置しています。
仕訳を入力する表の部分は伝票の参照画面でも使いまわしたいのでUserControlを拡張した
「JournalGrid」というクラスを別に作成しました。

「JournalGrid」では、さらにGridを使って全体を構成しています。
列と行は以下のように定義しています。

 <Grid.ColumnDefinitions>
     <ColumnDefinition Width="30" /><!-- 明細番号 -->
     <ColumnDefinition Width="70"/><!-- 借方勘定科目コード-->
     <ColumnDefinition Width="150"/><!-- 借方勘定科目名-->
     <ColumnDefinition Width="100"/><!-- 借方金額 -->
     <ColumnDefinition Width="70"/><!-- 貸方勘定科目コード-->
     <ColumnDefinition Width="150"/><!-- 貸方勘定科目名-->
     <ColumnDefinition Width="100"/><!-- 貸方金額 -->
     <ColumnDefinition Width="200"/><!-- 摘要 -->
 </Grid.ColumnDefinitions>

 <Grid.RowDefinitions>
     <RowDefinition Height="30"/><!-- ヘッダ1行目 -->
     <RowDefinition Height="30"/><!-- ヘッダ2行目 -->
     <RowDefinition Height="400"/><!-- 明細部分 -->
     <RowDefinition Height="10"/><!-- 余白 -->
     <RowDefinition Height="25"/><!-- フッタ -->
     <RowDefinition Height="10"/><!-- 余白 -->
 </Grid.RowDefinitions>

そして、以下が表のヘッダ部分です。

 <!-- ヘッダ1行目 -->
 <Label Grid.Column="0" Grid.Row="0" Style="{StaticResource HeaderText}" BorderThickness="1"/>
 <Label Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="3" HorizontalContentAlignment="Center" 
                          Style="{StaticResource HeaderText}" BorderThickness="0,1,1,1">借方</Label>
 <Label Grid.Column="4" Grid.Row="0" Grid.ColumnSpan="3" HorizontalContentAlignment="Center" 
                          Style="{StaticResource HeaderText}" BorderThickness="0,1,1,1">貸方</Label>
 <Label Grid.Column="7" Grid.Row="0" Style="{StaticResource HeaderText}" BorderThickness="0,1,1,0"/>
 
 <!-- ヘッダ2行目 -->
 <Label Grid.Column="0" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="1,0,1,1"/>
 <Label Grid.Column="1" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">科目コード</Label>
 <Label Grid.Column="2" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">科目名</Label>
 <Label Grid.Column="3" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">金額</Label>
 <Label Grid.Column="4" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">科目コード</Label>
 <Label Grid.Column="5" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">科目名</Label>
 <Label Grid.Column="6" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">金額</Label>
 <Label Grid.Column="7" Grid.Row="1" Style="{StaticResource HeaderText}" BorderThickness="0,0,1,1">摘要</Label>

ヘッダの1行目は「借方」、「貸方」のラベルをColumnSpanを指定して複数列にまたいで配置しています。
続いて明細部分。

  <ScrollViewer Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="8" Height="400" Name="_scrollViewer"
                Focusable="False" VerticalScrollBarVisibility="Auto">
      <Grid Name="_detailLines">
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="30" /><!-- 明細番号 -->
              <ColumnDefinition Width="70"/><!-- 借方勘定科目コード-->
              <ColumnDefinition Width="150"/><!-- 借方勘定科目名-->
              <ColumnDefinition Width="100"/><!-- 借方金額 -->
              <ColumnDefinition Width="70"/><!-- 貸方勘定科目コード-->
              <ColumnDefinition Width="150"/><!-- 貸方勘定科目名-->
              <ColumnDefinition Width="100"/><!-- 貸方金額 -->
              <ColumnDefinition/><!-- 摘要 -->
          </Grid.ColumnDefinitions>
      </Grid>
  </ScrollViewer>

明細部分だけスクロールさせたいので、「ScrollViewer」を使ってその中に明細部分だけのGridを配置しています。
そして外側の表と同じ列を定義しています。

明細行に関しては数が多いのでコードの方から作成しています。

 //コンストラクタ
 public JournalGrid()
 {
     InitializeComponent();

     //明細行を追加する
     for (int i = 0; i < _lineCount; i++)
     {
         AddRow(i);
     }
 }

 /// Gridに明細行を追加する
 public void AddRow(int rowNum)
 {
     //行を追加する
     RowDefinition row = new RowDefinition();
     row.Height = new GridLength(RowHeight);
     _detailLines.RowDefinitions.Add(row);

     //明細番号
     Label num = new Label();
     num.Content = rowNum + 1;
     num.BorderThickness = new Thickness(1, 0, 1, 1);
     num.Style = Resources["HeaderText"] as Style;
     num.Tag = new GridCell(0, rowNum);

     _detailLines.Children.Add(num);
     Grid.SetColumn(num, 0);
     Grid.SetRow(num, rowNum);

     _cells[rowNum, 0] = num;

     //借方勘定コード
     TextBox drAccountCD = new TextBox();
     drAccountCD.BorderThickness = new Thickness(0, 0, 1, 1);
     drAccountCD.VerticalContentAlignment = VerticalAlignment.Center;            
     drAccountCD.Tag = new GridCell(1, rowNum);
     InputMethod.SetIsInputMethodEnabled(drAccountCD,false);

     _detailLines.Children.Add(drAccountCD);
     Grid.SetColumn(drAccountCD, 1);
     Grid.SetRow(drAccountCD, rowNum);

     _cells[rowNum, 1] = drAccountCD;

     //借方勘定科目名
     TextBox drAccountName = new TextBox();
     drAccountName.BorderThickness = new Thickness(0, 0, 1, 1);
     drAccountName.VerticalContentAlignment = VerticalAlignment.Center;
     drAccountName.IsReadOnly = true;
     drAccountName.IsTabStop = false;
     drAccountName.Tag = new GridCell(2, rowNum);
     
     _detailLines.Children.Add(drAccountName);
     Grid.SetColumn(drAccountName, 2);
     Grid.SetRow(drAccountName, rowNum);

     _cells[rowNum, 2] = drAccountName;

     //借方金額
     TextBox drAmount = new TextBox();
     drAmount.BorderThickness = new Thickness(0, 0, 1, 1);
     drAmount.VerticalContentAlignment = VerticalAlignment.Center;
     drAmount.HorizontalContentAlignment = HorizontalAlignment.Right;
     drAmount.Tag = new GridCell(3, rowNum);
     InputMethod.SetIsInputMethodEnabled(drAmount, false);

     _detailLines.Children.Add(drAmount);
     Grid.SetColumn(drAmount, 3);
     Grid.SetRow(drAmount, rowNum);

     _cells[rowNum, 3] = drAmount;

     //貸方勘定コード
     TextBox crAccountCD = new TextBox();
     crAccountCD.BorderThickness = new Thickness(0, 0, 1, 1);
     crAccountCD.VerticalContentAlignment = VerticalAlignment.Center;
     crAccountCD.Tag = new GridCell(4, rowNum);
     InputMethod.SetIsInputMethodEnabled(crAccountCD, false);

     _detailLines.Children.Add(crAccountCD);
     Grid.SetColumn(crAccountCD, 4);
     Grid.SetRow(crAccountCD, rowNum);

     _cells[rowNum, 4] = crAccountCD;

     //貸方勘定科目名
     TextBox crAccountName = new TextBox();
     crAccountName.BorderThickness = new Thickness(0, 0, 1, 1);
     crAccountName.VerticalContentAlignment = VerticalAlignment.Center;
     crAccountName.IsReadOnly = true;
     crAccountName.IsTabStop = false;
     crAccountName.Tag = new GridCell(5, rowNum);

     _detailLines.Children.Add(crAccountName);
     Grid.SetColumn(crAccountName, 5);
     Grid.SetRow(crAccountName, rowNum);

     _cells[rowNum, 5] = crAccountName;

     //貸方金額
     TextBox crAmount = new TextBox();
     crAmount.BorderThickness = new Thickness(0, 0, 1, 1);
     crAmount.VerticalContentAlignment = VerticalAlignment.Center;
     crAmount.HorizontalContentAlignment = HorizontalAlignment.Right;
     crAmount.Tag = new GridCell(6, rowNum);
     InputMethod.SetIsInputMethodEnabled(crAmount, false);

     _detailLines.Children.Add(crAmount);
     Grid.SetColumn(crAmount, 6);
     Grid.SetRow(crAmount, rowNum);

     _cells[rowNum, 6] = crAmount;

     //摘要
     TextBox memo = new TextBox();
     memo.BorderThickness = new Thickness(0, 0, 1, 1);
     memo.VerticalContentAlignment = VerticalAlignment.Center;
     memo.Tag = new GridCell(7, rowNum);

     _detailLines.Children.Add(memo);
     Grid.SetColumn(memo, 7);
     Grid.SetRow(memo, rowNum);

     _cells[rowNum, 7] = memo;

 }

明細行に配置したコントロールを管理するために、2次元配列「Control[,] _cells」をインスタンス変数としてあらかじめ定義し、
行を追加する過程で、配置したコントロールをそれにつめていきます。

表の動作については次回説明します。

本日のソース