Microsoft Visual Web Developer 2008 Express Edition
 Silverlight 3

■Silverlight でコントロール Prev  Top  Next

ドメイン

Silverlight上にコントロールを表示するサンプルイメージ

まず始めに VisualStudio 2008 でプロジェクトを作成します。プロジェクト名は SilverlightTutrial で作成しました。
ソリューションエクスプローラー

いっぱいファイルが作成されますが、全部いりません。とりあえずいらないファイルをすべて削除します。

1.App.xaml と MainPage.xaml を削除
まずxamlファイルについて簡単に説明すると、Microsoftによって開発された、 アプリケーションソフトのユーザーインターフェースを記述するための言語仕様のことです。詳細は IT用語辞典バイナリを参照してください。 Silverlight では Applicationクラス を継承するクラスが必要となります。 このクラスは Silverlight を管理するクラスです。 App.xaml 配下の App.xaml.cs の Appクラス が Applicationクラス を継承していますが、 コードを簡略化するために作成しなおします。なので App.xaml は削除します。

UserControlクラス についてはいずれ解説する予定です。とりあえず今回は使用しません。

2.Default.aspx を削除
このファイルはASP.NETでのコードのテンプレートです。今回は使用しません。

3.SilverlightTutrialTestPage.aspx を削除
トップページのファイルです。拡張子が aspx と html の2種類ありますが、どちらか一方のみ使用します。 今回は SilverlightTutrialTestPage.html を使用します。
トップページの変更は「ソリューションエクスプローラー」ウィンドウのファイル上で右クリックして表示されるメニューから「スタートページに設定」を選択します。
スタートページに設定

次にファイルを1つ追加します。

4.CodeFile.cs を追加
このファイル内にクラスを作成し、そのクラスがApplicationクラス を継承するように設計します。 ここでは SilverlightCls という名称のクラスを記述します。

5.コーディング

