mikeo_410

XAMLの利用局面

１．XAMLを使う局面

  1. XAMLを直接ブラウザで開く
  2. XAMLをHTMLのiframeタグで開く
  3. WPFアプリケーション
  4. WPFブラウザアプリケーション
  5. Silverlight

  Windows上でWPFアプリケーションを使うのは旧来のEXEを作る開発方法と同様で特に制約はありません。
  それ以外の方法は、ブセットだったり、パーミッションで制限されていたりします。

２．ファイルとの関係

  ブラウザは、XAMLを開くことができます。

  1. XAML ページ
  2. HTMLにホストされるXAMLファイル
  3. HTMLに埋め込まれたXAMLスクリプト

  HTMLマークアップのページで使われるXAMLの種類をCSS のときの呼び方を倣って、以下のようにします。

  1. 外部参照
    異なるXAMLファイルを参照する。
  2. 埋め込み
    同じファイルに記述する。<SCRIPT>タグで記述する。
  3. インライン
    XAML以外の文の一部に記述。これは、あることかどうかわかりません。<A>タグ内に、JavaScriptが書けるので可能性があるのかと考えました。

３．ドメインとの関係

  だれの何を守るのか良くわかりませんが気が付いたこと。

  1. クロスドメイン
    スクリプトは最初に開いたファイルと同じドメインにあることが前提のようです。
  2. 直接、パソコン内のXAMLファイルを開くと警告が出る
  3. 適切なMIMEタイプ
    サーバーは、設定をしないと適切なMIMEタイプを付けないものらしい。
    .htaccess が有効なら、
    Addtype application/xaml+xml .xaml

４．利用局面

４．１．Silverlightのランタイム

  SilverlightもWPFも同じ名前の名前空間のクラスを使ってプログラミングしますが、異なるものだと考えたほうが正しいようです。
  Silverlightは、Silverlightのランタイムがポートされた環境ならマルチプラットフォームでブラウザを選ばず実行することが目的で、.Net Frameworkのサブセットとなっているものと思います。
  ただし、サブセットと言っても、名前空間やクラスが削除されているわけではありません。概ねコーディング上は問題なく、実行時にエラーになるような制限方法になっています。 
  Fileアクセス、ネットワーク、描画(Pixelを直接操作するようなブラウザに機能のないもの、３D)は部分的にしか利用できません。
  XAMLで記述する範囲では、描画の差異があります。 

  1. 使えるイメージファイルが、png、jpgなどに制限される。bmpは表示できない。
  2. 直接XAMLの話ではないが、ビットマップのPixelの操作ができない。
  3. Viewport3dなど、3Dのジオメトリデータを描画できない。
  4. Media3D名前空間にMatrix3Dがあり、本のページを開いた感じの効果（斜めから見る感じの効果）は有効
  5. Colorsのメンバも圧倒的に少なくない。ただし、XAMLエディタの入力支援では、WPFと同じものが表示される。ブラウザで共通のものが、Colorsにあるものと思うが、実際にはブラウザがサポートしていて、WPFのカラーを記述して問題はないようだ。

４．２．Loose XAML

  マークアップ記述だけのXAMLファイルは、ブラウザで表示できます。
  直接 URL で指定して開くか、iframe タグのソースに指定します。
  この場合は、.Net Framewworkが使われ、機能的な制限はありません。Viewport3Dなども利用できます。
  ただし、パーミッションの制約を受けます。
  XmlDataProviderを使って、公開されているWEB APIからXMLを得ようとしましたが、WebPermissionが設定されていないと言ったエラーになります。
  これは、機能がないわけではないので、サーバ、クライアントに適切な設定をすれば動作させられるのだと思います。
  しかし、ホームページの一部としての利用する場合には制約になることに変わりありません。

４．３．プログラミングで使う

  WPFやSilverlightのプログラミングでのXAML。

４．３．１．XAMLに書くか、ビハインドコードに書くか
  1. 全てをXAMLマークアップでプログラミングすることはできない。
  2. ビハインドコードですべて記述できる。

  のだと、思います。
  ファイルとして、XAMLファイルにコード（C#など）を含めることはできます。

  Visual Studioの都合上、自動的に作成されるXAMLファイルを使い、ビハインドコードで全て記述するのがおそらくプログラムの管理上は優れていると考えます。
  ビジュアルな部分とロジックを分離すると言っても、ユーザコントロールをXAMLで参照するだけでもXAMLファイルの書き換えを生じます。
  ただし、何もないところからビハインドコードで記述することは、学習方法としては無理があります。コードスニペットでXAMLを書いて、クラス名やプロパティ名を知ることは必須のことです。

