昨日はWPF/Eコントロールに値を引き渡す方法を説明しましたが、当然、これだけではXAMLの再生しかしないことになります。
実際はWPF/Eコントロールと通信しながらいろんな挙動を記述することになるのですが、もう既にお分かりのとおり、現時点ではその記述ができるのはJavaScriptということになります。
正確には他にもできる方法もあるのかもしれませんが、VS2005のWPF/EテンプレートやWPF/E SDKのHelpにあるサンプルはすべてJavaScriptになっています。
C#でも書けるようになるという話も聞いたことがあるのですが、ニュースソースが明確に思い出せないので「そんな噂もあるんだー」程度に話半分の方向でよろしくです(^^;
それではJavaScriptによるWPF/Eコントロールの利用方法です。
前のエントリで少しだけ説明したSourceStringにXAMLを指定する例です。
まずHTMLファイル。
1: <html>
2: <head>
3: <title>Load XAML Using the SourceString Property</title>
4: <script type="text/javascript" src="js/aghost.js"></script>
5: <script type="text/javascript" src="js/eventhandlers.js"></script>
6: </head>
7:
8: <!-- The onload event is fired after the entire contents of the page have been loaded. -->
9: <body onload="javascript:onPageLoaded()">
10: <div id="WpfeControlHost>
11: <script type="text/javascript">
12: new agHost(
13: "WpfeControlHost", // DIV tag id.
14: "WpfeControl", // WPF/E control id.
15: "360", // Width of rectangular region of WPF/E control in pixels.
16: "60"); // Height of rectangular region of WPF/E control in pixels.
17: // All other property values are set to their default values.
18: </script>
19: </div>
20: </body>
21: </html>
JavaScriptからWPF/Eコントロールを利用するには、上記のようにあらかじめHTMLでWPF/Eコントロールを定義しておく必要があります。
ここでは幅と高さ以外はすべて規定値にしてあります。
次にJavaScript
1: function onPageLoaded()
2: {
3: // Retrieve a reference to the WPF/E control.
4: var control = document.getElementById("WpfeControl");
5:
6: // Define the XAML content.
7: control.SourceString = '<TextBlock xmlns="http://schemas.microsoft.com/client/2007" Text="Hello, world" />';
8:
9: // Reload the WPF/E control to force the property change to take effect.
10: control.reload();
11: }
12:
onPageLoadedイベント中にdocument.getElementByIdでWpfeControlを取得します。
で、取得したWPF/EコントロールのSourceStringプロパティに追加するXAMLのStringを指定しています。
SourceString指定した内容を反映させるには、WPF/Eコントロールのreload()メソッドを実行する必要があります。
このような形でWPF/Eコントロールのメソッドを利用することができます。
他にもいろいろメソッドがありますので試して見てください。