inohilog

/var/log/inohiro

ASP.NETからSilverlightコンポーネントを呼んでみた

今度はASP.NETサーバーアプリケ-ションからSilverlightでUIを作ったところをコンポーネントとして読み込んでみる方法。
今度はVisual Studioの方からプロジェクトを作成。Silverlight Toolsがちゃんとインストールされていれば、テンプレートにSilverlightってのが追加されていると思います。

ASP.NET Webアプリケーションではなく、Silverlightアプリケーションで。これを作ろうとすると、このSilverlightアプリケーションを実行する環境としてのWebアプリケーションもしくはWebサイトが必要だよと言われるので(下図)、プロジェクトの種類でWebアプリケーションを選択します。

OKを押すとSilverlightXamlが読み込まれたようなページが出ます。

で、テールボックスからボタンとかドラッグすればいいんだけど、なぜかできない(今のところ不明)ので、Xamlを直接書きます。しかしIntellisenseが効いているので、普通に簡単。
とりあえずCanvasを作って、それに名前をつけ、背景色を設定します。そしてその中にボタンを一つ配置。Clickイベントを書きます。「Click=」って書けば「新しい弁とハンドラの生成」みたいなものが出るので、そのままリターンキーを。

書いたXAMLコード。かんたんかんたん。


次にそのXamlファイルに関連づけられているcs(C#)ファイルにClickイベントを書きます。しかしながら書くのは動作だけ。今回はクリックされたら、CanvasのOpacity(透明度)を0.2にしちゃうコードを書きました。


では実行。F5を押すとWebサーバーが立ち上がります。作ったSilverlightコンポーネントが読み込まれるので、ボタンをクリック。すると指定したCanvasのOpacityが変わったと思います。


別のaspxファイルから読む

次に、別のaspxファイルからこのSilverlightのUIコンポーネント(?)を呼ぶにはどうしたらよいでしょうか。
.NET Framework3.5から(たぶん)は「」でSilverlightコンポーネントを呼ぶことができます。すなわちコンポーネントを埋め込みたい場所にそれを書けば良いわけです。
今回はaspxで表示されている部分とそうでない(Silverlightの部分)がわかるように、ちょっとだけ文字を書いておきます。また「」も必要みたいなので、これも書いておきます。「

」の直後がよいと思います。
」タグでは、Source属性で読み込むコンポーネントを指定します。先ほどいじったコンポーネントは、ClientBinの中にある「〜〜.xap」と言うファイルに固められています。これをSource属性の値として記述します。

書いたaspのコード。かんたんかんたん。


プロジェクトの実行時のトップページがPropertiesで指定されているので、変更します(けっこううざい」

さて実行してみましょう。aspxファイルで書かれているところと、そうでないところがよくわかります。「」で指定したWidthとHeightが、そのコンポーネントを描画する大きさになっているのがわかります。

おまけ

途中に出てきたClientBinとその中の〜〜.xapファイルですが、ClientBinにはそのSilverlightコンポーネントでつかっているビデオファイルとかを追加しておく為にあります。 また〜〜.xapファイルは拡張子を変えてやることで中身を見ることができます。拡張子を「*.zip」に変えるだけです。