4.3.2．アプリケーションを作ってみる

  アプリケーションらしいものを制約のないWPFで作成して見てみます。

  お菓子の虜 Web API があたので、データとして利用させていただきます。
  あくまでもプログラミングの説明のためですのでご容赦を。

４．３．２．１．WPFアプリケーション

  WPFアプリケーションは、特別な制限なく自身のパソコンで動作するプログラムが作れます。旧来のEXEを作る開発方法との差異は、ハードウエアやファームウエアではなく、.Net Frameworkを前提にした実行形式（CPU依存でない）が作られる点です。

  まず、WPFで作ってみます。

  左上に検索条件の入力用にTextBoxを置き、「検索」ボタンを付けました。（検索条件は「ひらがな」）
  起動時は、「みかん」を検索した状態で表示されます。表示画面の左はListBoxで、右はイメージです。

  検索後の画面操作は、XAMLで記述できます。ListBoxから製品を選ぶと、右のイメージが変わると言った処理はビハインドコードの記述なしで動作します。
  検索条件として指定された文字列をURLエンコードし、再検索するためにビハインドコードを記述しました。再建策そのものは、XmlDataProviderのSourceプロパティに新たなURLをセットするだけです。これで、全て更新されます。


（１）Window1.xaml
  1. <Window x:Class="wpf_okashi1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="WPFサンプル(お菓子検索)" Height="400" Width="640">
  5.     <!--ListBox部分のテンプレート-->
  6.     <Window.Resources>
  7.         <DataTemplate x:Key="ListItemTemplate">
  8.             <Border Margin="2" Height="100"
  9.                     BorderBrush="Blue" BorderThickness="1" CornerRadius="3">
  10.                 <Grid>
  11.                     <Grid.ColumnDefinitions>
  12.                         <ColumnDefinition Width="100" />
  13.                         <ColumnDefinition Width="50" />
  14.                         <ColumnDefinition Width="180" />
  15.                     </Grid.ColumnDefinitions>
  16.                     <!--写真-->
  17.                     <Border Grid.Column="0" Margin="2" Background="LightYellow" 
  18.                                 BorderBrush="Blue" BorderThickness="1" CornerRadius="3">
  19.                         <Image Margin="2,2,2,2" Source="{Binding XPath=image}" 
  20.                                Stretch="Uniform"/>
  21.                     </Border>
  22.                     <!--項目名-->
  23.                     <StackPanel Grid.Column="1">
  24.                         <TextBlock Height="20">メーカー：</TextBlock>
  25.                         <TextBlock Height="40">品名：</TextBlock>
  26.                         <TextBlock Height="20">区分：</TextBlock>
  27.                         <TextBlock Height="20">タイプ：</TextBlock>
  28.                     </StackPanel>
  29.                     <!--項目値-->
  30.                     <StackPanel Grid.Column="2">
  31.                         <TextBlock Height="20" Text="{Binding XPath=maker}"/>
  32.                         <TextBlock Height="40" Text="{Binding XPath=name}"
  33.                                    TextWrapping="Wrap" FontSize="16" 
  34.                                    Foreground="DarkRed" />
  35.                         <TextBlock Height="20" Text="{Binding XPath=tag}"/>
  36.                         <TextBlock Height="20" Text="{Binding XPath=type}"/>
  37.                     </StackPanel>
  38.                 </Grid>
  39.             </Border>
  40.         </DataTemplate>
  41.     </Window.Resources>
  42.     <!--表示-->
  43.     <Grid x:Name="grid1" Margin="8" Background="Tan">
  44.         <!--データプロバイダ-->
  45.         <Grid.DataContext>
  46.             <XmlDataProvider x:Name="xmlDataProvider1"
  47.              Source="http://www.sysbird.jp/toriko/api/?apikey=guest&amp;keyword=%E3%81%BF%E3%81%8B%E3%82%93"
  48.              XPath="okashinotoriko/item"/>
  49.         </Grid.DataContext>
  50.         <!--表示領域を左右分割-->
  51.         <Grid.ColumnDefinitions>
  52.             <ColumnDefinition Width="360" />
  53.             <ColumnDefinition Width="*" />
  54.         </Grid.ColumnDefinitions>
  55.         <!--左にListBox-->
  56.         <Grid Grid.Column="0">
  57.             <Grid.RowDefinitions>
  58.                 <RowDefinition Height="32"/>
  59.                 <RowDefinition Height="*"/>
  60.             </Grid.RowDefinitions>
  61.             <!--検索条件入力-->
  62.             <DockPanel Grid.Row="0">
  63.                 <TextBox x:Name="string_part1" FontSize="16" Width="300" KeyDown="string_part1_KeyDown" ></TextBox>
  64.                 <Button Click="Button_Click">検索</Button>
  65.             </DockPanel>
  66.             <!--ListBox-->
  67.             <ListBox Grid.Row="1" ItemsSource="{Binding}" 
  68.                      ItemTemplate="{DynamicResource ListItemTemplate}"
  69.                      IsSynchronizedWithCurrentItem="True" />
  70.         </Grid>
  71.         <!--右に大きな商品画像-->
  72.         <Grid Grid.Column="1">
  73.             <Grid.RowDefinitions>
  74.                 <RowDefinition Height="100"/>
  75.                 <RowDefinition Height="*"/>
  76.             </Grid.RowDefinitions>
  77.             <!--コメント-->
  78.             <TextBlock Grid.Row="0" TextWrapping="Wrap" Text="{Binding XPath=comment}" />
  79.             <!--商品画像-->
  80.             <Image Grid.Row="1" Source="{Binding XPath=image}" Grid.Column="1" />
  81.         </Grid>
  82.     </Grid>
  83. </Window>
