Silverlight 2で.NET技術をカッコよく使おう
連載インデックスへ

Silverlight 2で.NET技術をカッコよく使おう(2)

無料Visual Studioで始めるSilverlight 2超入門


インフラジスティックス・ジャパン株式会社
テクニカルエバンジェリスト/デベロッパーサポートエンジニア
山田 達也
2009/1/15


初めてのSilverlight 2プロジェクト


VS2008を使ってみよう−Silverlight 2アプリの自動生成

 VS2008とSilverlight Toolsのインストールが完了したら、プログラムメニューからVS2008を起動してSilverlightプロジェクトを作成してみましょう。まずは、VS2008上部メニューの[ファイル]→[新しいプロジェクト]を押下します。

図6 [ファイル]の[新しいプロジェクト]
図6 [ファイル]の[新しいプロジェクト]

 その後現れるダイアログで、[プロジェクトの種類]から[Silverlight]タブを選択し、[テンプレート]で[Silverlightアプリケーション]を選択します。

図7 Silverlight用のテンプレート一覧から、[Silverlightアプリケーション]を選択
図7 Silverlight用のテンプレート一覧から、[Silverlightアプリケーション]を選択

 この連載では開発言語としてC#を使っていきますが、もちろんVBでも構いません。[プロジェクト名]は「MyFirstSLApp」とし、OKを選択します(Visual Studioを開発環境として利用して複数の.NET Frameworkがインストールされている環境では、Silverlightのテンプレートが表示されない場合があります。その場合は、右上のセレクタに正しく「.NET Framework 3.5」と表示されていることを確認してください)。

 次に、[Silverlightアプリケーションの追加]というダイアログが表示されますが、これは初期状態のまま[OK]を選択してください。

図8 [Silverlightアプリケーションの追加]ダイアログ
図8 [Silverlightアプリケーションの追加]ダイアログ

 そうすると、Silverlightアプリケーションが自動生成されます。構成は以下のようになります。2つのプロジェクトが自動的に生成されています。

図9 [ソリューション エクスプローラー]
図9 [ソリューション エクスプローラー]

 Silverlight開発用のプロジェクト(MyFirstSLApp)とは別に、ASP.NETのWebプロジェクト(MyFirstSLApp.Web)が追加されています。SilverlightはWebブラウザなどの上で動作するプラグインですから、ホストしてくれるWebアプリケーションが必要になります。このように、Silverlightアプリケーションのテンプレートは、テスト用のWebプロジェクトを自動的に追加してくれるので、テストページを作成する労力を軽減できます。

 それぞれのファイルの役割やSilverlight 2アプリケーションの動作原理などについては、記事「無償環境でSilverlight 2アプリの開発を始めよう!」が参考になります。

最初のXAMLコーディング

 それでは、作成されたMyFirstSLAppプロジェクトから、Page.xamlファイルを選択してください。Visual Studioの中央のペインにプレビュー画面とXAMLコードが上下に並んで表示されていると思います。

図10 Page.xamlのプレビューとXAMLコード
図10 Page.xamlのプレビューとXAMLコード(画像をクリックすると拡大します)

 初めは、まだ真っさらな画面構成なので、取りあえず簡単なメッセージを表示して変化を確認してみましょう。初めて触る言語の最初のコーディングといえば……。やることは決まっていますね。XAMLを以下のように修正します。

Page.xamlを修正
<UserControl x:Class="MyFirstSLApp.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <Grid x:Name="LayoutRoot" Background="White">
    <!--まずはあいさつから! 下の1行を追加してください。-->
    <TextBox Text="Hello World!" Foreground="Blue"
      Background="Yellow" />
  </Grid>
</UserControl>

Hello! Silverlight 2

 コードを書き終えるとプレビュー画面にも反映されますが、取りあえず[F5]キーを押してデバッグ実行してみてください。その際、図11のようなダイアログが表示されますが、今後デバッグ機能を用いるためにそのまま[OK]を選択してください。

図11 初回実行時に表示されるダイアログ
図11 初回実行時に表示されるダイアログ

 ここでデバッグ機能を有効にします。すると、自動でデフォルト設定したWebブラウザが起動します。

図12 Hello! Worldの実行結果
図12 Hello! Worldの実行結果

 見事、最初のアプリケーションが動作しましたね!

 次のページでは、Silverlight 2のコードの中身を解説します。

1-2-3-4

 INDEX
Silverlight 2で.NET技術をカッコよく使おう(2)
無料Visual Studioで始めるSilverlight 2超入門 
  Page1
Silverlight 2開発環境を一からインストール
Page2
初めてのSilverlight 2プロジェクト
  Page3
初めてでも分かるXAMLの中身
Silverlight 2で使用可能な3種類のコンテナ
  Page4
Silverlight 2の標準コントロールはこんなにたくさん!
次回は、アニメーションでSilverlightをカッコよく使う
コラム 「Silverlight 2で画面遷移を行うには?」



リッチクライアント&帳票 全記事一覧へ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間