連載インデックスへ

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

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

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

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

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

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

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

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

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

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

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

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

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

図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コード（画像をクリックすると拡大します）

　初めは、まだ真っさらな画面構成なので、取りあえず簡単なメッセージを表示して変化を確認してみましょう。初めて触る言語の最初のコーディングといえば……。やることは決まっていますね。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　初回実行時に表示されるダイアログ

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

図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で画面遷移を行うには？」

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

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）