SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(InputMan)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

郵便番号欄

 郵便番号欄は「3桁-4桁」の入力欄が明確にわかるように、InputManの機能を使って各欄を四角く明示するデザインを採用します。

リスト4 郵便番号欄のXAML定義
<Grid.Resources>
    <Style x:Key="StyleBase" TargetType="im:MaskPatternField">
        <Setter Property="BorderBrush" Value="Red" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="PromptChar" Value=" " />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
    </Style>
    <Style x:Key="Style1" BasedOn="{StaticResource StyleBase}" 
           TargetType="im:MaskPatternField">
        <Setter Property="Width" Value="20" />
    </Style>
    <Style x:Key="Style2" BasedOn="{StaticResource StyleBase}" 
           TargetType="im:MaskPatternField">
        <Setter Property="Width" Value="18" />
    </Style>
</Grid.Resources>
        :
    (中略)
        :
<im:GcMask Grid.Row="2" Grid.Column="2" VerticalAlignment="Center">
    <im:GcMask.FieldSet>
        <im:MaskFieldSet>
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style1}" />
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style1}" />
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style1}" />
            <im:MaskLiteralField Text="-" Margin="2, 0, 2, 0" />
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style2}" />
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style2}" />
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style2}" />
            <im:MaskPatternField MinLength="1" MaxLength="1" Pattern="\D" Style="{StaticResource Style2}" />
        </im:MaskFieldSet>
    </im:GcMask.FieldSet>
    <im:GcMask.Effect>
        <DropShadowEffect/>
    </im:GcMask.Effect>
    <im:GcMask.Text>
        <Binding Path="PostCode" Mode="TwoWay" />
    </im:GcMask.Text>
</im:GcMask>
  1. 入力欄用のStyleをリソースとして定義しておきます。
  2. Grid.Row="2" Grid.Column="2"」にはPostCode_TextBoxという名前でGcMaskコントロールを配置します。
  3. GcMask.Effectを指定して影付きの入力欄にします。
  4. <Binding Path="PostCode" Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのPostCodeプロパティ値と連携します。
図5 郵便番号欄を四角く明示
図5 郵便番号欄を四角く明示

住所欄

 住所欄は、標準的な文字数であれば画面に収まる大きさに欄をデザインしておき、場合によっては欄を超える入力も可能にした場合の省略文字の利用を想定しています。このような想定は、InputManのGcTextBoxが備えているEllipsis機能を使い、XAML定義だけで簡単に実現できます。もちろん未入力時に「必須項目」と表示したり、文字種の制限をするのも、XAML定義だけで実現が可能です。

リスト5 住所欄のXAML定義
<im:GcTextBox Grid.Row="3" Grid.Column="2" Name="Address_TextBox" 
                  WatermarkDisplayNull="必須項目" 
                  WatermarkDisplayNullForeground="#80000000" 
                  WatermarkNull="住所を入力してください。" 
                  WatermarkNullForeground="#80000000" 
                  Format="aAZ" MaxLength="40" HighlightText="True"
                  VerticalContentAlignment="Stretch" VerticalAlignment="Center"
                  ShowOverflowTip="True"
                  Ellipsis="EllipsisPath" EllipsisString="…(略)…"
                  >
    <im:GcTextBox.Effect>
        <DropShadowEffect/>
    </im:GcTextBox.Effect>
    <im:GcTextBox.Text>
        <Binding Path="Address" Mode="TwoWay"/>
    </im:GcTextBox.Text>
</im:GcTextBox>
  1. Grid.Row="3" Grid.Column="2"」にはAddress_TextBoxという名前でGcTextBoxコントロールを配置します。
  2. ShowOverfolwTip="True"」を指定してマウスを持っていくとツールチップ表示で枠外の部分まで値を表示するように設定します。
  3. EllipsisプロパティとEllipsisStringプロパティを設定し、枠内に値が収まらなかったときは「…(略)…」と中略表示するように設定します。
  4. GcMask.Effectを指定して影付きの入力欄にします。
  5. <Binding Path="Address" Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのAddressプロパティ値と連携します。

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(InputMan)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5929 2011/10/13 16:46

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング