TesseractOCRアプリケーションの作成について＜手順２．WPFアプリケーションの画面作成方法（２．CsPage作成とスタイルの共通化）＞

 ＜CsPageの作成方法について＞

　プロジェクトを右クリックして、新しいファイル、ページ（WPF）を選択する。

　新しく作成したPageのxamlを修正します。

　CsWindowの時と同じで、「xmlns:controls="clr-namespace:TesseractOCR.controls"」を追加して、「＜Page」を「<controls:CsPage」と修正します。

「pg01_0100_Main.xaml.cs」へ移動し、継承元のクラス名を「CsPage」へ修正するとともに「using TesseractOCR.controls;」を追加します。

　また試しに、F1キーを押下したときの処理を記述します。

　BaseWindowプロパティにインスタンスが設定されるのは、CsPageクラスがインスタンス化された後なので、PageのLoadイベント後にイベントハンドラを設定します。

※コマンドならこんな方法じゃなくていいと思いますが・・・。

＜CsPageの呼び出し方＞
　新しく作成したpg01_0100_Main.xamlに試しのためのTextBlockコントロールを置いて、TextBoxを配置します。

　呼び出し側）

　controls.BaseWindow window = new controls.BaseWindow(new pg01_0100_Main());

   window.Show();

　画面）

　うっすらとBaseWindowの背景色が残っています。Frameコントロールに作成したCsPageが呼び出されているのが分かります。また、BaseWindow上のボタンのContentにボタン名を設定し、Clickイベントも発生しています。

＜スタイルの共通化について＞
　コントロールのスタイルについてXAMLを利用するとコントロールの意味に応じたスタイルを共通で設定することができます。スタイルの継承も可能なので、下記のような形式でスタイルを一度作ってしまえば、様々なプロジェクトで利用できるのではないかと思います。

　　BaseResource.xaml・・・各コントロールの基礎スタイルを定義します。

　　ControlResource.xaml・・・BaseResource.xamlに定義されているスタイルを継承し、コントロールごとのスタイルを定義します。

　　ProjectResource.xaml・・・ControlResource.xamlに定義されているスタイルを継承し、プロジェクトごとのスタイルを定義します。

　新しいプロジェクト（別の業務アプリを作成）するときには「BaseResource.xaml」「ControlResource.xaml」はほぼそのまま利用し、「ProjectResource.xaml」については仕様に合わせて再定義することで流用可能です。

　例）

　　　BaseResource.xamlに「TextBoxStyleBase」として「TextBox」のフォーカス時の背景色の設定やフォントなどを設定します。

　　　ControlResource.xamlに「TextBoxStyleBase」を継承して、「通常のテキストボックス（NormalTextBox）」「複数行可能なテキストボックス」のスタイルを定義します。

　　　ProjectResource.xamlにControlResource.xamlで定義した「通常のテキストボックス」を継承して、MaxLengthや入力文字制限を行うスタイルを定義します。

　　「TextBoxStyleBase」-> 「NormalTextBox」->「txtRptIdStyle」

　　　※->：は継承の意味

　　こうしておくことで、業務アプリなどでよくある「得意先CD」「得意先名」といった意味のあるコントロールにすべて共通したスタイルを定義することができます。

　　桁数の変更があったとしてもXAMLを修正するだけですぐに対応できます。

　＜手順＞

　　新しいフォルダーを作成し、フォルダ名を変更します。フォルダ名：resource

　　リソースディクショナリを追加します。

　　追加後のフォルダ

　　BaseResource.xamlについて

　　　　今回はCsTextBoxに対してスタイルを定義しているので「xmlns:controls="clr-namespace:TesseractOCR.controls"」を記述してから、スタイルを定義しています。

　XAMLのスタイルは上に定義したスタイルを下で利用することができます。

　上図の例でいうとフォーカス時の背景色の定義である「ActiveBackColor」を一番上で定義しておくことで、「<Setter Property="Background" Value="{StaticResource ActiveBackColor}" />」で設定することができます。

　　　ControlResource.xamlについて

　　　　　まずは、「xmlns:controls="clr-namespace:TesseractOCR.controls"」を記述します。そのあと、先ほど定義しておいた「BaseResource.xaml」を読み込んでから継承したスタイルを定義していきます。参照方法するためには「<ResourceDictionary.MergedDictionaries>」タグを使い、読み込みたいResourceDictionaryのSourceを指定します。こうすることで、ほかのファイルに定義したスタイルを利用することができます。

　　　　　次にスタイルの継承については「BasedOn="{StaticResource LabelStyleBase}"」のように記述し、BaseResource.xamlに定義したスタイルを指定します。

　　　　　例えば先ほどの画像で定義した「TextBoxStyleBase」を継承して３つのスタイルを定義しています。「NormalTextBox」「ReadOnlyTextBox」「MultiLineTextBox」この三つのスタイルを次のProjectResource.xamlで継承し、画面コントロールごとに派生させていきます。

　　　ProjectResource.xamlについて

　　　　先ほどと同じように「xmlns:controls="clr-namespace:TesseractOCR.controls"」を記述します。そのあと、先ほど定義しておいた「ControlResource.xaml」を読み込んでから継承したスタイルを定義していきます。参照方法するためには「<ResourceDictionary.MergedDictionaries>」タグを利用します。

　　　　ここではコントロールごとのスタイルを定義します。具体的には「得意先CD」であれば最大文字数は５桁で数値入力のみ、右寄せといった具合にそのプロジェクトの中で利用する項目ごとのスタイルを定義します。基本的にはデータベースやテーブルレイアウトの定義通りになるのでスクリプトを組んで一括で作れるようにしておくと楽だと思います。

　　　　今回の例では「帳票ID」や「JobId」がそれにあたります。数値入力のみ可能なコントロールにするには、「CsTextBox」を改修する必要がありますが、それまたの機会に記述します。

　　　　まとめるとWPFのXAMLはCSSと同じような形で利用できるのでうまく利用しましょうということです。

  　　　　継承例）

　　　　　TextBoxStyleBase -> NormalTextBox      -> txtRptIdStyle

                                                                          -> txtJobIdStyle

　　　　　　　　　　　　　　-> ReadOnlyTextBox

                                         -> MultiLineTextBox

　　　　販売管理システムや会計管理システムそのほかの業務アプリでは同じ意味を持つ項目がいろいろな画面に置かれるので桁数のチェックや右寄せ左寄せなど本来大事にするべき業務ロジックとは関係のないところのテストや設定が必要になってしまいます。そのあたりが楽になるので、こういう機能はあるとありがたいですね。使いこなせるかというところはちょっと慣れが必要ですが、まぁ一週間毎日８時間悩んでいればいやでも身につくので頑張りましょう。