（２）Window1.xaml.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Data;
  8. using System.Windows.Documents;
  9. using System.Windows.Input;
  10. using System.Windows.Media;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Navigation;
  13. using System.Windows.Shapes;
  15. using System.Web;
  16. using System.Diagnostics;
  18. namespace wba_okashi1
  19. {
  20.     /// <summary>
  21.     /// Page1.xaml の相互作用ロジック
  22.     /// </summary>
  23.     public partial class Page1 : Page
  24.     {
  25.         public Page1()
  26.         {
  27.             InitializeComponent();
  28.         }
  30.         void Search()
  31.         {
  32.             if (string_part1.Text.Length <= 0) return;
  33.             string url = "http://www.sysbird.jp/toriko/api/?apikey=guest&keyword=";
  34.             url += HttpUtility.UrlEncode(string_part1.Text);//検索条件を付加
  35.             string_part1.Text = "";
  36.             Debug.WriteLine(url);
  37.             xmlDataProvider1.Source = new Uri(url);
  38.         }
  39.         private void Button_Click(object sender, RoutedEventArgs e)
  40.         {
  41.             Search();
  42.         }
  44.         private void string_part1_KeyDown(object sender, KeyEventArgs e)
  45.         {
  46.             Search();
  47.         }
  48.     }
  49. }
４．３．２．２．WPFブラウザ・アプリケーション

  WPFブラウザ・アプリケーションは、ブラウザで開かれます。XAMLで指定するPageのサイズは、ブラウザのサイズを示すわけではないので、レイアウトについては多少WPFと異なることになりますが、ほとんど同じコードで動作します。

  プラグインによりますが、FireFoxでも表示できます。

  ブラウザで実行するプログラムなのでセキュリティの問題が生じます。

  このプログラムは、XmlDataProviderを使っており、Webにアクセスします。このため、WebPermission例外が発生して、そのままでは実行できませんでした。


  プロジェクトのプロパティで「セキュリティ」を選んで、WebPermissionを「必要」に設定しました。

このプログラムを、サーバーに配置すると実行できません。ローカルにしか実行できませんでした。

  おそらく、特定のパソコンで実行するなら設定方法があるのだと思います。

  希望は、不特定多数に見てもらうことなので、この方法は利用できないことになります。


