mikeo_410

 IFRAMEタグによるXAMLファイルの参照 

XAMLファイルを、HTMLのIFRAMEタグで、参照しています。

  ブラウザが直接XAMLファイルを開く場合と同様にLoose XAML と考えて良いようです。
  SilverlightのコンポーネントがXAMLを開くのと異なり、WPFのXAMLの機能になります。

  利点は、
  １．WPFと同等の機能になります。Viewport3Dなども記述できます。
  ２．HTML編集時にも、表示を見ながらHTML部分の編集ができます。

  欠点は、
  １．HTMLエディタ(HTMLDo)で、セキュリティ関連の警告が表示される。
  ２．HTMLとは別ファイルなので、スクリプトとして埋め込むよりは遅い。

  ※MIME タイプ Application/xaml+xml とクロスドメインの問題は現状無いように見えます。

    IFRAME は、以下のようです。

  1. <iframe height="300" src="mirror2.xaml"></IFRAME>

  HTMLDoエディタでは、<iframe src="..." /> と書かないことが重要でした。
  終了タグ<IFRAME>を独立して記述しないと、それ以降が表示されませんでした。
  以降をIFRAME未サポートブラウザ用の代替文字と見なしているのでは。 


 DataToriggerを使った入力のサンプル

 3D座標値からの描画サンプル(Viewport3D)

１．サンプル・プログラム

１．１．サンプルプログラムを作ってわかったこと

  HTMLファイル中に、XAMLをスクリプトとして記述した場合は、Silverlight のコンポーネントに渡されることから来る制約があります。
  IFRAMEを使う場合は、制限はなく、WPFのXAMLの能力になります。

  1. IFRAMEを使う場合は、バインディングが使える。開始時の座標など共通の初期値を1箇所に書くことができる。これは、初期値であって、実行中に同じ変数を参照するようにできるわけではない。
  2. トリガー条件に、SourceNameプロパティが使用できる。Silverlight の場合は、トリガーを発生するエレメントに書く以外にない。
  3. DataTorigger を使うと、チェックボックスのチェック状態などをトリガにできる。
  4. 以上の差は、おそらく、未コンパイルのXAMLを処理することを Silverlightのコンポーネントは目的にしていないためだと考える。（ブラウザサイドでのコンパイル）
  5. Viewport3Dなど、Silverlight にないものは Silverlight のコンポーネントは実行できない。

１．２．サイクロイドのサンプル

  HTMLファイル中に、XAMLをスクリプトとして記述したサンプルと同じ内容です。STARTボタンで実行できる点が異なります。

１．２．１．数式部分

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

１．２．２．図形部分

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

１．２．３．XAMLスクリプト

  最初が Page になっています。IFRAMEにはナビゲーションボタンが表示されるもののようです。Page で ShowsNavigationUI を 偽に設定すると、これを抑止できます。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <Page ShowsNavigationUI="false"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.      Background="Bisque" Width="300" Height="360">
  6.     <StackPanel>
  7.         <Canvas Width="220" Height="220">
  8.             <Canvas.RenderTransform>
  9.                 <MatrixTransform Matrix="50 0 0 -50 110 110"/>
  10.             </Canvas.RenderTransform> 
  11.                 ：
  12.                 ： 図形部分の記述
  13.                 ：
  14.         </Canvas>
  15.         <Canvas>
  16.             <Canvas.RenderTransform>
  17.                 <MatrixTransform Matrix="1 0 0 1 -70 -70"/>
  18.             </Canvas.RenderTransform> 
  19.                 ：
  20.                 ： 数式部分の記述
  21.                 ：
  22.         </Canvas>  
  23.         // STARTボタン
  24.         <Button Content="START" Name="button1"/>
  25.         <StackPanel.Triggers>  
  26.             ：
  27.             ： イベントの検出と処理
  28.             ：
  29.         </StackPanel.Triggers>
  30.     </StackPanel>
  31. </Page>
１．２．４．図形部分

図形を3つ用意します。

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

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

１．２．５．イベントの検出と処理

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

  1. マークを、「転円の中心」を中心に2回転(720°)
  2. マークの乗った Canvas を、原点を中心に360°回転
  3. 転円を、原点を中心に360°回転
  1. <EventTrigger SourceName="button1" RoutedEvent="Button.Click">
  2.     <BeginStoryboard>
  3.         <Storyboard>
  4.             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mark1_angle" 
  5.                                            Storyboard.TargetProperty="Angle"
  6.                                            Duration="0:0:20" >
  7.                 <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
  8.                 <LinearDoubleKeyFrame KeyTime="0:0:20" Value="720"/>
  9.             </DoubleAnimationUsingKeyFrames>
  10.         </Storyboard>
  11.     </BeginStoryboard>
  12. </EventTrigger>
  13. <EventTrigger SourceName="button1" RoutedEvent="Button.Click">
  14.     <BeginStoryboard>
  15.         <Storyboard>
  16.             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mark1_canvas_angle" 
  17.                                            Storyboard.TargetProperty="Angle"
  18.                                            Duration="0:0:20" >
  19.                 <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
  20.                 <LinearDoubleKeyFrame KeyTime="0:0:20" Value="360"/>
  21.             </DoubleAnimationUsingKeyFrames>
  22.         </Storyboard>
  23.     </BeginStoryboard>
  24. </EventTrigger>
  25. <EventTrigger SourceName="button1" RoutedEvent="Button.Click">
  26.     <BeginStoryboard>
  27.         <Storyboard>
  28.             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mc_angle" 
  29.                                            Storyboard.TargetProperty="Angle"
  30.                                            Duration="0:0:20" >
  31.                 <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
  32.                 <LinearDoubleKeyFrame KeyTime="0:0:20" Value="360"/>
  33.             </DoubleAnimationUsingKeyFrames>
  34.         </Storyboard>
  35.     </BeginStoryboard>
  36. </EventTrigger>

