.png)
『生年月日欄』の構成
<im:GcDateTime Grid.Row="4" Grid.Column="1"
Name="Birth_Date"
WatermarkDisplayNull="任意項目"
WatermarkDisplayNullForeground="#80000000"
WatermarkNull="生年月日を入力してください。"
WatermarkNullForeground="#80000000"
VerticalContentAlignment="Stretch" VerticalAlignment="Center"
HighlightText="Field" >
<im:GcDateTime.DisplayFieldSet>
<im:DateDisplayFieldSet>
<im:DateYearDisplayField />
<im:DateLiteralDisplayField Text="/" />
<im:DateMonthDisplayField />
<im:DateLiteralDisplayField Text="/" />
<im:DateDayDisplayField />
</im:DateDisplayFieldSet>
</im:GcDateTime.DisplayFieldSet>
<im:GcDateTime.FieldSet>
<im:DateFieldSet>
<im:DateYearField />
<im:DateLiteralField Text="/" />
<im:DateMonthField />
<im:DateLiteralField Text="/" />
<im:DateDayField />
</im:DateFieldSet>
</im:GcDateTime.FieldSet>
<im:GcDateTime.Effect>
<DropShadowEffect/>
</im:GcDateTime.Effect>
<im:GcDateTime.Value>
<Binding Path="BirthDay" Mode="TwoWay"/>
</im:GcDateTime.Value>
</im:GcDateTime>
入力欄コード解説
- 「
Grid.Row="4" Grid.Column="1"」には「Birth_Date」という名前でGcDateTimeコントロールを配置しています。 - WatermarkDisplayNullプロパティで入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
- 「GcTextBox.Effect」を指定して影付きの入力欄にします。
- 「
<Binding Path=" BirthDay " Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのBirthDayプロパティ値と連携します。
『コメント欄』の構成
『コメント欄』は複数行が入力できるようになっています。また、各行は点線で区切られており見栄えの良い複数行入力欄を実現しています。
<im:GcTextBox Grid.Row="5" Grid.Column="1"
Name="Comment_TextBox"
WatermarkDisplayNull="任意項目"
WatermarkDisplayNullForeground="#80000000"
WatermarkNull="連絡事項を入力してください。"
WatermarkNullForeground="#80000000"
Multiline="True" MaxLength="2000" MaxLengthUnit="Byte"
GridLineStyle="Dotted" GridLineBrush="Black"
TextWrapping="Wrap" Margin="0,8,0,0" HighlightText="True">
<im:GcTextBox.Effect>
<DropShadowEffect/>
</im:GcTextBox.Effect>
<im:GcTextBox.Text>
<Binding Path="Comment" Mode="TwoWay"/>
</im:GcTextBox.Text>
</im:GcTextBox>
入力欄コード解説
- 「
Grid.Row="5" Grid.Column="1"」にはComment_TextBoxという名前でGcTextBoxコントロールを配置しています。 - WatermarkDisplayNullプロパティで入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
- 「
Multiline="True" MaxLength="2000" MaxLengthUnit="Byte"」として、複数行サポート、最大2000バイトまで入力可能にしています。 - 「GcTextBox.Effect」を指定して影付きの入力欄にしています。
- 「
<Binding Path=" Comment " Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのCommentプロパティ値と連携します。
コードによるふりがな連携
『本名欄』に名前を入力すると『フリガナ欄』と自動的に連携し、半角カタカナでふりがなが記入される方法をヘルプで調べると、TextプロパティにBindingする例が掲載されています。しかし、今回のサンプルではデータの設定手段としてBindingを使ってしまっているので、ヘルプに記述されているサンプル方法では、ふりがな連携が実現できません。
つまりこのような場合は、Bindingするのはデータなのか、ふりがななのかを決めなければなりません。ふりがなだけデータとBindingできないのも一貫性がないので、ふりがなはBindingではなくGcImeManagerのイベントを使って連携するようにしたいと思います。
なお、コードによる連携でもBindingによるものでも、『本名欄』のXAML定義に記述したGcImeManager関連の定義は同じになります。
Private WithEvents current As GrapeCity.Windows.InputMan.GcImeManager
Private Sub MainPanel_Loaded(ByVal sender As System.Object,
ByVal e As System.Windows.RoutedEventArgs)
：
（中略）
：
Me.current = GrapeCity.Windows.InputMan.GcImeManager.Current
End Sub
Private Sub Current_ResultStringChanged(ByVal sender As Object,
ByVal e As GrapeCity.Windows.InputMan.ResultStringEventArgs) _
Handles current.ResultStringChanged
If TypeOf e.Source Is GrapeCity.Windows.InputMan.GcTextBox AndAlso
e.Source.Name = "Name_TextBox" Then
Local.Kana += e.ReadString
End If
End Sub
GcImeManagerが『本名欄』からふりがなを受信すると、ResultStringChangedイベントが発生します。そのイベントで、Current_ResultStringChangedイベントプロシージャが起動されるとName_TextBoxでの入力かを確認してから、e.ReadStringを『フリガナ欄』に追記します。
検証インジケータ
検証インジケータは、Bindingを使って各コントロールのイベントで検証する事もできます。今回のサンプルでは、［登録］ボタンをクリックしたときに一括して必須項目が未入力かどうかを判定しています。
このように［登録］ボタンをクリックするなど利用者が一息ついたタイミングで一括してチェックするというのも、入力をしてもらいやすくする工夫の一つです。もちろん、そのためにはFormatプロパティやAutoConvertプロパティを駆使して、正しい入力がそれぞれの欄で行いやすくしておく必要があります。
まとめ
InputMan for Silverlightを使えば業務アプリケーション、例えば、インターネットから注文するときの『住所入力欄』や『クレジットカード入力欄』などにおける、利用者の「何を入れていいの？」という負担を軽減できると思います。
負荷の軽減とは、つまりは「面倒だからいいか」と注文してもらえず（または資料請求などが行われず）チャンスを逃すことにつながってきます。日本におけるSilverlightの普及率が70％を超えている現状を考えると、HTMLベースのシンプルな画面だけではなくInputMan for Silvelgihtを使った使いやすい画面の提供も必須な部類になりつつあるのではないでしょうか。
