「InputMan for WPF」で操作性の高いUIを開発　～Windowsフォームとは一味違うデザインを実装～

　WindowsアプリケーションのUIは、これまではWindowsフォームを使っての構築が主流でした。しかし、より良いUIの構築には、WPFでの開発は今後必要不可欠となるでしょう。今回は、WPF向けのコンポーネント群「InputMan for WPF」を使って、お客様情報登録画面の実装方法を解説します。

WPFで優れたUIを作成するInputMan for WPF

　これまで、WindowsアプリケーションのUIを構築する方法は、Windowsフォームを使用した開発が中心でしたが、より良いUI設計を考えると、今後はWPFを採用した開発が主流となっていくでしょう。しかし現実には、WindowsフォームからWPFへの移行は、思うように進んではいないのが実情です。XAMLが難しいなど、色々な要因があると思います。それ以外にも、Windowsフォーム向けに販売されているコンポーネント製品の出来が良いため、従来のWindowsフォームに拡張性を持たせた優れたUIを提供でき、WPFに移行する必要がないと判断されている場合もあるのではないでしょうか。

　では、そんなコンポーネント群がWPF向けに提供されたらどうでしょう。「InputMan for WPF」はWindowsフォームでの日本語入力環境を飛躍的に向上させ続けてきた「InputMan」のWPF版です。InputMan for WPFを使用すると、WPFを採用した業務アプリケーションのUI開発をスムーズに行うことができます。

InputMan for WPFの構成

　InputMan for WPFには次のようなコンポーネントが収録されています。

• テキスト
• マスク
• 日付
• 数値
• カレンダー
• 電卓
• 検証インジケータ
• IME管理
• 書式コンバータ

　主な機能としては次のような機能が実装されています。

• 入力書式と出力書式の個別設定
• 和暦入力と表示
• 半角・全角、ひらがな・カタカナなどの文字種自動変換
• 入力範囲チェック
• 検証エラー通知
• 未入力時の代替テキスト（いわゆるウォーターマーク）表示
• フィールド単位のスタイル設定
• テーマテンプレート対応
• 複数行テキスト入力時の行間罫線および最大行数制限
• ふりがな自動取得

　多岐に渡る機能が用意されているため、自分が使いたい機能が実装されているかが判断しづらいかも知れません。そこで、お客様情報の登録用業務アプリをサンプルで作成して、標準のコンポーネントとどれくらい使い勝手が違うのかを検証してみたいと思います。

サンプル画面のデザイン

　今回の比較では、入力フィールド以外は共通のデザインを採用します。以下のXAMLで定義された雛形をもとに、標準コンポーネントを使用してできる画面と、InputMan for WPFを使用してできる画面とを比較していきたいと思います。

図1 サンプルデザイン

リスト1 サンプルデザインのXAML定義

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image x:Name="Icon_Image" Grid.RowSpan="7" Margin="5" VerticalAlignment="Top" />
        <TextBlock Grid.Row="0" Grid.Column="1" Padding="5" Text="氏名" />
        <TextBlock Grid.Row="1" Grid.Column="1" Padding="5" Text="フリガナ" />
        <TextBlock Grid.Row="2" Grid.Column="1" Padding="5" Text="郵便番号" />
        <TextBlock Grid.Row="3" Grid.Column="1" Padding="5" Text="住所" />
        <TextBlock Grid.Row="4" Grid.Column="1" Padding="5" Text="生年月日" />
        <TextBlock Grid.Row="5" Grid.Column="1" Padding="5" Text="備考" />
        …(*)…
    </Grid>
</Window>

　今回のサンプルには、業務アプリの基本レイアウトとしてタイトルと入力フィールドが並べやすいGridを採用しています（Grid以外にStackPanelやCanvasなども指定できます）。リスト1には、まだ入力フィールドを配置していませんが、次ページから「Grid.Column="2"」として入力フィールド用のコントロールを配置していきます。