日本仕様の入力フォームを持ったSilverlightアプリケーションを作成しよう～InputMan for SliverlightでWebアプリを強化する

サンプルアプリの画面デザイン

　今回のサンプルは、イベントへの参加登録画面をイメージして作成しました。

図5 サンプル画面デザイン

　この画面デザインはVisual Studio上でもデザイナー（「デザイン」タブ）、またはエディタ（「XAML」タブ）を使ってデザインできますが、Expression Blendがインストールしてあれば、ソリューションエクスプローラーで「MainPage.xaml」ファイルを右クリックして［Expression Blendを開く］メニューからExpression Blendを起動し、編集することもできます。Expression Blendを使えば、Story Boardなどが設定しやすく便利です。

図6 Expression Blend画面

　このサンプル画面には、次のInputMan for Silverlightのコントロールおよびコンポーネントを使用しています。

• GcTextBox
• GcMask
• GcDateTime
• GcValidationIndicator
• GcImeManager

　それでは、まず各コントロールを配置する前のXAMLの内容をみてみましょう。

リスト1 ベースとなるXAML定義

<UserControl x:Class="CZ1012InputMan.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:im="http://schemas.grapecity.com/windows/2010/inputman" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Canvas>
        <Canvas.Background>
            <ImageBrush ImageSource="/CZ1012InputMan;component/Images/ItaIDE003.png" 
                       Stretch="Uniform"  Opacity="0.3"
                       AlignmentX="Right" AlignmentY="Top" />
        </Canvas.Background>
        <Grid x:Name="LayoutRoot" Margin="10" Loaded="MainPanel_Loaded">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="40"/>
                <RowDefinition Height="80*"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75" />
                <ColumnDefinition Width="290"/>
                <ColumnDefinition Width="25" />
            </Grid.ColumnDefinitions>
        </Grid>
    </Canvas>
</UserControl>

　今回のサンプルでは表示画面に背景画像を表示したかったので、Canvasの中に背景用のCanvasとデータ表示用のGridを配置しています。

　Grid部分は7行3列になるようにRowとColumnを設定しています。6行目は『コメント欄』で、入力に応じて高さを可変にしたいので「<RowDefinition Height="80*"/>」のように、アスタリスク付きで指定しています。

GridコントロールのLoadedイベント

　Gridコントロールのイベントとして「Loaded="MainPanel_Loaded"」を定義しています。「MainPage.xaml.vb」には、対応する次のイベントプロシージャが記述されています。XAML側でイベントとイベントプロシージャの関連付けが行われているので「MainPage.xaml.vb」側にはHandle句がないことに注意してください。

リスト2 Loadedイベントのイベントプロシージャ例

Private Local As CZ1012Class

Private Sub MainPanel_Loaded(ByVal sender As System.Object,
                             ByVal e As System.Windows.RoutedEventArgs)
    Local = New CZ1012Class() With {.Name = "藍澤 光",
                                    .Kana = "ｱｲｻﾞﾜ ﾋｶﾙ",
                                    .BirthDay = CDate("1996/09/27")}
    Me.LayoutRoot.DataContext = Local
    Me.current = GrapeCity.Windows.InputMan.GcImeManager.Current
End Sub

　イベントプロシージャの中では、データ定義である「CZ1012Class」のオブジェクトを初期値を代入しながら生成して、そのオブジェクトをGridコントロール（Me.LayoutRoot）のDataContextに割り当てています。

　ここで使っている「CZ1012Class」は、次のようなコードになっています。

リスト3 データストアクラスの例

Public Class CZ1012Class
    Public Property Name As String
    Public Property Kana As String
    Public Property HandleName As String
    Public Property MailAddress() As String
    Public Property BirthDay As Date
    Public Property Comment As String
End Class