はじめての Silverlight 2.0

やらなきゃ、 やらなきゃと思いつつ、 なかなか触れなかった Silverlight 2.0 を、 よーやく触ってみました f(^^;

まずは、 Visual Studio 2008 SP1 を入れます。 といっても、 無償の Visual Studio 2008 Express Edition SP1 で OK。
※ 私は全部入れちゃいましたけど、 Silverlight 2.0 のためには Visual Web Developer 2008 Express Edition SP1 だけでいいみたいです。

VS2008 SP1 を入れたら、 忘れずに 「Visual Studio 2008 Service Pack 1(SP1)用Intellisenseの修正プログラム」 を適用します。 これを当てないと、 インテリセンスが英語で出てきちゃって、 寂しい思いをします。
このあたりで、 Windows Update をやっておきましょう。 けっこうな量があります orz

続いて、 Visual Studio 2008 SP1 用 Microsoft Silverlight 2 Tools をインストールしたら、 とりあえず準備は完了です。
※ さらに、 Expression Blend 2 SP1 やら Deep Zoom Composer やらがあるといいらしいけど、 とりあえずプログラムを書いてみるには、 ここまででなんとかなります。

では、  Visual Web Developer を起動して、 新しいプロジェクトを作成します。

プロジェクトの種類として Silverlight を選び、 テンプレートは Silverlight アプリケーションを選びます。

新しくプロジェクトが作られ、 メインの画面になる Page.xaml が開いた状態になります。 ツールボックスから、 テキストボックスとかを適当に貼り付け…
…あ、 あら?
ツールボックスが空っぽです。 Silverlight のコントロールをツールボックスに追加してやっても…

デザイン画面へのドロップができません。
なにかセットアップに失敗したのかなぁ…
OS は Win7RC だしなぁ… f(^^;

まぁ、 WPF でそこそこ慣れているので、 適当に XAML を直接書いていきます。
初めてのプログラムは、 "Hello, world" と決まっています f(^^;
今回の  "Hello, world" は、 ほんの少しだけ凝って、 テキストボックスに入力した文字列 ( 例えば "Silverlight" ) を Hello の後ろにくっつける ( 例えば "Hello, Silverlight!" ) ことにしました。
◆　完成したソリューションは、 こちら ⇒ 「SilverlightApplication1_20090513.zip」  (6,885 バイト) をダウンロード

Page.xaml に、 テキストボックスを 2つと、 ボタンを追加します。 ボタンには、 イベントハンドラも指定します。
<TextBox x:Name="TargetName" Text="Silverlight"
         Background="Azure" BorderThickness="1"
         Grid.Row="0"
         Height="Auto" HorizontalAlignment="Stretch"
         Margin="2" />
<Button x:Name="Do" Content="Click!"
        Grid.Row="0"
        HorizontalAlignment="Right"
        Margin="2" Padding="8, 4"
        Click="OnDoButtonClicked"
        />
<TextBox x:Name="Message" Text="Hello,"
         Grid.Row="1"
         FontSize="32"
         VerticalAlignment="Center"
         HorizontalAlignment="Center"
         Background="Transparent" BorderThickness="0"
         TextAlignment="Center" TextWrapping="Wrap"
         IsReadOnly="True" IsTabStop="False"
         />

Page.xaml.cs 側に、 イベントハンドラを記述します。
private void OnDoButtonClicked(object sender, RoutedEventArgs e)
{
  if (this.TargetName.Visibility == Visibility.Visible)
  {
    if (!string.IsNullOrEmpty(this.TargetName.Text))
    {
      this.TargetName.Visibility = Visibility.Collapsed;
      this.Message.Text = "Hello, " + this.TargetName.Text + "!";
      this.Message.Visibility = Visibility.Visible;
    }
  }
  else
  {
    this.TargetName.Visibility = Visibility.Visible;
    this.Message.Visibility = Visibility.Collapsed;
  }
}

これで実行すると、 冒頭に載せた "Hello, 銀光" が出てくるわけです。 (^^)

なお、 上のイベントハンドラは、 わざと 「普通」 に書きました。 ぱっと見て、 なにやってるか分かりづらいんじゃないかな? コメント書けよ～っ、 って言われちゃうかな? f(^^;
私の普段の書き方だと、 下のようになります。 全体のコード量はかなり増えちゃうけど、 イベントハンドラでなにをやってるかは、 コメントが無くてもだいたい分かりますよね。
※ 呼び出しているメソッドは、 ダウンロードできるソースコード中に、 コメントとして全部書いてあります。

private void OnDoButtonClicked(object sender, RoutedEventArgs e)
{
  if (IsInputMode() && IsInputExist())
    ShowMessage();
  else
    HideMessage();
}