（１）Page1.xaml 
  1. <Page x:Class="wba_okashi1.Page1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="WBAサンプル(お菓子検索)">
  5.     <!--ListBox部分のテンプレート-->
  6.     <Page.Resources>
  7.         <DataTemplate x:Key="ListItemTemplate">
  8.             <Border Margin="2" Height="100"
  9.                     BorderBrush="Blue" BorderThickness="1" CornerRadius="3">
  10.                 <Grid>
  11.                     <Grid.ColumnDefinitions>
  12.                         <ColumnDefinition Width="100" />
  13.                         <ColumnDefinition Width="50" />
  14.                         <ColumnDefinition Width="180" />
  15.                     </Grid.ColumnDefinitions>
  16.                     <!--写真-->
  17.                     <Border Grid.Column="0" Margin="2" Background="LightYellow" 
  18.                                 BorderBrush="Blue" BorderThickness="1" CornerRadius="3">
  19.                         <Image Margin="2,2,2,2" Source="{Binding XPath=image}" 
  20.                                Stretch="Uniform"/> 
  21.                     </Border>
  22.                     <!--項目名-->
  23.                     <StackPanel Grid.Column="1">
  24.                         <TextBlock Height="20">メーカー：</TextBlock>
  25.                         <TextBlock Height="40">品名：</TextBlock>
  26.                         <TextBlock Height="20">区分：</TextBlock>
  27.                         <TextBlock Height="20">タイプ：</TextBlock>
  28.                     </StackPanel>
  29.                     <!--項目値-->
  30.                     <StackPanel Grid.Column="2">
  31.                         <TextBlock Height="20" Text="{Binding XPath=maker}"/>
  32.                         <TextBlock Height="40" Text="{Binding XPath=name}"
  33.                                    TextWrapping="Wrap" FontSize="16" 
  34.                                    Foreground="DarkRed" />
  35.                         <TextBlock Height="20" Text="{Binding XPath=tag}"/>
  36.                         <TextBlock Height="20" Text="{Binding XPath=type}"/>
  37.                     </StackPanel>
  38.                 </Grid>
  39.             </Border>
  40.         </DataTemplate>
  41.     </Page.Resources>
  42.     <!--表示-->
  43.     <Grid x:Name="grid1" Margin="8" Background="Tan">
  44.         <!--データプロバイダ-->
  45.         <Grid.DataContext>
  46.             <XmlDataProvider x:Name="xmlDataProvider1"
  47.              Source="http://www.sysbird.jp/toriko/api/?apikey=guest&amp;keyword=%E3%81%BF%E3%81%8B%E3%82%93"
  48.              XPath="okashinotoriko/item"/>
  49.         </Grid.DataContext>
  50.         <!--表示領域を左右分割-->
  51.         <Grid.ColumnDefinitions>
  52.             <ColumnDefinition Width="360" />
  53.             <ColumnDefinition Width="*" />
  54.         </Grid.ColumnDefinitions>
  55.         <!--左にListBox-->
  56.         <Grid Grid.Column="0">
  57.             <Grid.RowDefinitions>
  58.                 <RowDefinition Height="32"/>
  59.                 <RowDefinition Height="*"/>
  60.             </Grid.RowDefinitions>
  61.             <!--検索条件入力-->
  62.             <DockPanel Grid.Row="0">
  63.                 <TextBox x:Name="string_part1" FontSize="16" Width="300" KeyDown="string_part1_KeyDown" ></TextBox>
  64.                 <Button Click="Button_Click">検索</Button>
  65.             </DockPanel>
  66.             <!--ListBox-->
  67.             <ListBox Grid.Row="1" ItemsSource="{Binding}" 
  68.                      ItemTemplate="{DynamicResource ListItemTemplate}"
  69.                      IsSynchronizedWithCurrentItem="True" />
  70.         </Grid>
  71.         <!--右に大きな商品画像-->
  72.         <Grid Grid.Column="1">
  73.             <Grid.RowDefinitions>
  74.                 <RowDefinition Height="80"/>
  75.                 <RowDefinition Height="*"/>
  76.             </Grid.RowDefinitions>
  77.             <!--コメント-->
  78.             <TextBlock Grid.Row="0" TextWrapping="Wrap" Text="{Binding XPath=comment}" />
  79.             <!--商品画像-->
  80.             <Image Grid.Row="1" Source="{Binding XPath=image}" Grid.Column="1" />
  81.         </Grid>
  82.     </Grid>
  83. </Page>
（２）Page1.xaml.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Data;
  8. using System.Windows.Documents;
  9. using System.Windows.Input;
  10. using System.Windows.Media;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Navigation;
  13. using System.Windows.Shapes;
  15. using System.Web;
  16. using System.Diagnostics;
  18. namespace wba_okashi1
  19. {
  20.     /// <summary>
  21.     /// Page1.xaml の相互作用ロジック
  22.     /// </summary>
  23.     public partial class Page1 : Page
  24.     {
  25.         public Page1()
  26.         {
  27.             InitializeComponent();
  28.         }
  30.         void Search()
  31.         {
  32.             if (string_part1.Text.Length <= 0) return;
  33.             string url = "http://www.sysbird.jp/toriko/api/?apikey=guest&keyword=";
  34.             url += HttpUtility.UrlEncode(string_part1.Text);//検索条件を付加
  35.             string_part1.Text = "";
  36.             Debug.WriteLine(url);
  37.             xmlDataProvider1.Source = new Uri(url);
  38.         }
  39.         private void Button_Click(object sender, RoutedEventArgs e)
  40.         {
  41.             Search();
  42.         }
  44.         private void string_part1_KeyDown(object sender, KeyEventArgs e)
  45.         {
  46.             Search();
  47.         }
  48.     }
  49. }
アルパイン 神奈川 不動産 チラシ印刷 相続税　計算 千葉　不動産