Silverlight2入門記2 -足し算-

Silverlight


意外と早く次まで来た(w)ので、次は足し算です。
で、それだけだと面白くないので、先ほど使ったレイアウト系コンポーネントのGridではなくて、
Canvasを使ってみます。Gridはテーブル上に位置を指定しますが、Canvasでは位置情報で指定します。


ちなみにどちらも親コンポーネントでざっくりレイアウトを決めた後に、子供のコンポーネントにその位置情報を
埋め込むような形式を取っています。

例えばGridの場合だとこんな感じ。

<Button x:Name="myButton" Grid.Row="1" Margin="10" Content="Click me!" Click="myButton_Click"/>


Grid.RowでGridにある1行目にこのコンポーネントを配置するという指定ができます。
こうするとレイアウトの大枠の情報と実際にその位置に何が入るかの情報がかなり離されてしまうのが
結構違和感がある。個人的にはこの部分はいまいちじゃないかと思うなあ・・・・


ひとまず続けましょう。
ではCanvasを使って位置を決めていきます。
Canvas.Leftで左からの絶対位置、Canvas.Topで上からの絶対位置を指定します。

で、今回は足し算なので、テキスト入力「TextBox」の登場です。
例えば下記のような感じで記述します。これはシンプルですね。

        <TextBox x:Name="arg1" FontSize="30" Text="" Height="40" Width="80" Canvas.Left="10" Canvas.Top="40" />


で、足し算イベントを起こすためのボタンを配置します。

        <Button x:Name="button" FontSize="30" Canvas.Left="390" Canvas.Top="33" Content="計算！" Click="button_Click"/>


Silverlightといえど、.NETの仕組み上に載っているのでもちろんイベントに対してイベントハンドラを
割り当てることが出来ます。イベントハンドラはコードビハインドの仕組みで、１xamlに対して１実コードがVSによって
自動的に出力されています。今回はC#で作成しているので、Page.xamlに対応するコードビハインドとして
Page.csが既に準備されているので、ここにbutton_Clickイベントをはっつけるわけです。
VSであれば、Clickイベントを記載して、新しいイベントハンドラの作成とすると自動でイベントハンドラを作成してくれます。
(ちなみに親クラスはUserControl。これね。
http://msdn.microsoft.com/ja-jp/library/system.windows.controls.usercontrol.aspx
)


ではClickイベントのイベントハンドラをみてみましょう。

        private void button_Click(object sender, RoutedEventArgs e)
        {
            int a1 = int.Parse(arg1.Text);
            int a2 = int.Parse(arg2.Text);
            result.Text = (a1 + a2).ToString();
        }


これでイベントハンドラの記述も終わりました。ちなみにValidationの仕組みはSilverlightにはなさそうなので、
このイベントハンドラの先頭でごりごり書くっぽい。


ではxamlの全体像を見てみましょう。

<UserControl x:Class="Calculate.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="600" Height="300">
    <Canvas Background="White">
        <TextBox x:Name="arg1" FontSize="30" Text="" Height="40" Width="80" Canvas.Left="10" Canvas.Top="40" />
        <TextBlock FontSize="30" Text="+" Canvas.Left="100" Canvas.Top="35" />
        <TextBox x:Name="arg2" FontSize="30" Text="" Height="40" Width="80" Canvas.Left="140" Canvas.Top="40"/>
        <TextBlock FontSize="30" Text="=" Canvas.Left="240" Canvas.Top="35" />
        <TextBox x:Name="result" FontSize="30" Text="" Height="40" Width="80" Canvas.Left="280" Canvas.Top="40"/>
        <Button x:Name="button" FontSize="30" Canvas.Left="390" Canvas.Top="33" Content="計算！" Click="button_Click"/>
    </Canvas>
</UserControl>

実行してみましょう。



よしよし足し算できた。

Silverlightでの入力とイベントの発生の仕方の基本について書いてみました。
次はそのほかの入力コンポーネント（チェックボックス、プルダウン、リンク）などを使ってみます。