---SilverlightTutrialTestPage.html---


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
スタートページです
-->

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title>SilverlightTutrial</title>
    
    <!-- 
    *********************************************************************************************************************************    
    スタイルシートの処理 
    *********************************************************************************************************************************    
    -->
    <style type="text/css">
    html, body
    {
       height: 100%;
       overflow: auto;
    }
    body
    {
       padding: 0;
       margin: 0;
    }
    #silverlightControlHost
    {
       height: 100%;
       text-align:center;
    }
    </style>
    
    <!-- Silverlight.js ファイルをインクルード -->
    <!--
         Silverlight.js ファイルには、Web ページに Silverlight プラグインを埋め込んだり、Silverlight のインストール エクスペリエンスをカスタマイズしたりするための 
         JavaScript ヘルパー関数が定義されています。
         createObject 関数および createObjectEx 関数を使用すると、Web ページに Silverlight プラグインを動的に埋め込むことができます。
         ですがここでは使用しません。
         詳細は http://msdn.microsoft.com/ja-jp/library/cc838126(VS.95).aspx を参照
    -->
    <script type="text/javascript" src="Silverlight.js"></script>
    
    <!-- 
    *********************************************************************************************************************************    
    javascript
    *********************************************************************************************************************************    
    -->
    <script type="text/javascript">
        // Silverlight内でエラーが発生したときにコールされる関数。
        function onSilverlightError(sender, args)
        {
            var appSource = "";
            if (sender != null && sender != 0)
            {
               appSource = sender.getHost().Source;
            }
            
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError")
            {
               return;
            }

            var errMsg = "Silverlight アプリケーションでハンドルされていないエラーが発生しました " +  appSource + "\n" ;

            errMsg += "コード: "+ iErrorCode + "    \n";
            errMsg += "カテゴリ: " + errorType + "       \n";
            errMsg += "メッセージ: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError")
            {
                errMsg += "ファイル: " + args.xamlFile + "     \n";
                errMsg += "行: " + args.lineNumber + "     \n";
                errMsg += "位置: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError")
            {
                if (args.lineNumber != 0)
                {
                    errMsg += "行: " + args.lineNumber + "     \n";
                    errMsg += "位置: " +  args.charPosition + "     \n";
                }
                errMsg += "メソッド名: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">

    HTMLに文字出力<p/>
    
    <!-- 
    *********************************************************************************************************************************
    Silverlight を初期化します。
    *********************************************************************************************************************************    
    -->
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="640px" height="480px">

        <!-- 表示するコンテンツを指定または格納する初期ファイルの URI (Uniform Resource Identifier) を設定します。
             初期ファイルは、JavaScript API の場合は XAML ファイル、マネージ API の場合は XAP パッケージになります。 
             ここではVisualStudio による開発を行うため XAP パッケージになります。-->
        <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc838137(VS.95).aspx を参照 -->
        <param name="source" value="ClientBin/SilverlightTutrial.xap"/>

        <!-- Silverlight プラグインによってネイティブ コード レベルで XAML 解析エラーまたはランタイム 
             エラーが生成されたときに呼び出すイベントハンドラーの名前を指定します。 -->
        <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc838212(VS.95).aspx を参照 -->
        <param name="onError" value="onSilverlightError" />

        <!-- XAML コンテンツが表示される四角形領域の背景色を設定します。-->
        <!-- ここでは白に設定します。 -->
        <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc838148(VS.95).aspx を参照 -->
        <param name="background" value="#99ffff" />

        <!-- Silverlight アプリケーションの実行に必要な最も古い Silverlight バージョンを示す値を設定します。 -->
        <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc917842(VS.95).aspx を参照 -->
        <param name="minRuntimeVersion" value="3.0.40624.0" />

        <!-- Silverlight が 1 秒あたりに描画できるフレームの最大数を設定します。-->
        <param name="maxframerate" value="60"/>

        <!-- Silverlight プラグインのバージョンが、指定された minRuntimeVersion よりも前のものである場合に、
             自動的に更新を試みるかどうかを示す値を設定します。-->

        <!-- 詳細は http://msdn.microsoft.com/ja-jp/library/cc917827(VS.95).aspx を参照 -->
        <param name="autoUpgrade" value="true" />
        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Microsoft Silverlight を入手" style="border-style:none"/>
        </a>
        </object>
        <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
    </div>
    </form>
</body>
</html>

このファイルはコメント追加と、Silverlightの表示領域のサイズの変更と背景色を変更したくらいで、基本デフォルトと同じです。

---CodeFile.cs---


using System.Windows;
using System.Windows.Controls;

// Silverlight の動作を設定する
public class SilverlightCls : Application
{
    public SilverlightCls()
    {
        // テキストブロック
        TextBlock textBlock = new TextBlock();
        textBlock.Text = "Silverlight に文字出力";

        // ボタン
        Button button1 = new Button();
        button1.Content = "ボタン1";
        button1.Height = 30;      // 縦幅設定
        button1.Width = 100;      // 横幅設定
       
        Button button2 = new Button();
        button2.Content = "ボタン2";
        button2.Height = 30;      // 縦幅設定
        button2.Width = 100;      // 横幅設定

        // コントロールの表示位置を設定
        Canvas.SetLeft(textBlock, 0);
        Canvas.SetTop(textBlock, 0);

        Canvas.SetLeft(button1, 350);
        Canvas.SetTop(button1, 420);

        Canvas.SetLeft(button2, 500);
        Canvas.SetTop(button2, 420);

        Canvas canvas = new Canvas();

        // コントロールをキャンバスに追加する
        canvas.Children.Add(textBlock);
        canvas.Children.Add(button1);
        canvas.Children.Add(button2);

        RootVisual = canvas;
    }
}

このファイル内で Silverlight の動作を設定します。今回はテキストブロックコントロール1個とボタンコントロール2個を適当に表示してみます。

6.スタートアップ オブジェクトの設定
プロジェクトのプロパティ

「スタートアップ オブジェクト」でクラス名に SilverlightCls を指定します。

7.デバッグ

コーディングしたら F5 を押してデバッグして実行します。エラーがなければ実行できます。

8.配置

最後に配置します。実行に必要なファイルは2つです。
 1)SilverlightTutrial\SilverlightTutrial.Web\SilverlightTutrialTestPage.html
 2)SilverlightTutrial\SilverlightTutrial.Web\ClientBin\SilverlightTutrial.xap

SilverlightTutrialTestPage.html はトップページです。
SilverlightTutrial.xap は zip形式 の圧縮ファイルです。 解凍すると SilverlightTutrial.dll と AppManifest.xaml の2つのファイルが展開されます。
SilverlightTutrial.dll は VisualStudioでのコンパイルにより作成されたdllファイルです。
AppManifest.xaml はアセンブリの位置やエントリーポイントが記述されます。 アセンブリは実行時に使用するdllファイルのことです。今回のプログラムでは SilverlightTutrial.dll が記述されます。 エントリーポイントは起動もとの情報です。今回のプログラムでは SilverlightClsクラス が記述されます。

ホームページの公開にFC2の無料サービスを使用してますが、ここのサービスだと使用できる拡張子に制限があるため サンプルを公開できません。いっそ他のサービスに移行しようかな。


Prev  Top  Next
inserted by FC2 system