mikeo_410

 HTMLファイルにXAMLを記述

  HTMLファイルに、スクリプトとして「XAMLマークアップ」を記述することができます。

  利点は、
  １．HTMLファイルと同時にブラウザに送られるので高速
  ２．同じ理由で、サーバのMIME設定の影響を受けない
  ３．ファイルが１つで管理し易い

  欠点は、
  １．WYSIWIGエディタで編集できない
  ２．SilverlightのXAMLの機能に制限される

  全体が1つのHTMLファイルになっているので、必要なら、ブラウザのソースコードの表示機能を使って、XAMLのスクリプトを見てください。

  このサンプルを作る過程を書きます。


１．XAMLの準備

１．１．数式部分

  数式部分は、ワードで書きました。これを xps2xaml で、XAMLに変換しました。

１．２．図形部分

  Visual Studio で WPFプロジェクトを作り、Pageファイルを追加して作りました。確認は、IEで直接 Page.xaml を開いて行いました。

１．３．XAMLスクリプト

  上の2つを連結して、HTML上のスクリプト記述にします。
  スクリプトに xamlScript1 と id が付けてあり、これを object タグで指定することになります。
  スケーリングや原点が異なるので、StackPanel に2つの Canvas 置いた構造になっています。

  1. <SCRIPT id=xamlScript2 type=text/xaml>
  2. <?xml version="1.0"?>
  3. <StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     Width="300" Height="360">
  6.         <Canvas Width="220" Height="220">
  7.             <Canvas.RenderTransform>
  8.                 <MatrixTransform Matrix="50 0 0 -50 110 110"/>
  9.             </Canvas.RenderTransform>
  10.                 :
  11.                 : 図形の部分の記述
  12.                 :
  13.         </Canvas>
  14.         <Canvas>
  15.             <Canvas.RenderTransform>
  16.                 <MatrixTransform Matrix="1 0 0 1 -70 -100"/>
  17.             </Canvas.RenderTransform>
  18.                 :
  19.                 : 数式の部分の記述
  20.                 :
  21.         </Canvas>
  22. </StackPanel>
  23. </SCRIPT>  

２．XAMLスクリプトの表示

  同じHTMLファイル中のXAMLスクリプトを表示するには、以下のようにします。

  1. <object height="40" type="application/x-silverlight">
  2.     <param name="Background" value="transparent"/>
  3.     <param name="Source" value="#xamlScript2"/>
  4.     <param name="Windowless" value="-1"/>
  5.     <param name="MinRuntimeVersion" value="1.0.0.0"/>
  6. </object>

  Source パラメータに、スクリプトの id、 xamlScript1 を指定しています。 
  このページのソースを見ると、もっと沢山 param タグが書かれています。これは意図したものではなく、HTMLDo エディタで自動挿入されるものです。
  必須なのは、この4つでした。

３．要点

３．１．デバック済みで

  XAML記述で誤りや未サポートがある場合、一切描画が行われないような状態になります。何のエラー表示も無いので、別途確認の必要があります。Visual Studio のエディタの機能で、XAMLの構文誤りの無い状態にして、ブラウザで開いて確認して置きます。

３．２．XAMLの記述能力はSilverlight以下

  object タグは、type属性から Silverlightアプリケーションを実行するコンポーネントを選択するものと考えます。したがって、Loose XAML で利用可能な Viewport3Dなどが未サポートなのは推測できます。
  さらに、Silverlight アプリケーションで利用可能なものも使えないものがあります。
  Button など入力を行うタグを記述すると一切表示されなくなるようです。

  今のところ、DataTrigger が Silverlight で未サポートなので、入力関連のタグが記述できてもあまり使い道がないかもしれません。
  今回の例は、「START」ボタンをトリガに起動するように考えていました。これができないのは意外です。

３．３．XAMLスクリプトの記述順

  参照する object タグより前に記述する必要があります。
  この条件はブラウザ依存のようで、FireFoxは逆順でも表示します。

  また、使用している エディタ（HTMLDo）での問題があります。

  1. 先頭がスクリプトだと消されてしまう
  2. スクリプトには表示位置があるわけではないので、タグの順番が組みかえられてしまう。