１．３．DataToriggerを使った入力のサンプル

  下の段の TextBox のスタイルをリソースに宣言して、ここでチェックボックスの変化をトリガします。

  1. <Page ShowsNavigationUI="false"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  4.     <Grid Background="Bisque" Width="200" Height="100">
  5.         <Grid.Resources>
  6.             <Style x:Key="tb2_style" TargetType="TextBox">
  7.                 <Style.Triggers>
  8.                     <DataTrigger Binding="{Binding ElementName=cb1, Path=IsChecked}" Value="True">
  9.                         <Setter Property="Text" Value="{Binding ElementName=tb1, Path=Text}" />
  10.                     </DataTrigger>
  11.                     <DataTrigger Binding="{Binding ElementName=cb1, Path=IsChecked}" Value="False">
  12.                         <Setter Property="Text" Value="" />
  13.                     </DataTrigger>
  14.                 </Style.Triggers>
  15.             </Style>
  16.         </Grid.Resources>
  17.         <StackPanel Margin="8,8,8,8">
  18.             <DockPanel>
  19.                 <Label Content="入力：" />
  20.                 <TextBox Name="tb1" />
  21.             </DockPanel>
  22.             <TextBox Name="tb2" Style="{StaticResource tb2_style}" />
  23.             <CheckBox Name="cb1" Content="上の段から下の段にコピー" />
  24.         </StackPanel>
  25.     </Grid>
  26. </Page>

１．４．3D座標値からの描画サンプル

  1. カメラ
  2. 光源
  3. 物体

  を、記述します。物体のジオメトリは別のファイルになっています。Blend の球を XAMLでエクスポートしたものです。

  1. <Page ShowsNavigationUI="False"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  4.     <!--リソース-->
  5.     <Page.Resources>
  6.         <ResourceDictionary>
  7.             <ResourceDictionary.MergedDictionaries>
  8.                 <!--ジオメトリを別のXAMLファイルから読み込む-->
  9.                 <ResourceDictionary Source="sphere.xaml"/>
  10.             </ResourceDictionary.MergedDictionaries>
  11.         </ResourceDictionary>
  12.     </Page.Resources>
  13.     <Grid>
  14.         <Viewport3D x:Name="viewport1">
  15.             <Viewport3D.Camera><!--カメラ-->
  16.                 <PerspectiveCamera 
  17.                      LookDirection="-1, -1, -1" Position="2,2,2" FieldOfView="45"/>
  18.             </Viewport3D.Camera>
  19.             <ModelVisual3D>
  20.                 <ModelVisual3D.Content><!--ライト-->
  21.                     <DirectionalLight Color="White" Direction="1,-1,-1"/>
  22.                 </ModelVisual3D.Content>
  23.             </ModelVisual3D>
  24.             <ModelVisual3D>
  25.                 <ModelVisual3D.Content>
  26.                     <!--リソースで定義したジオメトリを使用-->
  27.                     <GeometryModel3D Geometry="{StaticResource _sphere}">
  28.                         <GeometryModel3D.Material>
  29.                             <MaterialGroup>
  30.                                 <!--物体の色-->
  31.                                 <DiffuseMaterial Brush="Yellow"/>
  32.                                 <!--物体の発光-->
  33.                                 <EmissiveMaterial Brush="Gray"/>
  34.                                 <!--ハイライト-->
  35.                                 <SpecularMaterial Brush="White" SpecularPower="10"/>
  36.                             </MaterialGroup>
  37.                         </GeometryModel3D.Material>
  38.                     </GeometryModel3D>
  39.                 </ModelVisual3D.Content>
  40.             </ModelVisual3D>
  41.         </Viewport3D>
  42.     </Grid>
  43. </Page>

  Blend で出力した XAML を ResourceDirectionary にします。

  1. <ResourceDictionary
  2.   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  3.   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  4.     <MeshGeometry3D x:Key="_sphere"
  5.         Positions="-0.000001 -0.000001 -1.0 ...
  6.             ：
  7.     </MeshGeometry3D>
  8. </ResourceDictionary>
mikeo_410@hotmail.com