[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]] ...工事中... * 目次 [#p4d7e1a8] #contents *概要 [#r7767a18] XAMLについて。 XAMLは、 -WPF で XAML で書く。 -Siverlight を XAML で書く。 -Windows Phone 8.1 アプリ -Windows Store App -Xamarin.Forms -WFのワークフロー定義 などで使用されている。 ここでは、WPF / Siverlight 開発におけるXAMLの利用方法を説明する。 **参考 [#h7fea6b5] -WPF は死んだのか? Moonmile Solutions Blog~ http://www.moonmile.net/blog/archives/6156 >UI を XML 形式で作る、そして MVVM パターンを使ってプロパティとイベントを連結させる(ここの分離は Rx を使っても同じ、あるいは直接コードビハイドでも同じ)パターンとしては、 -Windows Store App を XAML で書く。 -Windows Phone 8.1 アプリを XAML で書く。 -Xcode で iPhone/iPad アプリを Storyboard で書く。 -Android で axml で書く。 -Xamarin.iOS/Android で、storyboard, axml で書く。 -Xamarin.Forms で、Xamarin製XAMLで書く。 -WPF で XAML で書く。 -Siverlight を XAML で書く。 *WPF/Silverlight [#z122358b] **概要 [#x76efea7] WPFは、.NET Framework 3.0で新しく提供され、Windows Vistaで全面的に採用された、リッチでインタラクティブなUIアプリケーションを開発・実行するためのUIサブシステム(クラス ライブラリ・UIコントロールのセットを含むランタイム・フレームワーク)。Windows VistaのUIサブシステムにはWPFが全面的に採用されており、今後のWindowsのUIアプリケーション開発の標準技術として利用できる。 -[[WPF]] -[[Silverlight]] **特徴 [#w6f7a746] WPF / Silverlightは、高速なグラフィックスではなく、 -メディア リッチ:音声・動画の組み合わせ -インタラクティビティー:画像や音声などによって示される内容に応答する操作性 を実現するUIサブシステムであるため、Direct3D、DirectShow、Media Foundationなどを使用して開発する3Dゲームや高品質なビデオ再生アプリの開発には向かないが、業務アプリケーション開発に必要な標準コントロールを備えており、従来の業務アプリケーションにリッチでインタラクティブな効果を追加することも可能である。 ***開発環境 [#w8b19d45] WPF / Silverlight は、Visual Studio 2008以降や、Expression Blendを使用して開発が可能。Expression Blendはデザイナ向けツールであり、VSに無い以下の機能を有している。 -GUIを使用した図形オブジェクトの作成・編集 -GUIを使用したグラデーションの作成・編集 -GUIを使用したアニメーションの作成・編集 -,etc. ***実行環境 [#t29e32be] WPFは、.NET Framework 3.0以上でサポートされており、Windows XPでも動作可能である。ただし、Windows XPは、Windows Vistaとディスプレイ ドライバ モデルが異なるため、条件によっては、GPUによるハードウェア レンダリングが使用できず、ソフトウェア レンダリングになることでCPUへの負荷が増えたり、見え方が若干変わったりする場合もある。 WPF/SilverlightのOS要件 |項番|OS|>|>|WPF(.NET Framework)|Silverlight 3|Silverlight 4|h |||3.0|3.5|4.0|||h |1|Windows 7|-|○|○|○|○| |2|Windows Server 2008 R2|-|○|○|○|○| |3|Windows Vista|○|○|○|○|○| |4|Windows Server 2008|○|○|○|○|○| |5|Windows XP|○|○|○|○|○| |6|Windows Server 2003|○|○|○|○|○| |7|Windows 2000 (SP4)|-|-|-|○|-| |8|Mac OS X 10.4.11 以上(Intelベース)|- |-|-|○|○| ハードウェア要件、追加のソフトウェア要件を含めた詳細は以下を参照 -.NET Framework システム要件~ http://msdn.microsoft.com/ja-jp/library/8z6watww.aspx -Silverlight page~ http://www.microsoft.com/japan/silverlight/requirements.aspx -[[WPF]] -[[Silverlight]] *開発方法 [#g62a273d] WPF / Silverlightアプリケーションの開発には以下のような特徴がある。 -WPF / Silverlightでは、P層のUI部分を(HTMLのようなXMLベースのマークアップ言語である)XAMLをVS・Expression Blendなどのツールを使用して記述し、イベントなどのプログラム部分はC#、VBを使用して開発する(Sliverlight 1.0はJavaScriptのみ対応)。UI部分とプログラム部分を分離して記述・実装できる。 -ASP.NETアプリケーション(Webフォーム)のHTML + ASPタグのように、マークアップ言語であるXAMLから、UI要素が生成され、分離クラス(コードビハインド)にイベント処理などの業務処理を実装するという、従来からのイベント・ドリブン、UIコンポーネントベースのプログラミング・モデルを継承するUIテクノロジ。 また、XAMLは、XMLをベースとしており各要素からツリー構造のCLRオブジェクトをインスタンス化できる。このため、XAMLは、「ツリー構造のCLRオブジェクトをインスタンス化するためのマークアップ言語」と説明することも可能である 。XAMLによるCLRオブジェクト生成の例は、以下を参考にできる。 -連載:WPF入門:第1回 いよいよWPFの時代。WPFの習得を始めよう (1/3) - @IT~ http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html -連載:WPF入門:第2回 WPFとXAMLの関係とは? XAMLの基礎を学ぶ - @IT~ --http://www.atmarkit.co.jp/fdotnet/chushin/introwpf_02/introwpf_02_01.html --http://www.atmarkit.co.jp/fdotnet/chushin/introwpf_02/introwpf_02_02.html --http://www.atmarkit.co.jp/fdotnet/chushin/introwpf_02/introwpf_02_03.html **UI部分とプログラム部分を分離して記述・実装 [#eb070dc4] UI部分にXAML、プログラム部分にCLR言語と、UI・プログラム部分を分離して記述・実装できるので、Webアプリケーションと同様に画面デザイン(画面モックアップ開発)とプログラム開発の分業が可能である。例えば、UI開発ツールに特化したExpression Blendで、VSソリューション(プロジェクト)ファイルをそのまま開き、XAMLを直接作成・編集することもできる。 WPFにおける分離コードを実現するためには、従来のWindowsフォームや、ASP.NETアプリケーション(Webフォーム)と同様に、分離クラス(コードビハインド)と、.NET Framework 2.0からサポートされたパーシャル クラスが使用される。XAMLファイルから分離クラス(コードビハインド)ファイルを関連付けるためには、XAML上で「x:Class」、「x:Subclass」、「x:ClassModifier」などのディレクティブを定義する。なお、「x:Code」ディレクティブを定義すればXAML上にインラインでコードを実装することもできる。また、分離クラス(コードビハインド)ファイルから、XAMLファイルで生成したCLRオブジェクトにアクセスするには、「x:Name」ディレクティブ、または、Name属性を付与する必要がある。これらのディレクティブについては、「[[ディレクティブ>#cd4daa01]]」を参照のこと。 -WPF における分離コードと XAML~ https://msdn.microsoft.com/ja-jp/library/aa970568.aspx ***WPFにおけるビルド アクション [#jba5609b] 中間生成物であるパーシャル クラスは、ビルド アクション = Pageに設定されている(WindowやPageの)XAMLから生成され、分離クラス(コードビハインド)と統合されてビルドされる。 -WPF アプリケーション (WPF) のビルド~ http://msdn.microsoft.com/ja-jp/library/aa970678.aspx **プログラム部分は、VB・C#を使用して実装 [#b338c3aa] ***XAMLの記述方法 [#da73b2ff] テキスト ベースの記述、デザイナを使用した記述が可能。 -Expression Blendを使用して --テキスト ベースの記述(IntelliSenseを活用) --デザイナを使用した記述 >が可能。 -従来の[[Windows Forms]]と同様にVSを使用して、 --テキスト ベースの記述(IntelliSenseを活用) --デザイナを使用した記述 >が可能 。 >通常は、VSを利用すればIDE機能としては事足りるが、Expression Blendでしかできない「[[デザイナ向け機能>#y6378ada]]」を使用する場合は、Expression Blendを使用する。 ***プログラムの実装方法 [#tfbe604f] WPF / Silverlightアプリケーション開発は、C#、VBなどの、標準的なプログラム言語を使用できるため開発要員を確保しやすい。また、VSデザイナを使用すれば、Windowsフォーム、ASP.NETアプリケーション(Webフォーム)と同様な開発が可能であることが分かる。また、WPF / Silverlightの双方で、ランタイムは異なるもののUIサブシステムのフレームワークの基本的な構造については同じものを共用できる。このUIサブシステムのフレームワークを習得すれば、双方の開発が可能となる(ただし、双方の違いは理解しておく必要がある。「[[Silverlightについて>#m890bbf8]]」を参照)。ただし、高度な処理を実装する場合や、トラブルシュートを行う場合は、UIサブシステムのフレームワーク、XAMLの読み方・書き方をある程度は知っておく必要がある。しかし、これらの仕様は大きく、複雑で把握するのに時間がかかる。この点に関して、WPF / Silverlightアプリケーションの開発は、敷居が高いと言える。 *WPFについて [#u20856d5] **WPFの機能 [#i739b5f5] ***サポートする機能 [#t4e8816f] -グラフィック --2D/3Dグラフィック・レンダラー~ 従来は、2D(図形、ブラシ、ペン)はGDI、3D (光源、カメラ位置情報)はDirect3D、ビデオはDirectShowなど、異なるAPI群を組み合わせていたが、WPFのUIフレームワークでは、これらを統一して扱えるようになっている。また、透過性をサポートしている。 --ベクタ グラフィック~ 従来のラスタ グラフィックから、画素密度非依存のベクタ グラフィックに変更され、画素密度の変更や、拡大・縮小をしても、画質が維持される。 ---WPF グラフィックス レンダリングの概要~ http://msdn.microsoft.com/ja-jp/library/ms748373.aspx --GPUレンダリング~ CPUによりビットマップ イメージのレンダリングを行っていた[[GDI, GDI+>GDI]]から、Direct3D経由でGPUを使用するレンダリングに変更されている。このため、CPU描画の他の技術より高速で、同時にCPUへの負担を最小限に抑えることができる。 -メディア --ドキュメント ---WPFドキュメント(XPSドキュメントやフロー ドキュメント)を表示できる 。 ---ドキュメント表示のためのFixedDocument、FlowDocumentコントロールが標準で提供されている。 --イメージ ---JPEGやGIFなど多様な形式のイメージを表示できる 。 ---静止画を表示するためのImageコントロールが標準で提供されている。 --ビデオ ---WMV、AVI、MPEGなど多様な形式のメディアを表示できる 。 ---動画や音声を再生するためのMediaElementコントロールが標準で提供されている。 -コントロール --コントロール種類~ Windowsの標準的なUIを実装するために必須である、基本的な組み込みコントロールが提供される。なお、HTMLと同様に、これらのコントロール類をXAMLで実装するため、コントロール単位にXAMLタグが用意されている。 --データ バインディング~ UIコントロールと、CLRオブジェクトの間をマッピングする。 --スタイル・テンプレート~ UIコントロールの「外観」や、イベント ハンドラ・イベント トリガなども含めた、UIコントロールの標準化・カスタマイズを行う。 -レイアウト~ パネルと呼ばれるレイアウト用コントロールを使用して、Windowsフォームのような座標レイアウト、HTMLのようなフロー レイアウト(ブロック化、格子分割)にも対応する。 -アニメーション~ イベント トリガ、トリガ アクション、ストーリ ボードを定義することで、UIコントロールなどの表示項目にタイムライン ベースのアニメーションの効果を付加できる。 -デプロイ~ ClickOnce、[[XBAP]]などのデプロイが可能。 ***相互運用性 [#x4bb8f7f] P/InvokeやRCW呼出しなどWin32連携技術を使用した相互運用が可能である。また、WindowsFormsHost、Hwndhost を使用することで、WindowsフォームやActiveXのUIコントロールを使用することも可能である(パフォーマンス的には不利)。 例えば、下記は、System.Windows.Forms名前空間のDataGridコントロールをホストするWPFの例である。 <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" Title="HostingWfInWpf" Height="150" Width="300" Loaded="Window_Loaded"> <Canvas> <WindowsFormsHost Name="windowsFormsHost1" Height="100" Width="275"> <wf:DataGrid x:Name="dataGrid1"/> </WindowsFormsHost> </Canvas> </Window> -参考 --MSDN > Windows Presentation Foundation > 移行と相互運用性 ---Windows フォームと WPF の相互運用性入力アーキテクチャ~ http://msdn.microsoft.com/ja-jp/library/ms742474.aspx ---WindowsFormsHost要素のレイアウトに関する考慮事項~ http://msdn.microsoft.com/ja-jp/library/ms744952.aspx ---チュートリアル:WPFでのWindowsフォーム複合コントロールのホスト~ http://msdn.microsoft.com/ja-jp/library/ms750944.aspx ---チュートリアル:WPFでの、XAMLを使用したWindowsフォーム コントロールのホスト~ http://msdn.microsoft.com/ja-jp/library/ms742875.aspx ---チュートリアル:WPFでのActiveXコントロールのホスト~ http://msdn.microsoft.com/ja-jp/library/ms742735.aspx --@IT > Insider.NET > .NET TIPS --WPF/XAMLでWindowsフォームを利用するには?[3.0,3.5,VS2008,C#、VB]~ http://www.atmarkit.co.jp/fdotnet/dotnettips/802winformonwpf/winformonwpf.html --WindowsFormでWPFコントロールを利用するには?[3.0,3.5,VS2008,C#、VB]~ http://www.atmarkit.co.jp/fdotnet/dotnettips/800wpfonwinform/wpfonwinform.html ***機能の制限事項 [#na2d384b] ***注意事項 [#h510ff35] **WPFのアーキテクチャ [#j150ee22] ***クラス階層 [#d6c9e5d1] ***要素ツリー [#p05c4c4f] ***WPFプロパティ システム [#u00b87e5] ***データ バインディング [#dac6f2bf] ***ルーティング イベント [#m1474b2f] **WPFのコントロール [#zc4549e3] ***標準コントロール [#te4c8df4] ***ユーザ コントロール [#m9448a6a] *[[XBAP]]について [#i035638c] *Silverlightについて [#m890bbf8] **機能 [#pf9c74f1] **セキュリティ [#mc2c78c1] *XAMLの書き方 [#a3e22e7c] **名前空間 [#t16cd178] **言語機能 [#n6cf5f58] ***ディレクティブ [#cd4daa01] ***マークアップ拡張 [#hc49ac25] **プロパティの設定方法 [#s1a3f3e9] ***プロパティ属性構文 [#q550d6b3] ***プロパティ要素構文 [#fa957fd3] ***型コンバータ [#ea68ba77] **コンテンツ構文 [#v6b58154] ***Contentプロパティ [#p8c8ba55] ***Itemsプロパティ [#gb58344b] **リソース [#ea30adb6] ***リソースの定義 [#l529fcbc] ***リソースの定義と参照 [#e615c6b1] **データ バインディング [#e915d7ec] ***データ バインディングの基礎 [#bbd76ce0] ***リソースとのデータ バインディング [#ac5a7f33] **レイアウト [#s77734ce] ***レイアウトのプロパティ [#j27354fe] ***パネルの種類と使い方 [#v124ba4f] **スタイルとテンプレート [#q002601b] ***スタイル [#fa989262] ***テンプレート [#bb58b780] **トリガ [#bbe9b16b] ***プロパティ トリガ [#ce79c6df] ***データ トリガ [#i5478c0f] ***イベント トリガ [#mb5243c8] *その他 [#a8b33d4f] **ビルティング ブロック クラス [#y720ef3a] ***Applicationオブジェクト [#bbdb37e4] ***Window画面 [#v51c2bf3] ***ナビゲーション フレームワーク [#f6820b24] ***Win32ダイアログ [#i5cf4c80] **入力支援 [#h12b43f1] ***メニュー・タスクバーとコマンド [#c6479c52] ***ツールチップ [#i36d28e8] ***IME制御 [#n5902de4] **デザイナ向け機能 [#y6378ada] ***様々なシェイプ [#s897a95f] ***グラデーション [#rc7056eb] ***トランスフォーム処理 [#h9e7aefe] ***アニメーション [#d0b80558] **MVVMデザイン パターン [#u05bda3c] **バリデーション [#w1cd4016] ***単項目のバリデーション [#k0141195] ***一覧のバリデーション [#x358d4f2] ***フォーカス制御 [#we3801e7] ***注意事項 [#ae4315b1] *略語一覧 [#pfc07c61] |項番|略語|正式名称|h |1|UI|User Interface| |2|D&D|Drag and Drop| |3|GDI|Graphics Device Interface| |4|GPU|Graphics Processing Unit| |5|JS|JavaScript| |6|Ajax|Asynchronous JavaScript + XML| |7|JSON|JavaScript Object Notation| |8|REST|Representational State Transfer| |9|POX|Plain Old XML| |10|SEO|Search Engine Optimization| |11|VS|Visual Studio| |12|VB|Visual Basic| |13|IE|Internet Explorer| |14|WMV|Windows Media Video| |15|WMA|Windows Media Audio| |16|CLR|Common Language Runtime| |17|DLR|Dynamic Language Runtime| |18|CAS|Code Access Security| |19|RCW|Runtime Callable Wrapper| |20|WPF|Windows Presentation Foundation| |21|WPF/E|Windows Presentation Foundation / Everywhere| |22|XAML|eXtensible Application Markup Language| |23|BAML|Binary Application Markup Language| |24|XBAP|XAML Base Application| |25|MVVM|Model - View - View Model| *参考資料 [#k5788ffe]