３．４．編集上の問題

  結局、エディタ（HTMLDo）では、IFRAMEを使う方法以外は、編集時に表示して置くことができないことが分かりました。
  （いつの間にか表示されるようになっています。）
  Silverlight.js や object タグは、編集時には評価されないようです。

  編集時の表示は、諦めるとしても、その空間がリザーブされていることぐらいは分からないと編集できませんが、編集時の object タグは透明なもののようです。
  マウスポインタでクリックして選択すると、破線で枠どられるので、存在が分かります。

  この例では、テーブルで枠取りをして、編集時に占有領域が分かるようにしています。

  1. <table style="background-color: #f0f0f0; width: 300px; height: 360px; margin-right: 30px;"
  2.     border="5" cellspacing="5" cellpadding="0" width="50%" align="left">
  3.     <tbody>
  4.         <tr>
  5.             <td>
  6.                 <object width="300" height="360" type="application/x-silverlight">
  7.                     <param name="Background" value="#ffe4e1">
  8.                     <param name="Source" value="#xamlScript2">
  9.                     <param name="MinRuntimeVersion" value="1.0.0.0">
  10.                 </object>
  11.             </td>
  12.         </tr>
  13.     </tbody>
  14. </table>

４．図形の描画部分の説明

  図形を3つ用意します。

  1. 定円
  2. 転円
  3. 赤いマーク（転円の回転の軌跡を示す）
  1. <Path StrokeThickness="0.02" Stroke="Gray"><!--定円-->
  2.     <Path.Data>
  3.         <EllipseGeometry RadiusX="1" RadiusY="1" Center="0 0"/>
  4.     </Path.Data>
  5. </Path>
  6. <Path StrokeThickness="0.02" Stroke="Blue"><!---転円-->
  7.     <Path.Data>
  8.         <EllipseGeometry x:Name="e_out" RadiusX="0.5" RadiusY="0.5" Center="1.5 0"/>
  9.     </Path.Data>
  10.     <Path.RenderTransform>
  11.         <RotateTransform x:Name="mc_angle"/>                                     
  12.     </Path.RenderTransform>
  13. </Path>
  14. <Canvas>
  15.     <Path Fill="Red"><!--マーク-->
  16.         <Path.Data>
  17.             <EllipseGeometry RadiusX="0.06" RadiusY="0.06" Center="2 0"/>
  18.         </Path.Data>
  19.         <Path.RenderTransform>
  20.             <RotateTransform x:Name="mark1_angle" CenterX="1.5" CenterY="0" />
  21.         </Path.RenderTransform>
  22.     </Path>
  23.     <Canvas.RenderTransform>
  24.         <RotateTransform x:Name="mark1_canvas_angle"/>
  25.     </Canvas.RenderTransform>
  26. </Canvas>

  マークは、独立した Canvas に描きます。マーク自体は、転円の中心に対して回転します。 Canvas は、原点に対して回転します。

  Canvas の loaded イベントを使ってアニメーションをスタートします。同じ時点から、同じ時間（20秒）動作します。

  1. マークを、「転円の中心」を中心に2回転(720°)
  2. マークの乗った Canvas を、原点を中心に360°回転
  3. 転円を、原点を中心に360°回転

  1. <Canvas.Triggers>
  2.     <EventTrigger RoutedEvent="Canvas.Loaded">
  3.         <BeginStoryboard>
  4.             <Storyboard>
  5.                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mark1_angle" 
  6.                                            Storyboard.TargetProperty="Angle"
  7.                                            Duration="0:0:20" >
  8.                     <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
  9.                     <LinearDoubleKeyFrame KeyTime="0:0:20" Value="720"/>
  10.                 </DoubleAnimationUsingKeyFrames>
  11.             </Storyboard>
  12.         </BeginStoryboard>
  13.     </EventTrigger>
  14.     <EventTrigger  RoutedEvent="Canvas.Loaded">
  15.         <BeginStoryboard>
  16.             <Storyboard>
  17.                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mark1_canvas_angle" 
  18.                                            Storyboard.TargetProperty="Angle"
  19.                                            Duration="0:0:20" >
  20.                     <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
  21.                     <LinearDoubleKeyFrame KeyTime="0:0:20" Value="360"/>
  22.                 </DoubleAnimationUsingKeyFrames>
  23.             </Storyboard>
  24.         </BeginStoryboard>
  25.     </EventTrigger>
  26.     <EventTrigger  RoutedEvent="Canvas.Loaded">
  27.         <BeginStoryboard>
  28.             <Storyboard>
  29.                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mc_angle" 
  30.                                            Storyboard.TargetProperty="Angle"
  31.                                            Duration="0:0:20" >
  32.                     <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
  33.                     <LinearDoubleKeyFrame KeyTime="0:0:20" Value="360"/>
  34.                 </DoubleAnimationUsingKeyFrames>
  35.             </Storyboard>
  36.         </BeginStoryboard>
  37.     </EventTrigger>
  38. </Canvas.Triggers>
mikeo_410@hotmail.com